/* ==========================================================================
   B2B Risk Control — mr-admin.css
   El panel de administración como UN sistema (Ronda 3, Paso 2): shell,
   componentes y pantallas. mr-core.css trae los tokens y la base que el
   panel comparte con la app del evaluador (.boton, .campo, .tarjeta y los
   campos, en su versión de 44 px); esta hoja, que el evaluador NO carga,
   los especializa para el panel. Así la encuesta no cambia en nada.

   Orden: 1 shell · 2 encabezado · 3 contenido y página · 4 controles ·
   5 botones · 6 superficies flotantes y menús · 7 filtros · 8 segmentado ·
   9 tablas · 10 pestañas, modales y esqueletos · 11 alertas, toasts y
   campana · 12 Tablero ejecutivo · 13 ficha de riesgo · 14 pantallas con
   piezas propias · 15 movimiento, mejora progresiva e impresión.
   ========================================================================== */

body { font-size: 14.5px; }
[data-theme='dark'] body { color-scheme: dark; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--route); }
::placeholder { color: var(--text-muted); opacity: 1; }
/* hidden siempre oculta, aunque la clase del elemento fije display (la
   excepción sin JS de los menús, más específica, sigue ganando). */
[hidden] { display: none !important; }

/* ==========================================================================
   1 · Shell y menú lateral
   El menú ocupa todo el alto (antes terminaba a los ~750 px y abajo quedaba
   una franja clara): el <aside> se estira con la rejilla y lleva el fondo;
   su contenido es el que se queda fijo al desplazar. A 1024 px se pliega a
   iconos; a 700 px o menos pasa a menú deslizable.
   ========================================================================== */
.shell {
    display: grid;
    /* minmax(0, 1fr): sin el 0, la columna de contenido no se encoge por
       debajo de su contenido más ancho y el shell entero se desborda. */
    grid-template-columns: var(--ancho-menu) minmax(0, 1fr);
    min-height: 100vh;
    --ancho-menu: 248px;
}

.fondo-menu-movil { display: none; }

.barra-lateral {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
}

.barra-lateral-contenido {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 18px 12px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.marca-lateral {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--sidebar-text);
}

.marca-lateral svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--route-texto); }
/* Ronda 4C, Parte D: el logo del producto en la barra (oscura en los dos temas). */
.marca-lateral-logo { display: block; max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.marca-lateral-icono { display: none; width: 32px; height: 32px; object-fit: contain; border-radius: var(--radio-control); }
.marca-lateral .marca-lateral-escudo-plegada { display: none; }
/* Sin versión para fondo oscuro: el logo principal sobre un recuadro de papel. */
.marca-lateral-logo.logo-sobre-claro,
.marca-previa-logo.logo-sobre-claro { background: var(--papel-fijo); padding: 4px 8px; border-radius: var(--radio-control); }

.nav-lateral { flex: 1; }

.nav-grupo { margin: 0 0 6px; }

.nav-grupo-titulo {
    padding: 14px 12px 6px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sidebar-text-muted);
}

.nav-grupo ul { list-style: none; margin: 0; padding: 0; }
.nav-grupo li { margin-bottom: 1px; }

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--alto-control);
    padding: 7px 12px;
    border-radius: var(--radio-control);
    color: var(--sidebar-text);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color var(--dur-instante) linear;
}

.nav-item:hover { background: var(--sidebar-hover-bg); text-decoration: none; }

.nav-icono { width: 18px; height: 18px; flex-shrink: 0; color: var(--sidebar-text-muted); }

/* Elemento activo: riel --route (el mismo lenguaje que el riel de severidad,
   con el color de la marca, nunca uno de banda). */
.nav-item.activo { background: var(--sidebar-active-bg); color: var(--texto-sobre-color); font-weight: 600; }
.nav-item.activo .nav-icono { color: var(--texto-sobre-color); }
.nav-item.activo::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--route);
}

.pie-lateral {
    border-top: 1px solid var(--sidebar-borde);
    padding: 12px 10px 0;
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--sidebar-text-muted);
}

/* ==========================================================================
   2 · Encabezado: contexto (empresa y ciclo), campana, tema y sesión.
   ========================================================================== */
.encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 12px 28px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    min-width: 0;
}

.selectores-encabezado { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.logo-empresa-activa { max-height: 28px; width: auto; display: block; }

.selector-contexto { display: flex; align-items: center; gap: 8px; min-width: 0; }
.selector-contexto label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.selector-contexto select { width: auto; max-width: 100%; min-width: 0; font-size: 0.875rem; }

/* El <select> se envía solo al cambiar (mr-app.js); "Cambiar" es la vía sin
   JavaScript y nunca se borra: el JS solo lo oculta. */
.form-selector-contexto { display: flex; align-items: center; gap: 6px; min-width: 0; }
.oculto-mejora-progresiva { display: none !important; }

.menu-usuario { display: flex; align-items: center; gap: 10px; }

.avatar-usuario {
    width: var(--alto-control);
    height: var(--alto-control);
    border-radius: 50%;
    background: var(--route);
    color: var(--texto-sobre-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-display);
    flex-shrink: 0;
}

.info-usuario { line-height: 1.25; }
.info-usuario .nombre { font-weight: 600; font-size: 0.875rem; }
.info-usuario .rol { font-size: 0.75rem; color: var(--text-muted); }

/* Botones de solo icono del encabezado (tema, menú móvil, campana). */
.boton-icono,
.boton-tema,
.abrir-menu-movil,
.boton-campana {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--alto-control);
    height: var(--alto-control);
    padding: 0;
    border-radius: var(--radio-control);
    border: 1px solid var(--borde-control);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}

.boton-icono:hover, .boton-tema:hover, .abrir-menu-movil:hover, .boton-campana:hover { background: var(--bg); }
.abrir-menu-movil { display: none; }

/* ==========================================================================
   3 · Contenido y página
   ========================================================================== */
.contenido-panel { padding: 28px; max-width: 1240px; width: 100%; }

/* Encabezado de página: título (Space Grotesk 28 px), una línea de
   descripción en gris, la acción principal a la derecha y las secundarias en
   un menú "Más". Una sola acción principal por pantalla. */
.cabecera-pagina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cabecera-pagina h1 { font-size: 1.75rem; letter-spacing: -0.01em; margin: 0; }
.cabecera-pagina > div:first-child { min-width: 0; flex: 1 1 320px; }
.cabecera-pagina p,
.cabecera-pagina .descripcion { color: var(--text-muted); font-size: 0.9375rem; margin: 4px 0 0; max-width: 72ch; }
.cabecera-pagina .acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.cabecera-pagina .enlace-volver { display: block; font-size: 0.8125rem; margin: 0 0 6px; }

.ayuda { color: var(--text-muted); font-size: 0.8125rem; }
p.ayuda { margin: 0 0 12px; }

h2 { font-size: 1.125rem; }
.titulo-seccion { font-size: 1.125rem; margin: 28px 0 12px; }

/* Superficies planas con borde de 1 px, sin sombra (las sombras son solo de
   lo que flota). mr-core.css le da sombra a .tarjeta para el evaluador. */
.tarjeta,
.panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radio-radius);
    box-shadow: none;
    padding: 20px 22px;
    min-width: 0;
}

.panel { padding: 18px 20px; }

.panel-encabezado {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.panel-encabezado h2 { font-size: 1rem; margin: 0; }
.panel-encabezado .ayuda { margin: 0; }

/* Contenedor angosto (pantallas de acceso). */
.contenedor { width: 100%; max-width: 440px; margin: 0 auto; padding: 24px 16px; }
.pantalla-acceso { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.pantalla-acceso .marca-acceso { text-align: center; margin-bottom: 20px; }
.pantalla-acceso .marca-acceso h1 { margin-bottom: 8px; }
.pantalla-acceso .boton-tema { margin: 20px auto 0; }
.pantalla-acceso .marca-acceso h1 { font-size: 1.5rem; }
.marca-acceso-logo { max-height: 64px; max-width: min(280px, 100%); width: auto; height: auto; vertical-align: middle; margin-inline: auto; }
.pantalla-acceso .tarjeta h2 { font-size: 1.25rem; margin-bottom: 14px; }
.enlace-centrado { margin: 16px 0 0; text-align: center; }

.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
/* Proporciones fijas de dos columnas que se apilan en celular — nunca un
   grid-template-columns en style="", que no sabe volver a una columna. */
.rejilla-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.rejilla-1-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; }
.rejilla-formulario-parejo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; }
/* align-items:end: si una etiqueta se parte en dos líneas, su control no
   baja respecto a los vecinos (hallazgo de interfaz, vuelta 2). */
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0 16px; align-items: end; }
/* Para cifras cortas (cortes, porcentajes): columnas más angostas. */
/* 170 px: el selector más largo ("Semiautomático") ya no se recorta. */
.rejilla-campos-angosta { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.campo-boton { display: flex; align-items: flex-end; }
.ancho-formulario-ancho { max-width: 1040px; }
/* Muestra del color de una categoría (dato, no decoración): el color llega
   en --muestra. */
.muestra-color { display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: var(--muestra, transparent); border: 1px solid var(--border); vertical-align: middle; }
/* Despliegue (details/summary) para lo opcional ("Agregar categoría"). */
.despliegue { margin-top: 12px; }
.despliegue > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--route-texto); font-weight: 600; font-size: 0.875rem; list-style: none; }
.despliegue > summary::-webkit-details-marker { display: none; }
.despliegue > summary::before { content: '+'; font-weight: 700; }
.despliegue[open] > summary::before { content: '−'; }
.despliegue > :not(summary) { margin-top: 12px; }

/* 2/3 + 1/3: a 1024 px (menú plegado a iconos) la columna angosta mide
   unos 300 px y una tabla de tres columnas ya no cabe: se apilan. */
@media (max-width: 1100px) {
    .rejilla-2-1, .rejilla-1-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .rejilla-formulario-parejo { grid-template-columns: minmax(0, 1fr); }
}

.pila { display: flex; flex-direction: column; gap: 16px; }
.fila-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fila-acciones-fin { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.texto-tenue { color: var(--text-muted); }
.ancho-formulario { max-width: 760px; }

/* Tarjeta de resumen (Inicio): etiqueta, valor y nota. */
.resumen-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radio-radius); padding: 16px 18px; min-width: 0; }
.resumen-etiqueta { font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }
.resumen-valor { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; overflow-wrap: anywhere; }
.resumen-nota { font-size: 0.8125rem; color: var(--text-muted); overflow-wrap: anywhere; }
.resumen-tarjeta .boton { margin-top: 6px; }

/* Acceso directo: una tarjeta que es un enlace, con título y una línea. */
.acceso-directo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radio-radius); background: var(--bg-elevated); color: var(--text); text-decoration: none; transition: border-color var(--dur-rapida) var(--curva-salida); }
.acceso-directo:hover { border-color: var(--route); text-decoration: none; }
.acceso-directo span { font-size: 0.8125rem; color: var(--text-muted); }

/* Estados vacíos y de error: qué pasa y qué hacer, con la acción como botón. */
.estado-vacio {
    text-align: center;
    padding: 40px 24px;
    border: 1px dashed var(--borde-control);
    border-radius: var(--radio-radius);
    background: var(--bg-elevated);
}

.estado-vacio .icono-vacio { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--text-muted); }
.estado-vacio h3 { margin-bottom: 6px; }
.estado-vacio p { color: var(--text-muted); max-width: 46ch; margin: 0 auto 16px; }
.estado-vacio p:last-child { margin-bottom: 0; }

