/* ==========================================================================
   App TMR — hoja de estilo base
   ========================================================================== */
:root {
    --tmr-azul: #0f3d5c;
    --tmr-azul-claro: #1b587f;
    --tmr-acento: #f5a623;
    --tmr-sidebar-ancho: 250px;
    --tmr-topbar-alto: 66px;

    /* 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);
}
.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: 46px;
    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;
    overflow-y: auto;
    position: sticky;
    top: var(--tmr-topbar-alto);
    height: calc(100vh - var(--tmr-topbar-alto));
}

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

.tmr-offcanvas { background: var(--tmr-sidebar-fondo); color: #e2e8f0; width: 270px; }
.tmr-offcanvas .offcanvas-header { background: var(--tmr-azul); color: #fff; }

/* ------------------------------------------------------------------- Menu */
/* El menú es una columna: los enlaces crecen y el pie se pega abajo. */
.tmr-menu { display: flex; flex-direction: column; min-height: 100%; }

.tmr-nav { padding: .75rem .5rem; flex: 1 1 auto; }

.tmr-nav-grupo {
    padding: .9rem .85rem .35rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .32);
}

.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ú */
.tmr-sidebar-pie { margin-top: 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; }

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