/* =========================================================
   ORION RRHH · Sistema de diseño
   ========================================================= */

:root {
    /* Marca */
    --marca-900: #0B1E38;
    --marca-800: #102A4C;
    --marca-700: #173B67;
    --marca-600: #1E4E86;
    --acento:    #2563EB;
    --acento-claro: #DBEAFE;

    /* Semánticos */
    --ok:      #059669;
    --ok-bg:   #D1FAE5;
    --aviso:   #B45309;
    --aviso-bg:#FEF3C7;
    --riesgo:  #DC2626;
    --riesgo-bg:#FEE2E2;
    --info:    #1D4ED8;
    --info-bg: #DBEAFE;

    /* Neutros */
    --texto:    #0F172A;
    --texto-2:  #475569;
    --texto-3:  #94A3B8;
    --linea:    #E6EBF2;
    --linea-2:  #F1F5F9;
    --fondo:    #F4F6FA;
    --superficie: #FFFFFF;

    /* Formas */
    --radio:    14px;
    --radio-sm: 9px;
    --sombra:   0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05);
    --sombra-alta: 0 12px 40px rgba(15, 23, 42, .14);

    --sidebar: 264px;
    --topbar:  68px;
}

/* ---------------------------------------------------------
   Reset
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

/* Los saltos por ancla (#notas) se ven, no teletransportan */
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.015em; color: var(--texto); }
p  { margin: 0; }
a  { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--acento-claro); }

/* ---------------------------------------------------------
   Estructura
   --------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

.contenido {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar);
    display: flex;
    flex-direction: column;
}

.lienzo {
    padding: 26px 32px 48px;
    flex: 1;
    max-width: 1520px;
    width: 100%;
}

/* ---------------------------------------------------------
   Barra lateral
   --------------------------------------------------------- */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    background: linear-gradient(175deg, #0B1E38 0%, #102A4C 60%, #123157 100%);
    display: flex;
    flex-direction: column;
    z-index: 40;
}

.sidebar__marca {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sidebar__logo {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: linear-gradient(140deg, #3B82F6, #1D4ED8);
    display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: 17px;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .45);
    flex: none;
}

.sidebar__titulo { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.sidebar__sub    { color: #7C97BC; font-size: 11px; line-height: 1.35; margin-top: 1px; }

.sidebar__nav { padding: 14px 12px; overflow-y: auto; flex: 1; }

.nav__grupo {
    color: #5E7CA3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 16px 10px 7px;
}

.nav__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: var(--radio-sm);
    color: #B6C8DE;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 2px;
    position: relative;
    transition: background .15s, color .15s;
}

.nav__item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }

.nav__item.activo {
    background: rgba(59, 130, 246, .16);
    color: #fff;
    font-weight: 600;
}

.nav__item.activo::before {
    content: "";
    position: absolute;
    left: -12px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 22px;
    border-radius: 0 3px 3px 0;
    background: #60A5FA;
}

.nav__item svg { width: 17px; height: 17px; flex: none; opacity: .9; }

.nav__contador {
    margin-left: auto;
    background: rgba(239, 68, 68, .9);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
}

.sidebar__pie {
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #5E7CA3;
    font-size: 11px;
}

/* ---------------------------------------------------------
   Barra superior
   --------------------------------------------------------- */
.topbar {
    height: var(--topbar);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linea);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 30;
}

/* El bloque de título nunca empuja a las acciones: se recorta con puntos suspensivos */
.topbar__identidad { min-width: 0; flex: 1; }

