/* =================================================================
   Nortrans Start — sistema de diseño
   -----------------------------------------------------------------
   Paleta y motivo grafico salen del logo: naranja #F07300, grafito
   #414141, y las barras diagonales del isotipo /N/, que se reutilizan
   como marca de movimiento.

   OJO: el nginx de produccion cachea los .css 30 dias. Si tocas este
   archivo, hay que subir el ?v=N del <link> en layouts/app.blade.php.
   Sin eso, la gente sigue viendo la version anterior.
   ================================================================= */

:root {
    --nt-naranja:        #F07300;
    --nt-naranja-fuerte: #D96500;
    --nt-naranja-suave:  #FFF1E4;
    --nt-grafito:        #414141;
    --nt-tinta:          #1B1D21;
    --nt-texto:          #2C2F35;
    --nt-texto-suave:    #6B7280;
    --nt-linea:          #E5E7EB;
    --nt-fondo:          #F6F7F9;
    --nt-blanco:         #FFFFFF;

    --nt-radio:      12px;
    --nt-radio-sm:   8px;
    --nt-sombra:     0 1px 2px rgba(16, 19, 25, .04), 0 4px 12px rgba(16, 19, 25, .05);
    --nt-sombra-alta:0 2px 4px rgba(16, 19, 25, .05), 0 12px 32px rgba(16, 19, 25, .10);
    --nt-transicion: 180ms cubic-bezier(.4, 0, .2, 1);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--nt-texto);
    background-color: var(--nt-fondo);
    -webkit-font-smoothing: antialiased;
}

/* =================================================================
   LOGIN — la unica pantalla oscura, como portada
   ================================================================= */

body.nt-login {
    background: #0E1116;
    height: 100vh;
    overflow: hidden;
}

.nt-login-fondo {
    position: fixed;
    inset: 0;
    overflow: hidden;
    /* Un respiro de color detras de la tarjeta para que no se sienta
       un rectangulo negro plano. */
    background:
        radial-gradient(900px 520px at 78% 12%, rgba(240, 115, 0, .12), transparent 62%),
        radial-gradient(760px 620px at 12% 96%, rgba(240, 115, 0, .09), transparent 60%),
        #0E1116;
}

