/* ==========================================================================
   Marketing Espoch — hoja base
   Regla: colores, tipografías, tamaños y radios SOLO desde los tokens de :root.
   Los verificadores marcan cualquier valor fuera de esta paleta/escala.
   ========================================================================== */

:root {
    /* Superficies */
    --c-papel: #F3F2F2;
    --c-superficie: #FFFFFF;
    --c-hundido: #EAE8E8;
    --c-linea: #DEDADA;
    --c-linea-fuerte: #C6C0C0;
    --c-borde-control: #8C8586; /* ≥ 3:1 contra superficie y papel (WCAG 1.4.11) */

    /* Texto */
    --c-tinta: #1C1A1B;
    --c-tinta-2: #4F494A;
    --c-tinta-3: #5F5859;
    --c-sobre-acento: #FFFFFF;

    /* Marca */
    --c-acento: #9C020A;
    --c-acento-hover: #7C0208;
    --c-acento-suave: #F7E3E5;
    --c-foco: #1F5FA8;

    /* Estados del flujo */
    --c-por-hacer: #5F5859;
    --c-por-hacer-suave: #E8E5E5;
    --c-en-proceso: #1F5FA8;
    --c-en-proceso-suave: #DFE9F5;
    --c-en-revision: #875800;
    --c-en-revision-suave: #F6EAD0;
    --c-aprobado: #2A6B45;
    --c-aprobado-suave: #DDEEE3;
    --c-publicado: #4B3A78;
    --c-publicado-suave: #E7E2F2;

    /* Avisos */
    --c-exito: #2A6B45;
    --c-exito-suave: #DDEEE3;
    --c-alerta: #875800;
    --c-alerta-suave: #F6EAD0;
    --c-peligro: #9E1B14;
    --c-peligro-suave: #F7DEDA;
    --c-info: #1F5FA8;
    --c-info-suave: #DFE9F5;

    /* Avatares (texto blanco sobre cada uno, contraste ≥ 4.5) */
    --c-avatar-1: #9C020A;
    --c-avatar-2: #1F5FA8;
    --c-avatar-3: #2A6B45;
    --c-avatar-4: #4B3A78;
    --c-avatar-5: #875800;
    --c-avatar-6: #3F4A54;

    --c-velo: rgba(28, 26, 27, 0.5);
    --sombra-1: 0 1px 2px rgba(30, 28, 25, 0.06);
    --sombra-2: 0 8px 24px rgba(30, 28, 25, 0.14);

    /* Tipografía */
    --f-texto: "Schibsted Grotesk", system-ui, sans-serif;
    --f-titulo: "League Spartan", "Schibsted Grotesk", system-ui, sans-serif;
    --t-xs: 0.75rem;     /* 12 */
    --t-sm: 0.8125rem;   /* 13 */
    --t-base: 0.9375rem; /* 15 */
    --t-md: 1.0625rem;   /* 17 */
    --t-lg: 1.25rem;     /* 20 */
    --t-xl: 1.625rem;    /* 26 */
    --t-2xl: 2.125rem;   /* 34 */

    /* Espacio (múltiplos de 4) */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 20px;
    --e-6: 24px;
    --e-8: 32px;
    --e-10: 40px;
    --e-12: 48px;

    --r-1: 4px;
    --r-2: 6px;
    --r-3: 10px;
    --r-redondo: 999px;

    --control-alto: 40px;
    --control-alto-sm: 32px;
    --ancho-lateral: 248px;
    --alto-superior: 56px;
    --ancho-columna: 284px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--f-texto);
    font-size: var(--t-base);
    line-height: 1.5;
    color: var(--c-tinta);
    background: var(--c-papel);
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--c-acento); text-underline-offset: 3px; }
a:hover { color: var(--c-acento-hover); }

:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }

::selection { background: var(--c-acento-suave); color: var(--c-tinta); }

.icono { width: 20px; height: 20px; flex: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
    position: absolute; left: var(--e-4); top: -100px; z-index: 100;
    padding: var(--e-2) var(--e-4); background: var(--c-tinta); color: var(--c-superficie);
    border-radius: var(--r-2); font-weight: 600;
}
.saltar:focus { top: var(--e-2); color: var(--c-superficie); }

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */

.titulo-pagina {
    font-family: var(--f-titulo); font-variant-numeric: lining-nums;
    font-weight: 700;
    font-size: var(--t-xl);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
@media (min-width: 768px) { .titulo-pagina { font-size: var(--t-2xl); } }

.titulo-seccion { font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 700; line-height: 1.3; }
.titulo-bloque { font-size: var(--t-md); font-weight: 700; line-height: 1.35; }
.antetitulo { font-family: var(--f-titulo); font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-acento); }
.bajada { font-size: var(--t-md); color: var(--c-tinta-2); max-width: 62ch; }
.texto-sec { color: var(--c-tinta-2); }
.texto-ter { color: var(--c-tinta-3); font-size: var(--t-sm); }
.texto-sm { font-size: var(--t-sm); }
.numeros { font-variant-numeric: lining-nums; }

/* --------------------------------------------------------------------------
   Marco de la app
   -------------------------------------------------------------------------- */

.app-marco { display: grid; grid-template-columns: 1fr; min-height: 100vh; }

.lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: min(84vw, 300px);
    display: flex; flex-direction: column;
    background: var(--c-superficie);
    border-right: 1px solid var(--c-linea);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.menu-abierto .lateral { transform: none; visibility: visible; transition: transform 0.2s ease; box-shadow: var(--sombra-2); }
