/* ==========================================================================
   App TMR — hoja de estilo base
   ========================================================================== */
:root {
    --tmr-azul: #0f3d5c;
    --tmr-azul-claro: #1b587f;
    --tmr-acento: #f5a623;
    --tmr-sidebar-ancho: 250px;
    /* Alto de la barra superior. 66 se sentia alto: es espacio que se pierde en
       TODAS las pantallas, todo el tiempo. 56 es lo habitual en una barra de
       aplicacion y el logo sigue leyendose. Si se cambia, mover tambien el alto
       de .tmr-marca: el logo debe quedar ~10px mas bajo que la barra. */
    --tmr-topbar-alto: 56px;

    /* Mismo azul de barra lateral que Contabilidad SAP y SatVerifica, para que
       las apps de nweb se vean de la misma familia. */
    --tmr-sidebar-fondo:  #0f1f3d;
    --tmr-sidebar-hover:  #162952;
    --tmr-sidebar-activo: #2563eb;
}

body {
    background: #f4f6f8;
    font-size: 0.95rem;
}

/* ------------------------------------------------------------ Barra superior */
.tmr-topbar {
    background: var(--tmr-azul);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    min-height: var(--tmr-topbar-alto);
    /* Bootstrap le pone .5rem arriba y abajo; con la barra mas baja eso empuja
       y la deja mas alta de lo que dice la variable. */
    padding-top: .25rem;
    padding-bottom: .25rem;
}
.tmr-topbar .navbar-brand { color: #fff; }
.tmr-topbar .navbar-brand:hover { color: #fff; }

.tmr-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: var(--tmr-acento);
    color: #0f3d5c;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .5px;
    border-radius: 8px;
}
.tmr-logo-grande { width: 64px; height: 64px; font-size: 1.2rem; border-radius: 14px; }

/* Logo de TMR. En la barra superior va sobre una pastilla blanca: el logo trae
   fondo blanco y la cuchara es negra, así que directo sobre el azul marino se
   perdería. En la pantalla de acceso, que ya es blanca, va suelto. */
.tmr-marca {
    height: 38px;
    background: #fff;
    border-radius: 8px;
    padding: 3px 8px;
    display: block;
}
.tmr-marca-login { height: 74px; max-width: 100%; }

/* ------------------------------------------------------------- Estructura */
.tmr-shell { display: flex; min-height: calc(100vh - var(--tmr-topbar-alto)); }

.tmr-sidebar {
    width: var(--tmr-sidebar-ancho);
    flex: 0 0 var(--tmr-sidebar-ancho);
    background: var(--tmr-sidebar-fondo);
    color: #e2e8f0;
    position: sticky;
    top: var(--tmr-topbar-alto);
    height: calc(100vh - var(--tmr-topbar-alto));
    /* La barra NO scrollea: scrollea la lista de opciones de adentro, para que
       el pie (usuario, salir, version, nweb) se quede siempre a la vista. */
    overflow: hidden;
}

.tmr-contenido { flex: 1 1 auto; min-width: 0; }

.tmr-offcanvas { background: var(--tmr-sidebar-fondo); color: #e2e8f0; width: 270px; }
/* Mismo trato en el panel del celular: el cuerpo no scrollea, la lista si */
.tmr-offcanvas .offcanvas-body { overflow: hidden; }
.tmr-offcanvas .offcanvas-header { background: var(--tmr-azul); color: #fff; }

/* ------------------------------------------------------------------- Menu */
/* El menú es una columna de altura completa: la lista de enlaces se lleva el
   espacio sobrante y es la que scrollea; el pie queda anclado abajo. */
.tmr-menu { display: flex; flex-direction: column; height: 100%; }

.tmr-nav {
    padding: .75rem .5rem;
    flex: 1 1 auto;
    overflow-y: auto;
    /* Sin esto, un hijo flex no se deja encoger y el scroll nunca aparece */
    min-height: 0;
    overscroll-behavior: contain;
}

/* Barra de scroll discreta sobre el fondo oscuro */
.tmr-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.tmr-nav::-webkit-scrollbar { width: 8px; }
.tmr-nav::-webkit-scrollbar-track { background: transparent; }
.tmr-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 4px;
}
.tmr-nav:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); }

/* Cabecera de grupo.
   Ojo con el cambio de papel: mientras los grupos estaban siempre abiertos,
   esto era una ETIQUETA de seccion y el gris tenue en mayusculitas era lo
   correcto. Al volverse plegables pasaron a ser la navegacion principal —lo
   primero que se ve y donde hay que dar clic—, asi que se visten como un
   renglon mas del menu: mismo tamano, mismo fondo al pasar el mouse, y el
   texto claro para que se lean sin tener que apuntarles. */