.nt-login-fondo svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.nt-login-contenido {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.nt-login-caja { width: 100%; max-width: 400px; }

.nt-login-marca {
    text-align: center;
    margin-bottom: 1.75rem;
}

.nt-login-marca img {
    height: 34px;
    /* El logo original tiene el "NOR" en gris oscuro, que sobre fondo
       negro desaparece. Esto lo pasa a blanco puro: es el equivalente
       a una version en negativo. Si algun dia hay un archivo negativo
       de verdad, se reemplaza y se quita este filtro. */
    filter: brightness(0) invert(1);
    opacity: .95;
}

.nt-login-bajada {
    margin: .85rem 0 0;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

.nt-login-tarjeta {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.nt-login-titulo {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 .35rem;
    letter-spacing: -.01em;
}

.nt-login-sub {
    font-size: .875rem;
    color: rgba(255, 255, 255, .5);
    margin: 0 0 1.75rem;
}

.nt-login-tarjeta .form-label {
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: .45rem;
}

.nt-login-tarjeta .form-control {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    border-radius: var(--nt-radio-sm);
    padding: .7rem .85rem;
    font-size: .95rem;
    transition: border-color var(--nt-transicion), background var(--nt-transicion), box-shadow var(--nt-transicion);
}

.nt-login-tarjeta .form-control::placeholder { color: rgba(255, 255, 255, .3); }

.nt-login-tarjeta .form-control:focus {
    background: rgba(255, 255, 255, .09);
    border-color: var(--nt-naranja);
    box-shadow: 0 0 0 3px rgba(240, 115, 0, .18);
    color: #fff;
}

/* Chrome pinta el autocompletado de amarillo y borra el estilo oscuro.
   El truco de la sombra interna es la unica forma de sobreescribirlo. */
.nt-login-tarjeta .form-control:-webkit-autofill,
.nt-login-tarjeta .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #23262c inset;
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
}

.nt-login-ayuda {
    font-size: .76rem;
    color: rgba(255, 255, 255, .32);
    margin-top: .4rem;
}

.nt-btn-naranja {
    background: var(--nt-naranja);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    padding: .75rem 1rem;
    border-radius: var(--nt-radio-sm);
    width: 100%;
    transition: background var(--nt-transicion), transform var(--nt-transicion);
}

.nt-btn-naranja:hover  { background: var(--nt-naranja-fuerte); color: #fff; }
.nt-btn-naranja:active { transform: scale(.985); }
.nt-btn-naranja:focus-visible { outline: 3px solid rgba(240, 115, 0, .4); outline-offset: 2px; }

.nt-login-pie {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .3);
}

.nt-login-tarjeta .invalid-feedback { color: #FF9A7A; font-size: .8rem; }
.nt-login-tarjeta .form-control.is-invalid { border-color: #E5533D; }

/* =================================================================
   ESTRUCTURA INTERNA — clara, para trabajar muchas horas
   ================================================================= */

.nt-shell { display: flex; min-height: 100vh; }

.nt-sidebar {
    width: 248px;
    flex-shrink: 0;
    background: var(--nt-blanco);
    border-right: 1px solid var(--nt-linea);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0;
    position: sticky;
    top: 0;
    height: 100vh;
}

.nt-sidebar-logo {
    padding: .25rem 1.25rem 1.5rem;
    border-bottom: 1px solid var(--nt-linea);
    margin-bottom: 1rem;
}

.nt-sidebar-logo img { height: 26px; }

.nt-nav { list-style: none; padding: 0 .75rem; margin: 0; flex: 1; }
.nt-nav li { margin-bottom: 2px; }

.nt-nav a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .75rem;
    border-radius: var(--nt-radio-sm);
    color: var(--nt-texto);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: background var(--nt-transicion), color var(--nt-transicion);
}

.nt-nav a i { font-size: 1.05rem; color: var(--nt-texto-suave); transition: color var(--nt-transicion); }
.nt-nav a:hover { background: var(--nt-fondo); }

/* El item activo se marca con la barra naranja y no solo con color:
   asi sigue siendo distinguible para daltonicos. */
.nt-nav a.activo {
    background: var(--nt-naranja-suave);
    color: var(--nt-naranja-fuerte);
    position: relative;
}

.nt-nav a.activo i { color: var(--nt-naranja); }

.nt-nav a.activo::before {
    content: '';
    position: absolute;
    left: -.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--nt-naranja);
}

.nt-sidebar-pie {
    padding: 1rem 1.25rem 0;
    border-top: 1px solid var(--nt-linea);
    margin-top: 1rem;
}

.nt-usuario { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; }

.nt-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--nt-naranja-suave);
    color: var(--nt-naranja-fuerte);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
}

.nt-usuario-datos { min-width: 0; }
.nt-usuario-nombre {
    font-size: .85rem;
    font-weight: 500;
    color: var(--nt-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nt-usuario-rol { font-size: .75rem; color: var(--nt-texto-suave); }

.nt-btn-salir {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .5rem;
    border: 1px solid var(--nt-linea);
    border-radius: var(--nt-radio-sm);
    background: transparent;
    color: var(--nt-texto-suave);
    font-size: .83rem;
    text-decoration: none;
    transition: all var(--nt-transicion);
}

.nt-btn-salir:hover { border-color: #F3B4A6; background: #FEF2F0; color: #C0392B; }

.nt-main { flex: 1; min-width: 0; padding: 2.5rem 2.25rem; }

.nt-encabezado { margin-bottom: 2rem; }
.nt-encabezado h1 {
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--nt-tinta);
    margin: 0 0 .3rem;
}
.nt-encabezado p { color: var(--nt-texto-suave); font-size: .93rem; margin: 0; }

/* =================================================================
   TARJETAS DE ACCESO — el corazon del portal
   ================================================================= */

.nt-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 1rem;
}

.nt-tarjeta {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    width: 100%;
    text-align: left;
    background: var(--nt-blanco);
    border: 1px solid var(--nt-linea);
    border-radius: var(--nt-radio);
    padding: 1.15rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--nt-sombra);
    transition: transform var(--nt-transicion), box-shadow var(--nt-transicion), border-color var(--nt-transicion);
    position: relative;
    overflow: hidden;
}

