/* ============================================================================
   tema.css — tema propio de la aplicación
   Plano y sobrio, tipo panel de gestión. Sustituye por completo a AdminLTE 3,
   que ya no forma parte del proyecto.

   CÓMO SE CARGA
   El layout enlaza Bootstrap 4.6.2 y, justo después, este fichero. **El orden
   importa**: a igualdad de especificidad manda el último, y de eso dependen
   muchas reglas de aquí. Si alguien cambia el orden, se descoloca el tema.

     _Layout.cshtml
       └─ lib/bootstrap4/css/bootstrap.min.css
       └─ css/tema.css          <- este fichero, SIEMPRE después

   POR QUÉ ALGUNOS NOMBRES DE CLASE SUENAN A ADMINLTE
   Porque lo son. En la migración se decidió NO tocar el marcado de las 163
   vistas —`_Aside.cshtml` lleva toda la lógica de roles del menú— y
   reimplementar aquí las clases que AdminLTE aportaba: `card-primary`,
   `card-outline`, `btn-default`, `info-box`, `small-box`, `main-sidebar`,
   `nav-treeview`, los colores por nombre (`bg-green`)…
   Es **vocabulario heredado**: el nombre viene de AdminLTE, el aspecto es
   nuestro. Se decidió conservarlo (opción documentada en D3 de
   `trabajoencurso.md`): renombrarlo todo tocaba cientos de sitios en 163 vistas,
   y varias de esas clases se generan desde JavaScript dentro de los `render` de
   DataTables, así que no bastaba un buscar-y-reemplazar.

   SÍ se renombraron las dos que inducían a error de verdad (2026-08-04):
     · `bg-gradient-*`  → `btn-*`      — mentía: hace tiempo que no hay degradados.
                                         Se converge al nombre de Bootstrap en vez
                                         de inventar uno nuevo.
     · `AnchoBotonExtraLargoHIL` / `AnchoBotonLargoHIL` → `btn-accion`
                                       — no significaban nada, y además eran
                                         clases fantasma: no las definía ningún
                                         CSS del proyecto. Las dos hacían lo mismo,
                                         así que se unifican en una.

   SOBRE LOS !important
   Quedan 13, y ninguno es por comodidad. Sólo se usan en los tres casos donde
   no hay otra forma de ganar:
     · frente a las **utilidades de Bootstrap**, que ya se declaran con
       !important (`bg-primary`, `text-danger`, `p-0`, `pt-3`, `border-top`);
     · frente a un **style= en línea** del marcado (`margin-left:1px` en los
       btn-group de las vistas).
   Donde Bootstrap gana por especificidad —su estado activo es
   `.btn-X:not(:disabled):not(.disabled):active`, que puntúa (0,4,0)— **se
   replica esa misma forma en lugar de imponerse con !important**.

   ORGANIZACIÓN
   Secciones numeradas del 1 al 15. Las 9 a 15 son las que cubren lo que antes
   daba AdminLTE. La paleta está en variables CSS en `:root`, justo debajo:
   cambiar el aspecto de toda la app son cinco líneas.
   ============================================================================ */

:root {
    /* Paleta — sobria, sin degradados */
    --t-primary: #2563eb;
    --t-primary-hover: #1d4ed8;
    --t-primary-soft: #eff4ff;

    --t-success: #16a34a;
    --t-success-hover: #15803d;

    --t-danger: #dc2626;
    --t-danger-hover: #b91c1c;

    --t-warning: #d97706;
    --t-warning-hover: #b45309;

    --t-info: #0891b2;
    --t-info-hover: #0e7490;

    /* Neutros */
    --t-bg: #f5f6f8;
    --t-surface: #ffffff;
    --t-border: #e2e5ea;
    --t-border-strong: #cbd2da;
    --t-text: #1f2933;
    --t-text-muted: #6b7280;

    /* Forma */
    --t-radius: 4px;
    --t-radius-lg: 6px;
}

/* ---------------------------------------------------------------------------
   1. Base tipográfica
   Se sustituye Source Sans Pro por la pila del sistema: moderniza mucho y no
   cuesta ni una petición de red.
   --------------------------------------------------------------------------- */

body,
.content-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    color: var(--t-text);
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--t-bg);
    font-size: .9rem;
}

.content-wrapper {
    background-color: var(--t-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--t-text);
}

/* El título de pantalla ("ADMINISTRACIÓN BEBÉS") en versalitas gritadas queda
   duro; lo suavizamos sin tocar la vista. */
.container-fluid > .row > .col-md-12 > h4 {
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: none;
    margin: .25rem 0 .5rem;
}

/* ---------------------------------------------------------------------------
   2. Cards
   AdminLTE: sombra doble + cabecera gris translúcida + borde superior de 3px.
   Aquí: borde limpio de 1px, sin sombra, cabecera con separador real.
   --------------------------------------------------------------------------- */

.card {
    background-color: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    box-shadow: none;
    margin-bottom: 1rem;
}

/* Flex para que .card-title y .card-tools convivan sin floats.
   Las cabeceras que sólo llevan pestañas se excluyen (ver sección 2b). */
.card-header {
    align-items: center;
    background-color: transparent;
    border-bottom: 1px solid var(--t-border);
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    padding: .7rem 1rem;
}

.card.card-tabs > .card-header { display: block; }

.card-title {
    font-size: .95rem;
    font-weight: 600;
    margin: 0;
}

.card-body {
    padding: 1rem;
}

/* Franja superior de color: de 3px chillón a 2px discreto */
.card-primary.card-outline { border-top: 2px solid var(--t-primary); }
.card-success.card-outline { border-top: 2px solid var(--t-success); }
.card-danger.card-outline  { border-top: 2px solid var(--t-danger); }
.card-warning.card-outline { border-top: 2px solid var(--t-warning); }
.card-info.card-outline    { border-top: 2px solid var(--t-info); }

/* Cards sólidas (sin .card-outline): cabecera de color plano, sin degradado */
.card-primary:not(.card-outline) > .card-header { background-color: var(--t-primary); border-bottom-color: var(--t-primary); }
.card-success:not(.card-outline) > .card-header { background-color: var(--t-success); border-bottom-color: var(--t-success); }
.card-danger:not(.card-outline)  > .card-header { background-color: var(--t-danger);  border-bottom-color: var(--t-danger); }
.card-warning:not(.card-outline) > .card-header { background-color: var(--t-warning); border-bottom-color: var(--t-warning); }
.card-info:not(.card-outline)    > .card-header { background-color: var(--t-info);    border-bottom-color: var(--t-info); }