.menu-abierto { overflow: hidden; }

.lateral-velo { position: fixed; inset: 0; z-index: 30; background: var(--c-velo); }
.lateral-velo[hidden] { display: none; }

.lateral-marca {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-height: var(--alto-superior);
    padding: var(--e-3) var(--e-5);
    border-bottom: 1px solid var(--c-linea);
}
.marca { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--control-alto-sm); }
.marca img { display: block; width: 190px; height: auto; }
.marca-sub { font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-tinta-3); line-height: 1.35; }

.lateral-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--e-3); overflow-y: auto; }
.nav-item {
    display: flex; align-items: center; gap: var(--e-3);
    min-height: var(--control-alto);
    padding: 0 var(--e-3);
    border-radius: var(--r-2);
    color: var(--c-tinta-2); text-decoration: none; font-weight: 500;
}
.nav-item:hover { background: var(--c-hundido); color: var(--c-tinta); }
.nav-item[aria-current="page"] { background: var(--c-acento-suave); color: var(--c-acento-hover); font-weight: 700; }

.lateral-pie { padding: var(--e-4) var(--e-5); border-top: 1px solid var(--c-linea); }

.principal { display: flex; flex-direction: column; min-width: 0; }

.superior {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--e-3);
    height: var(--alto-superior);
    padding: 0 var(--e-4);
    background: var(--c-papel);
    border-bottom: 1px solid var(--c-linea);
}
.superior-marca { display: inline-flex; align-items: center; min-height: var(--control-alto); }
.superior-marca img { display: block; width: 132px; height: auto; }
.superior-acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }

.contenido { flex: 1; width: 100%; padding: var(--e-6) var(--e-4) var(--e-12); }

@media (min-width: 1024px) {
    .app-marco { grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); }
    .lateral {
        position: sticky; top: 0; height: 100vh; width: auto;
        transform: none; visibility: visible; transition: none;
    }
    .lateral-velo, .solo-movil { display: none !important; }
    .superior { padding: 0 var(--e-8); }
    .contenido { padding: var(--e-8) var(--e-8) var(--e-12); }
}
@media (max-width: 1023.98px) { .solo-escritorio { display: none !important; } }

/* --------------------------------------------------------------------------
   Estructuras de página
   -------------------------------------------------------------------------- */

.cabecera-pagina {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--e-4); margin-bottom: var(--e-8);
}
.cabecera-pagina > div:first-child { display: flex; flex-direction: column; gap: var(--e-2); }
.cabecera-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.seccion { display: flex; flex-direction: column; gap: var(--e-4); }
.seccion + .seccion { margin-top: var(--e-10); }
.seccion-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); }

.pila-2 { display: flex; flex-direction: column; gap: var(--e-2); }
.pila-3 { display: flex; flex-direction: column; gap: var(--e-3); }
.pila-4 { display: flex; flex-direction: column; gap: var(--e-4); }
.pila-4 > .panel-titulo { margin-bottom: 0; }
.pila-6 { display: flex; flex-direction: column; gap: var(--e-6); }
.grupo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.grupo-3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }

.rejilla { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 768px) {
    .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.panel {
    background: var(--c-superficie);
    border: 1px solid var(--c-linea);
    border-radius: var(--r-3);
    padding: var(--e-5);
}
@media (min-width: 768px) { .panel { padding: var(--e-6); } }
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }

.datos { display: grid; grid-template-columns: fit-content(11rem) minmax(0, 1fr); gap: var(--e-2) var(--e-4); }
.datos dt { color: var(--c-tinta-3); font-size: var(--t-sm); padding-top: 1px; }
.datos dd { font-weight: 500; overflow-wrap: anywhere; }

.separador { height: 1px; border: 0; background: var(--c-linea); margin: var(--e-6) 0; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    height: var(--control-alto);
    padding: 0 var(--e-4);
    border: 1px solid transparent; border-radius: var(--r-2);
    font-size: var(--t-base); font-weight: 600; line-height: 1;
    text-decoration: none; white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.boton:disabled, .boton[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }

.boton-primario { background: var(--c-acento); color: var(--c-sobre-acento); }
.boton-primario:hover:not(:disabled) { background: var(--c-acento-hover); color: var(--c-sobre-acento); }

.boton-secundario { background: var(--c-superficie); color: var(--c-tinta); border-color: var(--c-linea-fuerte); }
.boton-secundario:hover:not(:disabled) { background: var(--c-hundido); color: var(--c-tinta); }

.boton-fantasma { background: transparent; color: var(--c-tinta-2); }
.boton-fantasma:hover:not(:disabled) { background: var(--c-hundido); color: var(--c-tinta); }

.boton-peligro { background: var(--c-superficie); color: var(--c-peligro); border-color: var(--c-peligro); }
.boton-peligro:hover:not(:disabled) { background: var(--c-peligro); color: var(--c-sobre-acento); }

.boton-sm { height: var(--control-alto-sm); padding: 0 var(--e-3); font-size: var(--t-sm); }
/* Un botón de ícono no se encoge junto a un título largo (la X de un modal mantiene su tamaño táctil). */
.boton-icono { width: var(--control-alto); padding: 0; flex-shrink: 0; }
.boton-icono.boton-sm { width: var(--control-alto-sm); }
.boton-bloque { width: 100%; }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
fieldset.campo { margin: 0; padding: 0; border: 0; }
fieldset.campo > legend { padding: 0; margin-bottom: var(--e-2); }
.campo-etiqueta { font-size: var(--t-sm); font-weight: 600; color: var(--c-tinta); }
.campo-etiqueta .opcional { font-weight: 400; color: var(--c-tinta-3); }
.campo-ayuda { font-size: var(--t-sm); color: var(--c-tinta-3); }
.campo-error { font-size: var(--t-sm); color: var(--c-peligro); font-weight: 500; }

.control {
    width: 100%; min-width: 0;
    height: var(--control-alto);
    padding: 0 var(--e-3);
    background: var(--c-superficie);
    border: 1px solid var(--c-borde-control); border-radius: var(--r-2);
    font-size: var(--t-base); line-height: 1.4;
}
.control::placeholder { color: var(--c-tinta-3); }
.control:hover { border-color: var(--c-tinta-2); }
.control:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 0; border-color: var(--c-foco); }
.control[aria-invalid="true"] { border-color: var(--c-peligro); }
textarea.control { height: auto; min-height: 96px; padding: var(--e-2) var(--e-3); resize: vertical; }
select.control { padding-right: var(--e-8); }