.nt-tarjeta:hover {
    transform: translateY(-2px);
    box-shadow: var(--nt-sombra-alta);
    border-color: #D8DBE0;
    color: inherit;
}

/* Diagonal del isotipo, insinuada en la esquina. Aparece al pasar el
   mouse para que no compita con el texto en reposo. */
.nt-tarjeta::after {
    content: '';
    position: absolute;
    right: -28px;
    top: -28px;
    width: 86px;
    height: 86px;
    background: var(--nt-naranja);
    opacity: 0;
    transform: skewX(-18deg);
    transition: opacity var(--nt-transicion);
}

.nt-tarjeta:hover::after { opacity: .07; }

.nt-tarjeta-icono {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--nt-naranja-suave);
    color: var(--nt-naranja-fuerte);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.nt-tarjeta-cuerpo { min-width: 0; }

.nt-tarjeta-titulo {
    font-size: .97rem;
    font-weight: 600;
    color: var(--nt-tinta);
    margin: 0 0 .2rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.nt-tarjeta-titulo .bi-box-arrow-up-right { font-size: .72rem; color: var(--nt-texto-suave); }

.nt-tarjeta-desc {
    font-size: .83rem;
    color: var(--nt-texto-suave);
    margin: 0;
    line-height: 1.5;
}

/* =================================================================
   MODALES Y LISTAS DE REPORTES
   ================================================================= */

.nt-modal .modal-content { border: none; border-radius: var(--nt-radio); box-shadow: var(--nt-sombra-alta); }
.nt-modal .modal-header { border-bottom: 1px solid var(--nt-linea); padding: 1.15rem 1.35rem; }
.nt-modal .modal-title { font-size: 1.02rem; font-weight: 600; color: var(--nt-tinta); }
.nt-modal .modal-body { padding: 1.1rem 1.35rem; }
.nt-modal .modal-footer { border-top: 1px solid var(--nt-linea); padding: .9rem 1.35rem; }

.nt-grupo-titulo {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nt-texto-suave);
    margin: 1.25rem 0 .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.nt-grupo-titulo:first-child { margin-top: 0; }

.nt-enlace {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .8rem;
    border-radius: var(--nt-radio-sm);
    text-decoration: none;
    color: var(--nt-texto);
    transition: background var(--nt-transicion);
}

.nt-enlace:hover { background: var(--nt-fondo); color: var(--nt-texto); }
.nt-enlace i { color: var(--nt-naranja); font-size: 1rem; margin-top: .1rem; flex-shrink: 0; }
.nt-enlace-titulo { font-size: .89rem; font-weight: 500; display: block; }
.nt-enlace-desc { font-size: .78rem; color: var(--nt-texto-suave); display: block; margin-top: .1rem; }

.nt-volver {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .87rem;
    color: var(--nt-texto-suave);
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: color var(--nt-transicion);
}

.nt-volver:hover { color: var(--nt-naranja-fuerte); }

.nt-btn-secundario {
    background: transparent;
    border: 1px solid var(--nt-linea);
    color: var(--nt-texto);
    border-radius: var(--nt-radio-sm);
    padding: .45rem 1rem;
    font-size: .87rem;
    transition: background var(--nt-transicion);
}

.nt-btn-secundario:hover { background: var(--nt-fondo); }

/* =================================================================
   BUSCADOR Y FILTROS POR GRUPO
   ================================================================= */

/* .nt-tarjeta y .nt-seccion declaran su propio display, que por
   especificidad le gana al display:none que el navegador aplica a
   [hidden]. Sin esta regla, ocultar elementos desde JS con .hidden = true
   no surte ningun efecto y el filtro parece no funcionar. */
[hidden] { display: none !important; }

.nt-filtros { margin-bottom: 1.75rem; }

.nt-buscador { position: relative; max-width: 420px; margin-bottom: .9rem; }

.nt-buscador i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nt-texto-suave);
    font-size: .95rem;
    pointer-events: none;
}

