/* =========================================================
   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;
    --bloqueo:    #6B21A8;
    --bloqueo-bg: #F3E8FF;
    --estancada:    #92400E;
    --estancada-bg: #FEF3C7;

    /* 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: 224px;
    --topbar:  56px;
}

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

/* El atributo hidden siempre oculta, aunque el elemento tenga
   display propio (ej. .modal{display:grid}). Sin esto, un modal
   con hidden queda invisible pero encima de todo y bloquea los clics. */
[hidden] { display: none !important; }

html, body { height: 100%; }

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

/* -----------------------------------------------------------
   Barras de desplazamiento finas (reemplazan las del sistema).
   El truco del borde transparente + background-clip deja el
   pulgar angosto y redondeado, con aire alrededor.
   ----------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .4) transparent; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .32);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, .55);
    background-clip: padding-box;
}

/* Barra lateral (fondo oscuro): pulgar claro translúcido */
.sidebar__nav { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.sidebar__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border: 3px solid transparent;
    background-clip: padding-box;
}
.sidebar__nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .30);
    background-clip: padding-box;
}


body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 12.5px;
    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: 20px 24px 38px;
    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: 10px;
    padding: 7px 10px;
    border-radius: var(--radio-sm);
    color: #B6C8DE;
    font-size: 12.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;
}

/* ---------------------------------------------------------
   Módulos colapsables del sidebar (Gestiones / Mi Espacio)
   --------------------------------------------------------- */
.nav__modulo { margin-bottom: 4px; }
.nav__modulo + .nav__modulo { margin-top: 2px; }

.nav__modulo-cab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radio-sm);
    color: #E7EFF9;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .15s;
}
.nav__modulo-cab::-webkit-details-marker { display: none; }
.nav__modulo-cab:hover { background: rgba(255, 255, 255, .06); }
.nav__modulo-cab > span { flex: 1; }
.nav__modulo-cab > svg { width: 17px; height: 17px; flex: none; opacity: .95; }
/* La flecha final gira al abrir */
.nav__modulo-cab > svg:last-child {
    width: 13px; height: 13px; opacity: .6;
    transition: transform .18s;
}
.nav__modulo[open] > .nav__modulo-cab > svg:last-child { transform: rotate(90deg); }

.nav__modulo-cuerpo {
    padding-left: 8px;
    margin-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, .07);
}
/* El primer rótulo de grupo pegado a la cabecera se ve mejor con menos aire */
.nav__modulo-cuerpo > .nav__grupo:first-child { padding-top: 8px; }

/* ---------------------------------------------------------
   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: 15px; font-weight: 650;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__migaja   { font-size: 11.5px; 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; }

/* Cambiador rápido de usuario (solo modo prueba) */
.cambiador { position: relative; }
.cambiador > summary { list-style: none; cursor: pointer; user-select: none; }
.cambiador > summary::-webkit-details-marker { display: none; }
.usuario-chip--boton { transition: border-color .15s, box-shadow .15s; }
.usuario-chip--boton:hover { border-color: var(--acento, #93C5FD); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.cambiador[open] > summary .usuario-chip__nombre svg,
.cambiador > summary svg { color: var(--texto-3); }
.cambiador__tag {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #92400E; background: #FEF3C7; padding: 1px 5px; border-radius: 6px; vertical-align: 1px;
}
.cambiador__panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
    width: 268px; padding: 8px;
    background: #fff; border: 1px solid var(--linea); border-radius: 14px;
    box-shadow: var(--sombra-alta, 0 12px 32px rgba(15,23,42,.16));
}
.cambiador__titulo {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--texto-3); padding: 4px 8px 8px;
}
.cambiador__item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 8px; border-radius: 9px; text-decoration: none; color: var(--texto);
}
.cambiador__item:hover { background: var(--fondo); }
.cambiador__item.es-activo { background: var(--info-bg); }
.cambiador__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cambiador__nombre { font-size: 13px; font-weight: 600; line-height: 1.2; }
.cambiador__rol { font-size: 11px; color: var(--texto-3); line-height: 1.2; }
.cambiador__item svg { color: var(--ok); flex: none; }
.cambiador__salir {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px; padding: 8px; border-top: 1px solid var(--linea);
    font-size: 12.5px; color: var(--texto-2); text-decoration: none;
}
.cambiador__salir:hover { color: var(--riesgo); }
.cambiador__salir svg { flex: none; }