.fila-controles { display: flex; gap: var(--e-2); align-items: stretch; }
.fila-controles > .control { flex: 1; }
.fila-controles > .boton { flex: none; }

.opcion { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--control-alto-sm); cursor: pointer; }
.opcion input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-acento); flex: none; }

.formulario-rejilla { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .formulario-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.formulario-rejilla .ancho-completo { grid-column: 1 / -1; }
.formulario-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Insignias, avatares, avisos
   -------------------------------------------------------------------------- */

.insignia {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 var(--e-2);
    border-radius: var(--r-1);
    background: var(--c-hundido); color: var(--c-tinta-2);
    font-size: var(--t-xs); font-weight: 600; line-height: 1; white-space: nowrap;
}
.insignia-punto::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-redondo); background: currentColor; }

.estado-por_hacer { background: var(--c-por-hacer-suave); color: var(--c-por-hacer); }
.estado-en_proceso { background: var(--c-en-proceso-suave); color: var(--c-en-proceso); }
.estado-en_revision { background: var(--c-en-revision-suave); color: var(--c-en-revision); }
.estado-aprobado { background: var(--c-aprobado-suave); color: var(--c-aprobado); }
.estado-publicado { background: var(--c-publicado-suave); color: var(--c-publicado); }

.insignia-peligro { background: var(--c-peligro-suave); color: var(--c-peligro); }
.insignia-alerta { background: var(--c-alerta-suave); color: var(--c-alerta); }
.insignia-acento { background: var(--c-acento-suave); color: var(--c-acento-hover); }
.insignia-contorno { background: transparent; border: 1px solid var(--c-linea-fuerte); color: var(--c-tinta-2); }

.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; border-radius: var(--r-redondo);
    background: var(--c-avatar-6); color: var(--c-sobre-acento);
    font-size: var(--t-xs); font-weight: 700; line-height: 1;
}
.avatar-lg { width: 40px; height: 40px; font-size: var(--t-sm); }
.avatar-1 { background: var(--c-avatar-1); }
.avatar-2 { background: var(--c-avatar-2); }
.avatar-3 { background: var(--c-avatar-3); }
.avatar-4 { background: var(--c-avatar-4); }
.avatar-5 { background: var(--c-avatar-5); }
.avatar-6 { background: var(--c-avatar-6); }

.persona { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; }
.persona-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aviso {
    display: flex; align-items: flex-start; gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-2);
    border-left: 3px solid currentColor;
    background: var(--c-info-suave); color: var(--c-info);
}
.aviso .icono { margin-top: 1px; }
.aviso-texto { color: var(--c-tinta); }
.aviso-texto strong { display: block; font-weight: 700; }
.aviso-exito { background: var(--c-exito-suave); color: var(--c-exito); }
.aviso-alerta { background: var(--c-alerta-suave); color: var(--c-alerta); }
.aviso-peligro { background: var(--c-peligro-suave); color: var(--c-peligro); }

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */

.tabla-envoltura {
    overflow-x: auto;
    background: var(--c-superficie);
    border: 1px solid var(--c-linea); border-radius: var(--r-3);
}
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.tabla th {
    padding: var(--e-3) var(--e-4);
    text-align: left; font-size: var(--t-sm); font-weight: 600; color: var(--c-tinta-2);
    background: var(--c-hundido); border-bottom: 1px solid var(--c-linea);
    white-space: nowrap;
}
.tabla td { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--c-linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .celda-num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Tablero Kanban
   -------------------------------------------------------------------------- */

.tablero {
    display: flex; gap: var(--e-3); align-items: flex-start;
    overflow-x: auto; padding-bottom: var(--e-2);
    scroll-snap-type: x proximity;
}
.columna {
    flex: 0 0 var(--ancho-columna);
    display: flex; flex-direction: column; gap: var(--e-2);
    padding: var(--e-3);
    background: var(--c-hundido); border-radius: var(--r-3);
    scroll-snap-align: start;
}
.columna-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: var(--control-alto-sm); padding: 0 var(--e-1); }
.columna-titulo { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); font-weight: 700; }
.columna-titulo::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-redondo); background: currentColor; }
.columna-contador { font-size: var(--t-xs); font-weight: 600; color: var(--c-tinta-3); }
.columna-lista { display: flex; flex-direction: column; gap: var(--e-2); min-height: 48px; }

.columna[data-estado="por_hacer"] .columna-titulo { color: var(--c-por-hacer); }
.columna[data-estado="en_proceso"] .columna-titulo { color: var(--c-en-proceso); }
.columna[data-estado="en_revision"] .columna-titulo { color: var(--c-en-revision); }
.columna[data-estado="aprobado"] .columna-titulo { color: var(--c-aprobado); }
.columna[data-estado="publicado"] .columna-titulo { color: var(--c-publicado); }