/* Dato que se muestra una sola vez (contraseña de la demo, enlace de
   recuperación copiado): se destaca sin colores de severidad. */
.dato-una-vez {
    border: 1px solid var(--route);
    border-left-width: 3px;
    border-radius: var(--radio-radius);
    background: var(--bg-elevated);
    padding: 16px 18px;
    margin-bottom: 20px;
}

.dato-una-vez h2 { font-size: 1rem; margin: 0 0 6px; }
.dato-una-vez p { margin: 0 0 8px; }
.dato-una-vez-valor {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    border: 1px dashed var(--borde-control);
    border-radius: var(--radio-control);
    user-select: all;
}

/* ==========================================================================
   4 · Controles: un solo alto (36 px; 32 en compacto), mismo radio, borde
   de control ≥ 3:1. Ningún <select> trunca su opción más larga.
   ========================================================================== */
.campo { margin-bottom: 16px; min-width: 0; }
.campo label,
.campo .etiqueta-campo { display: block; font-weight: 600; font-size: 0.8125rem; margin-bottom: 6px; }
.campo .ayuda { margin: 4px 0 0; }
.campo-en-linea { margin: 0; }

/* Aviso de validación junto al campo que lo causa. */
.campo-error { font-size: 0.8125rem; color: var(--r-crit-texto); margin-top: 4px; font-weight: 600; }
.requerido { color: var(--r-crit-texto); margin-left: 2px; }

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='date'],
input[type='url'],
input[type='tel'],
input[type='color'],
select,
textarea {
    width: 100%;
    min-height: var(--alto-control);
    padding: 0 12px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--borde-control);
    border-radius: var(--radio-control);
    transition: border-color var(--dur-rapida) var(--curva-salida);
}

input[type='color'] { width: 56px; padding: 3px; }
input[type='file'] { font-family: var(--font-body); font-size: 0.875rem; max-width: 100%; }

textarea { min-height: 88px; padding: 8px 12px; resize: vertical; line-height: 1.5; }

/* Selector restilizado: sin apariencia nativa (en WebKit medía 22–25 px),
   chevron propio dibujado con tokens. */
select {
    -webkit-appearance: none;
    appearance: none;
    height: var(--alto-control);
    padding-right: 32px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
}

select[multiple] { height: auto; padding: 6px 8px; background-image: none; }

html.densidad-compacta input[type='text'],
html.densidad-compacta input[type='search'],
html.densidad-compacta select { min-height: var(--alto-control-compacto); height: auto; }
html.densidad-compacta select { height: var(--alto-control-compacto); }

input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }

/* Formulario de página: una superficie con rejilla de dos columnas que se
   apila en celular; pie de botones al final, separado. */
.formulario {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 16px;
    max-width: 760px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radio-radius);
    padding: 22px 24px;
}

.formulario-ancho { max-width: 1040px; }
.formulario-una-columna { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
.formulario > .rejilla-campos { grid-column: 1 / -1; }
.formulario > .campo-completo,
.formulario > .opcion-casilla,
.formulario > .acciones-formulario,
.formulario > h2,
.formulario > h3,
.formulario > p,
.formulario > fieldset,
.formulario > .subpanel,
.formulario > .nota-informativa,
.formulario > .alerta { grid-column: 1 / -1; }
.formulario > h2, .formulario > h3 { font-size: 1rem; margin: 8px 0 12px; }
.formulario > h2:not(:first-of-type) { padding-top: 16px; border-top: 1px solid var(--border); margin-top: 4px; }
.formulario > .opcion-casilla { margin-bottom: 16px; }
.formulario fieldset { border: none; padding: 0; margin: 0 0 16px; min-width: 0; }
.formulario legend { font-weight: 600; font-size: 0.8125rem; margin-bottom: 8px; padding: 0; }

.acciones-formulario {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
}

.acciones-formulario .boton-texto:first-child { margin-right: auto; }

@media (max-width: 640px) {
    .formulario { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
}

/* Recuadro dentro de un formulario o panel (un grupo de opciones, una
   explicación con su propio borde). */
.subpanel { border: 1px solid var(--border); border-radius: var(--radio-control); padding: 14px 16px; margin-bottom: 16px; }
.subpanel > :last-child { margin-bottom: 0; }

/* Formularios en línea (un botón que envía un POST dentro de una celda o
   de una fila de acciones). */
.tabla-densa td form, .fila-acciones form { display: inline; margin: 0; }

/* Casilla o radio con su texto, en una línea. */
.opcion-casilla { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; cursor: pointer; }
.opcion-casilla input { margin-top: 3px; flex-shrink: 0; }

/* ==========================================================================
   5 · Botones: primario (relleno --route con brillo cenital), secundario
   (borde), texto (reset). Presión a 0.97 en 80 ms; foco con anillo
   desplazado de 2 px; estados guardando / éxito / error sin cambiar ancho.
   ========================================================================== */
.boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--alto-control);
    padding: 0 16px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radio-control);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: filter var(--dur-rapida) var(--curva-salida),
                transform var(--dur-instante) var(--curva-salida),
                background-color var(--dur-rapida) var(--curva-salida);
}

html.densidad-compacta .boton { min-height: var(--alto-control-compacto); }

.boton:hover { text-decoration: none; filter: none; }
.boton:active { transform: scale(0.97); filter: none; transition-duration: var(--dur-instante); }
.boton:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--focus-ring); }
.boton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

.boton-primario {
    background: var(--route);
    color: var(--texto-sobre-color);
    box-shadow: inset 0 1px 0 var(--brillo-cenital);
}

.boton-primario:hover { filter: brightness(1.08); }

.boton-secundario { background: var(--bg-elevated); color: var(--text); border-color: var(--borde-control); }
.boton-secundario:hover { background: var(--bg); }

/* Solo en la confirmación de algo destructivo, nunca en el botón que la abre. */
.boton-peligro { background: var(--close); color: var(--texto-sobre-color); box-shadow: inset 0 1px 0 var(--brillo-cenital); }
.boton-peligro:hover { filter: brightness(1.08); }

.boton-bloque { width: 100%; }
.boton-pequeno { min-height: var(--alto-control-compacto); padding: 0 12px; font-size: 0.8125rem; flex-shrink: 0; }

/* Botón con estilo de texto: el reset de siempre (en un <button> el
   navegador ponía borde en relieve). */
.boton-texto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--route-texto);
    min-height: auto;
    padding: 4px 2px;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.boton-texto:hover { text-decoration: underline; }
/* Lo destructivo, neutro hasta la confirmación. */
.boton-texto-destructivo { color: var(--text); }

/* Icono + texto: el icono se desliza 2 px en la dirección de la acción. */
.boton .icono-boton { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--dur-rapida) var(--curva-salida); }
.boton:hover .icono-boton-avanza { transform: translateX(2px); }
.boton:hover .icono-boton-retrocede { transform: translateX(-2px); }

/* Estados del botón: el JS solo cambia data-estado; el marcado de cada
   estado vive en el botón (ver la guía de estilo). */
.boton .boton-estado { display: none; align-items: center; justify-content: center; }
.boton[data-estado='reposo'] .boton-estado-reposo,
.boton:not([data-estado]) .boton-estado-reposo { display: inline-flex; }
.boton[data-estado='cargando'] .boton-estado-cargando,
.boton[data-estado='exito'] .boton-estado-exito,
.boton[data-estado='error'] .boton-estado-error { display: inline-flex; }

.boton-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--sobre-color-tenue);
    border-top-color: var(--texto-sobre-color);
    animation: girar var(--dur-giro) linear infinite;
}

.boton-secundario .boton-spinner, .boton-texto .boton-spinner { border-color: var(--border-strong); border-top-color: var(--text); }
.boton-palomita { width: 16px; height: 16px; }
.boton-palomita path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: dibujar var(--dur-media) var(--curva-salida) forwards; }
.boton[data-estado='error'] { animation: sacudir var(--dur-media) var(--curva-enfasis) 1; }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes sacudir {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

/* Botón dividido: acción principal + menú en un solo control. Sin overflow
   hidden: el menú del gatillo cuelga por fuera del grupo. */
.boton-dividido { display: inline-flex; position: relative; border-radius: var(--radio-control); }
.boton-dividido .boton { border-radius: 0; }
.boton-dividido .boton:first-child { border-top-left-radius: var(--radio-control); border-bottom-left-radius: var(--radio-control); padding-right: 14px; }
.boton-dividido .boton-dividido-gatillo { border-top-right-radius: var(--radio-control); border-bottom-right-radius: var(--radio-control); padding: 0 10px; border-left: 1px solid var(--sobre-color-tenue); }
.boton-dividido .boton-secundario + .boton-dividido-gatillo { border-left-color: var(--borde-control); }

/* ==========================================================================
   6 · Superficies flotantes y menús: una sola superficie (sombra, borde
   fino, radio de contenedor) que aparece escalando desde su origen.
   ========================================================================== */
.superficie-flotante {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radio-radius);
    box-shadow: var(--sombra-flotante);
    transform-origin: var(--origen-flotante, top left);
    animation: flotar-entra var(--dur-rapida) var(--curva-entrada);
}

@keyframes flotar-entra { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes fundir { from { opacity: 0; } to { opacity: 1; } }

.menu-fila { position: relative; }

.menu-fila-gatillo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radio-control);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: opacity var(--dur-instante) linear, background-color var(--dur-instante) linear;
}
/* Dentro de una fila de tabla se esconde hasta pasar el puntero o enfocar;
   fuera de una tabla (tarjeta de KRI, guía) siempre está a la vista. */
tr .menu-fila-gatillo { opacity: 0; }

/* Tres puntos visibles al pasar el puntero o enfocar la fila; en táctil,
   siempre. */
tr:hover .menu-fila-gatillo,
tr:focus-within .menu-fila-gatillo,
.menu-fila-gatillo[aria-expanded='true'],
.menu-fila-gatillo:focus-visible { opacity: 1; }
.menu-fila-gatillo:hover { background: var(--border); }
@media (hover: none) { .menu-fila-gatillo { opacity: 1; } }

.menu-fila-lista {
    position: absolute;
    right: 0;
    z-index: 30;
    margin-top: 4px;
    min-width: 168px;
    padding: 6px;
    --origen-flotante: top right;
}

/* Sin espacio abajo (última fila de una tabla con desplazamiento): abre
   hacia arriba. Lo decide mr-app.js al abrir. */
.menu-fila-lista.menu-arriba { bottom: 100%; margin: 0 0 4px; --origen-flotante: bottom right; }
/* Ronda 4 (revisión de interfaz): sin espacio a la izquierda (el botón
   pegado al borde izquierdo, como "Más" en el encabezado a 390 px), se ancla
   a la izquierda del botón. También lo decide mr-app.js al abrir. */
.menu-fila-lista.menu-izquierda { right: auto; left: 0; --origen-flotante: top left; }
.menu-fila-lista.menu-izquierda.menu-arriba { --origen-flotante: bottom left; }

.menu-fila-lista > button[hidden] { display: none; } /* "Imprimir esta pantalla" sin JS (4B) */
.menu-fila-lista > button,
.menu-fila-lista > a,
.menu-fila-lista > form > button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: var(--radio-control);
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.menu-fila-lista > button:hover,
.menu-fila-lista > a:hover,
.menu-fila-lista > form > button:hover { background: var(--bg); text-decoration: none; }
.menu-fila-lista .opcion-peligro { color: var(--text); }
.menu-fila-lista hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* ==========================================================================
   7 · Barra de filtros: búsqueda + chips desplegables con conteo; filtros
   activos como chips removibles. Sin JS, cada chip es un <fieldset> visible
   con casillas o radios de un formulario normal (mejora progresiva).
   ========================================================================== */