.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: 20px; }
.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: 14px; }

/* 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(184px, 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: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--linea-2);
    flex-wrap: wrap;
    row-gap: 6px;
}

.tarjeta__cabecera h2 { font-size: 13.5px; 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; flex-wrap: wrap; }

/* 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: 16px; }
.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: 14px 16px;
    box-shadow: var(--sombra);
    position: relative;
    overflow: hidden;
}

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

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

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

.kpi__valor  { font-size: 25px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.kpi__nombre { font-size: 11px; color: var(--texto-3); font-weight: 600;
               text-transform: uppercase; letter-spacing: .07em; margin-top: 3px; }
.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--bloqueada { background: var(--bloqueo-bg);    color: var(--bloqueo); }
.insignia--estancada { background: var(--estancada-bg);  color: var(--estancada); }
.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: 8px 13px;
    border-radius: var(--radio-sm);
    border: 1px solid transparent;
    font-size: 12.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: 8px 11px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: #fff;
    color: var(--texto);
    font-size: 12.5px;
    line-height: 1.45;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.campo textarea { min-height: 84px; 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: 8px 11px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: #fff;
    color: var(--texto);
    font-size: 12.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: 8px 11px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: #fff;
    color: var(--texto);
    font-size: 12.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; }

/* Días intermedios de un rango (desde–hasta) */
.calendarito__dia--rango { background: var(--acento-claro); color: var(--marca-600); border-radius: 6px; }

.calendarito__hint { flex: 1; font-size: 11px; color: var(--texto-3); align-self: center; }

/* Grilla de meses (selector de período, input type="month") */
.calendarito__meses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 4px;
}

.calendarito__mes {
    border: 0;
    background: none;
    border-radius: 9px;
    padding: 11px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
    text-transform: capitalize;
    cursor: pointer;
    transition: background .12s;
}

.calendarito__mes:hover { background: var(--fondo); }

.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); }

/* ---------------------------------------------------------
   Selector de archivo moderno (reemplaza el input file nativo)
   --------------------------------------------------------- */
.archivo-sel { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; flex-wrap: wrap; }

.archivo-sel__boton {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--linea); background: var(--superficie); color: var(--texto);
    border-radius: 10px; padding: 9px 15px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.archivo-sel__boton:hover { border-color: #CBD5E1; background: #FBFCFE; }
.archivo-sel__boton:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro); }
.archivo-sel__boton svg { color: var(--texto-3); }

/* El input real queda accesible pero invisible; el clic en el label lo dispara. */
.archivo-sel__nativo { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.archivo-sel__nombre {
    font-size: 13px; color: var(--texto-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.archivo-sel__nombre--vacio { color: var(--texto-3); }

/* 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;
    max-width: 100%;
}

.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: 9px 16px;
    background: #FBFCFE;
    border-bottom: 1px solid var(--linea);
    white-space: nowrap;
}

.tabla tbody td {
    padding: 10px 16px;
    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; white-space: nowrap; }

/* Una palabra larga (URL/token/correo) no debe empujar el ancho de la columna. */
/* break-word (no "anywhere"): parte URLs/tokens larguísimos solo si no caben,
   pero nunca palabras normales como "Administrador" a mitad. */
.tabla tbody td { overflow-wrap: break-word; }

/* Scroll horizontal CON señal visible (sombra que aparece si hay más a los lados)
   para que la última columna no se lea como "cortada". */
.tabla-envoltorio {
    overflow-x: auto;
    overflow-y: hidden;
    background:
        linear-gradient(to right, var(--superficie), rgba(255, 255, 255, 0)) 0 0 / 28px 100% no-repeat,
        linear-gradient(to left,  var(--superficie), rgba(255, 255, 255, 0)) 100% 0 / 28px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%,   rgba(15, 23, 42, .14), rgba(0, 0, 0, 0)) 0 0 / 14px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .14), rgba(0, 0, 0, 0)) 100% 0 / 14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* Columna de acciones SIEMPRE visible, fija a la derecha (arregla el corte del
   ícono de borrar en tablas anchas como Proyectos). */
.tabla th.acciones, .tabla td.acciones {
    position: sticky;
    right: 0;
    background: var(--superficie);
    white-space: nowrap;
    box-shadow: -10px 0 10px -10px rgba(15, 23, 42, .18);
}
.tabla thead th.acciones { background: #FBFCFE; }
.tabla tbody tr:hover td.acciones { background: #FBFCFE; }

/* Variante para tablas con menús/popover que NO deben recortarse (ej. Equipo). */
.tabla-envoltorio--libre { overflow: visible; background: none; }
@media (max-width: 720px) { .tabla-envoltorio--libre { overflow-x: auto; } }

/* Un <input type=file> no respeta el ancho del contenedor por defecto. */
input[type="file"] { max-width: 100%; box-sizing: border-box; }

.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; }

/* ---------------------------------------------------------
   Kanban (Desarrollo)
   --------------------------------------------------------- */
.kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    align-items: start;
}

.kanban__col {
    background: #E9EEF5;
    border: 1px solid #D3DCE8;
    border-radius: var(--radio);
    display: flex;
    flex-direction: column;
    min-height: 140px;
}

.kanban__cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid #D3DCE8;
    background: #DFE6F0;
    border-radius: var(--radio) var(--radio) 0 0;
}