.tarjeta {
    display: flex; flex-direction: column; gap: var(--e-2);
    padding: var(--e-3);
    background: var(--c-superficie);
    border: 1px solid var(--c-linea); border-radius: var(--r-2);
    box-shadow: var(--sombra-1);
}
.tarjeta-tipo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 600; color: var(--c-tinta-3); }
.tarjeta-tipo .icono { width: 16px; height: 16px; }
.tarjeta-titulo { font-size: var(--t-base); font-weight: 600; line-height: 1.35; color: var(--c-tinta); overflow-wrap: anywhere; }
.tarjeta-marcas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.tarjeta-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-1) var(--e-2); padding-top: var(--e-2); border-top: 1px solid var(--c-linea); }
.tarjeta-asigno { min-width: 0; font-size: var(--t-xs); line-height: 1.3; color: var(--c-tinta-3); }
.tarjeta-pie .persona { flex: 1 1 auto; }
.tarjeta-fecha { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-xs); font-weight: 600; color: var(--c-tinta-2); white-space: nowrap; }
.tarjeta-fecha .icono { width: 14px; height: 14px; }
.tarjeta-fecha.vencida { color: var(--c-peligro); }
.tarjeta.bloqueada { border-color: var(--c-peligro); }

/* --------------------------------------------------------------------------
   Modal, vacío, notificaciones flotantes
   -------------------------------------------------------------------------- */

.modal {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 1px solid var(--c-linea); border-radius: var(--r-3);
    background: var(--c-superficie); color: var(--c-tinta);
    box-shadow: var(--sombra-2);
}
.modal::backdrop { background: var(--c-velo); }
.modal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--c-linea); }
.modal-cuerpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-4); }
.modal-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); padding: var(--e-4) var(--e-5); border-top: 1px solid var(--c-linea); background: var(--c-papel); }

.vacio {
    display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
    padding: var(--e-10) var(--e-6);
    text-align: center;
    border: 1px dashed var(--c-linea-fuerte); border-radius: var(--r-3);
}
.vacio .icono { width: 32px; height: 32px; color: var(--c-tinta-3); }
.vacio p { max-width: 44ch; color: var(--c-tinta-2); }

.flotantes {
    position: fixed; right: var(--e-4); bottom: var(--e-4); left: var(--e-4); z-index: 60;
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-2);
    pointer-events: none;
}
.flotante {
    pointer-events: auto;
    display: flex; align-items: center; gap: var(--e-3);
    max-width: 420px; padding: var(--e-3) var(--e-4);
    background: var(--c-tinta); color: var(--c-superficie);
    border-radius: var(--r-2); box-shadow: var(--sombra-2);
    font-weight: 500;
}
.flotante-exito .icono { color: var(--c-aprobado-suave); }
.flotante-peligro .icono { color: var(--c-peligro-suave); }

/* --------------------------------------------------------------------------
   Piezas de las vistas de F0
   -------------------------------------------------------------------------- */

.fases { display: flex; flex-direction: column; }
.fase { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--c-linea); }
.fase:last-child { border-bottom: 0; }
.fase-codigo { font-family: var(--f-titulo); font-variant-numeric: lining-nums; font-size: var(--t-md); font-weight: 700; color: var(--c-tinta-3); }
.fase-actual .fase-codigo { color: var(--c-acento); }
.fase-nombre { font-weight: 600; }
.fase-detalle { font-size: var(--t-sm); color: var(--c-tinta-3); }