.nt-buscador input {
    width: 100%;
    padding: .6rem .9rem .6rem 2.4rem;
    border: 1px solid var(--nt-linea);
    border-radius: var(--nt-radio-sm);
    background: var(--nt-blanco);
    font-family: inherit;
    font-size: .92rem;
    color: var(--nt-texto);
    transition: border-color var(--nt-transicion), box-shadow var(--nt-transicion);
}

.nt-buscador input:focus {
    outline: none;
    border-color: var(--nt-naranja);
    box-shadow: 0 0 0 3px rgba(240, 115, 0, .13);
}

.nt-chips { display: flex; flex-wrap: wrap; gap: .45rem; }

.nt-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border: 1px solid var(--nt-linea);
    border-radius: 999px;
    background: var(--nt-blanco);
    color: var(--nt-texto);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--nt-transicion), border-color var(--nt-transicion), color var(--nt-transicion);
}

.nt-chip i { font-size: .9rem; color: var(--nt-texto-suave); }
.nt-chip:hover { border-color: #D8DBE0; background: var(--nt-fondo); }
.nt-chip:focus-visible { outline: 3px solid rgba(240, 115, 0, .35); outline-offset: 1px; }

.nt-chip.activo { background: var(--nt-naranja); border-color: var(--nt-naranja); color: #fff; }
.nt-chip.activo i { color: #fff; }

.nt-chip-num {
    font-size: .74rem;
    color: var(--nt-texto-suave);
    background: var(--nt-fondo);
    border-radius: 999px;
    padding: .05rem .42rem;
}

.nt-chip.activo .nt-chip-num { background: rgba(255, 255, 255, .25); color: #fff; }

.nt-seccion { margin-bottom: 2rem; }

.nt-seccion-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nt-texto-suave);
    margin: 0 0 .85rem;
}

.nt-seccion-titulo i { font-size: .95rem; color: var(--nt-naranja); }

.nt-vacio {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--nt-texto-suave);
    font-size: .9rem;
    padding: 2.5rem 0;
}

/* =================================================================
   ADMINISTRACION — tablas, formularios, avisos
   ================================================================= */

.nt-panel {
    background: var(--nt-blanco);
    border: 1px solid var(--nt-linea);
    border-radius: var(--nt-radio);
    box-shadow: var(--nt-sombra);
    overflow: hidden;
}

.nt-panel-cuerpo { padding: 1.35rem; }

/* Barra de herramientas: buscador a la izquierda, acciones a la derecha */
.nt-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.nt-barra-derecha { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.nt-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: var(--nt-radio-sm);
    border: 1px solid var(--nt-linea);
    background: var(--nt-blanco);
    color: var(--nt-texto);
    font-family: inherit;
    font-size: .87rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--nt-transicion), border-color var(--nt-transicion), color var(--nt-transicion);
}

.nt-btn:hover { background: var(--nt-fondo); border-color: #D8DBE0; color: var(--nt-texto); }
.nt-btn:focus-visible { outline: 3px solid rgba(240, 115, 0, .35); outline-offset: 1px; }

.nt-btn-primario {
    background: var(--nt-naranja);
    border-color: var(--nt-naranja);
    color: #fff;
}
.nt-btn-primario:hover { background: var(--nt-naranja-fuerte); border-color: var(--nt-naranja-fuerte); color: #fff; }

.nt-btn-peligro { color: #B23A2B; }
.nt-btn-peligro:hover { background: #FEF2F0; border-color: #F3B4A6; color: #B23A2B; }

/* Tabla */
.nt-tabla { width: 100%; border-collapse: collapse; font-size: .89rem; }

.nt-tabla thead th {
    text-align: left;
    padding: .7rem 1rem;
    background: var(--nt-fondo);
    border-bottom: 1px solid var(--nt-linea);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nt-texto-suave);
    white-space: nowrap;
}

.nt-tabla tbody td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--nt-linea);
    vertical-align: middle;
}

.nt-tabla tbody tr:last-child td { border-bottom: none; }
.nt-tabla tbody tr:hover { background: #FAFAFB; }

.nt-tabla-nombre { font-weight: 500; color: var(--nt-tinta); }
.nt-tabla-sec { color: var(--nt-texto-suave); font-size: .84rem; }
.nt-tabla-vacia { text-align: center; padding: 3rem 1rem; color: var(--nt-texto-suave); }

/* La tabla no se comprime en pantallas chicas: se desplaza dentro de su
   contenedor. Achicarla hace ilegibles los correos. */
.nt-tabla-scroll { overflow-x: auto; }
.nt-tabla-scroll .nt-tabla { min-width: 720px; }

/* Etiquetas de rol y estado */
.nt-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 500;
    background: var(--nt-fondo);
    color: var(--nt-texto);
    border: 1px solid var(--nt-linea);
}

.nt-badge-naranja { background: var(--nt-naranja-suave); color: var(--nt-naranja-fuerte); border-color: #FFD9BC; }
.nt-badge-gris    { background: transparent; color: var(--nt-texto-suave); border-style: dashed; }
.nt-badge-inactivo{ background: #FEF2F0; color: #B23A2B; border-color: #F3B4A6; }

/* Botones de icono de la columna Acciones */
.nt-acciones { display: flex; gap: .25rem; justify-content: flex-end; }

.nt-icono-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--nt-radio-sm);
    background: transparent;
    color: var(--nt-texto-suave);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--nt-transicion);
}