.kanban__nombre { font-size: 13px; font-weight: 650; }
.kanban__num {
    margin-left: auto;
    font-size: 11px; font-weight: 700;
    color: var(--texto-3);
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 20px;
    padding: 1px 8px;
}

.kanban__punto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kanban__punto--backlog     { background: #94A3B8; }
.kanban__punto--por_hacer   { background: #6366F1; }
.kanban__punto--en_progreso { background: #2563EB; }
.kanban__punto--en_revision { background: #F59E0B; }
.kanban__punto--hecho       { background: #059669; }

.kanban__lista {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    min-height: 40px;
    transition: background .15s;
}

.kanban__lista.kanban__lista--sobre {
    background: var(--acento-claro);
    border-radius: 10px;
    outline: 2px dashed var(--acento);
    outline-offset: -6px;
}

.kancard {
    position: relative;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 11px;
    padding: 11px 12px 11px 24px;
    box-shadow: var(--sombra);
    cursor: grab;
    transition: box-shadow .15s, border-color .15s, transform .05s;
}

.kancard:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
}
.kancard:active { cursor: grabbing; }
.kancard.kancard--arrastrando { opacity: .4; box-shadow: none; }

/* Franja de prioridad al costado izquierdo */
.kancard::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 11px 0 0 11px;
    background: var(--linea);
}
.kancard--riesgo::before { background: var(--riesgo); }
.kancard--aviso::before  { background: #F59E0B; }
.kancard--neutro::before { background: #CBD5E1; }

/* Tarjeta atrasada: salta a la vista */
.kancard--atrasada {
    border-color: #FCA5A5;
    background: linear-gradient(#fff, #fff) padding-box,
               linear-gradient(90deg, #FEF2F2, #fff 60%) border-box;
    background: #FFF7F7;
}
.kancard--atrasada::before { background: var(--riesgo); }

.kancard__flag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
    color: #fff; background: var(--riesgo);
    padding: 1px 7px 1px 6px; border-radius: 0 8px 0 8px;
    position: absolute; top: 0; right: 0;
}
.kancard__flag--bloqueada { background: var(--bloqueo); }   /* morado = bloqueada */
.kancard__flag--estancada { background: var(--estancada); } /* ámbar = estancada */

.kancard--bloqueada { background: #FAF5FF; }
.kancard--bloqueada::before { background: var(--bloqueo); }
.kancard--estancada { background: #FFFBEB; }
.kancard--estancada::before { background: var(--estancada); }

.kancard__enetapa { padding: 1px 7px; gap: 4px; color: var(--info); background: var(--info-bg); border-color: transparent; }
.kancard__enetapa svg { color: var(--info); }

/* Tarjeta completada (columna Hecho): sello de logrado */
.kancard--hecho {
    background: #F5FDF9;
    border-color: #A7F3D0;
    padding-right: 34px;
}
.kancard--hecho::before { background: var(--ok); }
.kancard--hecho .kancard__titulo { color: var(--texto-2); }

.kancard__logro {
    position: absolute; top: 9px; right: 9px;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    background: var(--ok); color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(5, 150, 105, .45);
}

.kancard__grip {
    position: absolute; left: 8px; top: 11px;
    color: #CBD5E1; font-size: 11px; line-height: 1; letter-spacing: -1px;
    user-select: none; cursor: grab;
}

.kancard__titulo { display: block; font-size: 13px; font-weight: 600; color: var(--texto); line-height: 1.35; }
.kancard__titulo:hover { color: var(--acento); text-decoration: none; }

.kancard__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kancard__est { padding: 1px 7px; gap: 4px; color: var(--texto-2); }
.kancard__est svg { color: var(--texto-3); }

.kancard__pie {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; padding-top: 9px;
    border-top: 1px solid var(--linea-2);
}

.kancard__proyecto {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--texto-2); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kancard__pie .avatar,
.kancard__sinasignar { margin-left: auto; }
.kancard__sinasignar {
    width: 26px; height: 26px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px dashed var(--linea);
    color: var(--texto-3);
}

/* Placeholder de columna vacía (solo visible si no hay tarjetas) */
.kanban__vacia {
    margin: 0; padding: 14px 8px;
    text-align: center;
    font-size: 12px;
    color: var(--texto-3);
    border: 1px dashed var(--linea);
    border-radius: 9px;
    background: rgba(255, 255, 255, .5);
}
.kancard ~ .kanban__vacia { display: none; }
.kanban__lista--sobre .kanban__vacia { border-color: var(--acento); color: var(--acento); }

.kanban__agregar { padding: 8px 10px 12px; }
.kanban__agregar input {
    width: 100%;
    padding: 8px 11px;
    border: 1px dashed var(--linea);
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.kanban__agregar input:focus { border-style: solid; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* Control segmentado (cambia de vista) */
.segmentado {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 9px;
    padding: 2px;
    gap: 2px;
}
.segmentado__op {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 12.5px; font-weight: 600;
    color: var(--texto-2);
    white-space: nowrap;
}
.segmentado__op:hover { color: var(--texto); text-decoration: none; background: var(--fondo); }
.segmentado__op.activo { background: var(--marca-700); color: #fff; }
.segmentado__op.activo:hover { background: var(--marca-700); }

.filtros__sep { width: 1px; align-self: stretch; background: var(--linea); margin: 0 4px; }

/* Fila de filtros rápidos */
.filtros--rapidos { margin-top: -8px; margin-bottom: 16px; }
.filtros__rotulo { font-size: 11.5px; color: var(--texto-3); font-weight: 700;
                   text-transform: uppercase; letter-spacing: .06em; }

.chip--filtro { cursor: pointer; font: inherit; line-height: 1.5; }
.chip--filtro:hover { border-color: #CBD5E1; }
.chip--filtro.activo { background: var(--marca-700); border-color: var(--marca-700); color: #fff; }
.chip--atras { color: var(--riesgo); border-color: #FCA5A5; }
.chip--atras:hover { background: var(--riesgo-bg); }
.chip--atras.activo { background: var(--riesgo); border-color: var(--riesgo); color: #fff; }
.chip--atras.activo svg { color: #fff; }

/* Buscador del tablero */
.buscador--kanban { display: block; width: 236px; }
.buscador--kanban input { height: 34px; padding-right: 62px; }

.buscador__cuenta {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    font-size: 11px; font-weight: 700; color: var(--texto-3);
    background: var(--linea-2); border-radius: 20px; padding: 2px 8px;
    pointer-events: none; white-space: nowrap;
}
.buscador__cuenta--vacio { color: var(--riesgo); background: var(--riesgo-bg); }

.kancard--oculta { display: none !important; }
.carril--sin-coincidencias { opacity: .5; }

/* ---------------------------------------------------------
   Modal (diálogo centrado)
   --------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding: 20px; overflow: auto; }

.modal__velo {
    position: absolute; inset: 0;
    background: rgba(11, 30, 56, .55);
    animation: entrar .15s ease;
}

.modal__caja {
    position: relative; z-index: 1;
    width: 100%; max-width: 448px;
    margin: auto;
    max-height: calc(100vh - 40px);
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--sombra-alta);
    animation: panelAparece .16s ease;
}

.modal__icono {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--aviso-bg); color: var(--aviso);
    margin-bottom: 14px;
}

.modal__caja h3 { font-size: 18px; margin-bottom: 6px; }
.modal__texto { color: var(--texto-2); font-size: 13.5px; line-height: 1.6; margin-bottom: 18px; }
.modal__acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.campo--error,
.campo select.campo--error {
    border-color: var(--riesgo) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}

/* Histograma de actividad por hora del día (Productividad) */
.horas-dia {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 150px;
    padding-bottom: 18px;
}
.horas-dia__col {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}
.horas-dia__barra {
    width: 62%;
    max-width: 18px;
    border-radius: 4px 4px 0 0;
    min-height: 0;
    transition: height .4s ease;
}
.horas-dia__barra.es-jornada { background: linear-gradient(180deg, #6EE7B7, #059669); }
.horas-dia__barra.es-fuera   { background: linear-gradient(180deg, #FCD34D, #F59E0B); }
.horas-dia__hora {
    position: absolute; bottom: -17px;
    font-size: 10px; color: var(--texto-3);
    font-variant-numeric: tabular-nums;
}

/* Carril / swimlane (vista por proyecto) */
.carril {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.carril__cab {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--linea-2);
    border-left: 3px solid var(--linea);
    background: #FBFCFE;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.carril__cab::-webkit-details-marker { display: none; }
.carril__cab:hover { background: #F4F7FB; }
.carril:not([open]) .carril__cab { border-bottom: 0; }

.carril__chevron {
    display: flex; flex: none;
    color: var(--texto-3);
    transition: transform .18s ease;
}
.carril[open] .carril__chevron { transform: rotate(90deg); }

/* El display:grid del tablero le gana al ocultado nativo del <details>,
   así que el plegado se fuerza aquí. */
.carril:not([open]) .kanban--carril { display: none; }

.carril__punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.carril__id { min-width: 0; }
.carril__nombre { font-size: 14px; font-weight: 650; color: var(--texto); }
a.carril__nombre:hover { color: var(--acento); text-decoration: none; }
.carril__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.carril__barra { margin-left: auto; width: 180px; flex: none; }

.kanban--carril {
    padding: 14px;
    grid-auto-columns: minmax(210px, 1fr);
    gap: 12px;
}
.kanban--carril .kanban__col { background: #F7F9FC; }
.kanban--carril .kanban__lista { min-height: 30px; }

@media (max-width: 760px) {
    .carril__barra { display: none; }
}

/* ---------------------------------------------------------
   Gantt (Cronograma)
   --------------------------------------------------------- */
.gantt { min-width: 640px; }

.gantt__cabecera { display: flex; border-bottom: 1px solid var(--linea); }
.gantt__etiqueta-col { width: 240px; flex: none; }
.gantt__pista { position: relative; flex: 1; height: 30px; }

.gantt__mes {
    position: absolute; top: 8px;
    font-size: 11px; font-weight: 600; color: var(--texto-3);
    transform: translateX(2px);
    border-left: 1px solid var(--linea);
    padding-left: 6px; height: 22px;
}

.gantt__cuerpo { position: relative; }

.gantt__hoy {
    position: absolute; top: 0; bottom: 0;
    width: 2px; background: #F59E0B; z-index: 2;
}

.gantt__fila { display: flex; align-items: center; border-bottom: 1px solid var(--linea-2); min-height: 40px; }
.gantt__fila:last-child { border-bottom: 0; }
.gantt__fila--proyecto { background: #FBFCFE; }

.gantt__etiqueta {
    width: 240px; flex: none;
    padding: 8px 14px;
    font-size: 12.5px; color: var(--texto);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center;
}
.gantt__fila--proyecto .gantt__etiqueta { font-weight: 650; }
.gantt__sangria { width: 14px; flex: none; }

.gantt__pista { height: 40px; }

.gantt__barra {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 20px; min-width: 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    display: flex; align-items: center;
    padding: 0 7px; overflow: hidden;
}
.gantt__barra--proyecto { height: 14px; border-radius: 4px; }
.gantt__barra--vencida { outline: 2px solid var(--riesgo); outline-offset: 1px; }
.gantt__barra:hover { filter: brightness(.97); text-decoration: none; }

.gantt__barra-texto { font-size: 10.5px; color: var(--texto-2); white-space: nowrap; }
.gantt__barra--proyecto .gantt__barra-texto { color: rgba(255,255,255,.9); }

/* ---------------------------------------------------------
   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; }
}

/* --------------------------------------------------
   Horas extra (aprobación previa)
-------------------------------------------------- */
.aviso-info {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--radio);
    background: var(--info-bg); color: var(--texto-2);
    font-size: 12.5px; line-height: 1.5;
}
.aviso-info svg { flex: none; color: var(--info); margin-top: 1px; }

.solicitud {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 14px;
    background: var(--superficie);
    display: flex; flex-direction: column; gap: 10px;
}
.solicitud__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.solicitud__datos { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.solicitud__datos svg { vertical-align: -2px; }
.solicitud__motivo {
    font-size: 13px; color: var(--texto);
    background: var(--fondo); border-radius: var(--radio-sm);
    padding: 8px 10px;
}
.solicitud__acciones { display: flex; flex-direction: column; gap: 8px; }

.campo__ayuda { margin: 6px 0 0; font-size: 11.5px; color: var(--texto-3); line-height: 1.45; }

/* Comentarios de tarjeta */
.comentario { display: flex; gap: 10px; }
.comentario__cuerpo { flex: 1; min-width: 0; }
.comentario__cab { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.comentario__texto {
    font-size: 13px; color: var(--texto); line-height: 1.5;
    background: var(--fondo); border-radius: 10px; padding: 8px 11px;
}
.comentario-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.comentario-form textarea { width: 100%; }

/* Votaciones / alternativas */
.alternativas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.alt { border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: var(--superficie); display: flex; flex-direction: column; }
.alt--ganadora { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-bg); }
.alt--mivoto   { border-color: var(--acento); }
.alt__media { position: relative; background: #0B1E38; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.alt__media img, .alt__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.alt__corona { position: absolute; top: 8px; left: 8px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 8px; }
.alt__cuerpo { padding: 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Word-break en cuerpos de texto libre (URLs/tokens largos no deben desbordar) */
.comentario__texto, .alt__nota, .solicitud__motivo, .kancard__titulo,
.alt__cuerpo b, .celda-principal, .celda-sub { overflow-wrap: break-word; }

/* El flag de estado no debe tapar la 1ª línea del título en la tarjeta Kanban */
.kancard--bloqueada .kancard__titulo,
.kancard--atrasada  .kancard__titulo,
.kancard--estancada .kancard__titulo { padding-right: 94px; }

/* Chips de persona: que el nombre encoja y trunque en vez de empujar */
.persona { min-width: 0; }
.persona .nowrap { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Hitos: checkbox de cumplido y filas tenues */
.chk {
    width: 20px; height: 20px; padding: 0; cursor: pointer;
    display: grid; place-items: center;
    border: 1.5px solid var(--linea-2, #CBD5E1); border-radius: 6px;
    background: #fff; color: #fff;
}
.chk:hover { border-color: var(--ok); }
.chk--on { background: var(--ok); border-color: var(--ok); }
.fila--tenue { opacity: .6; }
.tachado { text-decoration: line-through; color: var(--texto-3); }

/* Desarrollo en un vistazo (portada) */
.vistazo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vistazo-stat {
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--linea); background: var(--fondo);
    text-decoration: none; color: var(--texto); transition: border-color .15s, background .15s;
}
.vistazo-stat:hover { border-color: var(--acento, #93C5FD); background: #fff; }
.vistazo-stat__num { font-size: 24px; font-weight: 800; line-height: 1; }
.vistazo-stat__lbl { font-size: 11.5px; color: var(--texto-3); }
.vistazo-stat.es-riesgo .vistazo-stat__num { color: var(--riesgo); }
.vistazo-stat.es-aviso  .vistazo-stat__num { color: #B45309; }