.muestras { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.muestra { display: flex; flex-direction: column; gap: var(--e-2); }
.muestra-color { height: 48px; border-radius: var(--r-2); border: 1px solid var(--c-linea); }
.muestra-nombre { font-size: var(--t-xs); color: var(--c-tinta-2); overflow-wrap: anywhere; }

.muestra-papel { background: var(--c-papel); }
.muestra-superficie { background: var(--c-superficie); }
.muestra-hundido { background: var(--c-hundido); }
.muestra-tinta { background: var(--c-tinta); }
.muestra-acento { background: var(--c-acento); }
.muestra-foco { background: var(--c-foco); }
.muestra-por-hacer { background: var(--c-por-hacer); }
.muestra-en-proceso { background: var(--c-en-proceso); }
.muestra-en-revision { background: var(--c-en-revision); }
.muestra-aprobado { background: var(--c-aprobado); }
.muestra-publicado { background: var(--c-publicado); }
.muestra-peligro { background: var(--c-peligro); }

.error-codigo { font-family: var(--f-titulo); font-variant-numeric: lining-nums; font-size: var(--t-2xl); font-weight: 700; color: var(--c-acento); line-height: 1.25; }
.traza {
    max-height: 360px; overflow: auto;
    padding: var(--e-4);
    background: var(--c-hundido); border-radius: var(--r-2);
    font-size: var(--t-xs); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Acceso (entrar, activar, errores sin sesión)
   -------------------------------------------------------------------------- */

.acceso-marco {
    min-height: 100vh;
    display: flex; align-items: flex-start; justify-content: center;
    padding: var(--e-10) var(--e-4);
}
@media (min-height: 720px) { .acceso-marco { align-items: center; } }
.acceso-caja {
    width: 100%; max-width: 440px;
    display: flex; flex-direction: column; gap: var(--e-5);
    padding: var(--e-6);
    background: var(--c-superficie);
    border: 1px solid var(--c-linea); border-radius: var(--r-3);
}
.acceso-caja .cabecera-pagina { margin-bottom: 0; }
.acceso-columna { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: var(--e-6); }
.acceso-logo { display: block; width: min(320px, 78vw); }
.acceso-logo img { display: block; width: 100%; height: auto; }
.acceso-marca { display: flex; flex-direction: column; gap: var(--e-1); padding-bottom: var(--e-4); border-bottom: 1px solid var(--c-linea); }
.titulo-acceso { font-family: var(--f-titulo); font-variant-numeric: lining-nums; font-weight: 700; font-size: var(--t-xl); line-height: 1.2; }
.dato-fijo {
    display: flex; align-items: center; min-height: var(--control-alto);
    padding: 0 var(--e-3);
    background: var(--c-hundido); border-radius: var(--r-2);
    font-weight: 500; overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Usuario en el marco
   -------------------------------------------------------------------------- */

.lateral-pie { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); }
.usuario-bloque { display: flex; align-items: center; gap: var(--e-2); width: 100%; }
.usuario-enlace {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: var(--e-3);
    min-height: var(--control-alto);
    padding: var(--e-1) var(--e-2);
    border-radius: var(--r-2);
    color: var(--c-tinta); text-decoration: none;
}
.usuario-enlace:hover { background: var(--c-hundido); color: var(--c-tinta); }
.usuario-enlace[aria-current="page"] { background: var(--c-acento-suave); }
.usuario-datos { display: flex; flex-direction: column; min-width: 0; }
.usuario-nombre { font-size: var(--t-sm); font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-rol { font-size: var(--t-xs); color: var(--c-tinta-3); line-height: 1.35; }
.usuario-salir { flex: none; }
.superior-cuenta {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-alto); height: var(--control-alto);
    border-radius: var(--r-redondo);
}
.superior-cuenta:hover .avatar { box-shadow: 0 0 0 2px var(--c-linea-fuerte); }

/* --------------------------------------------------------------------------
   Filtros y listas de administración
   -------------------------------------------------------------------------- */

.barra-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); margin-bottom: var(--e-6); }
.barra-filtros > .campo { flex: 1 1 160px; }
.barra-filtros > .barra-filtros-busqueda { flex: 2 1 240px; }
.barra-filtros > .boton { flex: none; }
.resumen-lista { margin-bottom: var(--e-3); }
.bloque-aviso { margin-bottom: var(--e-6); }
.panel-titulo { margin-bottom: var(--e-4); }
.panel-nota { margin-top: var(--e-4); }

.lista-filas {
    list-style: none;
    display: flex; flex-direction: column;
    background: var(--c-superficie);
    border: 1px solid var(--c-linea); border-radius: var(--r-3);
}
.fila-usuario {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3);
    padding: var(--e-4);
    border-bottom: 1px solid var(--c-linea);
}
.fila-usuario:last-child { border-bottom: 0; }
.fila-usuario-persona { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.fila-usuario-nombre { display: flex; flex-direction: column; min-width: 0; }
.fila-usuario-correo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-usuario-marcas { display: flex; flex-wrap: wrap; gap: 6px; }
.fila-usuario-meta { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-xs); }
.fila-usuario-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.fila-usuario-acciones form { display: contents; }
/* En escritorio todas las filas comparten las columnas de la lista (subgrid): la columna de
   acciones mide lo mismo en cada fila aunque una tenga menos botones. */
@media (min-width: 1100px) {
    .lista-filas:has(> .fila-usuario) {
        display: grid;
        grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.9fr) minmax(0, 1.5fr) auto;
        column-gap: var(--e-4);
    }
    .fila-usuario {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: center;
        padding: var(--e-3) var(--e-5);
    }
}

.avisos-flash { display: flex; flex-direction: column; gap: var(--e-2); }
.contenido > .avisos-flash { margin-bottom: var(--e-6); }

/* --------------------------------------------------------------------------
   Fondo de marca (imagen de referencia MKT | MARKETING ESPOCH, vectorizada en diseno/marca)
   -------------------------------------------------------------------------- */

body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: url("../img/fondos/app-movil.svg") center / cover no-repeat;
}
@media (min-width: 768px) { body::before { background-image: url("../img/fondos/app-escritorio.svg"); } }
/* Pantallas de acceso: cintas rojas ancladas a las esquinas (se ven enteras en cualquier proporción). */
.cuerpo-acceso::before {
    background-image: url("../img/fondos/cinta-superior-derecha.svg"), url("../img/fondos/cinta-inferior-izquierda.svg"), url("../img/fondos/app-movil.svg");
    background-position: right top, left bottom, center;
    background-size: 26vmin 26vmin, 40vmin 40vmin, cover;
    background-repeat: no-repeat;
}
@media (min-width: 768px) {
    .cuerpo-acceso::before {
        background-image: url("../img/fondos/cinta-superior-derecha.svg"), url("../img/fondos/cinta-inferior-izquierda.svg"), url("../img/fondos/app-escritorio.svg");
        background-size: 38vmin 38vmin, 50vmin 50vmin, cover;
    }
}
@media (max-width: 767.98px) { .acceso-marco { padding-top: var(--e-12); } }

/* La barra superior termina en las cintas rojas de la marca (elemento decorativo propio). */
.superior-cinta {
    flex: none; align-self: stretch; width: 64px; margin-right: calc(-1 * var(--e-4));
    background: url("../img/marca/cinta-superior.svg") right center / auto 100% no-repeat;
}
@media (min-width: 1024px) { .superior-cinta { width: 160px; margin-right: calc(-1 * var(--e-8)); } }
@media (max-width: 1023px) { .superior { gap: var(--e-2); } }
.contenido { background: transparent; }