.barra-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.barra-filtros .campo-busqueda { flex: 1 1 200px; min-width: 0; max-width: 320px; }

fieldset.grupo-filtro { border: 1px solid var(--border); border-radius: var(--radio-control); padding: 6px 10px; margin: 0; min-width: 0; }
fieldset.grupo-filtro legend { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); padding: 0 4px; }

.chip-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--alto-control);
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--borde-control);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur-rapida) var(--curva-salida), background-color var(--dur-rapida) var(--curva-salida);
}

.chip-filtro:hover { border-color: var(--text-muted); }
.chip-filtro[aria-expanded='true'],
.chip-filtro.chip-filtro-activo { border-color: var(--route); background: var(--route-tenue); }
.chip-filtro .chevron { width: 12px; height: 12px; transition: transform var(--dur-rapida) var(--curva-salida); }
.chip-filtro[aria-expanded='true'] .chevron { transform: rotate(180deg); }
.chip-filtro .chip-conteo {
    background: var(--route);
    color: var(--texto-sobre-color);
    border-radius: 999px;
    font-size: 0.6875rem;
    padding: 1px 6px;
    font-weight: 700;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.envoltura-chip-filtro { position: relative; }
/* Chip que es una sola casilla ("Excede apetito sin plan"): mismo aspecto. */
.chip-casilla { gap: 8px; }
.chip-casilla:has(input:checked) { border-color: var(--route); background: var(--route-tenue); }
.chip-casilla input { margin: 0; }

.popover-filtro { position: absolute; z-index: 30; margin-top: 6px; padding: 8px; min-width: 220px; max-height: 320px; overflow-y: auto; }
.popover-filtro label { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: var(--radio-control); font-size: 0.875rem; font-weight: 400; cursor: pointer; white-space: nowrap; }
.popover-filtro label:hover { background: var(--bg); }

.filtros-activos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.chip-removible {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 12px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: none;
}

.chip-removible:hover { text-decoration: none; border-color: var(--borde-control); }
.chip-removible .chip-quitar { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 50%; }
.chip-removible:hover .chip-quitar { background: var(--border); }

.enlace-limpiar-filtros { font-size: 0.8125rem; color: var(--text-muted); }
/* Paginación al pie de una tabla. */
.paginacion { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; }
.paginacion .ayuda { margin: 0; }
/* Botones de reordenar (subir/bajar) en una celda. */
.acciones-orden { display: inline-flex; gap: 4px; }
.acciones-orden .boton-icono { width: var(--alto-control-compacto); height: var(--alto-control-compacto); }
.boton-icono:disabled { opacity: 0.4; cursor: not-allowed; }
.celda-con-icono { display: inline-flex; align-items: center; gap: 6px; }
.lista-viñetas { margin: 0 0 10px; padding-left: 20px; }
.seccion-lista { margin-bottom: 12px; }
.seccion-lista h3 { margin: 0 0 8px; font-size: 1rem; }
.lista-sugerencias { list-style: none; padding: 0; margin: 0 0 10px; }
.lista-sugerencias li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.lista-cambios { margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; }
.lista-cambios li { overflow-wrap: anywhere; }
.tabla-densa thead th a { color: inherit; }
.tabla-densa thead th a:hover { color: var(--text); }
/* Etiqueta corta al lado de su control, en una barra ("Comparar contra"). */
.etiqueta-en-linea { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.barra-filtros select { width: auto; max-width: 100%; }
.barra-comparacion { justify-content: space-between; margin-bottom: 12px; }
.contador-seleccion { margin: 0 0 0 auto; }
.barra-comparacion .ayuda, .barra-comparacion .barra-filtros { margin: 0; }

/* Línea de estado de una lista: conteo, orden y avisos, en un renglón. */
.barra-lista { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.barra-lista .ayuda { margin: 0; }

/* Riesgos a 390 px (ajuste 3): un solo botón "Filtros (n)" abre una hoja
   con la búsqueda y los chips, en vez de ~650 px de controles antes del
   primer riesgo. Sin JS la barra siempre está a la vista. */
.boton-hoja-filtros { display: none; }
@media (max-width: 700px) {
    html.js .boton-hoja-filtros { display: inline-flex; margin-left: auto; }
    html.js .hoja-filtros:not(.hoja-abierta) { display: none; }
    .hoja-filtros.hoja-abierta { padding: 12px; border: 1px solid var(--border); border-radius: var(--radio-radius); background: var(--bg-elevated); }
    .hoja-filtros .campo-busqueda { flex-basis: 100%; max-width: none; }
    .descripcion-larga { display: none; }
    .solo-escritorio { display: none; }
}

/* Asignación masiva de Riesgos: aparece al marcar filas. */
.barra-masiva { margin-bottom: 14px; }
.fila-acciones-campos { align-items: flex-end; margin-top: 10px; }
.campo-masivo select { width: 220px; max-width: 100%; }

/* "Ver criterio" dentro de un aviso: despliegue en línea, sin margen. */
.despliegue-en-linea { margin-top: 0; }
.despliegue-en-linea > :not(summary) { margin: 6px 0 0; flex-basis: 100%; }
.aviso-tabla .despliegue-en-linea[open] { flex-basis: 100%; }

/* Chips de estado: neutros. La escala de severidad es solo para bandas de
   riesgo; un estado ("Activo", "Desactivado", "Sin dueño") nunca usa sus
   colores. */
.chip-estado {
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 1px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.chip-estado-activo::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--route);
    flex-shrink: 0;
}

.chip-estado-inactivo { color: var(--text-muted); }

.chip-aviso {
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 9px;
    border-radius: 999px;
    border: 1px solid var(--borde-control);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 18px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

a.chip-aviso:hover { background: var(--bg); text-decoration: none; }
/* Fondo propio: sobre --bg (tarjeta del kanban, fila al pasar el puntero)
   el texto crítico bajaba a 4.3:1; sobre --bg-elevated pasa AA en los dos
   temas (hallazgo de interfaz, vuelta 2). */
.chip-aviso-critico { border-color: var(--r-crit); color: var(--r-crit-texto); background: var(--bg-elevated); }

/* Marca que aplica a la mayoría de las filas: una sola vez arriba de la
   tabla, no repetida en cada renglón (ajuste 2 del director técnico). */
.aviso-tabla {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radio-control);
    background: var(--bg-elevated);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.aviso-tabla strong { color: var(--text); font-weight: 600; }

/* ==========================================================================
   8 · Control segmentado: 2 a 4 opciones mutuamente excluyentes; la
   pastilla se desliza con transform (el ancho cambia de golpe).
   ========================================================================== */
.control-segmentado {
    display: inline-flex;
    position: relative;
    min-height: var(--alto-control);
    padding: 3px;
    border-radius: var(--radio-control);
    background: var(--bg);
    border: 1px solid var(--borde-control);
}

.control-segmentado input { position: absolute; opacity: 0; pointer-events: none; }

.control-segmentado label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 14px;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: calc(var(--radio-control) - 3px);
    transition: color var(--dur-rapida) var(--curva-salida);
}

.control-segmentado input:checked + label { color: var(--text); }
.control-segmentado input:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.control-segmentado .pastilla-segmentada {
    position: absolute;
    top: 3px;
    bottom: 3px;
    border-radius: calc(var(--radio-control) - 3px);
    background: var(--bg-elevated);
    border: 1px solid var(--borde-control);
    transition: transform var(--dur-media) var(--curva-salida);
}

.selector-densidad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.selector-densidad .ayuda { margin: 0; }

/* ==========================================================================
   9 · Tablas: encabezado fijo, cifras a la derecha en tabulares, sin cebra,
   riel por fila de riesgo, clic en la fila abre el detalle, menú de tres
   puntos, densidad cómoda (44 px) o compacta (36 px) recordada por usuario.
   Si la tabla no cabe, una sombra en el borde y una barra fina y siempre
   visible avisan que sigue (U-03).
   ========================================================================== */
.tabla-scroll {
    --sombra-borde-tabla: color-mix(in srgb, var(--text) 22%, transparent);
    overflow: auto;
    max-height: 72vh;
    border: 1px solid var(--border);
    border-radius: var(--radio-radius);
    scrollbar-width: thin;
    /* La sombra del borde: el fondo "local" viaja con el contenido y tapa la
       sombra al llegar al final; el "scroll" se queda en el borde. */
    background:
        linear-gradient(to right, var(--bg-elevated) 30%, transparent) left / 32px 100% no-repeat local,
        linear-gradient(to left, var(--bg-elevated) 30%, transparent) right / 32px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--sombra-borde-tabla), transparent) left / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--sombra-borde-tabla), transparent) right / 12px 100% no-repeat scroll;
    background-color: var(--bg-elevated);
    margin-bottom: 16px;
}

.tabla-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.tabla-scroll::-webkit-scrollbar-track { background: var(--bg); }
.tabla-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

table.tabla-densa {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.tabla-densa thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-elevated);
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: bottom;
}
@media (max-width: 700px) {
    .tabla-densa thead th { white-space: nowrap; }
}

.tabla-densa tbody td,
.tabla-densa tbody th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    text-align: left;
}
/* A 700 px o menos la tabla se desplaza (con sombra) y ninguna celda se
   comprime; en escritorio el texto se parte en líneas para que la tabla
   quepa sin desplazarse de lado (hallazgo de interfaz, vuelta 2: /ciclos,
   /evaluadores, /biblioteca y otras se salían a 1440 y 1024). Las cifras,
   las acciones y las columnas recortadas a propósito nunca se parten. */
@media (max-width: 700px) {
    .tabla-densa tbody td, .tabla-densa tbody th { white-space: nowrap; }
}
.tabla-densa td.valor-numerico, .tabla-densa td.mono, .tabla-densa .col-acciones, .tabla-densa .col-recortada { white-space: nowrap; }
@media (min-width: 701px) {
    /* Un correo se parte solo antes de la arroba (correo_partible() pone
       un <wbr>), nunca a media palabra; break-word es el último recurso
       para un correo larguísimo, y no aplasta la columna como anywhere. */
    .tabla-densa td.col-correo { overflow-wrap: break-word; min-width: 14ch; }
    .tabla-densa td.col-correo .correo-parte { white-space: nowrap; }
    /* La línea secundaria (riesgo, categoría) se recorta con "…" y no
       ensancha su columna: su ancho intrínseco no cuenta. */
    .tabla-densa td.col-ajustable .meta-fila:not(.meta-fila-dato), .tabla-densa td.col-recortada .meta-fila { contain: inline-size; }
}
@media (min-width: 701px) and (max-width: 1280px) {
    .tabla-densa td.col-recortada { max-width: 18ch; }
    /* Menú plegado a iconos: menos relleno lateral por celda. */
    .tabla-densa thead th, .tabla-densa tbody td, .tabla-densa tbody th { padding-left: 10px; padding-right: 10px; }
}

.tabla-densa tbody tr:last-child td { border-bottom: none; }
html.densidad-compacta .tabla-densa tbody td { padding-top: 6px; padding-bottom: 6px; }
/* Compacta de verdad: 36 px. El botón de tres puntos y las insignias no
   pueden empujar la fila (antes medía 43). */