/* ---------------------------------------------------------------------------
   2b. Pestañas (card-tabs)
   El modal de editar usa el patrón `card card-primary card-tabs` de AdminLTE:
   la cabecera entera se pinta del color de la card y las pestañas van encima.
   Eso da una franja azul maciza que canta mucho.

   Aquí se invierte: fondo blanco y la pestaña activa marcada con un subrayado
   de 2px. Es lo estándar hoy en paneles de gestión y pesa visualmente mucho
   menos. No hay que tocar la vista: sólo se redefine el estilo.
   --------------------------------------------------------------------------- */

/* Anula la franja de color en cabeceras que sólo contienen pestañas.
   La vista trae `p-0 pt-1` (utilidades con !important), de ahí el !important. */
.card.card-tabs > .card-header {
    background-color: var(--t-surface);
    border-bottom: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0;
    padding: 0 .5rem !important;
}

.card.card-tabs > .card-header .nav-tabs {
    border-bottom: 0;
    margin-bottom: -1px;
}

.card.card-tabs > .card-header .nav-tabs .nav-item {
    margin-bottom: 0;
}

/* Pestaña en reposo: texto gris, sin caja ni bordes laterales */
.card.card-tabs > .card-header .nav-tabs .nav-link,
.nav-tabs .nav-link {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--t-text-muted);
    font-size: .85rem;
    font-weight: 600;
    padding: .6rem .9rem;
    transition: color .12s ease, border-color .12s ease;
}

.card.card-tabs > .card-header .nav-tabs .nav-link:hover,
.nav-tabs .nav-link:hover {
    background-color: transparent;
    border-color: transparent transparent var(--t-border-strong);
    color: var(--t-text);
}

/* Pestaña activa: color de marca + subrayado */
.card.card-tabs > .card-header .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
    background-color: transparent;
    border-color: transparent transparent var(--t-primary);
    color: var(--t-primary);
}

.card.card-tabs > .card-header .nav-tabs .nav-link:focus {
    outline: none;
    box-shadow: none;
}

/* El contenido de la pestaña no necesita doble marco dentro del modal */
.card.card-tabs > .card-body {
    padding: 1rem .25rem;
}

/* ---------------------------------------------------------------------------
   3. Botones
   Había dos vocabularios dando resultados distintos para lo mismo: el
   `bg-gradient-*` de AdminLTE (93 usos sólo el primary) y el `btn-*` de
   Bootstrap. Primero se igualaron por CSS y después, en D3, se renombró el
   marcado a `btn-*`: ahora hay **un solo nombre**. El "Guardar" de un modal y el
   lápiz de una tabla son el mismo azul, y sin degradado.

   Sin un solo !important: donde Bootstrap gana por especificidad —su estado
   activo es `.btn-X:not(:disabled):not(.disabled):active`, que puntúa (0,4,0)—
   se replica esa misma forma en lugar de imponerse. Al ir tema.css después de
   bootstrap.min.css, a igualdad de especificidad manda el nuestro.
   --------------------------------------------------------------------------- */

.btn {
    border-radius: var(--t-radius);
    font-weight: 500;
    font-size: .85rem;
    padding: .375rem .75rem;
    line-height: 1.5;
    box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn:focus,
.btn.focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}

.btn-sm {
    font-size: .8rem;
    padding: .28rem .6rem;
    border-radius: var(--t-radius);
}

.btn i { line-height: 1; }

/* --- Neutro (Cancelar / Cerrar). `btn-default` no existe en Bootstrap: venía de
       AdminLTE y se usa 70 veces, así que se define aquí. Es vocabulario
       heredado que se conserva a propósito. --- */