/* --------------------------------------------------------------------------
   F2 · Semestres, proyectos y equipo
   -------------------------------------------------------------------------- */

.nav-grupo {
    display: block; margin: var(--e-4) var(--e-3) var(--e-1);
    font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-tinta-3);
}
.selector-semestre { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3) var(--e-5) var(--e-4); border-top: 1px solid var(--c-linea); }
.control-sm { height: var(--control-alto-sm); font-size: var(--t-sm); padding: 0 var(--e-2); }
select.control-sm { padding-right: var(--e-6); }

.aviso-semestre { align-items: center; flex-wrap: wrap; margin-bottom: var(--e-6); }
.aviso-semestre .aviso-texto { flex: 1 1 240px; }
.aviso-accion { flex: none; }

.pila-1 { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.bloque-seccion { margin-bottom: var(--e-6); }
.panel-parrafo { margin-bottom: var(--e-4); }
.fila-formulario { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); }
.fila-formulario > .campo { flex: 1 1 220px; }
.fila-formulario > .boton { flex: none; }

/* Colores de proyecto (franja lateral de la tarjeta y selector) */
.proyecto-color-1 { --c-proyecto: var(--c-avatar-1); }
.proyecto-color-2 { --c-proyecto: var(--c-avatar-2); }
.proyecto-color-3 { --c-proyecto: var(--c-avatar-3); }
.proyecto-color-4 { --c-proyecto: var(--c-avatar-4); }
.proyecto-color-5 { --c-proyecto: var(--c-avatar-5); }
.proyecto-color-6 { --c-proyecto: var(--c-avatar-6); }

.rejilla-proyectos {
    list-style: none;
    display: grid; gap: var(--e-4);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) { .rejilla-proyectos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .rejilla-proyectos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proyecto-tarjeta {
    display: flex; flex-direction: column; gap: var(--e-3);
    padding: var(--e-5);
    background: var(--c-superficie);
    border: 1px solid var(--c-linea); border-left: 4px solid var(--c-proyecto, var(--c-linea-fuerte));
    border-radius: var(--r-3);
}
.proyecto-general { background: var(--c-hundido); }
.proyecto-marcas { display: flex; flex-wrap: wrap; gap: 6px; }
.proyecto-nombre a { color: var(--c-tinta); text-decoration: none; }
.proyecto-nombre a:hover { color: var(--c-acento); text-decoration: underline; }
.proyecto-descripcion {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden;
}
.proyecto-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--c-linea); }
.fila-avatares { display: inline-flex; align-items: center; gap: var(--e-1); }
.avatar-mas { background: var(--c-hundido); color: var(--c-tinta-2); }

.selector-color { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.opcion-color {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-alto); height: var(--control-alto);
    border-radius: var(--r-redondo);
    background: var(--c-proyecto);
    cursor: pointer;
}
.opcion-color input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcion-color:has(input:checked) { box-shadow: 0 0 0 2px var(--c-superficie), 0 0 0 4px var(--c-tinta); }
.opcion-color:has(input:focus-visible) { outline: 2px solid var(--c-foco); outline-offset: 4px; }

.lista-asignaciones { list-style: none; display: flex; flex-direction: column; }
.asignacion { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--c-linea); }
.asignacion:last-child { border-bottom: 0; }
.asignacion-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Texto corrido: el « ·» del marcado mantiene el separador junto al dato anterior al partir el renglón. */
.asignacion-titulo { display: block; }
.asignacion-titulo .insignia { margin-left: var(--e-2); vertical-align: middle; }
.asignacion-accion { flex: none; }
.asignacion-retirada .asignacion-titulo strong { text-decoration: line-through; color: var(--c-tinta-3); }
.formulario-asignar { display: flex; flex-direction: column; gap: var(--e-4); margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--c-linea); }
@media (min-width: 1100px) { .formulario-rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lista-equipo { list-style: none; }
.tarjeta-persona { display: flex; flex-direction: column; gap: var(--e-3); }

.linea-tiempo { list-style: none; display: flex; flex-direction: column; }
.evento { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-4); padding: var(--e-3) 0 var(--e-3) var(--e-4); border-left: 2px solid var(--c-linea); }
.evento-texto { min-width: 0; }

.fila-semestre, .fila-funcion {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3);
    padding: var(--e-4); border-bottom: 1px solid var(--c-linea);
}
.fila-semestre:last-child, .fila-funcion:last-child { border-bottom: 0; }
.fila-semestre-motivo { grid-column: 1 / -1; }
.fila-semestre-meta:empty { display: none; }
.fila-inactiva { background: var(--c-hundido); }
.fila-funcion-form { display: grid; gap: var(--e-3); grid-template-columns: minmax(0, 1fr); align-items: end; }
.fila-funcion-estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.fila-semestre .fila-usuario-acciones form, .fila-funcion-estado form { display: contents; }
@media (min-width: 900px) {
    .fila-funcion-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
}
@media (min-width: 1100px) {
    .lista-semestres { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; column-gap: var(--e-4); }
    .fila-semestre { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: var(--e-3) var(--e-5); }
    .fila-semestre-meta:empty { display: block; }
}

/* --------------------------------------------------------------------------
   F3 · Tarjetas: tablero del proyecto y detalle de la tarjeta
   -------------------------------------------------------------------------- */