.tmr-nav-grupo {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .5rem .75rem;
    margin-bottom: 2px;
    font-size: .9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    background: none;
    border: 0;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tmr-nav-grupo:hover { background: var(--tmr-sidebar-hover); color: #fff; }
.tmr-nav-grupo:focus-visible {
    outline: 2px solid var(--tmr-acento);
    outline-offset: -2px;
}
.tmr-nav-grupo > span { flex: 1; }

.tmr-grupo-icono {
    font-size: 1.05rem;
    width: 1.2rem;
    text-align: center;
    color: rgba(255, 255, 255, .7);
}
.tmr-nav-grupo:hover .tmr-grupo-icono { color: #fff; }

.tmr-grupo-flecha {
    font-size: .75rem;
    color: rgba(255, 255, 255, .45);
    transition: transform .18s ease;
}
.tmr-nav-grupo[aria-expanded="false"] .tmr-grupo-flecha { transform: rotate(-90deg); }

/* Un grupo abierto se separa un poco del anterior, para que se vea donde
   empieza y donde termina cada bloque. */
.tmr-nav-grupo[aria-expanded="true"] { margin-top: .5rem; }
.tmr-nav-grupo[aria-expanded="true"] + .tmr-nav-items { margin-bottom: .5rem; }

/* Las opciones de adentro van sangradas y un punto mas tenues: asi la
   cabecera manda visualmente y se entiende que cuelgan de ella. */
.tmr-nav-items .tmr-nav-item {
    padding-left: 1.55rem;
    font-size: .86rem;
}
.tmr-nav-items .tmr-nav-item i { font-size: .95rem; }

/* Un grupo PLEGADO que contiene la pagina actual se pinta como la opcion
   activa. Antes llevaba un punto de color, pero eso obligaba a aprender un
   simbolo nuevo; el azul ya significa "aqui estas" en toda la aplicacion, asi
   que se reusa. Adentro se escribe en que opcion estas, para no dejar la duda. */
.tmr-nav-grupo[aria-expanded="false"].tmr-grupo-con-activo {
    background: var(--tmr-sidebar-activo);
    color: #fff;
}
.tmr-nav-grupo[aria-expanded="false"].tmr-grupo-con-activo .tmr-grupo-icono,
.tmr-nav-grupo[aria-expanded="false"].tmr-grupo-con-activo .tmr-grupo-flecha { color: #fff; }

/* El nombre de la opcion activa, debajo del grupo cerrado */
.tmr-grupo-aqui {
    display: none;
    font-size: .72rem;
    font-weight: 400;
    opacity: .8;
    margin-top: .1rem;
}
.tmr-nav-grupo[aria-expanded="false"].tmr-grupo-con-activo .tmr-grupo-aqui { display: block; }
.tmr-nav-grupo[aria-expanded="false"].tmr-grupo-con-activo > span { line-height: 1.2; }

.tmr-nav-items {
    overflow: hidden;
    transition: height .18s ease;
}
.tmr-nav-items[hidden] { display: none !important; }

.tmr-nav-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .75rem;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: .9rem;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.tmr-nav-item i { font-size: 1.05rem; color: rgba(255, 255, 255, .55); width: 1.2rem; text-align: center; }
.tmr-nav-item:hover { background: var(--tmr-sidebar-hover); color: #fff; }
.tmr-nav-item:hover i { color: #fff; }
.tmr-nav-item.active {
    background: var(--tmr-sidebar-activo);
    color: #fff;
    font-weight: 600;
}
.tmr-nav-item.active i { color: #fff; }

/* --------------------------------------------------------- Pie del menú */
/* Anclado abajo y sin encogerse, pase lo que pase con la lista de arriba */
.tmr-sidebar-pie { flex: 0 0 auto; }

.tmr-sidebar-usuario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .85rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .55);
    font-size: .78rem;
}
.tmr-sidebar-usuario .btn { color: rgba(255, 255, 255, .55); padding: 0; }
.tmr-sidebar-usuario .btn:hover { color: #fff; }

.tmr-sidebar-version {
    padding: .35rem .85rem;
    font-size: .72rem;
    color: rgba(255, 255, 255, .4);
}

.tmr-sidebar-marca {
    text-align: center;
    padding: .5rem 0 .75rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.tmr-sidebar-marca p {
    margin: 0 0 .25rem;
    font-size: 9px;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .4);
}
.tmr-sidebar-marca img { height: 22px; opacity: .8; }

/* Marca de nweb sobre fondo claro (pantalla de acceso) */
.tmr-marca-clara { text-align: center; }
.tmr-marca-clara p {
    margin: 0 0 .25rem;
    font-size: 9px;
    letter-spacing: .5px;
    color: #90a0ae;
}
.tmr-marca-clara img { height: 22px; filter: invert(1) brightness(.35); opacity: .75; }

/* -------------------------------------------------------------------- KPI */
.tmr-kpi {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border-radius: .75rem;
    padding: 1rem;
    height: 100%;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    border-left: 4px solid #adb5bd;
}
.tmr-kpi-icono {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    background: #eef2f5; color: #55636f;
}
.tmr-kpi-valor { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.tmr-kpi-texto { font-size: .75rem; color: #6b7a87; line-height: 1.2; }

.tmr-kpi-verde   { border-left-color: #198754; }
.tmr-kpi-verde   .tmr-kpi-icono { background: #e3f3ea; color: #198754; }
.tmr-kpi-azul    { border-left-color: #0d6efd; }
.tmr-kpi-azul    .tmr-kpi-icono { background: #e6efff; color: #0d6efd; }
.tmr-kpi-amarillo{ border-left-color: #ffc107; }
.tmr-kpi-amarillo .tmr-kpi-icono { background: #fff6e0; color: #b98900; }
.tmr-kpi-rojo    { border-left-color: #dc3545; }
.tmr-kpi-rojo    .tmr-kpi-icono { background: #fdeaec; color: #dc3545; }
.tmr-kpi-gris    { border-left-color: #adb5bd; }

.tmr-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }

/* ------------------------------------------------------------------ Login */
.tmr-publico {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--tmr-azul) 0%, var(--tmr-azul-claro) 100%);
    padding: 1.25rem;
}
.tmr-login { width: 100%; max-width: 400px; }
.tmr-login-caja { background: #fff; border-radius: 1rem; padding: 2rem; }

/* --------------------------------------------------------------- Detalles */
.card { border-radius: .75rem; }
.card-header { border-top-left-radius: .75rem !important; border-top-right-radius: .75rem !important; }
.alert:empty, .d-none-if-empty:empty { display: none !important; }

@media (max-width: 575.98px) {
    .tmr-kpi-valor { font-size: 1.3rem; }
    .tmr-kpi { padding: .75rem; gap: .6rem; }
    .tmr-kpi-icono { width: 38px; height: 38px; flex-basis: 38px; font-size: 1rem; }
}

@media print {
    .tmr-topbar, .tmr-sidebar, .offcanvas { display: none !important; }
    .tmr-contenido { width: 100%; }
}

/* --------------------------------------------------------------- Fotos */
.tmr-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e9eef2; color: #8b9aa7;
    border: 1px solid #dde3e8;
}
.tmr-avatar-vacio { font-size: .95rem; }

.tmr-foto-caja { display: flex; justify-content: center; }
.tmr-foto {
    width: 150px; height: 150px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #dde3e8;
    background: #f1f5f8;
}
.tmr-foto-vacia {
    display: flex; align-items: center; justify-content: center;
    color: #b3c0cb; font-size: 3.5rem;
}

/* ----------------------------------------------------- Matriz de permisos */
.tmr-permiso-modulo {
    background: #f1f5f8;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #55636f;
}
.tmr-tabla-compacta td, .tmr-tabla-compacta th { padding: .4rem .6rem; }

/* ------------------------------------------------------------ Importación */
.tmr-fila-error   { background: #fdeaec !important; }
.tmr-fila-aviso   { background: #fff8e6 !important; }

/* ------------------------------------------------- Contraseña temporal */
.tmr-pwd-generada {
    background: #e8f4ec;
    border: 1px dashed #198754;
    border-radius: .5rem;
    padding: .75rem 1rem;
}
.tmr-pwd-valor {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #0f5132;
    user-select: all;
}

/* --------------------------------------------------- Datos incompletos */
.tmr-falta {
    font-size: .7rem;
    color: #b98900;
    background: #fff6e0;
    border: 1px solid #ffe08a;
    border-radius: 1rem;
    padding: .05rem .45rem;
    white-space: nowrap;
}

/* ------------------------------------------- Tabla densa de empleados */
.tmr-tabla-empleados > tbody > tr > td,
.tmr-tabla-empleados > thead > tr > th { padding: .3rem .5rem; }
.tmr-tabla-empleados .tmr-avatar { width: 28px; height: 28px; }
.tmr-tabla-empleados .badge { font-weight: 600; }

/* -------------------------------------------------- Miniatura de herramienta */
.tmr-miniatura {
    width: 34px; height: 34px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #dde3e8;
    background: #f1f5f8;
    display: inline-flex; align-items: center; justify-content: center;
    color: #8b9aa7;
}
.tmr-miniatura-vacia { font-size: .9rem; }

/* ------------------------------------------------------------- Calendario */
.fc { font-size: .85rem; }
.fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 600; }
.fc .fc-button { padding: .25rem .6rem; font-size: .8rem; }
.fc .fc-button-primary { background: #0f3d5c; border-color: #0f3d5c; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { background: #1b587f; border-color: #1b587f; }
.fc-event { cursor: pointer; }
.tmr-evento-cancelado { opacity: .45; text-decoration: line-through; }
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today { background: #fff8e6; }

/* Domingos y dias de asueto en la agenda de salas */
.fc .tmr-dia-inhabil {
    background: repeating-linear-gradient(135deg, #f2f5f8, #f2f5f8 6px, #e9eef3 6px, #e9eef3 12px);
}
.fc .fc-col-header-cell.tmr-dia-inhabil a { color: #93a2b0; }
.fc .fc-daygrid-day.tmr-dia-inhabil .fc-daygrid-day-number { color: #93a2b0; }

/* ------------------------------------------------- Calendario de vacaciones */
.tmr-calendario { table-layout: fixed; }
.tmr-calendario thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7a87;
    font-weight: 600;
    text-align: center;
}

.tmr-cal-dia {
    height: 118px;
    vertical-align: top;
    padding: .4rem .45rem;
    font-size: .78rem;
    transition: background .12s;
}
.tmr-cal-dia[role="button"] { cursor: pointer; }
.tmr-cal-dia[role="button"]:hover { background: #eef4f9; }
.tmr-cal-dia:focus-visible { outline: 2px solid var(--tmr-azul); outline-offset: -2px; }

.tmr-cal-num { font-weight: 600; color: #35434f; }
.tmr-cal-fuera { background: #fafbfc; }
.tmr-cal-fuera .tmr-cal-num { color: #b9c3cb; }
.tmr-cal-hoy { box-shadow: inset 0 0 0 2px var(--tmr-acento); }
/* Domingos y dias de asueto: no cuentan como dias habiles */
.tmr-cal-inhabil {
    background: repeating-linear-gradient(135deg, #f2f5f8, #f2f5f8 6px, #e9eef3 6px, #e9eef3 12px);
}
.tmr-cal-inhabil .tmr-cal-num { color: #93a2b0; }
.tmr-cal-inhabil-txt { font-size: .68rem; color: #7d8c99; font-style: italic; margin-bottom: .15rem; }

/* Columna de la semana */
.tmr-cal-semana {
    background: #f6f8fa;
    color: #6b7a87;
    cursor: pointer;
    width: 44px;
    transition: background .12s;
}
.tmr-cal-semana:hover { background: #e6eef6; color: var(--tmr-azul); }
.tmr-cal-semana:focus-visible { outline: 2px solid var(--tmr-azul); outline-offset: -2px; }
.tmr-cal-semana .small { color: #35434f; }

.tmr-cal-persona {
    margin-top: .15rem;
    padding: .1rem .3rem;
    border-radius: 4px;
    background: #e3f3ea;
    color: #14664a;
    font-size: .7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tmr-cal-persona.tmr-cal-pend { background: #fff6e0; color: #8a6100; }
.tmr-cal-mas { font-size: .68rem; color: #6b7a87; margin-top: .15rem; }

/* ------------------------------------------------ Semana de vacaciones */
.tmr-semana th { font-size: .75rem; }
.tmr-semana thead th { vertical-align: middle; }
.tmr-sem-hoy { box-shadow: inset 0 -3px 0 var(--tmr-acento); }

/* La marca del dia: un punto grande, facil de leer de un vistazo en una
   tabla de 7 columnas, y clicable para abrir la solicitud. */
.tmr-sem-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e3f3ea;
    color: #14664a;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    transition: transform .1s;
}
.tmr-sem-marca:hover { transform: scale(1.15); color: #14664a; }
.tmr-sem-marca.tmr-sem-pend { background: #fff6e0; color: #8a6100; }

@media (max-width: 767px) {
    .tmr-semana th, .tmr-semana td { font-size: .72rem; }
    .tmr-sem-marca { width: 22px; height: 22px; font-size: .85rem; }
    .tmr-cal-dia { height: 92px; font-size: .72rem; }
    .tmr-cal-persona { font-size: .64rem; }
    .tmr-cal-semana { width: 32px; font-size: .7rem; }
}