html.densidad-compacta .tabla-densa .menu-fila-gatillo { width: 22px; height: 22px; }
html.densidad-compacta .tabla-densa tbody td { line-height: 20px; }
/* Sin JS el control de densidad no hace nada: no se muestra. */
html:not(.js) .selector-densidad { display: none; }

.tabla-densa tbody tr { background: transparent; }
.tabla-densa tbody tr:hover { background: var(--bg); }
.tabla-densa tfoot td { padding: 10px 14px; font-weight: 600; border-top: 1px solid var(--border); }

/* El número es una cifra: a la derecha, en tabulares; el encabezado de su
   columna se alinea igual pero sigue en la tipografía de la interfaz. */
.tabla-densa th.valor-numerico { text-align: right; font-family: var(--font-body); }
.tabla-densa td.valor-numerico { text-align: right; }

.tabla-densa .col-prosa { white-space: normal; min-width: 24ch; max-width: 48ch; }
.tabla-densa .col-ajustable { white-space: normal; min-width: 10ch; }
/* Texto largo que se lee en el detalle: una línea recortada, completo en
   el title (la fila no crece; Biblioteca cabe en menos de 3 pantallas). */
.tabla-densa .col-recortada { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
.tabla-densa .col-recortada .enlace-fila { display: block; overflow: hidden; text-overflow: ellipsis; }
/* Prosa que se lee en el detalle pero que en la lista merece más de una
   línea (Biblioteca, Ronda 3B 0.7): dos líneas y "…"; completa en el title.
   La fila no crece: ya mide dos líneas por la línea secundaria del riesgo. */
.tabla-densa td.col-recortada.col-corta { max-width: 16ch; } /* dato de apoyo (Industria): cede el ancho a la prosa */
.tabla-densa .recorte-2-lineas { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 701px) and (max-width: 1280px) {
    /* Va después de las reglas base a propósito (misma especificidad). */
    .tabla-densa td.col-recortada.col-corta { max-width: 13ch; }
    .tabla-densa .col-prosa { min-width: 20ch; }
}
.tabla-densa .col-acciones { width: 1%; text-align: right; }
/* Línea secundaria bajo el dato principal de una celda (categoría, riesgo
   al que pertenece, frecuencia): pequeña, tenue, una sola línea. */
.meta-fila { display: flex; align-items: center; gap: 6px; max-width: 100%; font-size: 0.75rem; line-height: 16px; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
.meta-fila .icono-categoria { width: 14px; height: 14px; flex-shrink: 0; }
.meta-fila-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Compacta = un renglón por fila (36 px): la línea secundaria se esconde,
   igual que en Riesgos. Así Biblioteca con 50 filas cabe en menos de 3
   pantallas a 1440 px (arrastre de la Ronda 1). */
html.densidad-compacta .tabla-densa .meta-fila { display: none; }
.tabla-densa .riel-severidad { padding-left: 11px; }

.fila-clicable { cursor: pointer; }
/* El enlace real de la fila (respaldo sin JS y para teclado): color de
   texto, no de enlace — toda la fila ya es el destino. */
.enlace-fila { color: var(--text); font-weight: 500; }
.enlace-fila:hover { color: var(--route-texto); }
.fila-retirada { opacity: 0.55; }
.fila-entrando { animation: fila-entra var(--dur-media) var(--curva-entrada); }
.fila-saliendo { animation: fila-sale var(--dur-rapida) var(--curva-salida) forwards; }
@keyframes fila-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fila-sale { to { opacity: 0; transform: translateY(-4px); } }

/* Acciones de fila en línea (pantallas sin menú de tres puntos): texto, a
   la derecha; a 390 px, 44 px de alto para el dedo. */
@media (max-width: 480px) {
    .tabla-densa td .boton-texto { min-height: 44px; padding: 10px 2px; }
}

/* Tabla de Riesgos: cómoda 44 px exactos (nombre + línea de contexto),
   compacta 36 px (solo el nombre). */
.tabla-riesgos tbody td { padding-top: 4px; padding-bottom: 3px; height: 44px; }
html.densidad-compacta .tabla-riesgos tbody td { height: 36px; padding-top: 3px; padding-bottom: 4px; }
.tabla-riesgos .col-nombre { width: 100%; max-width: 0; }

.riesgo-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; min-height: 20px; }
.riesgo-nombre {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 58ch;
    font-weight: 500;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.riesgo-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 16px;
    font-size: 0.75rem;
    line-height: 16px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}

.riesgo-meta .icono-categoria { width: 14px; height: 14px; flex-shrink: 0; }
.riesgo-meta-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* El número ya está en su columna; en la tarjeta (sin esa columna) sí va. */
.riesgo-meta-numero { display: none; }
.riesgo-marcas { display: inline-flex; flex-wrap: wrap; flex-shrink: 0; max-width: 100%; gap: 4px; }
.riesgo-marcas .chip-aviso { padding: 0 6px; font-size: 0.6875rem; line-height: 16px; }
html.densidad-compacta .riesgo-meta { display: none; }

@media (max-width: 1280px) {
    .tabla-riesgos .col-inh { display: none; }
    /* Filtrado por una celda inherente: se ve el valor que definió el filtro. */
    .tabla-riesgos.tabla-vista-inherente .col-inh { display: table-cell; }
    .tabla-riesgos.tabla-vista-inherente .col-res { display: none; }
}

/* Hasta 700 px cada riesgo es una tarjeta: riel, medidor, nombre en dos
   líneas y contexto, sin desplazamiento horizontal. */
@media (max-width: 700px) {
    .tabla-scroll:has(.tabla-riesgos) { max-height: none; overflow: visible; border: none; background: none; }
    .tabla-riesgos thead { display: none; }
    .tabla-riesgos, .tabla-riesgos tbody { display: block; }
    .tabla-riesgos tbody tr {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 32px;
        grid-template-areas: "check medidor menu" "check nombre nombre";
        align-items: center;
        gap: 4px 8px;
        padding: 10px 8px 10px 14px;
        margin-bottom: 8px;
        border: 1px solid var(--border);
        border-left: 3px solid var(--color-riel, var(--border-strong));
        border-radius: var(--radio-radius);
        background: var(--bg-elevated);
    }
    .tabla-riesgos tbody td { display: block; height: auto; padding: 0; border: none; }
    html.densidad-compacta .tabla-riesgos tbody td { height: auto; padding: 0; }
    .tabla-riesgos .col-check { grid-area: check; align-self: start; }
    .tabla-riesgos .col-num, .tabla-riesgos .col-inh { display: none; }
    .tabla-riesgos .col-res { grid-area: medidor; }
    .tabla-riesgos .col-nombre { grid-area: nombre; min-width: 0; max-width: none; width: auto; }
    .tabla-riesgos .col-menu { grid-area: menu; justify-self: end; }
    .tabla-riesgos.tabla-vista-inherente .col-inh { display: block; grid-area: medidor; }
    .tabla-riesgos.tabla-vista-inherente .col-res { display: none; }
    .tabla-riesgos .riesgo-linea { display: block; height: auto; }
    .tabla-riesgos .riesgo-nombre { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: none; }
    .tabla-riesgos .riesgo-meta, html.densidad-compacta .tabla-riesgos .riesgo-meta { display: block; height: auto; white-space: normal; }
    .tabla-riesgos .riesgo-meta .icono-categoria { display: inline-block; vertical-align: -2px; margin-right: 4px; }
    .tabla-riesgos .riesgo-marcas { display: flex; flex-wrap: wrap; margin: 4px 0 2px; }
    .tabla-riesgos .riesgo-meta-numero { display: inline; }
    .selector-densidad-riesgos { display: none; }
}

tr[data-banda='bajo'] { --color-riel: var(--r-low); }
tr[data-banda='moderado'] { --color-riel: var(--r-mod); }
tr[data-banda='alto'] { --color-riel: var(--r-high); }
tr[data-banda='critico'] { --color-riel: var(--r-crit); }

/* ==========================================================================
   10 · Pestañas, modales y esqueletos
   ========================================================================== */
.pestanas {
    position: relative;
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Si no caben (390 px), la misma sombra de borde que las tablas. */
    --sombra-borde-tabla: color-mix(in srgb, var(--text) 22%, transparent);
    background:
        linear-gradient(to right, var(--bg) 30%, transparent) left / 24px 100% no-repeat local,
        linear-gradient(to left, var(--bg) 30%, transparent) right / 24px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--sombra-borde-tabla), transparent) left / 10px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--sombra-borde-tabla), transparent) right / 10px 100% no-repeat scroll;
}

/* Con JS (iniciarDesbordePestanas): el lado que no cabe se desvanece, una
   señal más clara que la sombra de borde de arriba. La máscara solo usa
   la opacidad: var(--text) es cualquier color opaco, no un color visible. */
.pestanas[data-desborda='derecha'] { -webkit-mask-image: linear-gradient(to right, var(--text) calc(100% - 56px), transparent); mask-image: linear-gradient(to right, var(--text) calc(100% - 56px), transparent); }
.pestanas[data-desborda='izquierda'] { -webkit-mask-image: linear-gradient(to left, var(--text) calc(100% - 56px), transparent); mask-image: linear-gradient(to left, var(--text) calc(100% - 56px), transparent); }
.pestanas[data-desborda='ambos'] { -webkit-mask-image: linear-gradient(to right, transparent, var(--text) 56px, var(--text) calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, var(--text) 56px, var(--text) calc(100% - 56px), transparent); }

.pestana {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    min-height: var(--alto-control);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--radio-control) var(--radio-control) 0 0;
}

.pestana:hover { color: var(--text); text-decoration: none; }
.pestana[aria-selected='true'],
.pestana[aria-current='page'] { color: var(--text); }
.pestana:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.pestana .pestana-conteo { font-family: var(--font-mono); font-weight: 600; font-size: 0.75rem; color: var(--text-muted); }

/* Indicador: con JS se desliza (transform); sin JS, la pestaña marcada por
   el servidor lleva su propia línea. */
.indicador-pestana {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 1px;
    background: var(--route);
    transform-origin: left center;
    transition: transform var(--dur-media) var(--curva-salida);
}

html:not(.js) .pestana[aria-selected='true']::after,
html:not(.js) .pestana[aria-current='page']::after,
.pestanas:not(:has(.indicador-pestana)) .pestana[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--route);
}

/* Modales: confirmación 440 px, formulario 760 px; máximo 85vh con pie de
   botones fijo. Aparecen desde el botón que los abrió (mr-app.js calcula
   --origen-flotante) y salen más rápido de lo que entran. */
dialog {
    border: 1px solid var(--border);
    border-radius: var(--radio-radius);
    padding: 24px;
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: var(--sombra-flotante);
}

dialog::backdrop { background: var(--fondo-modal); }

/* Confirmación: 440 px. Ojo: ningún margin sobre el <dialog> mismo — el
   navegador lo centra con margin:auto (hallazgo de interfaz, vuelta 2). */
.dialogo-retiro { max-width: 440px; width: 90vw; }
.dialogo-retiro h2, .dialogo-retiro h3 { font-size: 1.125rem; margin: 0 0 8px; }

.dialogo-retiro.dialogo-formulario, .dialogo-formulario { max-width: 760px; width: 92vw; max-height: 85vh; padding: 0; display: none; }
.dialogo-formulario[open] { display: flex; flex-direction: column; }
.dialogo-formulario > form { display: flex; flex-direction: column; min-height: 0; width: 100%; }
.dialogo-encabezado { padding: 22px 24px 0; flex-shrink: 0; }
.dialogo-encabezado h2 { margin: 0 0 4px; font-size: 1.125rem; }
.dialogo-cuerpo { padding: 14px 24px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.dialogo-pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid var(--border); flex-shrink: 0; }
.dialogo-retiro:not(.dialogo-formulario) .dialogo-pie { padding: 16px 0 0; border-top: none; margin-top: 8px; }