.nt-icono-btn:hover { background: var(--nt-fondo); border-color: var(--nt-linea); color: var(--nt-texto); }
.nt-icono-btn.peligro:hover { background: #FEF2F0; border-color: #F3B4A6; color: #C0392B; }

/* Formularios */
.nt-campo { margin-bottom: 1.1rem; }

.nt-campo label {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    color: var(--nt-texto);
    margin-bottom: .35rem;
}

.nt-input,
.nt-select {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--nt-linea);
    border-radius: var(--nt-radio-sm);
    background: var(--nt-blanco);
    font-family: inherit;
    font-size: .9rem;
    color: var(--nt-texto);
    transition: border-color var(--nt-transicion), box-shadow var(--nt-transicion);
}

.nt-input:focus,
.nt-select:focus {
    outline: none;
    border-color: var(--nt-naranja);
    box-shadow: 0 0 0 3px rgba(240, 115, 0, .13);
}

.nt-input.error, .nt-select.error { border-color: #E5533D; }
.nt-campo-error { display: block; margin-top: .3rem; font-size: .79rem; color: #C0392B; }
.nt-campo-ayuda { display: block; margin-top: .3rem; font-size: .79rem; color: var(--nt-texto-suave); }

.nt-input-sm, .nt-select-sm { padding: .35rem .55rem; font-size: .83rem; }

/* Avisos */
.nt-alerta {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .8rem 1rem;
    border-radius: var(--nt-radio-sm);
    font-size: .88rem;
    margin-bottom: 1.25rem;
    border: 1px solid;
}

.nt-alerta i { font-size: 1rem; margin-top: .05rem; flex-shrink: 0; }
.nt-alerta-ok    { background: #F0F9F2; border-color: #BFE3C8; color: #1E6B32; }
.nt-alerta-error { background: #FEF2F0; border-color: #F3B4A6; color: #B23A2B; }
.nt-alerta ul { margin: 0; padding-left: 1.1rem; }

/* Ficha del perfil propio */
.nt-perfil-cabecera {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--nt-linea);
}

.nt-perfil-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--nt-naranja-suave);
    color: var(--nt-naranja-fuerte);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 600;
}

.nt-datos { display: grid; grid-template-columns: 150px 1fr; gap: .65rem 1rem; font-size: .89rem; }
.nt-datos dt { color: var(--nt-texto-suave); }
.nt-datos dd { margin: 0; color: var(--nt-texto); }

/* Grilla de permisos con casilla (crear y editar rol) */
.nt-permisos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .4rem;
}

.nt-permiso {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    border: 1px solid var(--nt-linea);
    border-radius: var(--nt-radio-sm);
    background: var(--nt-blanco);
    font-size: .87rem;
    cursor: pointer;
    transition: background var(--nt-transicion), border-color var(--nt-transicion);
}