.topbar__titulo   { font-size: 17px; font-weight: 650;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__migaja   { font-size: 12px; color: var(--texto-3);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__acciones { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }

.buscador {
    position: relative;
    width: 260px;
}

.buscador input {
    width: 100%;
    padding: 8.5px 12px 8.5px 34px;
    border: 1px solid var(--linea);
    border-radius: 9px;
    background: var(--fondo);
    font-size: 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.buscador input:focus {
    border-color: var(--acento);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.buscador svg {
    position: absolute; left: 11px; top: 50%;
    transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--texto-3);
}

.avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex: none;
    letter-spacing: .02em;
}

.avatar--sm { width: 26px; height: 26px; font-size: 10px; }
.avatar--lg { width: 46px; height: 46px; font-size: 15px; }

.usuario-chip {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 10px 4px 4px;
    border-radius: 24px;
    border: 1px solid var(--linea);
    background: #fff;
}

.usuario-chip__nombre { font-size: 13px; font-weight: 600; line-height: 1.15; }
.usuario-chip__rol    { font-size: 11px; color: var(--texto-3); line-height: 1.15; }

.menu-movil {
    display: none;
    background: none; border: 0; cursor: pointer;
    padding: 6px; border-radius: 8px; color: var(--texto-2);
}

/* ---------------------------------------------------------
   Encabezado de página
   --------------------------------------------------------- */
.pagina-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.pagina-cabecera h1 { font-size: 24px; }
.pagina-cabecera p  { color: var(--texto-2); font-size: 13.5px; margin-top: 3px; }
.pagina-cabecera__acciones { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------
   Rejillas
   --------------------------------------------------------- */
.rejilla        { display: grid; gap: 18px; }

/* Sin esto, un ítem de grilla no puede achicarse por debajo del ancho
   de su contenido: una tabla ancha estiraba la página entera en vez de
   dejar que su contenedor con scroll hiciera el trabajo. */
.rejilla > * { min-width: 0; }
.rejilla--kpi   { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.rejilla--2     { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla--2-1   { grid-template-columns: 2fr 1fr; }
.rejilla--1-2   { grid-template-columns: 1fr 2fr; }

@media (max-width: 1100px) {
    .rejilla--2-1, .rejilla--1-2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Tarjetas
   --------------------------------------------------------- */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.tarjeta__cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--linea-2);
}

.tarjeta__cabecera h2 { font-size: 15px; font-weight: 650; }
.tarjeta__cabecera p  { font-size: 12px; color: var(--texto-3); margin-top: 1px; }
.tarjeta__cabecera .derecha { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Tarjeta plegable (<details>) */
.tarjeta--plegable > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.tarjeta--plegable > summary::-webkit-details-marker { display: none; }
.tarjeta--plegable > summary:hover { background: #FBFCFE; border-radius: var(--radio) var(--radio) 0 0; }
.tarjeta--plegable:not([open]) > summary { border-bottom: 0; border-radius: var(--radio); }

.plegable__flecha {
    color: var(--texto-3);
    display: flex;
    transition: transform .18s ease;
}

.tarjeta--plegable[open] .plegable__flecha { transform: rotate(90deg); }

.tarjeta__cuerpo { padding: 20px; }
.tarjeta__cuerpo--plano { padding: 0; }
.tarjeta__pie {
    padding: 13px 20px;
    border-top: 1px solid var(--linea-2);
    background: #FBFCFE;
    border-radius: 0 0 var(--radio) var(--radio);
    font-size: 12.5px;
    color: var(--texto-2);
}

/* KPI */
.kpi {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 18px 20px;
    box-shadow: var(--sombra);
    position: relative;
    overflow: hidden;
}

.kpi__fila { display: flex; align-items: center; gap: 12px; }

.kpi__icono {
    width: 40px; height: 40px;
    border-radius: 11px;
    display: grid; place-items: center;
    flex: none;
}

.kpi__icono svg { width: 19px; height: 19px; }

.kpi__valor  { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.kpi__nombre { font-size: 12px; color: var(--texto-3); font-weight: 600;
               text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; }
.kpi__nota   { font-size: 12px; color: var(--texto-2); margin-top: 10px;
               padding-top: 10px; border-top: 1px dashed var(--linea); }

.kpi--riesgo { border-color: #FCA5A5; }
.kpi--riesgo::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--riesgo);
}

/* ---------------------------------------------------------
   Insignias y chips
   --------------------------------------------------------- */
.insignia {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
}

.insignia::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.insignia--ok     { background: var(--ok-bg);     color: var(--ok); }
.insignia--aviso  { background: var(--aviso-bg);  color: var(--aviso); }
.insignia--riesgo { background: var(--riesgo-bg); color: var(--riesgo); }
.insignia--info   { background: var(--info-bg);   color: var(--info); }
.insignia--neutro { background: var(--linea-2);   color: var(--texto-2); }
.insignia--lisa::before { display: none; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--linea);
    border-radius: 20px;
    font-size: 12px;
    color: var(--texto-2);
    background: #fff;
}

.chip__punto { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.chip--enlace:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; }
.chip--activo { background: var(--marca-700); border-color: var(--marca-700); color: #fff; }
.chip--activo:hover { color: #fff; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }

/* ---------------------------------------------------------
   Botones
   --------------------------------------------------------- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--radio-sm);
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
    white-space: nowrap;
}

.boton:hover  { text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton svg    { width: 16px; height: 16px; }

.boton--primario {
    background: var(--marca-700);
    color: #fff;
    box-shadow: 0 1px 2px rgba(23, 59, 103, .3);
}
.boton--primario:hover { background: var(--marca-600); color: #fff; }

.boton--acento { background: var(--acento); color: #fff; }
.boton--acento:hover { background: #1D4ED8; color: #fff; }

.boton--suave {
    background: #fff;
    border-color: var(--linea);
    color: var(--texto-2);
}
.boton--suave:hover { border-color: #CBD5E1; background: #FBFCFE; color: var(--texto); }

.boton--peligro { background: #fff; border-color: #FCA5A5; color: var(--riesgo); }
.boton--peligro:hover { background: var(--riesgo-bg); color: var(--riesgo); }

.boton--sm    { padding: 6px 11px; font-size: 12.5px; }
.boton--ancho { width: 100%; }

/* ---------------------------------------------------------
   Formularios
   --------------------------------------------------------- */
.campo { margin-bottom: 16px; }

.campo label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto-2);
    margin-bottom: 6px;
}

.campo label .req { color: var(--riesgo); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="date"],
.campo input[type="search"],
.campo select,
.campo textarea,
.control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: #fff;
    color: var(--texto);
    font-size: 13.5px;
    line-height: 1.45;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.campo textarea { min-height: 96px; resize: vertical; }

.campo input:hover, .campo select:hover, .campo textarea:hover,
.control:hover { border-color: #CBD5E1; }

.campo input:focus, .campo select:focus, .campo textarea:focus,
.control:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.campo .ayuda { font-size: 12px; color: var(--texto-3); margin-top: 5px; }

/* ---------------------------------------------------------
   Desplegables
   Se reemplaza la flecha del sistema operativo por una propia
   para que se vean igual en Windows, Mac y Linux.
   --------------------------------------------------------- */
select,
.campo select,
select.control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 15px 15px;
}

select:hover  { background-color: #FBFCFE; }

select:focus {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-color: #fff;
}

select:disabled {
    background-color: var(--linea-2);
    color: var(--texto-3);
    cursor: not-allowed;
}

select option { color: var(--texto); background: #fff; padding: 6px; }

/* ---------------------------------------------------------
   Desplegable propio (reemplaza al panel del sistema)
   El <select> real sigue en el formulario, escondido: si el
   JS no carga, el navegador muestra el control nativo.
   --------------------------------------------------------- */
.selector { position: relative; width: 100%; }
.selector--auto { width: auto; }

/* El select real queda en el formulario pero fuera de la vista.
   La especificidad tiene que ganarle a `select.control--sm`, que
   aparece más abajo en esta misma hoja. */
.selector > select.selector__nativo,
.selector__nativo {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.selector__control {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: #fff;
    color: var(--texto);
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.selector__control:hover { border-color: #CBD5E1; background: #FBFCFE; }

.selector__control:focus-visible,
.selector--abierto .selector__control {
    outline: none;
    background: #fff;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.selector__control:disabled {
    background: var(--linea-2);
    color: var(--texto-3);
    cursor: not-allowed;
}

.selector__valor {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selector__flecha {
    display: flex;
    flex: none;
    color: var(--texto-3);
    transition: transform .18s ease, color .18s;
}

.selector--abierto .selector__flecha { transform: rotate(180deg); color: var(--acento); }

.selector--sm .selector__control {
    height: 38px;
    padding: 0 11px;
    font-size: 13px;
    min-width: 152px;
}

/* Panel desplegado */
.selector__panel {
    position: fixed;
    z-index: 80;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 12px;
    box-shadow: var(--sombra-alta);
    max-height: 320px;
    overflow-y: auto;
    animation: panelAparece .13s ease;
}

@keyframes panelAparece {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}

.selector__panel::-webkit-scrollbar { width: 9px; }
.selector__panel::-webkit-scrollbar-thumb {
    background: #D9E1EC;
    border: 3px solid #fff;
    border-radius: 9px;
}

.selector__opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--texto-2);
    cursor: pointer;
    white-space: nowrap;
}

.selector__opcion .selector__texto {
    overflow: hidden;
    text-overflow: ellipsis;
}

.selector__opcion:hover,
.selector__opcion.activa { background: var(--fondo); color: var(--texto); }

.selector__opcion[aria-selected="true"] {
    background: var(--acento-claro);
    color: var(--info);
    font-weight: 600;
}

.selector__opcion[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.selector__marca { display: flex; flex: none; width: 14px; opacity: 0; color: var(--acento); }
.selector__opcion[aria-selected="true"] .selector__marca { opacity: 1; }

/* ---------------------------------------------------------
   Selector de fecha propio
   --------------------------------------------------------- */
.fecha { position: relative; width: 100%; }

.fecha > input.fecha__nativo,
.fecha__nativo {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
}

.fecha__control {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: #fff;
    color: var(--texto);
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.fecha__control:hover { border-color: #CBD5E1; background: #FBFCFE; }

.fecha__control:focus-visible,
.fecha--abierta .fecha__control {
    outline: none;
    background: #fff;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.fecha__valor { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fecha__valor--vacio { color: var(--texto-3); }

.fecha__icono { display: flex; flex: none; color: var(--texto-3); transition: color .15s; }
.fecha--abierta .fecha__icono { color: var(--acento); }

/* Panel del calendario */
.calendarito {
    position: fixed;
    z-index: 80;
    width: 286px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 14px;
    box-shadow: var(--sombra-alta);
    animation: panelAparece .13s ease;
}

.calendarito__barra {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.calendarito__titulo {
    flex: 1;
    text-align: center;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--texto);
    text-transform: capitalize;
}

.calendarito__nav {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: #fff;
    color: var(--texto-2);
    cursor: pointer;
    flex: none;
    transition: border-color .15s, background .15s, color .15s;
}

.calendarito__nav:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-claro); }

.calendarito__dows,
.calendarito__dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendarito__dows {
    margin-bottom: 4px;
}

.calendarito__dows span {
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texto-3);
    padding: 4px 0;
}

.calendarito__dia {
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--texto);
    cursor: pointer;
    transition: background .12s, color .12s;
}

.calendarito__dia:hover:not(:disabled) { background: var(--fondo); }
.calendarito__dia--fuera { color: var(--texto-3); font-weight: 400; }
.calendarito__dia--hoy   { box-shadow: inset 0 0 0 1.5px var(--linea); font-weight: 700; }

.calendarito__dia--foco {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--acento);
}

.calendarito__dia--elegido,
.calendarito__dia--elegido:hover {
    background: var(--marca-700);
    color: #fff;
    font-weight: 650;
}

.calendarito__dia:disabled { opacity: .3; cursor: not-allowed; }

.calendarito__pie {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--linea-2);
}

.calendarito__accion {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto-2);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.calendarito__accion:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-claro); }

/* Desplegable compacto, para barras de filtros.
   La altura se fija para que quede al ras del buscador. */
select.control--sm {
    height: 38px;
    padding: 0 30px 0 11px;
    font-size: 13px;
    background-position: right 9px center;
    background-size: 14px 14px;
    width: auto;
    min-width: 152px;
}

.buscador input { height: 38px; }

/* Desplegable dentro de un formulario en línea (fila de checklist) */
.campo--linea { margin: 0; }

.campos-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 620px) { .campos-fila { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   Tablas
   --------------------------------------------------------- */
.tabla { width: 100%; border-collapse: collapse; }

.tabla thead th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--texto-3);
    padding: 11px 20px;
    background: #FBFCFE;
    border-bottom: 1px solid var(--linea);
    white-space: nowrap;
}

.tabla tbody td {
    padding: 13px 20px;
    border-bottom: 1px solid var(--linea-2);
    vertical-align: middle;
}

.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #FBFCFE; }

.tabla .celda-principal { font-weight: 600; color: var(--texto); }
.tabla .celda-sub       { font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.tabla .num             { text-align: right; font-variant-numeric: tabular-nums; }

.tabla-envoltorio { overflow-x: auto; }

.persona { display: flex; align-items: center; gap: 9px; }

/* ---------------------------------------------------------
   Barra de progreso
   --------------------------------------------------------- */
.progreso {
    height: 7px;
    background: var(--linea-2);
    border-radius: 20px;
    overflow: hidden;
}

.progreso__valor {
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #3B82F6, #2563EB);
    transition: width .4s ease;
}

.progreso--ok     .progreso__valor { background: linear-gradient(90deg, #34D399, #059669); }
.progreso--aviso  .progreso__valor { background: linear-gradient(90deg, #FBBF24, #D97706); }
.progreso--riesgo .progreso__valor { background: linear-gradient(90deg, #F87171, #DC2626); }

/* ---------------------------------------------------------
   Gráficos (SVG/CSS, sin librerías)
   --------------------------------------------------------- */
.barras {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 168px;
    padding-top: 8px;
}

.barras__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }

.barras__par {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

.barras__barra {
    width: 46%;
    max-width: 22px;
    border-radius: 5px 5px 0 0;
    min-height: 3px;
    transition: height .4s ease;
}

.barras__barra--a { background: linear-gradient(180deg, #93C5FD, #3B82F6); }
.barras__barra--b { background: linear-gradient(180deg, #6EE7B7, #059669); }

.barras__etiqueta { font-size: 11px; color: var(--texto-3); font-weight: 600; }

.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.dona { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dona svg { flex: none; }
.dona__centro-valor { font-size: 22px; font-weight: 700; fill: var(--texto); }
.dona__centro-nota  { font-size: 10px; fill: var(--texto-3); letter-spacing: .08em; }

/* ---------------------------------------------------------
   Listas de elementos
   --------------------------------------------------------- */
.lista { display: flex; flex-direction: column; }

.lista__item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--linea-2);
}

.lista__item:last-child { border-bottom: 0; }
.lista__item:hover { background: #FBFCFE; }

.lista__cuerpo   { min-width: 0; flex: 1; }
.lista__titulo   { font-weight: 600; font-size: 13.5px; }
.lista__meta     { font-size: 12px; color: var(--texto-3); margin-top: 3px;
                   display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lista__derecha  { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }

.marcador { width: 3px; align-self: stretch; border-radius: 3px; flex: none; }
.marcador--riesgo { background: var(--riesgo); }
.marcador--aviso  { background: #F59E0B; }
.marcador--ok     { background: var(--ok); }
.marcador--info   { background: var(--acento); }
.marcador--neutro { background: var(--linea); }

/* Línea de tiempo */
.tiempo { position: relative; padding-left: 22px; }
.tiempo::before {
    content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
    width: 2px; background: var(--linea);
}

.tiempo__item { position: relative; padding: 0 0 16px; }
.tiempo__item:last-child { padding-bottom: 0; }

.tiempo__punto {
    position: absolute; left: -21px; top: 4px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff; border: 2px solid var(--acento);
}

.tiempo__punto--nota { border-color: #F59E0B; }

.tiempo__texto { font-size: 13px; }
.tiempo__fecha { font-size: 11.5px; color: var(--texto-3); margin-top: 2px; }

/* Nota escrita a mano en la bitácora */
.nota {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #78350F;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.nota-form { border-bottom: 1px dashed var(--linea); padding-bottom: 18px; }

/* ---------------------------------------------------------
   Estado vacío
   --------------------------------------------------------- */
.vacio {
    text-align: center;
    padding: 40px 24px;
    color: var(--texto-3);
}

.vacio svg { width: 40px; height: 40px; opacity: .35; margin-bottom: 12px; }
.vacio h3  { font-size: 14.5px; color: var(--texto-2); margin-bottom: 4px; }
.vacio p   { font-size: 13px; max-width: 380px; margin: 0 auto; }

/* ---------------------------------------------------------
   Avisos
   --------------------------------------------------------- */
.aviso {
    display: flex;
    gap: 11px;
    padding: 13px 16px;
    border-radius: var(--radio-sm);
    font-size: 13px;
    border: 1px solid transparent;
    margin-bottom: 16px;
    align-items: flex-start;
}

.aviso svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.aviso strong { display: block; margin-bottom: 2px; }

.aviso--ok     { background: var(--ok-bg);     color: #065F46; border-color: #A7F3D0; }
.aviso--error  { background: var(--riesgo-bg); color: #991B1B; border-color: #FECACA; }
.aviso--aviso  { background: var(--aviso-bg);  color: #92400E; border-color: #FDE68A; }
.aviso--info   { background: var(--info-bg);   color: #1E40AF; border-color: #BFDBFE; }

/* Flash flotante */
.flashes {
    position: fixed;
    top: 82px; right: 24px;
    z-index: 60;
    display: flex; flex-direction: column; gap: 10px;
    max-width: 380px;
}

.flashes .aviso {
    margin: 0;
    box-shadow: var(--sombra-alta);
    animation: entrar .25s ease;
}

@keyframes entrar {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   Calendario
   --------------------------------------------------------- */
/* minmax(0, 1fr) y no 1fr: con `1fr` las columnas no pueden achicarse
   por debajo del texto de los eventos (que va en una sola línea), la
   grilla se sale de la tarjeta y el domingo queda cortado. */
.calendario {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--linea);
}

.calendario__dow {
    background: #FBFCFE;
    padding: 9px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--texto-3);
    text-align: center;
}

.calendario__celda {
    background: #fff;
    min-height: 116px;
    min-width: 0;          /* deja que los eventos se recorten con puntos suspensivos */
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendario__celda--fuera { background: #FAFBFD; }
.calendario__celda--hoy   { background: #F5F9FF; box-shadow: inset 0 0 0 2px var(--acento); }

.calendario__num {
    font-size: 12px;
    font-weight: 600;
    color: var(--texto-2);
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
}

.calendario__celda--hoy .calendario__num { background: var(--acento); color: #fff; }
.calendario__celda--fuera .calendario__num { color: var(--texto-3); font-weight: 500; }

.calendario__evento {
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--linea-2);
    color: var(--texto-2);
    border-left: 3px solid var(--texto-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.calendario__evento:hover { text-decoration: none; filter: brightness(.97); }
.calendario__evento--riesgo { background: var(--riesgo-bg); color: #991B1B; border-left-color: var(--riesgo); }
.calendario__evento--aviso  { background: var(--aviso-bg);  color: #92400E; border-left-color: #F59E0B; }
.calendario__evento--ok     { background: var(--ok-bg);     color: #065F46; border-left-color: var(--ok); }
.calendario__evento--info   { background: var(--info-bg);   color: #1E40AF; border-left-color: var(--acento); }

.calendario__mas { font-size: 10.5px; color: var(--texto-3); padding-left: 7px; }

/* ---------------------------------------------------------
   Login
   --------------------------------------------------------- */
.acceso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.acceso__lienzo {
    background:
        radial-gradient(1000px 520px at 12% 8%, rgba(59, 130, 246, .28), transparent 60%),
        radial-gradient(760px 420px at 88% 92%, rgba(16, 185, 129, .18), transparent 62%),
        linear-gradient(160deg, #0B1E38, #102A4C 55%, #16375E);
    color: #fff;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.acceso__lienzo::after {
    content: "";
    position: absolute;
    inset: auto -120px -160px auto;
    width: 420px; height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 0 0 60px rgba(255, 255, 255, .025);
}

.acceso__marca { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.acceso__eslogan { position: relative; z-index: 1; max-width: 420px; }
.acceso__eslogan h2 { color: #fff; font-size: 30px; line-height: 1.25; letter-spacing: -.02em; }
.acceso__eslogan p  { color: #A9C0DA; margin-top: 14px; font-size: 14.5px; line-height: 1.65; }

.acceso__puntos { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; }
.acceso__punto  { display: flex; gap: 10px; align-items: center; color: #C8D9EC; font-size: 13.5px; }
.acceso__punto svg { width: 17px; height: 17px; color: #60A5FA; flex: none; }

.acceso__pie { color: #5E7CA3; font-size: 12px; position: relative; z-index: 1; }

.acceso__panel {
    display: grid;
    place-items: center;
    padding: 40px 32px;
    background: var(--superficie);
}

.acceso__formulario { width: 100%; max-width: 372px; }
.acceso__formulario h1 { font-size: 25px; margin-bottom: 6px; }
.acceso__formulario > p { color: var(--texto-2); margin-bottom: 26px; font-size: 13.5px; }

.acceso__demo {
    margin-top: 22px;
    padding: 13px 15px;
    background: var(--fondo);
    border: 1px dashed var(--linea);
    border-radius: var(--radio-sm);
    font-size: 12.5px;
    color: var(--texto-2);
}

.acceso__demo b { color: var(--texto); }

@media (max-width: 940px) {
    .acceso { grid-template-columns: 1fr; }
    .acceso__lienzo { display: none; }
}

/* ---------------------------------------------------------
   Detalle
   --------------------------------------------------------- */
.datos-def { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.datos-def dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
                color: var(--texto-3); font-weight: 700; margin-bottom: 4px; }
.datos-def dd { margin: 0; font-size: 13.5px; font-weight: 500; }

/* Barra de consumo del plazo */
.plazo__extremos {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
    font-size: 12.5px;
}

.plazo__extremos b { display: block; font-weight: 650; }
.plazo__extremos .silencio { font-size: 11px; }
.plazo__nota { font-size: 12px; color: var(--texto-3); margin-top: 8px; }

/* Instrucciones de la tarea */
.instrucciones {
    background: #FAFBFD;
    border: 1px solid var(--linea-2);
    border-radius: var(--radio-sm);
    padding: 14px 16px;
}

.instrucciones__rotulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--texto-3);
    margin-bottom: 7px;
}

.instrucciones p { font-size: 13.5px; line-height: 1.7; color: var(--texto-2); }

.checklist__item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--linea-2);
}
.checklist__item:last-child { border-bottom: 0; }

.checklist__caja {
    width: 20px; height: 20px; border-radius: 6px;
    border: 1.8px solid var(--linea); background: #fff;
    display: grid; place-items: center; cursor: pointer; flex: none;
    transition: background .15s, border-color .15s;
}
.checklist__caja svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.checklist__caja--ok { background: var(--ok); border-color: var(--ok); }
.checklist__caja--ok svg { opacity: 1; }
.checklist__item--ok .checklist__nombre { color: var(--texto-3); text-decoration: line-through; }

/* ---------------------------------------------------------
   Utilidades
   --------------------------------------------------------- */
.apilar    { display: flex; flex-direction: column; gap: 18px; }
.apilar-sm { display: flex; flex-direction: column; gap: 9px; }
.fila      { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.empujar   { margin-left: auto; }
.mt-0 { margin-top: 0 } .mt-1 { margin-top: 8px } .mt-2 { margin-top: 16px } .mt-3 { margin-top: 24px }
.mb-0 { margin-bottom: 0 } .mb-2 { margin-bottom: 16px } .mb-3 { margin-bottom: 24px }
.silencio  { color: var(--texto-3); font-size: 12.5px; }
.pequeno   { font-size: 12px; }
.negrita   { font-weight: 650; }
.centrado  { text-align: center; }
.oculto    { display: none !important; }
.nowrap    { white-space: nowrap; }

/* ---------------------------------------------------------
   Responsivo
   --------------------------------------------------------- */
/* El buscador del topbar es lo primero que se sacrifica al angostar */
@media (max-width: 1240px) {
    .buscador { width: 190px; }
}

@media (max-width: 1140px) {
    .topbar .buscador { display: none; }
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: var(--sombra-alta);
    }
    .sidebar.abierta { transform: none; }
    .contenido { margin-left: 0; }
    .menu-movil { display: inline-flex; }
    .topbar { padding: 0 18px; }
    .lienzo { padding: 20px 18px 40px; }
    .buscador { display: none; }

    .velo {
        position: fixed; inset: 0;
        background: rgba(11, 30, 56, .5);
        z-index: 35;
    }
}

@media (max-width: 700px) {
    .usuario-chip__nombre, .usuario-chip__rol { display: none; }
    .usuario-chip { border: 0; padding: 0; }
    .calendario__celda { min-height: 74px; }
    .calendario__evento { display: none; }
    .pagina-cabecera h1 { font-size: 20px; }
}

@media print {
    .sidebar, .topbar, .pagina-cabecera__acciones, .flashes { display: none !important; }
    .contenido { margin-left: 0; }
    .tarjeta { box-shadow: none; }
}