dialog[open] { transform-origin: var(--origen-flotante, center); animation: modal-entra var(--dur-media) var(--curva-entrada); }
dialog[open]::backdrop { animation: fundir var(--dur-media) var(--curva-salida); }
dialog.dialogo-cerrando { animation: modal-sale var(--dur-rapida) var(--curva-salida) forwards; }
@keyframes modal-entra { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes modal-sale { to { opacity: 0; transform: scale(0.97); } }

@media (max-width: 640px) {
    .dialogo-formulario { max-width: 94vw; max-height: 90vh; }
}

/* Esqueletos: barrido sutil cuando algo tarda más de 300 ms; el barrido es
   un ::after que se traslada, nunca un background-position. */
.esqueleto { position: relative; overflow: hidden; background: var(--bg); border-radius: 4px; min-height: 12px; }
.esqueleto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-elevated) 70%, transparent), transparent);
    transform: translateX(-100%);
    animation: barrido var(--dur-ciclo-carga) var(--curva-enfasis) infinite;
}

@keyframes barrido { to { transform: translateX(100%); } }

/* ==========================================================================
   11 · Alertas en página, avisos flash, toasts y campana
   ========================================================================== */
/* Alertas en página (ciclo por vencer, sin calificar, planes vencidos):
   entran una vez; las críticas, un pulso único del icono. */
.alertas-pagina { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.alerta-pagina {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--borde-control);
    border-radius: var(--radio-control);
    background: var(--bg-elevated);
    font-size: 0.875rem;
    animation: alerta-entra var(--dur-lenta) var(--curva-salida) both;
    transform-origin: top center;
}

.alerta-pagina:nth-child(2) { animation-delay: calc(var(--escalon) * 1.5); }
.alerta-pagina:nth-child(3) { animation-delay: calc(var(--escalon) * 3); }
.alerta-pagina-critica { border-left-color: var(--r-crit); }
.alerta-pagina-icono { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); }
.alerta-pagina-critica .alerta-pagina-icono { color: var(--r-crit-texto); animation: pulso-unico var(--dur-lenta) var(--curva-enfasis) var(--dur-media) 1 both; }
.alerta-pagina-texto { flex: 1; min-width: 0; }
.alerta-pagina .boton { flex-shrink: 0; }

@keyframes alerta-entra { from { opacity: 0; transform: translateY(-6px) scaleY(0.96); } to { opacity: 1; transform: none; } }
@keyframes pulso-unico { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

@media (max-width: 480px) {
    .alerta-pagina { flex-wrap: wrap; }
    .alerta-pagina-texto { flex-basis: calc(100% - 32px); }
    .alerta-pagina .boton { margin-left: 32px; }
}

/* Aviso flash: lo que se ve sin JS (con JS se convierte en toast). */
.alerta {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 14px;
    border-radius: var(--radio-control);
    border: 1px solid var(--border);
    border-left: 3px solid var(--route);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.alerta-error { border-left-color: var(--r-crit); }
.alerta-info { border-left-color: var(--borde-control); }
.alerta form { display: inline; margin: 0 0 0 8px; }

/* Toasts: abajo a la derecha (arriba en 390 px), apilados con escalonado,
   entran deslizándose y salen colapsando (el hueco lo cierran los demás con
   transform). */
.pila-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 14px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--route);
    border-radius: var(--radio-radius);
    box-shadow: var(--sombra-flotante);
    color: var(--text);
    font-size: 0.875rem;
    overflow: hidden;
    pointer-events: auto;
    animation: toast-entra var(--dur-media) var(--curva-entrada) both;
}

.toast:nth-last-child(2) { animation-delay: var(--escalon); }
.toast:nth-last-child(3) { animation-delay: calc(var(--escalon) * 2); }
.toast-error { border-left-color: var(--r-crit); }
.toast-info { border-left-color: var(--borde-control); }
.toast-icono svg { width: 18px; height: 18px; display: block; }
.toast-exito .toast-icono { color: var(--route-texto); }
.toast-error .toast-icono { color: var(--r-crit-texto); }
.toast-info .toast-icono { color: var(--text-muted); }
.toast-palomita { stroke-dasharray: 12; stroke-dashoffset: 12; animation: dibujar var(--dur-lenta) var(--curva-salida) var(--dur-rapida) forwards; }
.toast-texto { flex: 1; min-width: 0; padding-top: 1px; }
.toast-acciones .toast-accion { font-weight: 600; white-space: nowrap; }
.toast-acciones form { display: inline; margin: 0; }

.toast-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radio-control);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.toast-cerrar:hover { background: var(--bg); color: var(--text); }
.toast-tiempo { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--route); transform-origin: left center; }
.toast-saliendo { animation: toast-sale var(--dur-rapida) var(--curva-salida) forwards; }

@keyframes toast-entra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes toast-sale { to { opacity: 0; transform: translateX(12px) scale(0.98); } }

@media (max-width: 480px) {
    .pila-toasts { top: 12px; bottom: auto; right: 16px; left: 16px; width: auto; flex-direction: column-reverse; }
    .toast { animation-name: toast-entra-arriba; }
}

@keyframes toast-entra-arriba { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* Centro de avisos (campana): contador que salta cuando llega algo nuevo y
   panel con lo que necesita atención en el ciclo activo. */
.centro-avisos { position: relative; }

.campana-contador {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--close);
    color: var(--texto-sobre-color);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-elevated);
}

.campana-salta { animation: campana-salta var(--dur-lenta) var(--curva-enfasis) 1; }
@keyframes campana-salta {
    0% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-4px) scale(1.12); }
    70% { transform: translateY(0) scale(0.97); }
    100% { transform: translateY(0) scale(1); }
}

.campana-contador-sale { transition: transform var(--dur-rapida) var(--curva-salida), opacity var(--dur-rapida) var(--curva-salida); transform: scale(0.6); opacity: 0; }

.panel-avisos { width: min(340px, calc(100vw - 32px)); padding: 6px; max-height: 70vh; overflow-y: auto; }
.panel-avisos-encabezado { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); padding: 8px 10px 6px; }
.panel-avisos-vacio { margin: 0; padding: 10px; color: var(--text-muted); font-size: 0.875rem; white-space: normal; }
.lista-avisos { list-style: none; margin: 0; padding: 0; }
.lista-avisos a,
.lista-avisos .aviso-sin-enlace {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radio-control);
    color: var(--text);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: normal;
}

.lista-avisos a:hover { background: var(--bg); }
.aviso-punto { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--text-muted); }
.aviso-critico .aviso-punto { background: var(--r-crit); }
.aviso-aviso .aviso-punto { background: var(--borde-control); }
.aviso-info .aviso-punto { background: var(--route); }
.aviso-texto { flex: 1; min-width: 0; }
.aviso-nuevo { font-size: 0.6875rem; font-weight: 700; color: var(--route-texto); border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; line-height: 16px; flex-shrink: 0; }

/* ==========================================================================
   12 · Tablero ejecutivo: el ICR primero y más ancho; indicadores con
   dirección y significado; top 10 con riel y medidor; pendientes; semáforo
   y distribución. Momento orquestado una vez por sesión y ciclo.
   ========================================================================== */
.rejilla-tablero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 16px; }

.indicadores {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radio-radius);
    background: var(--bg-elevated);
    margin-bottom: 16px;
}