.nt-permiso:hover { background: var(--nt-fondo); border-color: #D8DBE0; }

/* La casilla marcada se distingue por fondo Y por borde, no solo por
   color: asi sigue siendo legible para quien no distingue el naranja. */
.nt-permiso.marcado {
    background: var(--nt-naranja-suave);
    border-color: #FFD9BC;
    color: var(--nt-naranja-fuerte);
    font-weight: 500;
}

.nt-permiso input { accent-color: var(--nt-naranja); width: 15px; height: 15px; flex-shrink: 0; }
.nt-permiso span { min-width: 0; }

/* RUT y otros identificadores numericos.

   Antes esto era monoespaciada. Alineaba bien las columnas, pero rompia
   la armonia con el resto de la interfaz: una fila de la tabla con dos
   tipografias distintas se ve desprolija, y eso pesa mas que la ventaja.

   `tabular-nums` da lo mismo sin cambiar de letra: le pide a Inter que
   use sus cifras de ancho fijo, asi que los RUT siguen quedando
   alineados uno debajo del otro pero con el mismo tipo que todo lo demas. */
.nt-mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Caja de la contraseña recien generada */
.nt-clave-caja { display: flex; gap: .5rem; align-items: stretch; }

/* La clave generada SI va en monoespaciada, y aca si se justifica: es una
   cadena al azar que hay que leer caracter por caracter, y a veces
   dictarla por telefono. Distinguir I de l, o O de 0, importa. */
.nt-clave-valor {
    flex: 1;
    min-width: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--nt-linea);
    border-radius: var(--nt-radio-sm);
    background: var(--nt-fondo);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: .06em;
    color: var(--nt-tinta);
}

.nt-clave-valor:focus { outline: none; border-color: var(--nt-naranja); box-shadow: 0 0 0 3px rgba(240, 115, 0, .13); }

/* Paginador de Laravel (Bootstrap 5) */
.pagination { margin: 1.25rem 0 0; gap: .25rem; }
.page-link {
    border: 1px solid var(--nt-linea);
    border-radius: var(--nt-radio-sm) !important;
    color: var(--nt-texto);
    font-size: .85rem;
    padding: .35rem .7rem;
}
.page-link:hover { background: var(--nt-fondo); color: var(--nt-texto); border-color: #D8DBE0; }
.page-item.active .page-link { background: var(--nt-naranja); border-color: var(--nt-naranja); color: #fff; }
.page-item.disabled .page-link { color: var(--nt-texto-suave); background: transparent; }

/* =================================================================
   RESPONSIVE — la barra lateral pasa a barra superior
   ================================================================= */

@media (max-width: 860px) {
    .nt-shell { flex-direction: column; }

    .nt-sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: .75rem 1rem;
        border-right: none;
        border-bottom: 1px solid var(--nt-linea);
        overflow-x: auto;
    }

    .nt-sidebar-logo { padding: 0; border: none; margin: 0; flex-shrink: 0; }
    .nt-nav { display: flex; gap: .25rem; padding: 0; flex: 1; }
    .nt-nav li { margin: 0; }
    .nt-nav a { white-space: nowrap; }
    .nt-nav a.activo::before { display: none; }
    .nt-sidebar-pie { border: none; margin: 0; padding: 0; flex-shrink: 0; }
    .nt-usuario { display: none; }
    .nt-btn-salir { width: auto; padding: .45rem .7rem; }
    .nt-main { padding: 1.5rem 1.15rem; }
}

/* Bajo 620px las 5 etiquetas no caben (medido: se desbordaban de la
   barra y habia que arrastrarlas de lado sin ninguna pista visual).
   Se dejan solo los iconos. El texto no se borra con display:none sino
   que se oculta visualmente, para que los lectores de pantalla lo sigan
   leyendo; ademas cada enlace tiene title. */
@media (max-width: 620px) {
    .nt-nav a span,
    .nt-btn-salir span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .nt-nav { justify-content: flex-end; gap: .1rem; }
    .nt-nav a { padding: .55rem .6rem; }
    .nt-nav a i { font-size: 1.2rem; }
    .nt-btn-salir { padding: .55rem .6rem; }
    .nt-btn-salir i { font-size: 1.1rem; }
    .nt-sidebar-logo img { height: 22px; }
}