.btn-default,
.btn-light {
    background-color: #fff;
    border-color: var(--t-border-strong);
    color: var(--t-text);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:not(:disabled):not(.disabled):active,
.btn-light:hover,
.btn-light:focus,
.btn-light:not(:disabled):not(.disabled):active {
    background-color: #f2f4f7;
    border-color: var(--t-border-strong);
    color: var(--t-text);
}

/* --- Sólidos planos --- */

.btn-primary {
    background-color: var(--t-primary);
    border-color: var(--t-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--t-primary-hover);
    border-color: var(--t-primary-hover);
    color: #fff;
}

.btn-success {
    background-color: var(--t-success);
    border-color: var(--t-success);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active {
    background-color: var(--t-success-hover);
    border-color: var(--t-success-hover);
    color: #fff;
}

.btn-danger {
    background-color: var(--t-danger);
    border-color: var(--t-danger);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active {
    background-color: var(--t-danger-hover);
    border-color: var(--t-danger-hover);
    color: #fff;
}

.btn-warning {
    background-color: var(--t-warning);
    border-color: var(--t-warning);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active {
    background-color: var(--t-warning-hover);
    border-color: var(--t-warning-hover);
    color: #fff;
}

.btn-info {
    background-color: var(--t-info);
    border-color: var(--t-info);
    color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active {
    background-color: var(--t-info-hover);
    border-color: var(--t-info-hover);
    color: #fff;
}

/* --- Grupos de botones: las vistas separan con style='margin-left:1px', lo que
       rompe el pegado del btn-group. Le damos un espaciado coherente. --- */
.btn-group { margin-right: .4rem; }

.btn-group > .btn,
.btn-group > .btn[style*="margin-left"] {
    margin-left: 0 !important;
}

.btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* --- Separador entre botones contiguos del grupo ---
   Cuando dos botones del grupo son del mismo color no se distingue dónde acaba
   uno y empieza el otro. Se marca con una línea de 1px.

   Va en blanco translúcido a propósito, no en un color fijo: así funciona sobre
   cualquier fondo (azul, verde, rojo…) sin escribir una regla por color, y se
   mantiene al pasar el ratón, cuando el fondo se oscurece. Sobre un botón claro
   no se vería, así que ahí se invierte a un gris del tema. */

/* El segundo selector replica la forma del estado activo de Bootstrap —(0,4,0)—
   para que el separador no desaparezca al pulsar. Mismo criterio que en el resto
   del fichero: igualar especificidad antes que recurrir a !important. */
.btn-group > .btn + .btn,
.btn-group > .btn + .btn:not(:disabled):not(.disabled):active {
    border-left: 1px solid rgba(255, 255, 255, .4);
}

.btn-group > .btn + .btn-default,
.btn-group > .btn + .btn-light,
.btn-group > .btn + .btn-default:not(:disabled):not(.disabled):active {
    border-left-color: var(--t-border-strong);
}

/* Barra de filtros de la cabecera: que respire */
.card-body.pad > .btn,
.card-body.pad > .btn-group {
    margin-bottom: .3rem;
}

/* ---------------------------------------------------------------------------
   4. Botones de acción dentro de la tabla
   Los botones de icono de la columna de acciones. Ancho mínimo para que la
   columna quede alineada en todas las filas.

   Antes esto eran `AnchoBotonExtraLargoHIL` y `AnchoBotonLargoHIL`: dos nombres
   distintos para lo mismo, y además **clases fantasma** que no definía ningún
   CSS del proyecto. Renombradas y unificadas en `btn-accion` (D3).
   --------------------------------------------------------------------------- */

.btn-accion {
    min-width: 34px;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   5. Tablas / DataTables
   --------------------------------------------------------------------------- */

.table {
    color: var(--t-text);
    margin-bottom: 0;
}

.table thead th {
    background-color: #fafbfc;
    border-bottom: 1px solid var(--t-border-strong);
    border-top: 0;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--t-text-muted);
    padding: .55rem .6rem;
    white-space: nowrap;
}

.table td {
    padding: .5rem .6rem;
    vertical-align: middle;
    border-top: 1px solid var(--t-border);
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--t-border);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fbfcfd;
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
    background-color: var(--t-primary-soft);
}

/* Controles de DataTables (buscador, "mostrar N", paginación) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--t-border-strong);
    border-radius: var(--t-radius);
    padding: .25rem .5rem;
    font-size: .82rem;
    height: auto;
}

/* El select de "Mostrar N" lo pinta DataTables con la clase `custom-select` de
   Bootstrap, que oculta la flecha nativa (`appearance: none`) y dibuja la suya
   como imagen de fondo pegada a la derecha. El hueco para esa flecha lo hacía
   su `padding-right: 1.75rem`... que el `padding` de arriba se cargaba, y la
   flecha acababa encima del número. Se devuelve el hueco (ajustado al tamaño de
   letra del tema) y se acerca la flecha al borde. */
.dataTables_wrapper .dataTables_length select.custom-select {
    background-position: right .45rem center;
    min-width: 4rem;
    padding-right: 1.4rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--t-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: .82rem;
    color: var(--t-text-muted);
}

.page-link {
    border-color: var(--t-border);
    color: var(--t-text);
    font-size: .82rem;
}

.page-item.active .page-link {
    background-color: var(--t-primary);
    border-color: var(--t-primary);
}

.page-link:focus { box-shadow: none; }

/* ---------------------------------------------------------------------------
   6. Modales (PMinito)
   --------------------------------------------------------------------------- */

.modal-content {
    border: 0;
    border-radius: var(--t-radius-lg);
    box-shadow: 0 10px 40px rgba(15, 23, 42, .18);
}

.modal-header {
    background-color: transparent;
    border-bottom: 1px solid var(--t-border);
    padding: .8rem 1.1rem;
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
}

.modal-header .close {
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--t-text-muted);
    opacity: 1;
    text-shadow: none;
    padding: .8rem 1.1rem;
}
.modal-header .close:hover { color: var(--t-text); }

.modal-body { padding: 1.1rem; }

/* Dentro de un modal, la card exterior sobra: el propio modal ya es el marco.
   Quitándole borde y sombra desaparece el "marco dentro de marco". */
.modal-body > form > .card,
.modal-body > .card {
    border: 0;
    box-shadow: none;
    margin-bottom: 0;
}

/* El pie de los formularios no es un .modal-footer: las parciales montan a mano
   un <div class="d-flex justify-content-end border-top pt-3">. Lo tratamos como
   pie real para que no quede pegado al borde. */
.modal-body .d-flex.justify-content-end.border-top {
    border-top: 1px solid var(--t-border) !important;
    margin: 1.1rem -1.1rem -1.1rem;
    padding: .85rem 1.1rem !important;
    background-color: #fafbfc;
    border-bottom-left-radius: var(--t-radius-lg);
    border-bottom-right-radius: var(--t-radius-lg);
}

/* ---------------------------------------------------------------------------
   7. Formularios
   --------------------------------------------------------------------------- */

.form-control {
    border: 1px solid var(--t-border-strong);
    border-radius: var(--t-radius);
    font-size: .85rem;
    color: var(--t-text);
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--t-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--t-text-muted);
    margin-bottom: .25rem;
}

.form-group { margin-bottom: .85rem; }

/* ---------------------------------------------------------------------------
   8. Rescate: .hidetxtShowicon
   Está puesta en media docena de botones de esta pantalla, pero su única
   definición vive en site.css, que el layout NO carga → hoy no hace nada.
   La recuperamos aquí: en pantalla pequeña, el botón deja sólo el icono.
   --------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
    .hidetxtShowicon span { display: none; }
}

/* ===========================================================================
   A PARTIR DE AQUÍ: lo que antes daba AdminLTE y ahora damos nosotros.
   Estas secciones se añadieron al retirar adminlte.min.css. Los nombres de
   clase se mantienen (wrapper, main-sidebar, info-box, small-box…) a propósito:
   así no hay que tocar el marcado de las 163 vistas ni la lógica de roles del
   menú. Lo que cambia es quién los pinta.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   9. Shell: cabecera, barra lateral y contenido
   El marcado sigue siendo el de AdminLTE (`_Layout.cshtml` + `_Aside.cshtml`).
   Layout: sidebar fija a la izquierda, cabecera y contenido desplazados.
   --------------------------------------------------------------------------- */

:root {
    --t-sidebar-w: 250px;
    --t-sidebar-w-mini: 4.6rem;
    --t-header-h: 57px;
}

html, body { height: 100%; }

.wrapper {
    position: relative;
    min-height: 100vh;
}

/* --- Cabecera --- */
.main-header {
    background-color: var(--t-surface);
    border-bottom: 1px solid var(--t-border);
    margin-left: var(--t-sidebar-w);
    min-height: var(--t-header-h);
    padding: 0 1rem;
    transition: margin-left .25s ease-in-out;
}

.main-header .nav-link {
    color: var(--t-text);
    padding: .5rem .75rem;
    font-size: .85rem;
}

.main-header .nav-link:hover { color: var(--t-primary); }

/* --- Barra lateral --- */
.main-sidebar {
    background-color: var(--t-surface);
    border-right: 1px solid var(--t-border);
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
    width: var(--t-sidebar-w);
    z-index: 1038;
    transition: width .25s ease-in-out, transform .25s ease-in-out;
    overflow: hidden;
}

.brand-link {
    align-items: center;
    border-bottom: 1px solid var(--t-border);
    color: var(--t-text);
    display: flex;
    font-size: .95rem;
    height: var(--t-header-h);
    overflow: hidden;
    padding: 0 .9rem;
    text-decoration: none;
    white-space: nowrap;
}

.brand-link:hover { color: var(--t-primary); text-decoration: none; }

.brand-image {
    max-height: 30px;
    width: auto;
    margin-right: .55rem;
    flex: 0 0 auto;
}

.brand-text { font-weight: 600; }

/* Zona desplazable del menú */
.sidebar {
    height: calc(100vh - var(--t-header-h));
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 1rem;
}

/* --- Menú --- */
.nav-sidebar {
    flex-direction: column;
    padding: 0 .5rem;
}

.nav-sidebar .nav-item { width: 100%; }

.nav-sidebar .nav-link {
    align-items: center;
    border-radius: var(--t-radius);
    color: #4b5563;
    display: flex;
    font-size: .84rem;
    font-weight: 500;
    margin-bottom: .1rem;
    padding: .5rem .65rem;
    white-space: nowrap;
}

.nav-sidebar .nav-link:hover {
    background-color: #f2f4f7;
    color: var(--t-text);
}

/* Bootstrap pinta .nav-pills .nav-link.active de azul sólido: aquí lo suavizamos */
.nav-sidebar .nav-link.active,
.nav-pills .nav-sidebar .nav-link.active {
    background-color: var(--t-primary-soft);
    color: var(--t-primary);
    font-weight: 600;
}

.nav-sidebar .nav-icon {
    font-size: .95rem;
    margin-right: .6rem;
    text-align: center;
    width: 1.4rem;
    flex: 0 0 auto;
    color: var(--t-text-muted);
}

.nav-sidebar .nav-link:hover .nav-icon,
.nav-sidebar .nav-link.active .nav-icon { color: inherit; }

/* El bloque EyeTraker (_Aside.cshtml) va en rojo permanente, no sólo al pasar el
   ratón: son las únicas entradas del menú que llevan .text-danger. */
.nav-sidebar .nav-link.text-danger .nav-icon { color: inherit; }

/* El texto del menú va dentro de <p> en el marcado de AdminLTE */
.nav-sidebar .nav-link p {
    margin: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flecha de los desplegables */
.nav-sidebar .nav-link p > .right {
    float: right;
    margin-left: .3rem;
    font-size: .8rem;
    transition: transform .25s ease-in-out;
}

.nav-sidebar .menu-open > .nav-link p > .right { transform: rotate(-90deg); }

/* --- Submenús (treeview) --- */
.nav-sidebar .nav-treeview {
    display: none;
    flex-direction: column;
    list-style: none;
    padding: 0 0 .2rem;
}

.nav-sidebar .menu-open > .nav-treeview { display: flex; }

.nav-sidebar .nav-treeview .nav-link {
    font-size: .8rem;
    font-weight: 400;
    padding: .38rem .65rem;
}

.nav-sidebar .nav-treeview .nav-icon { font-size: .8rem; }

/* --- Contenido --- */
/* Sin padding propio a propósito: las vistas ya abren con .container-fluid, que
   trae el suyo. Es el mismo comportamiento que tenía AdminLTE, así que no
   aparecen márgenes dobles donde antes no los había. */
.content-wrapper {
    margin-left: var(--t-sidebar-w);
    min-height: calc(100vh - var(--t-header-h));
    padding: 0;
    transition: margin-left .25s ease-in-out;
}

.content-header { padding: .5rem 0 1rem; }

/* --- Barra lateral plegada (la clase la pone tema-shell.js) --- */
body.sidebar-collapse .main-sidebar { width: var(--t-sidebar-w-mini); }
body.sidebar-collapse .main-header,
body.sidebar-collapse .content-wrapper { margin-left: var(--t-sidebar-w-mini); }

body.sidebar-collapse .brand-text,
body.sidebar-collapse .nav-sidebar .nav-link p,
body.sidebar-collapse .nav-sidebar .nav-treeview { display: none; }

body.sidebar-collapse .brand-link { justify-content: center; padding: 0; }
body.sidebar-collapse .brand-image { margin-right: 0; }

body.sidebar-collapse .nav-sidebar .nav-link { justify-content: center; padding: .55rem 0; }
body.sidebar-collapse .nav-sidebar .nav-icon { margin-right: 0; }

/* Sin transición en la carga inicial (equivalente a .hold-transition) */
body.hold-transition .main-sidebar,
body.hold-transition .main-header,
body.hold-transition .content-wrapper { transition: none; }

/* --- Móvil: la barra se oculta y se saca por encima --- */
@media (max-width: 991.98px) {
    .main-sidebar { transform: translateX(calc(var(--t-sidebar-w) * -1)); }
    .main-header,
    .content-wrapper { margin-left: 0; }

    body.sidebar-open .main-sidebar { transform: translateX(0); }

    /* En móvil, plegar no encoge: se abre o se cierra */
    body.sidebar-collapse .main-header,
    body.sidebar-collapse .content-wrapper { margin-left: 0; }
    body.sidebar-collapse .main-sidebar { width: var(--t-sidebar-w); }
    body.sidebar-collapse .brand-text,
    body.sidebar-collapse .nav-sidebar .nav-link p { display: block; }
    body.sidebar-collapse .nav-sidebar .nav-link { justify-content: flex-start; padding: .5rem .65rem; }
    body.sidebar-collapse .nav-sidebar .nav-icon { margin-right: .6rem; }
    body.sidebar-collapse .brand-link { justify-content: flex-start; padding: 0 .9rem; }

    /* Velo al abrir el menú en móvil */
    body.sidebar-open .content-wrapper::before {
        background-color: rgba(15, 23, 42, .35);
        content: "";
        inset: 0;
        position: fixed;
        z-index: 1037;
    }
}

/* ---------------------------------------------------------------------------
   10. Pantalla de login (Account/Login, Account/LoginExit)
   y el modal del logo del layout, que reutiliza las mismas clases.
   --------------------------------------------------------------------------- */

.login-box,
.register-box {
    margin: 5vh auto;
    width: 380px;
    max-width: 94%;
}

.login-logo,
.register-logo {
    font-size: 1.8rem;
    font-weight: 300;
    margin-bottom: .9rem;
    text-align: center;
}

.login-logo a, .register-logo a { color: var(--t-text); text-decoration: none; }

.login-card-body,
.register-card-body {
    background-color: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    padding: 1.5rem;
}

.login-box-msg,
.register-box-msg {
    margin: 0 0 .9rem;
    padding: 0 1rem;
    text-align: center;
    color: var(--t-text-muted);
    font-size: .85rem;
}

.profile-user-img {
    border: 3px solid var(--t-border);
    height: auto;
    margin: 0 auto;
    padding: 3px;
    width: 100px;
}

.img-circle { border-radius: 50%; }

/* ---------------------------------------------------------------------------
   11. Componentes que aportaba AdminLTE
   --------------------------------------------------------------------------- */

/* --- small-box: los contadores grandes del dashboard --- */
.small-box {
    border-radius: var(--t-radius-lg);
    box-shadow: none;
    border: 1px solid var(--t-border);
    color: #fff;
    display: block;
    margin-bottom: 1rem;
    position: relative;
}

.small-box > .inner { padding: .9rem 1rem; }

.small-box h3 {
    color: inherit;
    font-size: 1.9rem;
    font-weight: 600;
    margin: 0 0 .2rem;
    white-space: nowrap;
}

.small-box p { color: inherit; font-size: .85rem; margin: 0; opacity: .9; }

.small-box .icon {
    color: rgba(255, 255, 255, .25);
    font-size: 3.2rem;
    position: absolute;
    right: .9rem;
    top: .5rem;
    transition: transform .2s ease;
    z-index: 0;
}

.small-box:hover .icon { transform: scale(1.06); }

.small-box-footer {
    background-color: rgba(0, 0, 0, .12);
    color: rgba(255, 255, 255, .9);
    display: block;
    font-size: .78rem;
    padding: .35rem 1rem;
    text-align: center;
    text-decoration: none;
    border-bottom-left-radius: var(--t-radius-lg);
    border-bottom-right-radius: var(--t-radius-lg);
    margin: 0;
}

/* --- info-box: las cajas de cifras del dashboard --- */
.info-box {
    background-color: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    box-shadow: none;
    display: flex;
    margin-bottom: 1rem;
    min-height: 74px;
    padding: .6rem .8rem;
    position: relative;
    width: 100%;
}

.info-box-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.info-box-icon {
    align-items: center;
    border-radius: var(--t-radius);
    display: flex;
    font-size: 1.6rem;
    justify-content: center;
    text-align: center;
    width: 60px;
    flex: 0 0 60px;
}

.info-box-text {
    display: block;
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    opacity: .85;
}

.info-box-number {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Cuando la caja lleva un bg-* de COLOR, el texto va en blanco.
   Ojo con el selector: `[class*="bg-"]` casa por subcadena, así que también
   atrapaba a `bg-white` y dejaba texto blanco sobre fondo blanco — las cajas de
   "BBs intervención" del dashboard eran invisibles (18 en las dos pantallas).
   Se excluyen los fondos claros, donde el texto tiene que ser el del tema. */
.info-box[class*="bg-"]:not(.bg-white):not(.bg-light):not(.bg-transparent),
.small-box[class*="bg-"]:not(.bg-white):not(.bg-light):not(.bg-transparent) { color: #fff; }

.info-box[class*="bg-"]:not(.bg-white):not(.bg-light):not(.bg-transparent) .info-box-text,
.info-box[class*="bg-"]:not(.bg-white):not(.bg-light):not(.bg-transparent) .info-box-number { color: #fff; }

/* Y en las claras, el texto del tema. Se declara explícitamente porque
   `bg-white` de Bootstrap es una utilidad con !important sobre el fondo, pero no
   dice nada del color de letra. */
.info-box.bg-white,
.info-box.bg-light,
.small-box.bg-white,
.small-box.bg-light { color: var(--t-text); }

.info-box.bg-white .info-box-text,
.info-box.bg-light .info-box-text { color: var(--t-text-muted); }

.info-box.bg-white .info-box-number,
.info-box.bg-light .info-box-number { color: var(--t-text); }

/* --- overlay: velo de "cargando" sobre una card --- */
.overlay {
    align-items: center;
    background-color: rgba(255, 255, 255, .75);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 50;
    border-radius: var(--t-radius-lg);
}

.overlay .fa-spin, .overlay i { color: var(--t-primary); font-size: 1.8rem; }

/* --- callout --- */
.callout {
    background-color: var(--t-surface);
    border: 1px solid var(--t-border);
    border-left: 4px solid var(--t-border-strong);
    border-radius: var(--t-radius);
    box-shadow: none;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
}

.callout p:last-child { margin-bottom: 0; }

.callout.callout-info    { border-left-color: var(--t-info); }
.callout.callout-success { border-left-color: var(--t-success); }
.callout.callout-warning { border-left-color: var(--t-warning); }
.callout.callout-danger  { border-left-color: var(--t-danger); }

/* --- timeline (Programacion/timeLine) --- */
.timeline {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    position: relative;
}

.timeline::before {
    background-color: var(--t-border);
    bottom: 0;
    content: "";
    left: 31px;
    position: absolute;
    top: 0;
    width: 2px;
}

.timeline > li {
    margin-bottom: 1rem;
    margin-right: 0;
    position: relative;
}

.timeline > li::after { clear: both; content: ""; display: table; }

.timeline > li > .timeline-item {
    background-color: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    box-shadow: none;
    margin-left: 60px;
    margin-right: 0;
    padding: 0;
    position: relative;
}

.timeline > li > .timeline-item > .timeline-header {
    border-bottom: 1px solid var(--t-border);
    color: var(--t-text);
    font-size: .9rem;
    line-height: 1.1;
    margin: 0;
    padding: .65rem .8rem;
}

.timeline > li > .timeline-item > .timeline-body,
.timeline > li > .timeline-item > .timeline-footer { padding: .65rem .8rem; }

.timeline > li > .fa,
.timeline > li > .fas,
.timeline > li > .far,
.timeline > li > .fab,
.timeline > li > .glyphicon,
.timeline > li > .ion {
    background-color: var(--t-border);
    border-radius: 50%;
    font-size: .9rem;
    height: 30px;
    left: 16px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 30px;
    color: var(--t-text);
}

.timeline > .time-label > span {
    background-color: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    display: inline-block;
    font-weight: 600;
    padding: .25rem .6rem;
    font-size: .8rem;
}

/* --- direct-chat (usado en las vistas de borrado de Zapato y en Test) --- */
.direct-chat .card-body { overflow-x: hidden; padding: 0; position: relative; }

.direct-chat-messages {
    overflow: auto;
    padding: .6rem;
    transform: translate(0, 0);
}

.direct-chat-msg { margin-bottom: .8rem; }
.direct-chat-msg::after { clear: both; content: ""; display: table; }

.direct-chat-infos {
    display: block;
    font-size: .78rem;
    margin-bottom: .2rem;
    color: var(--t-text-muted);
}

.direct-chat-text {
    background-color: #f2f4f7;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    color: var(--t-text);
    margin: .35rem 0 0 50px;
    padding: .5rem .7rem;
    position: relative;
}

.right .direct-chat-text { margin-left: 0; margin-right: 50px; }

.direct-chat-img {
    border-radius: 50%;
    float: left;
    height: 40px;
    width: 40px;
}

.right .direct-chat-img { float: right; }

/* --- external-event (Calendario) --- */
.external-event {
    background-color: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: none;
    cursor: move;
    font-weight: 600;
    font-size: .82rem;
    margin-bottom: .3rem;
    padding: .4rem .6rem;
}

.external-event:hover { border-color: var(--t-border-strong); }

/* ---------------------------------------------------------------------------
   12. Utilidades que aportaba AdminLTE
   --------------------------------------------------------------------------- */

.text-sm { font-size: .875rem; }
.text-bold, .text-bold.table td, .text-bold.table th { font-weight: 700; }

.pad { padding: .8rem; }

.card-tools { flex: 0 0 auto; margin: 0; }
.card-tools .btn { padding: .2rem .45rem; }

.elevation-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.elevation-2 { box-shadow: 0 2px 6px rgba(0, 0, 0, .10); }
.elevation-3 { box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.elevation-4 { box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }

/* Los fondos de color de Bootstrap, alineados con la paleta del tema para que
   los dashboards no desentonen con el resto. */
.bg-primary { background-color: var(--t-primary) !important; }
.bg-success { background-color: var(--t-success) !important; }
.bg-danger  { background-color: var(--t-danger)  !important; }
.bg-warning { background-color: var(--t-warning) !important; }
.bg-info    { background-color: var(--t-info)    !important; }

.text-primary { color: var(--t-primary) !important; }
.text-success { color: var(--t-success) !important; }
.text-danger  { color: var(--t-danger)  !important; }
.text-warning { color: var(--t-warning) !important; }
.text-info    { color: var(--t-info)    !important; }

/* ---------------------------------------------------------------------------
   13. Colores con nombre heredados de AdminLTE
   Bootstrap sólo tiene bg-primary / bg-success / bg-danger…; los nombres de
   color a secas (bg-green, bg-red, bg-yellow…) los ponía AdminLTE. Al quitarlo
   dejaron de pintar, y donde el marcado forzaba texto blanco quedó blanco
   sobre blanco — invisible. Caso real: las citas pendientes del calendario
   (`Calendario/ListaEyeTrakers.cshtml`, `.external-event.bg-green` con
   `<a style="color:white">`).

   Los que tienen equivalente se mapean a la paleta del tema; el resto conserva
   el tono de AdminLTE, pero plano (sin el alpha .9 que llevaban).
   --------------------------------------------------------------------------- */

.bg-green   { background-color: var(--t-success); color: #fff; }
.bg-red     { background-color: var(--t-danger) ; color: #fff; }
.bg-yellow  { background-color: var(--t-warning); color: #fff; }
.bg-blue    { background-color: var(--t-primary); color: #fff; }
.bg-aqua,
.bg-light-blue { background-color: var(--t-info); color: #fff; }

.bg-navy    { background-color: #001f3f; color: #fff; }
.bg-teal    { background-color: #20c997; color: #fff; }
.bg-olive   { background-color: #3d9970; color: #fff; }
.bg-lime    { background-color: #01ff70; color: #1f2933; }
.bg-orange  { background-color: #fd7e14; color: #fff; }
.bg-fuchsia { background-color: #f012be; color: #fff; }
.bg-purple  { background-color: #6f42c1; color: #fff; }
.bg-maroon  { background-color: #d81b60; color: #fff; }
.bg-gray    { background-color: #6c757d; color: #fff; }
.bg-black   { background-color: #000; color: #fff; }

.text-green  { color: var(--t-success); }
.text-red    { color: var(--t-danger) ; }
.text-yellow { color: var(--t-warning); }
.text-blue   { color: var(--t-primary); }
.text-aqua   { color: var(--t-info)   ; }
.text-navy   { color: #001f3f; }
.text-teal   { color: #20c997; }
.text-olive  { color: #3d9970; }
.text-orange { color: #fd7e14; }
.text-purple { color: #6f42c1; }
.text-maroon { color: #d81b60; }

/* AdminLTE 2 dejó restos de `box` (el antecesor de `card`) en alguna vista
   suelta, p. ej. la lista de citas del calendario. Que al menos no descoloquen. */
.box { background-color: var(--t-surface); border-radius: var(--t-radius-lg); }
.box-body { padding: .5rem; }

/* Las citas del calendario llevan el color en la propia caja: que el borde no
   le pelee al fondo. */
.external-event[class*="bg-"] { border-color: transparent; }
.external-event[class*="bg-"] a { color: #fff; }

/* ---------------------------------------------------------------------------
   14. Últimos rescoldos de AdminLTE
   Salieron de comparar, clase a clase, las que AdminLTE definía contra las que
   las vistas siguen usando. Son las que quedaban sin dueño.
   --------------------------------------------------------------------------- */

/* Página de login: AdminLTE la centraba en la pantalla. Sin esto, el formulario
   se queda pegado arriba a la izquierda. */
.login-page,
.register-page {
    align-items: center;
    background-color: var(--t-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    /* `html, body { height: 100% }` (arriba) fijaba el alto del body al de la pantalla: si el
       contenido era más alto (móvil, pantalla baja, LoginProvisional con tres paneles apilados),
       el flex lo centraba y desbordaba por ARRIBA y por abajo a partes iguales, y la parte de
       arriba no se puede alcanzar con el scroll. Con alto automático el body crece con el
       contenido (el centrado sólo actúa cuando sobra sitio) y la página scrollea entera. */
    height: auto;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}

/* Botón "de herramienta": el de la esquina de las cards (colapsar, cerrar…) */
.btn-tool {
    background-color: transparent;
    border: 0;
    color: var(--t-text-muted);
    font-size: .85rem;
    margin: -.2rem 0;
    padding: .25rem .4rem;
}

.btn-tool:hover { color: var(--t-text); }

/* Botón circular pequeño junto a un input (p.ej. "elegir de una lista"). */
.btn-circle-sm {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    height: 1.9rem;
    justify-content: center;
    padding: 0;
    width: 1.9rem;
}

/* Contenedor de gráficas del dashboard */
.chart { overflow: hidden; position: relative; width: 100%; }

/* Zonas reordenables del dashboard */
.connectedSortable { min-height: 100px; }
.connectedSortable .card-header { cursor: move; }

/* Resto de AdminLTE 2 en alguna vista suelta */
.content { padding: 0 .5rem; }
.with-border { border-bottom: 1px solid var(--t-border); }
.text-lg { font-size: 1.25rem; }
.navbar-white { background-color: var(--t-surface); }

/* Chat: nombre y burbuja propia */
.direct-chat-name { font-weight: 600; }

.direct-chat-primary .right > .direct-chat-text {
    background-color: var(--t-primary);
    border-color: var(--t-primary);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   15. Casillas y radios
   Antes las pintaba iCheck (plugin jQuery de 2013, sprites PNG), que sólo
   alcanzaba a las que ya estaban en el DOM: las filas que llegan por ajax en
   los DataTables y el contenido de los modales se quedaban nativas. De ahí que
   en unas pantallas se vieran "viejas" y en otras no.

   iCheck está retirado por completo del proyecto. Ahora todas son nativas y se
   estilizan aquí, así que salen igual en toda la app y también en lo que se
   cargue después por ajax.

   `accent-color` es la forma estándar de teñir un control nativo: mantiene el
   comportamiento del navegador (accesibilidad, teclado, indeterminate) y sólo
   cambia el color.
   --------------------------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--t-primary);
    cursor: pointer;
    height: 1rem;
    margin: 0;
    vertical-align: middle;
    width: 1rem;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--t-primary);
    outline-offset: 2px;
}

/* En las tablas las casillas son indicadores de dato, no controles: van
   `disabled` a propósito. Que no parezcan apagadas ni inviten a pulsarlas. */
.table input[type="checkbox"]:disabled,
.table input[type="radio"]:disabled {
    cursor: default;
    opacity: 1;
}

.table input[type="checkbox"],
.table input[type="radio"] {
    display: block;
    margin: 0 auto;
}

/* Bootstrap le da a .form-check-input un `margin-left:-1.25rem` que sólo tiene
   sentido dentro de un `.form-check` (deja hueco para la etiqueta). En varios
   modales de la app la casilla va suelta y ese margen la desplaza a la
   izquierda; se anula sólo en ese caso. */
:not(.form-check) > .form-check-input {
    margin-left: 0;
}

/* ...pero el `margin: 0` de arriba gana a `.form-check-input` por especificidad
   (`input[type="checkbox"]` es 0-1-1; `.form-check-input`, 0-1-0), así que el
   margen negativo se perdía TAMBIÉN dentro de un `.form-check`. Como la casilla
   es `position: absolute`, se quedaba en su posición estática —el inicio del
   texto— y se comía las primeras letras de la etiqueta. Se restituye aquí. */
.form-check > input[type="checkbox"].form-check-input,
.form-check > input[type="radio"].form-check-input {
    margin-left: -1.25rem;
}

.form-check-label { cursor: pointer; }

/* ---------------------------------------------------------------------------
   Lista de casillas (los roles de un profesional, por ejemplo)
   Una columna larga desperdicia el ancho del modal y se lee mal. Rejilla que
   reparte las opciones en las columnas que quepan, dentro de un recuadro que
   las agrupa visualmente bajo su etiqueta.
   --------------------------------------------------------------------------- */
.lista-casillas {
    background-color: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    display: grid;
    gap: .125rem .5rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    padding: .5rem;
}

/* Dentro de la rejilla no se usa el truco de Bootstrap (casilla absoluta + hueco
   por padding): con flex la etiqueta nunca puede solaparse, por larga que sea. */
.lista-casillas .form-check {
    align-items: center;
    border-radius: var(--t-radius);
    display: flex;
    gap: .5rem;
    margin-bottom: 0;
    padding: .35rem .5rem;
}

.lista-casillas .form-check:hover {
    background-color: var(--t-primary-soft);
}

.lista-casillas .form-check > input[type="checkbox"].form-check-input,
.lista-casillas .form-check > input[type="radio"].form-check-input {
    flex: none;
    margin: 0;
    position: static;
}

.lista-casillas .form-check-label {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Avisos (notify.js)

   Las 85 llamadas de la app piden "top center", pero la librería NO centra: con
   "center" se limita a poner el borde IZQUIERDO del contenedor al 45% del ancho
   (`u === "center" ? l.left = "45%"` en notify.min.js). El aviso arranca en
   mitad de la pantalla y, como su estilo `bootstrap` trae `white-space: nowrap`,
   los mensajes largos siguen creciendo hasta salirse por la derecha.

   Aquí se corrigen las dos cosas: centrado de verdad y permiso para partir la
   línea dentro de un ancho máximo.
   --------------------------------------------------------------------------- */
.notifyjs-corner {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    max-width: min(90vw, 34rem);
}

.notifyjs-corner .notifyjs-wrapper,
.notifyjs-corner .notifyjs-container {
    max-width: 100%;
}

/* El estilo `bootstrap` de la librería fuerza nowrap; sin esto el ancho máximo
   de arriba no serviría de nada. */
.notifyjs-corner .notifyjs-bootstrap-base {
    text-align: center;
    white-space: normal;
}

/* Pie de un diálogo dentro del modal PMinito que se queda pegado abajo del cuerpo (que scrollea):
   así «Enviar»/«Cerrar» se ven aunque la ventana sea baja. Ver pm_ajustaEditorCorreo (site_pminito.js). */
.pm-pie-sticky {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 5;
}

/* Contenedor de una tabla ancha con scroll horizontal VISIBLE. Sólo aparece cuando la tabla no
   cabe (overflow-x: auto, no scroll). En macOS/tablets las barras son «overlay» y no se ven hasta
   que se mueve el dedo o el ratón, así que parecía que la tabla estaba cortada: aquí la barra es
   permanente y con color. En pantallas donde cabe todo no sale nada. */
.scroll-x-visible {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

.scroll-x-visible::-webkit-scrollbar { height: 12px; }
.scroll-x-visible::-webkit-scrollbar-track { background: var(--t-bg); border-radius: 6px; }
.scroll-x-visible::-webkit-scrollbar-thumb {
    background-color: #adb5bd;
    border: 2px solid var(--t-bg);
    border-radius: 6px;
}
.scroll-x-visible::-webkit-scrollbar-thumb:hover { background-color: #868e96; }

/* Firefox no entiende ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar) {
    .scroll-x-visible { scrollbar-color: #adb5bd var(--t-bg); scrollbar-width: auto; }
}

/* ---------------------------------------------------------------------------
   Calendario (FullCalendar 3, sólo lo usa Calendario/Index)
   Sus botones venían con el tema propio de FullCalendar (degradado gris, relieve,
   texto pequeño) y no se parecían a los del resto de la app. Aquí se igualan a
   `.btn-default` (neutro, blanco con borde) y, el elegido, a `.btn-primary`.
   Sin tocar el JavaScript del calendario. Más específico que `.fc-state-*` (que
   puntúa 0,1,0) para ganar sin !important.
   --------------------------------------------------------------------------- */

.fc .fc-button {
    background-color: #fff;
    background-image: none;
    border: 1px solid var(--t-border-strong);
    border-radius: 0;               /* las esquinas las ponen fc-corner-left/right */
    box-shadow: none;
    color: var(--t-text);
    font-size: .85rem;
    font-weight: 500;
    height: auto;
    line-height: 1.5;
    padding: .375rem .75rem;
    text-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.fc .fc-button.fc-corner-left  { border-bottom-left-radius: var(--t-radius);  border-top-left-radius: var(--t-radius); }
.fc .fc-button.fc-corner-right { border-bottom-right-radius: var(--t-radius); border-top-right-radius: var(--t-radius); }

.fc .fc-button.fc-state-hover,
.fc .fc-button.fc-state-focus {
    background-color: #f2f4f7;
    background-position: 0 0;
    border-color: var(--t-border-strong);
    color: var(--t-text);
    transition: background-color .12s ease;
}

.fc .fc-button:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
    outline: none;
}

/* Elegido (Mes / Semana / Día): como un btn-primary */
.fc .fc-button.fc-state-active,
.fc .fc-button.fc-state-down {
    background-color: var(--t-primary);
    border-color: var(--t-primary);
    box-shadow: none;
    color: #fff;
}

.fc .fc-button.fc-state-active.fc-state-hover {
    background-color: var(--t-primary-hover);
    border-color: var(--t-primary-hover);
}

/* «Hoy» cuando ya estás en hoy (FullCalendar lo deshabilita) */
.fc .fc-button.fc-state-disabled {
    background-color: #fff;
    color: var(--t-text-muted);
    cursor: default;
    opacity: .55;
}

.fc .fc-toolbar h2 {
    color: var(--t-text);
    font-size: 1.5rem;
    font-weight: 600;
}

/* Zona de subida de ficheros: «arrastra aquí o haz clic». Se usa en el diálogo del acuerdo firmado
   (ContratoArchivo/AddContratoArchivo) y vale para cualquier otra subida. */
.zona-subida {
    background-color: var(--t-bg);
    border: 2px dashed var(--t-border-strong);
    border-radius: var(--t-radius-lg);
    cursor: pointer;
    padding: 1.6rem 1rem;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease;
}
.zona-subida:hover,
.zona-subida.arrastrando {
    background-color: var(--t-primary-soft);
    border-color: var(--t-primary);
}
.zona-subida .zona-icono { color: var(--t-primary); font-size: 2.4rem; line-height: 1; margin-bottom: .5rem; }
.zona-subida.ocupada { cursor: default; }
.zona-subida.ocupada:hover { background-color: var(--t-bg); border-color: var(--t-border-strong); }
.zona-subida .fichero-icono { font-size: 2rem; }

/* Iconos en naranja (submenú «Configuración» del menú lateral). Más específico que el `inherit` de `.nav-link.active`,
   así el icono conserva el naranja también en la página actual. */
.nav-sidebar .nav-treeview .nav-icon.icono-naranja { color: var(--t-warning); }
/* Cabecera del menú «Configuración»: texto, engranajes y flecha en naranja (también abierta o activa). */
.nav-sidebar .nav-link.titulo-naranja,
.nav-sidebar .nav-link.titulo-naranja .nav-icon,
.nav-sidebar .nav-link.titulo-naranja p,
.nav-sidebar .nav-link.titulo-naranja .right,
/* …y todos los elementos del submenú: texto e iconos, también el de la página actual y al pasar el ratón. */
.nav-sidebar .nav-link.titulo-naranja + .nav-treeview .nav-link,
.nav-sidebar .nav-link.titulo-naranja + .nav-treeview .nav-link:hover,
.nav-sidebar .nav-link.titulo-naranja + .nav-treeview .nav-link.active,
.nav-sidebar .nav-link.titulo-naranja + .nav-treeview .nav-link p,
.nav-sidebar .nav-link.titulo-naranja + .nav-treeview .nav-link .nav-icon { color: var(--t-warning); }

/* Time Table (Programacion/timeLine): por cada mes, UNA celda por prueba con tres fichas pegadas
   (nivel 1, 2 y 3). Ficha de color = esa prueba se programa a ese nivel; gris = no. Nivel 1 verde, 2 naranja, 3 rojo. */
.tl-niveles { display: inline-flex; }
.tl-chip {
    background-color: #f1f3f5;
    border: 1px solid #dee2e6;
    color: #adb5bd;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    margin-left: -1px;
    min-width: 1.7rem;
    padding: .3rem .45rem;
    text-align: center;
    user-select: none;
}
.tl-chip:first-child { border-radius: var(--t-radius) 0 0 var(--t-radius); margin-left: 0; }
.tl-chip:last-child  { border-radius: 0 var(--t-radius) var(--t-radius) 0; }
.tl-chip.n1.on { background-color: var(--t-success); border-color: var(--t-success); color: #fff; }
.tl-chip.n2.on { background-color: var(--t-warning); border-color: var(--t-warning); color: #fff; }
.tl-chip.n3.on { background-color: var(--t-danger);  border-color: var(--t-danger);  color: #fff; }
.tl-chip.na    { background-color: transparent; border-style: dashed; color: #ced4da; }
.tl-periodo { font-size: .95rem; font-weight: 600; }
/* Botón de la modal de edición (mismos colores, pero se pulsa) */
.tl-toggle { cursor: pointer; }
.tl-toggle:hover:not(.on):not(.na) { background-color: #e9ecef; color: #6c757d; }
.tl-toggle.na { cursor: not-allowed; }
.tl-toggle:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); outline: none; z-index: 1; }