.indicador { padding: 16px 18px; border-left: 1px solid var(--border); min-width: 0; }
.indicador:first-child { border-left: none; }
.indicador-etiqueta { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; }
.indicador-cifra { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.indicador-nota { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.indicador-variacion { display: flex; align-items: flex-start; gap: 4px; font-size: 0.75rem; margin-top: 8px; flex-wrap: nowrap; }
.indicador-variacion svg { flex-shrink: 0; margin-top: 2px; }

/* El ICR, la métrica propia del producto, en el primer lugar: más ancho, con
   su barra y su variación, sin volver a la tarjeta con degradado. */
/* Sin tinte de fondo: el texto de la variación (verde o rojo de severidad)
   no pasaba AA sobre --route-tenue. El protagonismo lo dan el ancho, la
   cifra más grande y el riel --route a la izquierda. */
.indicador-icr { box-shadow: inset 3px 0 0 var(--route); border-top-left-radius: var(--radio-radius); border-bottom-left-radius: var(--radio-radius); }
.indicador-icr .indicador-etiqueta { color: var(--text); font-weight: 600; }
.indicador-icr .indicador-cifra { font-size: 2.5rem; }

/* Ronda 3B, Parte A.2 — franja de cuatro indicadores, cada uno con su
   anillo (una proporción) y la frase que explica la consecuencia. */
.indicadores-anillo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.indicador-cuerpo { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.indicador-texto { min-width: 0; }
.indicador-frase { font-size: 0.9375rem; line-height: 1.35; }
.indicador-frase strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; margin-right: 2px; }
.indicador-alerta-texto { font-size: 0.75rem; font-weight: 600; color: var(--r-crit-texto); margin-top: 3px; line-height: 1.3; }
.indicador-alerta { box-shadow: inset 3px 0 0 var(--anillo-alerta); }

/* Comparación entre ciclos: el ICR de la empresa con su anillo. */
.resumen-icr-comparacion { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.resumen-icr-titulo { margin: 0 0 4px; font-size: 1rem; }
.resumen-icr-texto { margin: 0; }
.recuadro-anillo .anillo-rotulo { font-size: 0.875rem; color: var(--text); }

/* Asignación y avance: el avance del ciclo con su anillo. */
.resumen-avance { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.resumen-avance-titulo { margin: 0 0 2px; font-weight: 600; }
.resumen-avance-texto { margin: 0; color: var(--text-muted); font-size: 0.875rem; }
.resumen-avance-texto strong { color: var(--text); }

/* A.1 — el ciclo es el título; la línea de contexto va arriba. */
.tablero-contexto { margin: 0 0 2px; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.01em; }
.tablero-contexto-alerta { color: var(--r-crit-texto); }
.cabecera-tablero h1 { margin-top: 0; }
.cabecera-tablero .acciones { flex-wrap: wrap; flex-shrink: 1; max-width: 100%; }
@media (max-width: 480px) {
    .cabecera-tablero .acciones { flex-basis: 100%; }
    /* "Presentar al consejo" primero (la acción principal) y a todo lo ancho. */
    .cabecera-tablero .acciones > .boton-primario { order: -1; flex-basis: 100%; justify-content: center; }
}

/* A.3 — la matriz del director: rejilla a la izquierda, panel a la derecha. */
.seccion-matriz-tablero { margin-bottom: 16px; }
.seccion-matriz-tablero .panel-encabezado { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.form-vista-matriz { display: flex; align-items: center; gap: 8px; }
.matriz-tablero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.matriz-tablero-marco { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; max-width: 520px; }
.matriz-tablero-titulo-eje { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.matriz-tablero-titulo-y { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; text-align: center; }
.matriz-tablero-titulo-x { grid-column: 2; text-align: center; margin-top: 4px; }
.matriz-tablero-tabla { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
/* Los números de probabilidad, en el DOM arriba (para que los encabezados
   de columna apliquen a cada celda), se ven abajo. */
.matriz-tablero-tabla thead { display: table-footer-group; }
.matriz-tablero-tabla thead td, .matriz-tablero-tabla tbody th { width: 1.75rem; }
.matriz-tablero-eje { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); text-align: center; padding: 0; }
/* Las celdas de tabla no respetan aspect-ratio: el alto se fija y se acerca
   al ancho de la columna (5 columnas en ~430 px). */
.matriz-tablero-celda { position: relative; padding: 0; border-radius: var(--radio-control); height: 68px; text-align: center; vertical-align: middle; }
.matriz-tablero-celda.banda-bajo { background: var(--r-low); color: var(--texto-sobre-color); }
.matriz-tablero-celda.banda-moderado { background: var(--r-mod); color: var(--ink); }
.matriz-tablero-celda.banda-alto { background: var(--r-high); color: var(--ink); }
.matriz-tablero-celda.banda-critico { background: var(--r-crit); color: var(--texto-sobre-color); }
.matriz-tablero-vacia { background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
/* Fuera del apetito: borde punteado (no depende del color). */
.matriz-tablero-celda.matriz-tablero-fuera::after { content: ''; position: absolute; inset: 3px; border: 2px dashed currentColor; border-radius: calc(var(--radio-control) - 2px); pointer-events: none; }
/* Opacidad plena: el texto de la celda (tinta o blanco) ya pasa 3:1 contra su banda (WCAG 1.4.11). */
.matriz-tablero-vacia.matriz-tablero-fuera::after { color: var(--borde-control); }
.matriz-tablero-enlace, .matriz-tablero-enlace:hover, .matriz-tablero-enlace:focus { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: inherit; text-decoration: none; border-radius: inherit; }
.matriz-tablero-enlace:hover { box-shadow: inset 0 0 0 3px color-mix(in srgb, currentColor 45%, transparent); }
.matriz-tablero-enlace:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.matriz-tablero-enlace[aria-current='true'] { box-shadow: inset 0 0 0 3px currentColor; }
.matriz-tablero-cuenta { font-family: var(--font-display); font-size: clamp(1.125rem, 2.2vw, 1.625rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.matriz-tablero-banda { font-size: 0.6875rem; font-weight: 600; line-height: 1.1; }
.matriz-tablero-panel { min-width: 0; border-left: 1px solid var(--border); padding-left: 24px; }
.matriz-panel-ayuda { margin-top: 0; color: var(--text-muted); font-size: 0.875rem; }
.matriz-panel-borde { margin: 0 0 12px; color: var(--text-muted); font-size: 0.875rem; }
.matriz-panel-titulo { margin: 0 0 6px; font-size: 1.0625rem; }
.matriz-panel-titulo:focus { outline: none; }
.matriz-panel-meta { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.matriz-panel-apetito { margin: 0 0 10px; font-size: 0.875rem; }
.matriz-panel-fuera strong { color: var(--r-crit-texto); }
.matriz-panel-lista { list-style: none; margin: 0 0 12px; padding: 0; }
.matriz-panel-lista li { border-top: 1px solid var(--border); }
.matriz-panel-lista li:first-child { border-top: none; }
.matriz-panel-lista li.riel-severidad::before { top: 7px; bottom: 7px; }
.matriz-panel-lista a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px 8px 14px; color: inherit; text-decoration: none; border-radius: var(--radio-control); }
.matriz-panel-lista a:hover { background: var(--bg); }
.matriz-panel-texto { min-width: 0; }
.matriz-panel-nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
.matriz-panel-dueno { display: block; font-size: 0.75rem; color: var(--text-muted); }
.matriz-panel-pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }
@media (max-width: 1024px) {
    .indicadores.indicadores-anillo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .indicadores-anillo .indicador-icr { grid-column: auto; border-radius: var(--radio-radius) 0 0 0; }
    .indicadores-anillo .indicador:nth-child(-n+2) { border-top: none; }
    .indicadores-anillo .indicador:nth-child(even) { border-left: 1px solid var(--border); }
    .indicadores-anillo .indicador:nth-child(odd):not(.indicador-icr) { border-left: none; }
}
@media (max-width: 860px) {
    .matriz-tablero { grid-template-columns: minmax(0, 1fr); }
    .matriz-tablero-marco { max-width: none; }
    .matriz-tablero-panel { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 16px; }
}
@media (max-width: 600px) {
    .indicadores.indicadores-anillo { grid-template-columns: minmax(0, 1fr); }
    .indicadores-anillo .indicador.indicador { border-left: none; border-top: 1px solid var(--border); }
    .indicadores-anillo .indicador.indicador:first-child { border-top: none; }
    .matriz-tablero-banda { display: none; } /* a 390 el nivel lo dicen la leyenda, el panel y el aria-label */
    .matriz-tablero-tabla { border-spacing: 3px; }
    .matriz-tablero-celda { height: 52px; } /* sigue por encima de 44 px táctiles */
}

@media (max-width: 1024px) {
    .rejilla-tablero { grid-template-columns: minmax(0, 1fr); }
    .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .indicador { border-left: none; border-top: 1px solid var(--border); }
    .indicador-icr { grid-column: 1 / -1; border-top: none; border-radius: var(--radio-radius) var(--radio-radius) 0 0; }
    .indicador:nth-child(odd):not(.indicador-icr) { border-left: 1px solid var(--border); }
}

.top10 { list-style: none; margin: 0; padding: 0; }
.top10 li { border-top: 1px solid var(--border); }
.top10 li:first-child { border-top: none; }
.top10 li.riel-severidad::before { top: 8px; bottom: 8px; }
.top10 a {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto 64px;
    align-items: center;
    gap: 12px;
    padding: 10px 6px 10px 14px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radio-control);
}

.top10 a:hover { background: var(--bg); }
.top10-puesto { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.8125rem; text-align: right; }
.top10-texto { min-width: 0; }
.top10-nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; line-height: 1.3; }
.top10-meta { display: block; font-size: 0.75rem; color: var(--text-muted); }
.top10-cambio { font-size: 0.75rem; font-weight: 600; text-align: right; }
.top10 .medidor-etiqueta { min-width: 5.6em; }

@media (max-width: 480px) {
    .top10 a { grid-template-columns: 20px minmax(0, 1fr); row-gap: 4px; }
    .top10 .medidor, .top10-cambio { grid-column: 2; }
    .top10-cambio { text-align: left; }
}

/* A.4 y A.5 — "Atención" y "Planes vencidos": listas cortas, cada renglón
   lleva a donde se resuelve. */
.lista-corta { list-style: none; margin: 0; padding: 0; }
.lista-corta li { border-top: 1px solid var(--border); }
.lista-corta li:first-child { border-top: none; }
.lista-corta-fila { display: flex; align-items: center; gap: 12px; padding: 10px 6px; color: inherit; text-decoration: none; border-radius: var(--radio-control); min-height: 44px; }
a.lista-corta-fila:hover { background: var(--bg); }
.lista-corta-icono { width: 20px; height: 20px; flex: none; color: var(--text-muted); }
.lista-corta-critica .lista-corta-icono, .lista-corta-critica .lista-corta-cuenta { color: var(--r-crit-texto); }
.lista-corta-texto { flex: 1; min-width: 0; }
.lista-corta-titulo { display: block; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.lista-corta-recorte { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
.lista-corta-porque { display: block; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.35; }
.lista-corta-cuenta { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.lista-corta-vencio { flex: none; font-size: 0.8125rem; font-weight: 600; color: var(--r-crit-texto); white-space: nowrap; }
.lista-corta-flecha { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.lista-corta-vacia { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--route-texto); font-weight: 600; }
.lista-corta-vacia svg { width: 20px; height: 20px; }
.lista-corta-pie { margin: 10px 0 0; }
@media (max-width: 480px) {
    .lista-corta-fila { flex-wrap: wrap; }
    .lista-corta-vencio { order: 3; flex-basis: 100%; padding-left: 0; }
}

.leyenda-severidad { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 12px; }
.leyenda-severidad span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-severidad i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.semaforo-lista { display: flex; flex-direction: column; gap: 8px; }
.semaforo-fila { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 12px; align-items: center; }
.semaforo-nombre { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; min-width: 0; }
.semaforo-nombre > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.semaforo-pista { display: flex; height: 22px; border-radius: 4px; overflow: hidden; gap: 1px; transform-origin: left center; }
.semaforo-pista .semaforo-segmento { font-size: 0.6875rem; text-decoration: none; }
.semaforo-segmento.banda-sin_calificar { background: var(--border-strong); color: var(--text); }

@media (max-width: 480px) {
    .semaforo-fila { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.distribucion { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.distribucion-fila { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; }
.distribucion-banda { font-size: 0.8125rem; font-weight: 600; }
.distribucion-pares { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.distribucion-par { display: grid; grid-template-columns: 64px minmax(0, 1fr) 28px; gap: 8px; align-items: center; }
.distribucion-etiqueta { font-size: 0.6875rem; color: var(--text-muted); }
.distribucion-pista { display: block; height: 10px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.distribucion-relleno { display: block; height: 100%; border-radius: 3px; transform-origin: left center; }
/* La inherente se distingue por patrón, no solo por opacidad. */
.distribucion-inh { opacity: 0.55; background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--brillo-cenital) 3px 5px) !important; }
.distribucion-valor { font-size: 0.75rem; text-align: right; }

/* El medidor de anillo vive en mr-core.css desde la Ronda 4 (lo usan
   también los documentos impresos, que no cargan esta hoja). */

/* Momento orquestado: sin .orquestar todo ya está en su estado final (sin
   JS, con movimiento reducido, ya visto en la sesión, al imprimir). */
.orquestar .cifra-contable,
.orquestar .indicador-cifra { opacity: 0; }
.orquestar .barra-crece { transform: scaleX(0); }
.orquestar .medidor-segmento-lleno::after { transform: scaleY(0); transition: none; }
.barra-crece { transform-origin: left center; }
.orquestado .cifra-contable,
.orquestado .indicador-cifra { transition: opacity var(--dur-rapida) var(--curva-salida); }
.orquestado .barra-crece { transition: transform var(--dur-lenta) var(--curva-salida); transition-delay: var(--retraso, 0ms); }

/* ==========================================================================
   13 · Ficha de riesgo
   ========================================================================== */
.ficha-encabezado { padding: 2px 0 2px 16px; margin-bottom: 14px; }
.ficha-encabezado.riel-severidad::before { border-radius: 3px; }
.ficha-volver { margin: 0 0 6px; font-size: 0.8125rem; }
.ficha-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ficha-titulo h1 { font-size: 1.75rem; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ficha-numero { font-size: 1rem; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radio-control); padding: 2px 8px; }
.ficha-encabezado .descripcion { color: var(--text-muted); margin: 6px 0 0; font-size: 0.9375rem; }
.ficha-texto { max-width: 76ch; margin-bottom: 18px; }

.recuadros-calificacion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; align-items: stretch; }
.recuadro-calificacion { display: flex; flex-direction: column; gap: 6px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radio-radius); padding: 16px 18px; min-width: 0; }
.recuadro-calificacion h2 { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); margin: 0 0 4px; }
.recuadro-medidor .medidor-cifra { font-size: 1.75rem; font-family: var(--font-display); font-weight: 600; }
.recuadro-medidor .medidor-segmento { width: 6px; height: 20px; }
.recuadro-medidor .medidor-etiqueta { font-size: 0.9375rem; }
.recuadro-formula { margin: 0; font-size: 0.875rem; }
.recuadro-nota { margin: 0; font-size: 0.8125rem; color: var(--text-muted); }
.recuadro-vacio { margin: auto 0; color: var(--text-muted); font-size: 0.875rem; }
.recuadro-cifra-texto { margin: 0; font-size: 0.9375rem; }
.recuadro-cifra { font-size: 1.75rem; font-weight: 600; font-family: var(--font-display); }
.recuadro-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* A 1024 px (menú plegado) caben los tres recuadros; se apilan debajo de 900. */
@media (max-width: 900px) {
    .recuadros-calificacion { grid-template-columns: minmax(0, 1fr); }
}

.seccion-ficha { margin-top: 28px; }
.seccion-ficha-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.seccion-ficha-encabezado h2 { margin: 0; }
.seccion-ficha-encabezado .ayuda { margin: 2px 0 0; }
.seccion-ficha > .despliegue { margin: 0 0 14px; }
.ficha-texto + .recuadros-calificacion + .alerta { margin-bottom: 0; }
.subtitulo-ficha { margin: 20px 0 10px; }
.sugerencia-tarjeta p { margin: 0; }
.kri-tarjeta-encabezado .ayuda { margin: 2px 0 0; }
.fila-medicion { align-items: flex-end; margin-top: 12px; }
/* Captura de prueba del capturista, desplegada dentro de la fila. */
.despliegue-fila { margin-top: 0; }
.formulario-mini { display: flex; flex-direction: column; gap: 8px; min-width: 220px; text-align: left; }

/* Vista previa de efectividad: informativa, no advertencia. */
.nota-informativa {
    padding: 12px 16px;
    border-radius: var(--radio-control);
    border: 1px solid var(--border);
    border-left: 3px solid var(--route);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.rejilla-sugerencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.sugerencia-tarjeta { display: flex; flex-direction: column; gap: 8px; }
.sugerencia-tarjeta .fila-acciones { justify-content: space-between; }

/* Gráfica de línea de KRI (KriEngine::graficoSvg). Bandas, línea y puntos
   llevan su color como atributo escrito por PHP; aquí solo la tipografía
   de etiquetas y el marco, con valor de respaldo por si la variable no
   resolviera (por eso los cuatro hexadecimales de respaldo). */
/* Ronda 3B 0.7: el marco abraza el dibujo (680×280). Antes el marco tomaba
   todo el ancho con alto fijo y el dibujo quedaba centrado con dos franjas
   vacías a los lados. */
.kri-grafico { display: block; width: 100%; max-width: 680px; height: auto; margin-top: 10px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radio-radius, 10px); }
.kri-eje-etiqueta { font-family: var(--font-mono); font-size: 10px; fill: var(--text-muted); }
/* Los atributos de color de la gráfica sirven al PDF (sin variables CSS);
   en pantalla el CSS los reemplaza por tokens para que la serie se lea en
   tema oscuro (antes --ink sobre fondo oscuro, ~1.2:1). */
.kri-grafico .kri-linea { stroke: var(--text); }
.kri-grafico .kri-punto { stroke: var(--bg-elevated); }
.kri-grafico-vacio { font-family: var(--font-body); font-size: 13px; fill: var(--text-muted); }

.kri-tarjeta-encabezado { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; }
.kri-tarjeta-encabezado h3 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   14 · Pantallas con piezas propias
   ========================================================================== */
/* Alta de área al vuelo desde cualquier selector de catálogo. */
.selector-area-catalogo { display: flex; flex-direction: column; gap: 6px; }
.crear-area-inline { display: none; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Importadores. */
/* Ronda 3B: archivo rechazado por el servidor → la zona también se marca (más específica que la regla base). */
.zona-arrastre:has(input[aria-invalid='true']) { border-color: var(--close); }
.zona-arrastre {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 40px 20px;
    border: 2px dashed var(--borde-control);
    border-radius: var(--radio-radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--dur-rapida) var(--curva-salida), background-color var(--dur-rapida) var(--curva-salida);
}

.zona-arrastre:hover, .zona-arrastre:focus-visible, .zona-arrastre-activa { border-color: var(--route); background: var(--route-tenue); }
/* El selector de archivo real: con JS, oculto de forma accesible detrás de
   la zona (que lo abre); sin JS, visible y normal. */
html.js .zona-arrastre .entrada-archivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
html:not(.js) .zona-arrastre { cursor: default; }
.boton-subir-archivo { margin-top: 16px; }
.zona-arrastre-titulo { font-weight: 600; color: var(--text); margin: 8px 0 0; }
.zona-arrastre-ayuda { font-size: 0.8125rem; margin: 0; }
.archivo-elegido { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radio-radius); background: var(--bg); }
.archivo-elegido span { flex: 1; font-size: 0.875rem; word-break: break-all; }
.lista-pasos { margin: 0 0 18px; padding-left: 20px; color: var(--text-muted); font-size: 0.875rem; line-height: 1.7; }

.tabla-mapeo select { min-width: 220px; }
.tabla-previsualizacion { font-size: 0.8125rem; }
.tabla-previsualizacion .campo-celda { min-height: 32px; padding: 5px 8px; font-size: 0.8125rem; white-space: normal; }
.tabla-previsualizacion textarea.campo-celda { resize: vertical; }
/* Ancho de cada celda editable de la vista previa, según lo que suele
   llevar (número, nombre, descripción…). */
.campo-celda[data-ancho='xs'] { width: 56px; }
.campo-celda[data-ancho='s'] { width: 84px; }
.campo-celda[data-ancho='m'] { width: 128px; }
.campo-celda[data-ancho='l'] { width: 172px; }
.campo-celda[data-ancho='xl'] { width: 224px; }
.tabla-previsualizacion .motivos { white-space: normal; min-width: 180px; max-width: 240px; font-size: 0.75rem; color: var(--text-muted); }
.tabla-previsualizacion .motivos ul { margin: 0; padding-left: 16px; }
.fila-estado-error td:first-child { box-shadow: inset 3px 0 0 var(--r-crit); }
.fila-estado-advertencia td:first-child { box-shadow: inset 3px 0 0 var(--borde-control); }
.resumen-importacion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

/* Asignación y avance. */
.selector-alcance { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.selector-alcance label { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.buscador-lista { margin-bottom: 8px; }
.lista-checks { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radio-radius); padding: 8px 12px; background: var(--bg-elevated); }
.lista-checks label { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; font-weight: 400; }
.lista-checks label .cuenta { margin-left: auto; color: var(--text-muted); font-size: 0.8125rem; white-space: nowrap; }

.panel-vista-previa {
    background: var(--bg-elevated);
    border: 1px solid var(--borde-control);
    border-radius: var(--radio-radius);
    padding: 14px 18px;
    margin: 18px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.panel-vista-previa .cifra { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--route-texto); }
.panel-vista-previa .resumen-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--text-muted); }
.panel-vista-previa .resumen-numero { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); font-size: 1rem; }

.columnas-asignacion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-bottom: 18px; }
.titulo-columna-asignacion { margin: 0 0 12px; font-size: 0.9375rem; }
.opciones-alcance { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.opcion-alcance { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radio-radius); cursor: pointer; background: var(--bg-elevated); }
.opcion-alcance:has(input:checked) { border-color: var(--route); background: var(--route-tenue); }
.opcion-alcance:has(input:disabled) { cursor: not-allowed; opacity: 0.55; }
.opcion-alcance-encabezado { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.opcion-alcance-ayuda { font-size: 0.8125rem; color: var(--text-muted); margin-left: 24px; }
/* Bloques que el JS muestra u oculta según una elección (el panel del
   alcance elegido, el ciclo de origen al clonar): sin JS no hay quién los
   muestre, así que se ven todos. Antes, sin JS, elegir "Por categoría" no
   mostraba sus casillas y clonar un ciclo era imposible. */
html:not(.js) .panel-alcance[hidden],
html:not(.js) [data-visible-sin-js][hidden] { display: block !important; }
.encabezado-evaluadores { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.acciones-lista-evaluadores { font-size: 0.8125rem; white-space: nowrap; }
.lista-evaluadores { border: 1px solid var(--border); border-radius: var(--radio-radius); background: var(--bg-elevated); max-height: 420px; overflow-y: auto; }
.fila-evaluador { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); }
.fila-evaluador:last-child { border-bottom: none; }
.fila-evaluador input[type='checkbox'] { margin-top: 3px; flex-shrink: 0; }
.fila-evaluador-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fila-evaluador-nombre { font-size: 0.9375rem; color: var(--text); }
.fila-evaluador-cargo { font-size: 0.8125rem; color: var(--text-muted); }

@media (max-width: 780px) {
    .columnas-asignacion { grid-template-columns: minmax(0, 1fr); }
}

/* Resumen fijo al pie en celular: barra flotante en el borde inferior. */
@media (max-width: 480px) {
    #form-asignacion { padding-bottom: 132px; }
    .panel-vista-previa { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; flex-direction: column; align-items: stretch; box-shadow: var(--sombra-flotante); padding: 10px 14px; gap: 8px; }
    .panel-vista-previa .resumen-texto { justify-content: center; text-align: center; font-size: 0.8125rem; gap: 4px; }
    .panel-vista-previa .resumen-numero { font-size: 0.875rem; }
    .panel-vista-previa #boton-asignar { width: 100%; }
}

/* Barra de progreso fina (avance de evaluadores, de planes). */
.barra-avance { display: block; width: 100%; min-width: 64px; height: 6px; border-radius: 3px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.barra-avance > span { display: block; height: 100%; background: var(--route); border-radius: 3px; }

/* Configuración › Marca (U-10, U-11). */
.vista-previa-logo { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 12px; border: 1px dashed var(--borde-control); border-radius: var(--radio-control); background: var(--bg-elevated); }
.vista-previa-logo img { max-height: 48px; width: auto; }

/* Ronda 4C, Parte D — Administración maestra › Marca del producto. */
.marca-producto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1100px) { .marca-producto { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.formulario-marca-producto .campo { margin: 0; }
.formulario-marca-producto .campo + .campo { padding-top: 16px; border-top: 1px solid var(--border); }
.formulario-marca-producto input[type="file"] { max-width: 100%; min-height: 44px; }
.campo-aviso { margin: 6px 0 0; font-size: 0.8125rem; color: var(--text); padding: 6px 10px; border-left: 3px solid var(--borde-control); background: var(--bg); border-radius: var(--radio-control); }
.marca-actual { margin-top: 10px; }
.marca-sin-imagen { margin-top: 8px; }
.vista-previa-logo-oscura { background: var(--sidebar-bg); border-color: var(--sidebar-borde); }
/* Fondo claro fijo: el logo principal es para papel y fondos claros, también en tema oscuro. */
.vista-previa-logo-clara { background: var(--papel-fijo); }
.marca-previa-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.marca-previa-caso { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.marca-previa-caso figcaption { font-size: 0.8125rem; color: var(--text-muted); }
.marca-previa-lienzo { min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; border-radius: var(--radio-control); border: 1px solid var(--border); overflow: hidden; }
/* Lienzos de color fijo (no siguen el tema): así se ve el logo en cada fondo real. */
.marca-lienzo-claro { background: var(--papel-fijo); color: var(--ink); }
.marca-lienzo-lateral { background: var(--sidebar-bg); color: var(--sidebar-text); align-items: flex-start; }
.marca-lienzo-papel { background: var(--papel-fijo); color: var(--ink); justify-content: flex-end; align-items: stretch; }
.marca-previa-logo { max-height: 48px; max-width: 100%; width: auto; object-fit: contain; }
.marca-previa-texto { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.marca-previa-sub { font-size: 0.75rem; color: var(--ink); opacity: 0.75; }
.marca-lienzo-papel { flex-direction: row; gap: 10px; padding-top: 50px; border-top: 0; }
.marca-lienzo-papel > * { border-top: 1px solid var(--borde-control); padding-top: 4px; }
.marca-previa-logo-pie { max-height: 14px; max-width: 90px; width: auto; object-fit: contain; }
.marca-lienzo-papel .marca-previa-texto { font-size: 0.6875rem; }
.marca-previa-pie { font-size: 0.6875rem; flex: 1; text-align: right; opacity: 0.8; }
.marca-lienzo-pestana { flex-direction: row; justify-content: space-between; }
.marca-previa-pestana { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radio-control) var(--radio-control) 0 0; background: var(--paper); font-size: 0.75rem; max-width: 60%; }
.marca-previa-favicon { width: 16px; height: 16px; object-fit: contain; }
.marca-previa-app { width: 56px; height: 56px; object-fit: contain; border-radius: var(--radio-control); background: var(--papel-fijo); box-shadow: var(--sombra-card); }
.marca-lienzo-pestana .marca-previa-texto { font-size: 0.75rem; }

/* ==========================================================================
   15 · Guía de estilo (/diseno, solo dev), transición entre pantallas,
   mejora progresiva, movimiento reducido e impresión
   ========================================================================== */
.guia-estilo .boton-primario.forzar-hover { filter: brightness(1.08); }
.guia-estilo .boton-secundario.forzar-hover { background: var(--bg); }
.guia-estilo .forzar-foco { outline: none; box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--focus-ring); }
.guia-estilo .campo-error-forzado { border-color: var(--r-crit) !important; }
.guia-estilo section.guia-seccion { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radio-radius); padding: 20px 22px; margin-bottom: 16px; }
.guia-estilo section.guia-seccion > h2 { margin: 0 0 4px; font-size: 1.125rem; }
.guia-estilo .guia-nota { color: var(--text-muted); font-size: 0.8125rem; margin: 0 0 14px; }
.guia-estilo .guia-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.guia-estilo .guia-etiqueta { font-size: 0.75rem; color: var(--text-muted); min-width: 110px; }
.guia-estilo .guia-muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.guia-estilo .guia-muestra { border: 1px solid var(--border); border-radius: var(--radio-control); overflow: hidden; font-size: 0.75rem; }
.guia-estilo .guia-muestra i { display: block; height: 44px; }
.guia-estilo .guia-muestra span { display: block; padding: 6px 8px; }
.guia-estilo .guia-indice { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; font-size: 0.875rem; }

/* Transición entre pantallas del panel (View Transitions entre documentos;
   donde no hay soporte, navegación normal): fundido cruzado corto y el
   título de la página como elemento compartido. */
@view-transition { navigation: auto; }
.cabecera-pagina h1, .ficha-titulo h1 { view-transition-name: titulo-pagina; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-media); animation-timing-function: var(--curva-salida); }
::view-transition-group(titulo-pagina) { animation-duration: var(--dur-media); animation-timing-function: var(--curva-salida); }

/* Sin JS: las opciones de los menús se ven en línea y el botón que las
   abriría no se muestra; los chips son fieldsets visibles; la campana no se
   muestra (cada aviso es un atajo a una pantalla que sigue disponible). */
html:not(.js) [data-menu-gatillo] { display: none; }
html:not(.js) .centro-avisos { display: none; }
html:not(.js) .menu-fila-lista:not(.panel-avisos),
html:not(.js) .menu-fila-lista[hidden]:not(.panel-avisos) {
    position: static;
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    animation: none;
}

html:not(.js) .menu-fila-lista > a,
html:not(.js) .menu-fila-lista > button,
html:not(.js) .menu-fila-lista > form > button { width: auto; padding: 4px 6px; color: var(--route-texto); }
html:not(.js) .grupo-filtro label { white-space: nowrap; }
html:not(.js) .cabecera-pagina .acciones { flex-shrink: 1; max-width: 100%; }
html:not(.js) .cabecera-pagina .menu-fila { display: flex; flex-wrap: wrap; min-width: 0; }
html:not(.js) .cabecera-pagina .menu-fila-lista { flex: 1 1 100%; }

@media (prefers-reduced-motion: reduce) {
    .superficie-flotante, dialog[open], dialog.dialogo-cerrando,
    .alerta-pagina, .alerta-pagina-critica .alerta-pagina-icono,
    .toast, .toast-saliendo { animation: fundir var(--dur-instante) linear both; }
    .toast-saliendo { animation-direction: reverse; }
    .toast-palomita { animation: none; stroke-dashoffset: 0; }
    dialog[open]::backdrop { animation: none; }
    .boton[data-estado='error'], .campana-salta { animation: none; }
    .boton-spinner { animation-duration: var(--dur-ciclo-carga); }
    .control-segmentado .pastilla-segmentada, .indicador-pestana { transition: none; }
    .esqueleto::after { animation: none; display: none; }
    @view-transition { navigation: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   Responsive del shell — 1440 / 1024 / 390
   ========================================================================== */
/* A 1024 px el menú se pliega a iconos: el texto queda para lectores de
   pantalla y como título al pasar el puntero. */
@media (max-width: 1024px) and (min-width: 701px) {
    .shell { --ancho-menu: 64px; }
    .barra-lateral-contenido { padding: 14px 8px; }
    .marca-lateral { justify-content: center; padding: 4px 0 14px; }
    /* Plegada: el icono cuadrado si lo hay; si no, el logo cabe en los 48 px. */
    .marca-lateral-con-icono .marca-lateral-logo { display: none; }
    .marca-lateral-con-icono .marca-lateral-icono { display: block; }
    .marca-lateral-con-logo:not(.marca-lateral-con-icono) .marca-lateral-logo { display: none; }
    .marca-lateral .marca-lateral-escudo-plegada { display: block; }
    .marca-lateral span, .nav-grupo-titulo, .pie-lateral { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .nav-grupo { border-top: 1px solid var(--sidebar-borde); padding-top: 6px; }
    .nav-grupo:first-child { border-top: none; }
    .nav-item { justify-content: center; padding: 0; width: 44px; min-height: 40px; margin: 0 auto; }
    .nav-item .nav-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .nav-item.activo::before { left: -10px; }
    .encabezado { padding: 10px 20px; }
    .contenido-panel { padding: 22px 20px; }
}

/* A 700 px o menos, menú deslizable con fondo. */
@media (max-width: 700px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .barra-lateral {
        position: fixed;
        inset: 0 auto 0 0;
        width: 272px;
        transform: translateX(-100%);
        transition: transform var(--dur-media) var(--curva-salida);
        z-index: 40;
    }
    .barra-lateral.abierta { transform: translateX(0); box-shadow: var(--sombra-flotante); }
    .fondo-menu-movil { position: fixed; inset: 0; background: var(--fondo-modal); z-index: 30; }
    .fondo-menu-movil.visible { display: block; }
    .abrir-menu-movil { display: inline-flex; }
    .encabezado { padding: 10px 16px; }
    .contenido-panel { padding: 18px 16px; }
}

/* U-04: a 390 px cada selector de contexto toma su fila completa y el
   <select> todo el ancho: un director confirma desde el teléfono qué ciclo
   ve. */
@media (max-width: 480px) {
    .selectores-encabezado { width: 100%; order: 3; flex-direction: column; align-items: stretch; gap: 8px; }
    .selector-contexto { width: 100%; }
    .selector-contexto form { display: flex; flex: 1; min-width: 0; }
    .selector-contexto select { width: 100%; }
    .info-usuario { display: none; }
    html:not(.js) .selector-contexto form { flex-wrap: wrap; gap: 8px; }
    html:not(.js) .selector-contexto select { flex: 1 1 100%; }
    .panel-avisos { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }
    .cabecera-pagina h1, .ficha-titulo h1 { font-size: 1.5rem; }
}

@media print {
    .pila-toasts { display: none !important; }
    .tabla-scroll { max-height: none; overflow: visible; background: none; }
    .tabla-densa thead th { position: static; }
    .orquestar .cifra-contable, .orquestar .indicador-cifra { opacity: 1 !important; }
    .orquestar .barra-crece { transform: none !important; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Guía de estilo: piezas de demostración (Ronda 3, Paso 2). */
.guia-estilo .guia-subtitulo { font-size: 0.9375rem; margin: 18px 0 8px; }
.guia-estilo .guia-fila-separada { margin-top: 14px; }
.guia-estilo .guia-nota-en-linea { margin: 0; }
.guia-estilo .guia-texto-banda .medidor-etiqueta { font-weight: 600; font-size: 0.875rem; }
.guia-estilo .guia-titulo-muestra { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; }
.guia-estilo .guia-parrafo-muestra { margin: 8px 0 4px; }
.guia-estilo .guia-riel { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radio-control); }
.guia-estilo .guia-rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.guia-estilo .guia-carga { max-width: 520px; }
.guia-estilo .guia-carga p { margin: 0; }
.guia-estilo .esqueleto-linea { height: 14px; margin-bottom: 8px; }
.guia-estilo .esqueleto-linea[data-ancho='70'] { width: 70%; }
.guia-estilo .esqueleto-linea[data-ancho='90'] { width: 90%; }
.guia-estilo .esqueleto-linea[data-ancho='50'] { width: 50%; margin-bottom: 0; }
.guia-estilo .guia-color[data-token='--ink'] { background: var(--ink); }
.guia-estilo .guia-color[data-token='--paper'] { background: var(--paper); }
.guia-estilo .guia-color[data-token='--route'] { background: var(--route); }
.guia-estilo .guia-color[data-token='--close'] { background: var(--close); }
.guia-estilo .guia-color[data-token='--r-low'] { background: var(--r-low); }
.guia-estilo .guia-color[data-token='--r-mod'] { background: var(--r-mod); }
.guia-estilo .guia-color[data-token='--r-high'] { background: var(--r-high); }
.guia-estilo .guia-color[data-token='--r-crit'] { background: var(--r-crit); }

/* Campo de archivo: el botón del navegador ("Choose File") con el estilo
   del botón secundario, en los dos temas. */
input[type='file'] { font: inherit; color: var(--text-muted); max-width: 100%; }
input[type='file']::file-selector-button {
    font: inherit; font-weight: 600; color: var(--text); background: var(--bg-elevated);
    border: 1px solid var(--borde-control); border-radius: var(--radio-control);
    padding: 6px 14px; margin-right: 10px; cursor: pointer;
}
input[type='file']::file-selector-button:hover { background: var(--bg); }

/* Ronda 4 — centro de impresión (/imprimir): una tarjeta por documento. */
.centro-impresion-contexto { margin: 0 0 16px; }
.rejilla-impresion { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.tarjeta-impresion > .ayuda { margin: 0 0 14px; }
.tarjeta-impresion select { width: 100%; }
.tarjeta-impresion fieldset { border: none; padding: 0; margin: 0 0 16px; min-width: 0; }
.tarjeta-impresion fieldset .opcion-casilla { min-height: 28px; align-items: center; }
.tarjeta-impresion fieldset .opcion-casilla input { margin-top: 0; }
.opciones-en-linea { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.opciones-en-linea legend { flex-basis: 100%; }
.nota-columnas { margin: 8px 0 0; }
html:not(.js) .solo-con-js { display: none; }
.opciones-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.subformulario-impresion + .subformulario-impresion { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 767px) {
    .tarjeta-impresion fieldset .opcion-casilla { min-height: 44px; }
    .tarjeta-impresion .boton { width: 100%; min-height: 44px; }
}