.columna-lista { list-style: none; }
/* En el tablero del proyecto las cinco columnas caben en escritorio; en pantallas chicas se desliza. */
.columna { flex: 1 0 200px; min-width: 0; max-width: var(--ancho-columna); }
.columna-vacia { padding: var(--e-2) var(--e-1); }
.tarjeta { position: relative; }
.tarjeta:hover { border-color: var(--c-linea-fuerte); }
.tarjeta-enlace { color: var(--c-tinta); text-decoration: none; }
/* Toda la tarjeta abre su detalle; el foco sigue siendo el del enlace. */
.tarjeta-enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-2); }
.tarjeta-enlace:hover { color: var(--c-acento); }

.flujo { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin-bottom: var(--e-5); }
.flujo-paso { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); color: var(--c-tinta-3); }
.flujo-paso::before { content: ""; flex: none; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: var(--r-redondo); }
.flujo-hecho { color: var(--c-tinta-2); }
.flujo-hecho::before { background: currentColor; }
.flujo-actual { color: var(--c-acento); font-weight: 700; }
.flujo-actual::before { background: currentColor; box-shadow: 0 0 0 3px var(--c-acento-suave); }

.motivos { margin-top: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-2); background: var(--c-alerta-suave); color: var(--c-alerta); font-size: var(--t-sm); }
.motivos-titulo { font-weight: 600; margin-bottom: var(--e-1); }
.motivos ul { list-style: disc; padding-left: var(--e-5); display: flex; flex-direction: column; gap: 2px; }

.bloque-publicar { margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--c-linea); }
.publicacion-red { min-width: 0; margin: 0; padding: 0; border: 0; }
.publicacion-red > legend { padding: 0; margin-bottom: var(--e-2); font-weight: 700; }

.desplegable { margin-top: var(--e-4); }
.desplegable > summary { list-style: none; cursor: pointer; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary .icono { width: 16px; height: 16px; }
.desplegable[open] > summary .icono { transform: rotate(180deg); }
.desplegable-cuerpo { margin-top: var(--e-3); }

.subtitulo-panel { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-tinta-3); margin-bottom: var(--e-2); }
.subtitulo-separado { margin-top: var(--e-6); }
.persona-fila { display: flex; align-items: center; gap: var(--e-3); }
.bloque-formulario { margin-top: var(--e-4); }
.texto-parrafos { white-space: pre-line; }
.texto-peligro { color: var(--c-peligro); }

.lista-pasos { list-style: none; display: flex; flex-direction: column; }
.paso { display: flex; flex-direction: column; gap: 2px; padding: var(--e-1) 0; border-bottom: 1px solid var(--c-linea); }
.paso:last-child { border-bottom: 0; }
.paso-boton {
    display: flex; align-items: flex-start; gap: var(--e-3); width: 100%;
    min-height: var(--control-alto-sm); padding: var(--e-1) 0;
    background: none; border: 0; text-align: left; color: var(--c-tinta); cursor: pointer;
}
div.paso-boton { cursor: default; }
.paso-caja {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-top: 1px;
    border: 2px solid var(--c-linea-fuerte); border-radius: var(--r-1);
    color: var(--c-sobre-acento);
}
.paso-caja .icono { width: 14px; height: 14px; }
button.paso-boton:hover .paso-caja { border-color: var(--c-acento); }
.paso-hecho .paso-caja { background: var(--c-acento); border-color: var(--c-acento); }
.paso-hecho .paso-texto { color: var(--c-tinta-2); text-decoration: line-through; }
.paso-meta { padding-left: var(--e-8); padding-bottom: var(--e-1); font-size: var(--t-xs); }

.lista-redes { list-style: none; display: flex; flex-direction: column; }
.red-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); padding: var(--e-3) 0; border-bottom: 1px solid var(--c-linea); }
.red-fila:first-child { padding-top: 0; }
.red-fila:last-child { padding-bottom: 0; border-bottom: 0; }
.red-nombre { font-weight: 600; }
/* Enlace suelto dentro de una fila flexible: alto táctil de un control chico. */
.enlace-lista { display: inline-flex; align-items: center; min-height: var(--control-alto-sm); }
.red-estado { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3); }

.lista-comentarios { list-style: none; display: flex; flex-direction: column; gap: var(--e-4); }
.comentario { display: flex; align-items: flex-start; gap: var(--e-3); }
.comentario-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.comentario-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); }
.comentario-texto { color: var(--c-tinta); }

/* Lo marcado con hidden no se ve, aunque su clase defina display. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   F4 · Tablero Kanban: manija para arrastrar, tarjeta en vuelo, hueco y columna de destino
   -------------------------------------------------------------------------- */

.columna-sin-tarjetas .columna-lista { min-height: 48px; }
.columna:not(.columna-sin-tarjetas) .columna-vacia { display: none; }
.tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
/* La manija va por encima del enlace que cubre la tarjeta. */
.tarjeta-asa {
    position: relative; z-index: 1; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-alto-sm); height: var(--control-alto-sm);
    border: 0; border-radius: var(--r-1); background: transparent; color: var(--c-tinta-3);
    cursor: grab; touch-action: none;
}
.tarjeta-asa:hover { background: var(--c-hundido); color: var(--c-tinta); }
.tarjeta-asa .icono { width: 18px; height: 18px; }
.tarjeta-candado { display: inline-flex; color: var(--c-tinta-3); }
.tarjeta-candado .icono { width: 16px; height: 16px; }
.tarjeta-arrastrada {
    position: fixed; top: 0; left: 0; z-index: 30; list-style: none;
    pointer-events: none; box-shadow: var(--sombra-2); border-radius: var(--r-2);
}
.tarjeta-arrastrada .tarjeta { cursor: grabbing; }
.tarjeta-hueco { list-style: none; border: 2px dashed var(--c-linea-fuerte); border-radius: var(--r-2); background: var(--c-superficie); }
/* Sin imán de columnas mientras se arrastra: el desplazamiento automático avanza de a poco. */
.tablero-arrastrando { user-select: none; scroll-snap-type: none; }
.tablero-arrastrando .columna-destino { box-shadow: inset 0 0 0 2px var(--c-foco); }
.tarjeta-guardando { opacity: 0.6; }
.campo-casilla { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   F5 · Seguimiento: pestañas, filas de pendientes, indicadores, barras y notificaciones
   -------------------------------------------------------------------------- */

.pestanas { display: flex; gap: var(--e-1); overflow-x: auto; border-bottom: 1px solid var(--c-linea); }
.pestana { flex: none; }
.pestana {
    display: inline-flex; align-items: center; min-height: var(--control-alto);
    padding: 0 var(--e-3);
    color: var(--c-tinta-2); font-weight: 600; text-decoration: none;
}
.pestana:hover { color: var(--c-tinta); }
.pestana[aria-current="page"] { color: var(--c-acento); box-shadow: inset 0 -2px 0 var(--c-acento); }

.fila-pendiente { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--c-linea); }
.fila-pendiente:last-child { border-bottom: 0; }
.fila-pendiente-principal { display: flex; flex-direction: column; min-width: 0; }
.enlace-fuerte { color: var(--c-tinta); font-weight: 600; text-decoration: none; }
.enlace-fuerte:hover { color: var(--c-acento); text-decoration: underline; }
.fila-pendiente-fecha, .fila-pendiente-meta { display: flex; align-items: center; min-width: 0; }
@media (min-width: 1100px) {
    .lista-filas.lista-pendientes { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.6fr); column-gap: var(--e-4); }
    .fila-pendiente { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
}

.indicadores { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
@media (min-width: 768px) { .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .indicadores { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.indicador {
    display: flex; flex-direction: column; gap: var(--e-1);
    padding: var(--e-4); background: var(--c-superficie);
    border: 1px solid var(--c-linea); border-radius: var(--r-3);
}
.indicador:has(.indicador-enlace) { padding: 0; }
.indicador-enlace { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-4); color: inherit; text-decoration: none; border-radius: var(--r-3); }
.indicador-enlace:hover { background: var(--c-papel); }
.indicador-cifra { font-family: var(--f-titulo); font-variant-numeric: lining-nums; font-size: var(--t-2xl); font-weight: 700; line-height: 1.1; color: var(--c-tinta); }
.indicador-nombre { font-size: var(--t-sm); color: var(--c-tinta-2); }
.indicador-alerta { border-color: var(--c-peligro); }
.indicador-alerta .indicador-cifra { color: var(--c-peligro); }

.lista-compacta { list-style: none; display: flex; flex-direction: column; }
.fila-compacta { display: flex; flex-direction: column; padding: var(--e-2) 0; border-bottom: 1px solid var(--c-linea); }
.fila-compacta:last-child { border-bottom: 0; }

.lista-barras { list-style: none; display: flex; flex-direction: column; gap: var(--e-3); }
.barra-fila { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 2.5rem; align-items: center; gap: var(--e-2) var(--e-3); }
.barra-nombre { font-size: var(--t-sm); min-width: 0; overflow-wrap: break-word; }
.barra { width: 100%; height: 8px; }
.barra-fondo { fill: var(--c-hundido); }
.barra-valor { fill: var(--c-acento); }
.barra-por_hacer { fill: var(--c-por-hacer); }
.barra-en_proceso { fill: var(--c-en-proceso); }
.barra-en_revision { fill: var(--c-en-revision); }
.barra-aprobado { fill: var(--c-aprobado); }
.barra-publicado { fill: var(--c-publicado); }
.barra-vencida { fill: var(--c-peligro); }
.barra-cifra { font-size: var(--t-sm); font-weight: 600; text-align: right; }
.barra-nota { grid-column: 1 / -1; font-size: var(--t-xs); }

.tabla .celda-alerta { color: var(--c-peligro); font-weight: 700; }
.celda-detalle { display: block; font-weight: 400; }
.leyenda-indicadores { margin-top: var(--e-2); }

.lista-notificaciones .notificacion { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--c-linea); }
.lista-notificaciones .notificacion:last-child { border-bottom: 0; }
.notificacion-nueva { box-shadow: inset 3px 0 0 var(--c-acento); }
.notificacion-icono { flex: none; display: inline-flex; padding-top: var(--e-1); color: var(--c-tinta-3); }
.notificacion-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notificacion-texto a { color: var(--c-tinta); text-decoration: none; overflow-wrap: anywhere; }
.notificacion-nueva .notificacion-texto a { font-weight: 600; }
.notificacion-texto a:hover { color: var(--c-acento); text-decoration: underline; }

.campana {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-alto); height: var(--control-alto);
    border-radius: var(--r-redondo); color: var(--c-tinta-2);
}
.campana:hover, .campana[aria-current="page"] { background: var(--c-hundido); color: var(--c-tinta); }
.campana-cifra {
    position: absolute; top: 2px; right: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 var(--e-1);
    border-radius: var(--r-redondo); background: var(--c-acento); color: var(--c-sobre-acento);
    font-size: var(--t-xs); font-weight: 700; line-height: 1;
}