/* CoreStudio — especificación visual índigo sobre grises SB.

   TODO va bajo .cs-app, que solo lleva MainLayout. El login usa EmptyLayout y queda
   deliberadamente fuera del rediseño, así que nada de acá lo alcanza.

   Los tokens repiten los de AppTheme.cs; si cambia uno, cambiarlo en los dos lados. */

/* Los tokens viven en :root y no en .cs-app porque MudDialogProvider y MudPopoverProvider
   renderizan FUERA del layout: un popup no vería las variables si estuvieran acotadas.
   Declararlas no pinta nada por sí solo, así que el login sigue intacto. */
:root {
    /* Identidad: un solo acento. Los semánticos se reservan para estado. */
    --indigo-900: #2a2e6b;
    --indigo-700: #3a3e9e;
    --indigo-500: #4f53c4;
    --indigo-100: #eef0fb;

    /* Semánticos */
    --primary: #4e73df;
    --secondary: #858796;
    --success: #1cc88a;
    --info: #36b9cc;
    --warning: #f6c23e;
    --danger: #e74a3b;

    /* Variantes de texto sobre fondo claro (contraste AA) y sus tintes */
    --success-text: #12805c;
    --warning-text: #9c7015;
    --danger-text: #b1382c;
    --info-text: #1f7f8c;
    --success-bg: #e6f7f0;
    --warning-bg: #fdf6e3;
    --danger-bg: #fdecea;
    --info-bg: #e7f6f8;
    --danger-border: #f4d4d0;

    /* Grises */
    --gray-100: #f8f9fc;
    --gray-200: #eaecf4;
    --gray-300: #dddfeb;
    --gray-400: #d1d3e2;
    --gray-500: #b7b9cc;
    --gray-600: #858796;
    --gray-700: #6e707e;
    --gray-800: #5a5c69;
    --gray-900: #3a3b45;
    --border: #e3e6f0;

    /* Geometría y elevación */
    --radius: 6px;
    --radius-lg: 10px;
    --shadow-card: 0 2px 6px rgba(58, 59, 69, .09);
    --shadow-btn: 0 1px 3px rgba(58, 59, 69, .18);
    --shadow-menu: 0 12px 32px rgba(58, 59, 69, .18);
    --focus-ring: 0 0 0 3px rgba(79, 83, 196, .25);

    /* Retícula */
    --nav-ancho: 220px;
    --header-alto: 56px;
    --pad-h: 22px;
    --lectura: 720px;

    --sans: 'Instrument Sans', Helvetica, Arial, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cs-app {
    font-family: var(--sans);
    color: var(--gray-700);
}

/* app.css fuerza Lato con !important sobre body, botones e inputs; sin esto la tipografía
   de la especificación no llega a aplicarse. Se revierte solo dentro de .cs-app, así que el
   login conserva su Lato. */
.cs-app,
.cs-app .mud-typography,
.cs-app .mud-input, .cs-app .mud-input-control, .cs-app .mud-input-root,
.cs-app .mud-button-root,
.cs-app input, .cs-app button, .cs-app textarea, .cs-app select, .cs-app label {
    font-family: var(--sans) !important;
}
/* Mono SOLO para datos técnicos: versiones, fechas, contadores e identificadores (§3).
   Las etiquetas de sección y las cabeceras de tabla no son datos: van en sans. */
.cs-app .cs-mono, .cs-app .cs-version, .cs-app .cs-fila .idx,
.cs-app .cs-nav-cuenta, .cs-app .cs-ficha > header .idx, .cs-app .cs-ficha .tag.ver,
.cs-app .cs-filtros .cuenta, .cs-app .cs-paginacion .cuenta {
    font-family: var(--mono) !important;
}

/* ── Estructura ──────────────────────────────────────────────────────────────── */
/* Menú lateral siempre claro (§2). El contraste de superficie lo da el fondo gris de la
   página contra las tarjetas blancas, no las sombras fuertes. No hay barra superior: la
   marca vive arriba de la nav. */
.cs-app .mud-drawer {
    width: var(--nav-ancho);
    background: #fff;
    border-right: 1px solid var(--border);
    box-shadow: none;
    top: 0;
    height: 100vh;
}
.cs-app .mud-main-content { background: var(--gray-100); padding-top: 0 !important; }
.cs-contenido { padding: 22px var(--pad-h) 26px; min-height: 100vh; }

.cs-marca {
    display: flex; align-items: center; gap: 9px;
    height: var(--header-alto);
    padding: 0 14px;
    border-bottom: 1px solid var(--gray-200);
    flex: 0 0 auto;
}
.cs-marca img { height: 22px; width: 22px; object-fit: contain; }
.cs-marca span { font-size: 15px; font-weight: 700; color: var(--gray-900); }

/* ── Navegación lateral ──────────────────────────────────────────────────────── */
.cs-nav { padding: 6px 0 0; }
.cs-nav-grupo {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gray-500);
    padding: 14px 20px 6px;
}
.cs-app .mud-nav-link {
    padding: 9px 10px;
    margin: 0 10px 2px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-700);
    min-height: 34px;
    transition: background .12s ease-out, color .12s ease-out;
}
.cs-app .mud-nav-link:hover { background: var(--gray-100); }
.cs-app .mud-nav-link .mud-icon-root { font-size: 15px; color: currentColor; opacity: .6; }

/* MudBlazor pinta el activo con .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(...),
   que son cinco clases; hay que igualar o superar esa especificidad para que el índigo gane.
   Se cubren también hover, foco y activo, que MudBlazor devuelve a su color de fondo. */
.cs-app .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled),
.cs-app .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover,
.cs-app .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible,
.cs-app .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):active {
    background-color: var(--indigo-900);
    color: #fff;
    font-weight: 600;
}
.cs-app .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root { color: #fff; opacity: .9; }
.cs-app .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) .cs-nav-cuenta { color: rgba(255, 255, 255, .82); }

.cs-nav-cuenta { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--gray-500); }
.cs-app .mud-nav-link .mud-nav-link-text { display: flex; align-items: center; width: 100%; }

/* ── Menú de usuario del pie de la nav ───────────────────────────────────────── */
.cs-nav-pie {
    position: relative;
    border-top: 1px solid var(--gray-200);
    padding: 12px 14px;
}

.cs-app .cs-um-disparador {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; min-height: 34px;
    padding: 4px 6px; margin: -4px -6px;
    border: 0; border-radius: var(--radius);
    background: none; font-family: inherit; text-align: left;
    cursor: pointer;
    transition: background .12s ease-out;
}
.cs-app .cs-um-disparador:hover,
.cs-app .cs-um-disparador[aria-expanded="true"] { background: var(--gray-100); }
.cs-nav-pie .avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--indigo-500);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    flex: 0 0 auto;
}
.cs-nav-pie .datos { min-width: 0; line-height: 1.25; font-size: 11px; color: var(--gray-500); }
.cs-nav-pie .quien {
    font-size: 12px; font-weight: 600; color: var(--gray-800);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-um-chev { margin-left: auto; color: var(--gray-500); flex: 0 0 auto; transition: transform .12s ease-out; }
.cs-app .cs-um-disparador[aria-expanded="true"] .cs-um-chev { transform: rotate(180deg); }

.cs-um-velo { position: fixed; inset: 0; z-index: 1400; }
.cs-um-pop {
    position: fixed;
    left: 10px; bottom: 56px;
    width: 216px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-menu);
    padding: 6px;
    z-index: 1401;
    animation: cs-um-entra .16s ease-out;
}
@keyframes cs-um-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.cs-um-cab { padding: 6px 10px 8px; border-bottom: 1px solid var(--gray-200); margin-bottom: 4px; }
.cs-um-cab .nom { font-size: 12.5px; font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-um-cab .correo { font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-um-rol {
    display: inline-block; margin-top: 6px;
    font-size: 10.5px; font-weight: 700;
    background: var(--indigo-100); color: var(--indigo-900);
    border-radius: 99px; padding: 2px 8px;
}

.cs-app .cs-um-item {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; height: 32px; padding: 0 10px;
    border: 0; border-radius: var(--radius);
    background: none; font-family: inherit; text-align: left;
    font-size: 12.5px; color: var(--gray-700);
    cursor: pointer;
    transition: background .12s ease-out, color .12s ease-out;
}
.cs-app .cs-um-item:hover { background: var(--gray-100); }
.cs-um-item svg { color: var(--gray-600); flex: 0 0 auto; }
.cs-um-sep { height: 1px; background: var(--gray-200); margin: 4px 0; }
.cs-app .cs-um-item.salir { font-weight: 600; color: var(--danger); }
.cs-app .cs-um-item.salir svg { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
    .cs-um-pop { animation: none; }
}

/* ── Cabecera de página ──────────────────────────────────────────────────────── */
.cs-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--gray-500);
}
.cs-h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--gray-800); margin: 0; }
.cs-sub { font-size: 12.5px; color: var(--gray-600); margin-top: 2px; }
.cs-page-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
    margin-bottom: 18px;
}
/* Variante apilada: la acción primaria baja bajo el subtítulo, alineada con el título. */
.cs-page-head.apilada { display: block; }
.cs-page-head.apilada .acciones { display: flex; gap: 8px; margin-top: 14px; }

/* ── Tipografía de datos ─────────────────────────────────────────────────────── */
.cs-mono { font-size: 11.5px; font-weight: 500; color: var(--gray-700); }
.cs-col { font-size: 10px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--gray-500); }
.cs-meta-lab { font-size: 10px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--gray-500); }
.cs-meta-val { font-size: 12.5px; color: var(--gray-600); }

/* ── Fila de lista (listados densos, §5.8) ───────────────────────────────────── */
.cs-lista { border-top: 1px solid var(--gray-200); }
.cs-fila {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 8px;
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
    transition: background .12s ease-out;
}
.cs-fila:hover { background: var(--gray-100); }
.cs-fila.sel { background: var(--indigo-100); }
.cs-fila .idx { font-size: 11px; color: var(--gray-500); width: 26px; flex: 0 0 auto; }
.cs-fila .nom { font-size: 13.5px; font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-fila .sub { font-size: 12.5px; color: var(--gray-600); }
.cs-fila .metas { display: flex; gap: 22px; margin-left: auto; }
.cs-fila .acciones { display: flex; gap: 6px; opacity: .28; transition: opacity .12s ease-out; }
.cs-fila:hover .acciones, .cs-fila:focus-within .acciones { opacity: 1; }

/* El estado nunca depende solo del color: el punto siempre acompaña a un texto. */
.cs-punto { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.cs-punto.ok { background: var(--success); }
.cs-punto.borrador { background: var(--warning); }
.cs-punto.error { background: var(--danger); }
.cs-punto.off { background: var(--gray-400); }

/* ── Botones ─────────────────────────────────────────────────────────────────── */
.cs-app .mud-button-root {
    border-radius: var(--radius);
    text-transform: none;
    font-weight: 600;
    font-size: 12.5px;
    min-height: 34px;
}
.cs-app .mud-button-filled.mud-button-filled-primary {
    background: var(--indigo-900); color: #fff; box-shadow: var(--shadow-btn);
}
.cs-app .mud-button-filled.mud-button-filled-primary:hover { background: #22265a; box-shadow: var(--shadow-btn); }
.cs-app .mud-button-outlined { border-color: var(--gray-400); color: var(--gray-700); background: #fff; }
.cs-app .mud-button-outlined:hover { background: var(--gray-100); }
.cs-app .mud-button-text { color: var(--indigo-700); }
.cs-app .mud-button-outlined.mud-button-outlined-error { border-color: var(--danger-border); color: var(--danger-text); background: #fff; }
.cs-app .mud-button-outlined.mud-button-outlined-error:hover { background: var(--danger-bg); }

/* Acciones de fila y paginación: 28 px. */
.cs-accion-fila {
    height: 28px; padding: 0 9px;
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--gray-400); border-radius: var(--radius);
    background: #fff; color: var(--gray-700);
    font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.cs-accion-fila:hover { background: var(--gray-100); }
.cs-accion-fila.destructiva { border-color: var(--danger-border); color: var(--danger-text); }
.cs-accion-fila.destructiva:hover { background: var(--danger-bg); }

/* ── Tarjeta KPI (§5.5) ──────────────────────────────────────────────────────── */
.cs-metricas { display: flex; gap: 12px; margin-bottom: 18px; }
.cs-metrica {
    flex: 1 1 0;
    background: #fff;
    border-radius: var(--radius);
    border-left: 4px solid var(--indigo-500);
    box-shadow: var(--shadow-card);
    padding: 16px 18px;
}
.cs-metrica .lab { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--indigo-500); }
.cs-metrica .val { font-size: 22px; font-weight: 700; color: var(--gray-800); margin-top: 4px; }
.cs-metrica.ok { border-left-color: var(--success); }
.cs-metrica.ok .lab { color: var(--success-text); }
.cs-metrica.aviso { border-left-color: var(--warning); }
.cs-metrica.aviso .lab { color: var(--warning-text); }
.cs-metrica.error { border-left-color: var(--danger); }
.cs-metrica.error .lab { color: var(--danger-text); }
.cs-metrica .pista { height: 8px; border-radius: 99px; background: var(--gray-200); margin-top: 10px; overflow: hidden; }
.cs-metrica .pista > i { display: block; height: 100%; border-radius: 99px; background: var(--indigo-500); }

/* ── Contenedor con cabecera (§5.6) ──────────────────────────────────────────── */
.cs-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.cs-panel > header {
    height: 46px; display: flex; align-items: center; gap: 10px;
    padding: 0 18px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 13.5px; font-weight: 700; color: var(--indigo-900);
}
.cs-panel > header .cuenta { font-weight: 400; color: var(--gray-500); }
.cs-panel > header .acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Panel plegable: la cabecera entera es el disparador y, plegada, lleva el resumen. */
.cs-app .cs-panel-tog {
    display: flex; align-items: center; gap: 10px;
    width: 100%; height: 46px; padding: 0;
    border: 0; background: none; text-align: left; cursor: pointer;
    font-size: 13.5px; font-weight: 700; color: var(--indigo-900);
    min-width: 0;
}
.cs-panel-tog > span:first-of-type { flex: 0 0 auto; }
.cs-panel-tog .chev { flex: 0 0 auto; margin-left: auto; color: var(--gray-500); transition: transform .12s ease-out; }
.cs-panel-tog[aria-expanded="true"] .chev { transform: rotate(180deg); }
.cs-panel-tog .cuenta {
    font-weight: 400; color: var(--gray-500);
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Sin cuerpo visible, la cabecera es el panel entero. */
.cs-panel.colapsado > header { border-bottom: 0; border-radius: var(--radius); }
.cs-panel > .cuerpo { padding: 18px; }

/* ── Barra de filtros ────────────────────────────────────────────────────────── */
.cs-filtros { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cs-filtros .buscador { max-width: 280px; flex: 1 1 auto; }
.cs-filtros .cuenta { margin-left: auto; font-size: 11.5px; color: var(--gray-600); }
.cs-app .cs-filtros .mud-input-control { min-height: 32px; }

/* ── Badges y chips (§5.9) ───────────────────────────────────────────────────── */
.cs-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 4px;
    font-size: 11.5px; font-weight: 700;
}
.cs-badge.publicada { background: var(--success-bg); color: var(--success-text); }
.cs-badge.borrador { background: var(--warning-bg); color: var(--warning-text); }
.cs-badge.deshabilitada { background: var(--gray-200); color: var(--gray-700); }
.cs-badge.error { background: var(--danger-bg); color: var(--danger-text); }

/* La etiqueta DEMO (spec 2026-10-02): marca todo lo de la demo junto al título, para que la lista de
   programas y el editor —que son las mismas pantallas en los dos mundos— nunca se confundan. Violeta
   a propósito: no se parece a ningún estado (publicada, borrador, error). */
.cs-demo-tag {
    display: inline-flex; align-items: center; vertical-align: middle;
    margin-left: 10px; padding: 3px 9px; border-radius: 4px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    background: #ede7f6; color: #5e35b1;
}
.cs-version {
    display: inline-block; padding: 3px 9px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
    background: var(--indigo-100); color: var(--indigo-900);
}

/* ── Ficha de programa ───────────────────────────────────────────────────────── */
/* Especificación propia: "Ficha de programa - especificacion.md" (propuesta 11a).
   Tamaño fijo de 400 × 500 px: caben tantas columnas como quepan, alineadas a la izquierda. */
.cs-fichas {
    display: grid;
    grid-template-columns: repeat(auto-fill, 400px);
    justify-content: start;
    gap: 18px;
}

.cs-ficha {
    width: 400px;
    height: 500px;
    box-sizing: border-box;
    display: flex; flex-direction: column; gap: 13px;
    background: #fff;
    border: 1px solid var(--border);
    border-top: 3px solid var(--indigo-900);   /* filete según estado */
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 16px 18px 18px;
    cursor: pointer;
    transition: box-shadow .12s ease-out;
}
.cs-ficha.con-cambios { border-top-color: var(--warning); }
.cs-ficha.nuevo { border-top-color: var(--gray-400); }
.cs-ficha:hover { box-shadow: 0 3px 12px rgba(58, 59, 69, .13); }
.cs-app .cs-ficha:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.cs-ficha > header { display: flex; align-items: flex-start; gap: 10px; }
.cs-ficha > header .tit {
    margin: 0;
    font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--gray-900);
    /* Hasta dos líneas; a partir de la tercera, elipsis (el title lleva el nombre completo). */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-ficha > header .idx {
    margin-left: auto; flex: 0 0 auto;
    font-size: 10.5px; font-weight: 600; color: var(--gray-400);
}

/* 9 px bajo el nombre: el gap de la ficha es 13, así que se resta. */
.cs-ficha .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
/* Los textos de sincronía nunca se cortan: el badge crece a una segunda línea. */
.cs-ficha .cs-badge { padding: 4px 10px; font-weight: 600; align-items: flex-start; }
.cs-ficha .cs-badge svg { flex: 0 0 auto; margin-top: 2px; }

.cs-ficha .datos {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 11px 13px;
    /* Con el alto fijo, un programa con nombres muy largos podria desbordar: el bloque de datos
       cede antes que las acciones, que siempre quedan visibles al pie. */
    min-height: 0;
    overflow: auto;
}
.cs-ficha .divisor { height: 1px; background: var(--gray-200); margin: 10px 0; }
.cs-ficha .sec-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cs-ficha .cs-meta-lab { font-size: 9.5px; }
.cs-ficha .sec-cab .cuenta { font-size: 10px; font-weight: 700; color: var(--gray-800); }
.cs-ficha .sec-cab .cuenta.vacia { color: var(--gray-500); }

.cs-ficha .acts { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cs-ficha .acts li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cs-ficha .acts .num { width: 14px; flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--gray-500); }
.cs-ficha .acts .nom { font-size: 12.5px; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ficha .acts .tag {
    margin-left: auto; flex: 0 0 auto;
    font-size: 10.5px; font-weight: 600; border-radius: 3px; padding: 2px 6px;
}
.cs-ficha .acts .tag.ver { background: var(--indigo-100); color: var(--indigo-900); }
.cs-ficha .acts .tag.aviso { background: var(--warning-bg); color: var(--warning-text); }

.cs-app .cs-ficha .mas-acts {
    margin-top: 7px; padding: 0; border: 0; background: none; text-align: left;
    font-size: 11.5px; font-weight: 600; color: var(--indigo-900); cursor: pointer;
}
.cs-app .cs-ficha .mas-acts:hover { color: var(--indigo-700); text-decoration: underline; }

.cs-app .cs-ficha .vacio {
    margin-top: 7px; display: flex; align-items: center; gap: 8px;
    padding: 0; border: 0; background: none; text-align: left;
    font-size: 12px; color: var(--gray-600); cursor: pointer;
}
.cs-ficha .vacio .mas {
    width: 24px; height: 24px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px dashed var(--gray-400); border-radius: 4px;
    color: var(--gray-500); font-size: 15px; line-height: 1;
}

.cs-ficha .vers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.cs-ficha .vers .cs-version { font-size: 11px; font-weight: 700; }
.cs-ficha .anteriores { font-size: 11px; font-weight: 600; color: var(--gray-600); }

/* El espacio sobrante queda entre los datos y el pie, no entre el pie y los botones. */
.cs-ficha .pie-meta { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--gray-500); }

/* Ancladas al fondo: todas las fichas alinean sus botones. */
.cs-ficha .acciones { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.cs-app .cs-ficha .editar {
    flex: 1 1 auto; height: 34px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 0; border-radius: var(--radius);
    background: var(--indigo-900); color: #fff;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    box-shadow: var(--shadow-btn);
}
.cs-app .cs-ficha .editar:hover { background: #22265a; }
.cs-app .cs-ficha .cuadrado {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray-400); border-radius: var(--radius);
    background: #fff; color: var(--gray-700); cursor: pointer;
}
.cs-app .cs-ficha .cuadrado:hover { background: var(--gray-100); }
.cs-app .cs-ficha .cuadrado.destructiva { border-color: var(--danger-border); color: var(--danger); }
.cs-app .cs-ficha .cuadrado.destructiva:hover { background: var(--danger-bg); }

/* ── Editor de actividad ────────────────────────────────────────── */
/* Comparte .cs-editor y .cs-editor-top con el editor de programa; acá solo van las piezas
   propias: cabecera con miga, ranuras de medio, réplicas y lista de pendientes. */
.cs-editor-top .izq { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.cs-editor-top .der { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cs-app .cs-editor-top .atras {
    width: 34px; height: 34px; flex: 0 0 auto; margin-top: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray-400); border-radius: var(--radius);
    background: #fff; color: var(--gray-700); cursor: pointer;
}
.cs-app .cs-editor-top .atras:hover { background: var(--gray-100); }
.cs-editor-top .miga { font-size: 12px; color: var(--gray-600); }
.cs-editor-top .linea { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.cs-editor-top .linea .cs-h1 { font-size: 20px; }

/* stretch, no start: las dos ranuras de medio quedan del mismo alto aunque sus banners no
   midan lo mismo. */
.cs-dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.cs-dos-col > .cs-slot { display: flex; flex-direction: column; }
.cs-dos-col > .cs-slot > .caja { flex: 1 1 auto; display: flex; flex-direction: column; }
.cs-dos-col > .cs-slot > .caja > .vista { margin-bottom: auto; }
/* Nombre · Sigla · Categoría en una sola línea: la sigla es corta y no merece su propia fila. */
.cs-portada-fila { display: grid; grid-template-columns: minmax(0, 1fr) 110px 220px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .cs-portada-fila { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .cs-dos-col { grid-template-columns: minmax(0, 1fr); } }
.cs-campo-lab .opc { font-weight: 400; color: var(--gray-500); }

/* Ranura de medio */
.cs-slot .cabecera { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.cs-slot .cabecera .lab { font-size: 12px; font-weight: 600; color: var(--gray-800); }
.cs-slot .cabecera .lab .req { color: var(--danger); font-weight: 700; margin-left: 3px; }
.cs-slot .cabecera .donde { font-size: 11.5px; color: var(--gray-500); }
/* Todo el estado de la ranura vive dentro de la misma caja, previsualización incluida: cuando
   falta el archivo, el rojo tiene que cubrir también el ejemplo de cómo se verá. */
.cs-slot .caja {
    padding: 13px 14px;
    border: 1px solid var(--gray-200); border-radius: var(--radius);
    background: #fff;
}
.cs-slot .caja > .fila { display: flex; align-items: flex-start; gap: 14px; }
.cs-slot .datos { flex: 1 1 auto; min-width: 0; }
.cs-slot .error { font-size: 12.5px; font-weight: 700; color: var(--danger-text); }
.cs-slot .archivo { font-size: 12.5px; font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-slot .archivo.vacio { font-weight: 400; color: var(--gray-500); }
.cs-slot .ayuda { font-size: 11.5px; color: var(--gray-600); margin-top: 2px; }
.cs-slot .botones { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cs-app .cs-slot .botones button {
    height: 30px; padding: 0 12px;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--gray-400); border-radius: var(--radius);
    background: #fff; color: var(--gray-700);
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.cs-app .cs-slot .botones button:hover { background: var(--gray-100); }
.cs-app .cs-slot .botones button.principal {
    border-color: var(--indigo-900); background: var(--indigo-900); color: #fff;
}
.cs-app .cs-slot .botones button.principal:hover { background: #22265a; }
.cs-app .cs-slot .botones button.quitar { border-color: var(--danger-border); color: var(--danger-text); }
.cs-app .cs-slot .botones button.quitar:hover { background: var(--danger-bg); }
/* El tamaño lo pone cada ranura por estilo: es el del hueco real en la app. */
.cs-slot .miniatura {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px dashed var(--gray-400); border-radius: var(--radius);
    background: #fff; color: var(--gray-400); overflow: hidden;
}
.cs-slot .miniatura.redonda { border-radius: 50%; }
.cs-slot .miniatura img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-slot .vista { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--gray-200); }
.cs-slot .vista .cs-col { margin-bottom: 6px; }

/* Réplicas de cómo se ve el medio en CoreTab.

   La del catálogo está dibujada A ESCALA. El marco es un contenedor de consulta y la réplica
   define --u = ancho/952, o sea "un píxel del diseño real de CoreTab". Con eso las medidas de
   abajo son literalmente las del prefab OverviewCard -tarjeta 952x136, círculo de 64 a 32 del
   borde, icono de 56 a 32, textos desde 120 con fuentes de 30 y 19- y la proporción se
   mantiene sea cual sea el ancho de la columna.

   Se usa una variable y no font-size porque fijar font-size en un elemento cambiaría el valor
   de sus propios em, y sus anchos dejarían de cuadrar. */
.cs-rep-marco { container-type: inline-size; width: 100%; }

.cs-rep.catalogo {
    --u: calc(100cqw / 952);
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: calc(136 * var(--u));
    background: #0d2a22;
    border: calc(3 * var(--u)) solid #2ac08a;   /* el borde verde es el destaque de EN CURSO */
    border-radius: calc(28 * var(--u));
    overflow: hidden;
}
/* Los desplazamientos van desde dentro del borde, por eso 29 y no 32. */
.cs-rep.catalogo .num {
    position: absolute; left: calc(29 * var(--u)); top: 50%; transform: translateY(-50%);
    width: calc(64 * var(--u)); height: calc(64 * var(--u));
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #2ac08a; color: #0d2a22;
    font-size: calc(30 * var(--u)); line-height: 1; font-weight: 700;
}
.cs-rep.catalogo .txt {
    position: absolute;
    left: calc(117 * var(--u)); right: calc(129 * var(--u)); top: calc(29 * var(--u));
    display: flex; flex-direction: column;
}
.cs-rep.catalogo .nom {
    font-size: calc(30 * var(--u)); line-height: calc(36 * var(--u)); height: calc(36 * var(--u));
    color: #eaf3f0; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-rep.catalogo .est {
    font-size: calc(19 * var(--u)); line-height: calc(26 * var(--u)); height: calc(26 * var(--u));
    margin-top: calc(8 * var(--u));
    color: #2ecc8f; font-weight: 700; letter-spacing: .10em;
}
.cs-rep.catalogo .ico {
    position: absolute; right: calc(29 * var(--u)); top: 50%; transform: translateY(-50%);
    width: calc(56 * var(--u)); height: calc(56 * var(--u)); overflow: hidden;
}
/* Se estira al cuadro: en CoreTab el icono va con PreserveAspect apagado. */
.cs-rep.catalogo .ico img { width: 100%; height: 100%; object-fit: fill; display: block; }

/* Banner de identificación (IdentificationCard). Misma técnica: --u es un píxel del diseño
   real. La tarjeta mide 1000x156 -el ancho del canvas de CoreTab menos 80-, con radio 28 y
   borde 3; el recuadro de la imagen es de 182x110 a 28 del borde derecho, con radio 28 y
   borde 2. Fuentes: 20 para la etiqueta y 40 para el nombre. */
.cs-rep.coretab {
    --u: calc(100cqw / 1000);
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: calc(156 * var(--u));
    background: #0d2322;
    border: calc(3 * var(--u)) solid #22584b;
    border-radius: calc(28 * var(--u));
    overflow: hidden;
}
.cs-rep.coretab .txt {
    position: absolute;
    left: calc(45 * var(--u)); right: calc(227 * var(--u)); top: calc(37 * var(--u));
    display: flex; flex-direction: column;
}
.cs-rep.coretab .et {
    font-size: calc(20 * var(--u)); line-height: calc(26 * var(--u));
    color: #718280; font-weight: 600; letter-spacing: .18em;
}
.cs-rep.coretab .nom {
    font-size: calc(40 * var(--u)); line-height: calc(48 * var(--u)); margin-top: calc(6 * var(--u));
    color: #eaf6f1; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-rep.coretab .img {
    position: absolute; right: calc(25 * var(--u)); top: 50%; transform: translateY(-50%);
    width: calc(182 * var(--u)); height: calc(110 * var(--u));
    box-sizing: border-box;
    border: calc(2 * var(--u)) solid #626866;
    border-radius: calc(28 * var(--u));
    overflow: hidden;
}
/* Se estira al recuadro: el Image del prefab va con PreserveAspect apagado, igual que el
   icono del catálogo. Una imagen cuadrada se deforma, y así se ve acá antes de publicar. */
.cs-rep.coretab .img img { width: 100%; height: 100%; object-fit: fill; display: block; }

/* Interruptores de la portada */
.cs-interruptor {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-200);
}
.cs-interruptor .txt { flex: 1 1 auto; min-width: 0; }
.cs-interruptor .lab { font-size: 13px; color: var(--gray-900); }
.cs-interruptor .des { font-size: 12px; color: var(--gray-600); margin-top: 2px; }

/* Pistas de bloques: el editor de dentro es el de siempre, solo cambia el marco. */
.cs-pistas { display: flex; flex-direction: column; gap: 14px; }
.cs-pista {
    display: flex; gap: 6px; overflow-x: auto;
    padding: 8px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff;
}
/* Vacía: la propia pista es el hueco por llenar, en vez de un cuadro aparte debajo. */
.cs-pista.vacia {
    align-items: center; gap: 12px;
    padding: 16px;
    border-style: dashed; border-color: var(--gray-400);
    background: var(--gray-100);
}
.cs-pista .vacio-msg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-pista .vacio-msg b { font-size: 13px; font-weight: 700; color: var(--gray-800); }
.cs-pista .vacio-msg span { font-size: 12.5px; color: var(--gray-600); }

/* Barra lateral: pendientes y ficha de estado */
.cs-rail-tit.alerta { display: flex; align-items: center; gap: 8px; color: var(--danger-text); }
.cs-rail-tit.advertencia { display: flex; align-items: center; gap: 8px; color: var(--warning-text); }
.cs-pendientes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-pendientes li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.4; }
.cs-pendientes li .marca { flex: 0 0 auto; font-weight: 700; }
.cs-pendientes li.grave { color: var(--danger-text); }
.cs-pendientes li.aviso { color: var(--warning-text); }
.cs-pendientes .txt { min-width: 0; }
.cs-app .cs-pendientes .ir {
    display: block; margin-top: 3px; padding: 0;
    border: 0; background: none; text-align: left;
    font-size: 12.5px; font-weight: 700; color: var(--indigo-900); cursor: pointer;
}
.cs-app .cs-pendientes .ir:hover { text-decoration: underline; }

.cs-datos { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; align-items: baseline; }
.cs-datos dt { font-size: 12.5px; color: var(--gray-600); }
.cs-datos dd { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--gray-800); text-align: right; }
.cs-datos dd.ok { color: var(--success-text); }
.cs-datos dd.aviso { color: var(--warning-text); }

/* Texto de una opción de ordenamiento. Quill sin alto definido crece sin límite dentro de la
   tarjeta; se le fija uno y se le deja su propio scroll. */
.cs-opcion-texto { margin-top: 14px; }
.cs-opcion-texto .ql-container { height: 130px; }
.cs-opcion-texto .ql-editor { min-height: 130px; }
.cs-opcion-texto .ql-toolbar, .cs-opcion-texto .ql-container { border-color: var(--gray-400); }
.cs-opcion-texto .ql-toolbar { border-radius: var(--radius) var(--radius) 0 0; }
.cs-opcion-texto .ql-container { border-radius: 0 0 var(--radius) var(--radius); }

/* ── Diálogos propios ────────────────────────────────────────────────── */
/* SIN prefijo .cs-app a propósito: MudDialogProvider renderiza fuera del layout. El gancho es
   la clase .cs-dlg del propio diálogo, así que nada de esto alcanza al login. */
.cs-dlg {
    font-family: var(--sans);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cs-dlg .mud-dialog-content { padding: 0; overflow: visible; }
/* app.css impone Lato con !important sobre input/button/select y aquí no llega la reversión
   de .cs-app, porque el diálogo se pinta fuera del layout. */
.cs-dlg, .cs-dlg input, .cs-dlg button, .cs-dlg select, .cs-dlg label {
    font-family: var(--sans) !important;
}

.cs-dlg-cab {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}
.cs-dlg-cab .ficha {
    width: 42px; height: 42px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    background: var(--indigo-100); color: var(--indigo-900);
}
.cs-dlg-cab .txt { flex: 1 1 auto; min-width: 0; }
.cs-dlg-cab .tit { font-size: 17px; font-weight: 700; color: var(--gray-900); line-height: 1.25; }
.cs-dlg-cab .cerrar {
    flex: 0 0 auto;
    width: 30px; height: 30px; margin-right: -6px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius);
    background: none; color: var(--gray-500); cursor: pointer;
}
.cs-dlg-cab .cerrar:hover { background: var(--gray-100); color: var(--gray-700); }

.cs-dlg-cuerpo { padding: 20px 22px 22px; background: #fff; }
.cs-dlg-cuerpo .cs-campo-lab.mt-4 { margin-top: 18px; }

/* Select nativo con la misma caja que el input; la flecha va como fondo para no depender
   del popover de MudBlazor, que tampoco vive dentro de .cs-app. */
.cs-select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23858796' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.cs-dlg-pie {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 22px;
    background: var(--gray-100);
    border-top: 1px solid var(--border);
}
.cs-dlg-btn {
    height: 40px; padding: 0 18px;
    border: 1px solid var(--gray-400); border-radius: var(--radius);
    background: #fff; color: var(--gray-700);
    font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background .12s ease-out;
}
.cs-dlg-btn:hover:not(:disabled) { background: var(--gray-100); }
.cs-dlg-btn.principal {
    border-color: var(--indigo-900);
    background: var(--indigo-900); color: #fff;
    box-shadow: var(--shadow-btn);
}
.cs-dlg-btn.principal:hover:not(:disabled) { background: #22265a; }
.cs-dlg-btn:disabled { opacity: .5; cursor: default; }
.cs-dlg :is(button, input, select):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Editor de programa ─────────────────────────────────────────── */
/* Cabecera fija con la miga, el título y el estado; debajo, contenido + columna de acciones. */
.cs-editor-top {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 4px rgba(58, 59, 69, .04);
    margin: -22px calc(-1 * var(--pad-h)) 22px;
    padding: 16px var(--pad-h);
}
.cs-editor-top .volver {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--indigo-900); text-decoration: none;
}
.cs-editor-top .volver:hover { color: var(--indigo-700); text-decoration: underline; }
.cs-editor-top .cs-h1 { margin-top: 4px; }

.cs-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.cs-editor > .principal { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cs-editor > .rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 110px; }
@media (max-width: 1100px) { .cs-editor { grid-template-columns: minmax(0, 1fr); } .cs-editor > .rail { position: static; } }

/* Campo de texto propio: el del sistema MudBlazor no da la etiqueta arriba ni el contador. */
.cs-campo-lab { display: block; font-size: 12px; font-weight: 600; color: var(--gray-800); margin-bottom: 6px; }
.cs-campo-lab .req { color: var(--danger); font-weight: 700; }
.cs-campo {
    width: 100%; height: 40px; box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--gray-400); border-radius: var(--radius);
    background: #fff; color: var(--gray-900);
    font-family: var(--sans); font-size: 14px;
}
.cs-campo::placeholder { color: var(--gray-500); }
.cs-campo:focus { outline: none; border-color: var(--indigo-500); box-shadow: var(--focus-ring); }
.cs-campo-ayuda { margin-top: 7px; font-size: 12px; color: var(--gray-600); }

/* Tiempos de resumen: etiqueta + descripción a la izquierda, control numérico a la derecha. */
.cs-tiempos .fila {
    display: flex; align-items: center; gap: 18px;
    padding: 11px 0;
    border-bottom: 1px solid var(--gray-200);
}
.cs-tiempos .fila:last-child { border-bottom: 0; padding-bottom: 0; }
.cs-tiempos .fila:first-child { padding-top: 0; }
.cs-tiempos .txt { flex: 1 1 auto; min-width: 0; }
.cs-tiempos .lab { font-size: 13.5px; font-weight: 600; color: var(--gray-900); }
.cs-tiempos .lab .opc { font-weight: 400; color: var(--gray-500); }
.cs-tiempos .des { font-size: 12.5px; color: var(--gray-600); margin-top: 2px; }
.cs-app .cs-tiempos .num { flex: 0 0 auto; width: 108px; }

/* Filas de actividad */
.cs-acts { display: flex; flex-direction: column; }
.cs-acts .zona { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.cs-act {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--gray-200); border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    transition: background .12s ease-out, border-color .12s ease-out;
}
.cs-act:hover { background: var(--gray-100); border-color: var(--gray-400); }
.cs-act .asa { flex: 0 0 auto; color: var(--gray-400); cursor: grab; display: inline-flex; }
.cs-act .num {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    background: var(--indigo-100); color: var(--indigo-900);
    font-family: var(--mono); font-size: 11.5px; font-weight: 700;
}
.cs-act .txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cs-act .nom { font-size: 13.5px; font-weight: 700; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-act .sub { font-size: 12.5px; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-act .tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 3px 9px; }
.cs-act .tag.ver { background: var(--indigo-100); color: var(--indigo-900); font-family: var(--mono); }
.cs-act .tag.aviso { background: var(--warning-bg); color: var(--warning-text); }
.cs-app .cs-act-btn {
    width: 30px; height: 30px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray-400); border-radius: var(--radius);
    background: #fff; color: var(--gray-700); cursor: pointer;
}
.cs-app .cs-act-btn:hover { background: var(--gray-100); }
.cs-app .cs-act-btn.destructiva { border-color: var(--danger-border); color: var(--danger); }
.cs-app .cs-act-btn.destructiva:hover { background: var(--danger-bg); }
.cs-act.abierta .cs-act-btn svg { transform: rotate(180deg); }
.cs-act .avance {
    flex: 1 0 100%;
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin-top: 4px; padding-top: 11px;
    border-top: 1px solid var(--gray-200);
    cursor: default;
}
.cs-act .avance .nota { font-size: 12px; color: var(--gray-600); flex: 1 1 200px; }

/* MudDropContainer marca la zona y el hueco de destino mientras se arrastra. */
.cs-acts .mud-drop-item-preview { opacity: .4; }
.cs-acts .mud-drop-item-placeholder { border: 1px dashed var(--indigo-500); border-radius: var(--radius); }

/* Columna de acciones */
.cs-rail-tit { font-size: 13.5px; font-weight: 700; color: var(--indigo-900); margin-bottom: 12px; }
.cs-rail-sep { height: 1px; background: var(--gray-200); margin: 14px 0; }
/* Bloques llenos, no botones de texto: se leen como un grupo aunque estén deshabilitados. */
.cs-app .cs-rail-accion {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 40px; padding: 0 14px; margin-bottom: 6px;
    border: 0; border-radius: var(--radius);
    background: var(--gray-100); text-align: left;
    font-size: 13px; font-weight: 600; color: var(--gray-700);
    cursor: pointer;
    transition: background .12s ease-out, color .12s ease-out;
}
.cs-app .cs-rail-accion:last-of-type { margin-bottom: 0; }
.cs-app .cs-rail-accion:hover:not(:disabled) { background: var(--gray-200); }
.cs-app .cs-rail-accion:disabled { color: var(--gray-500); cursor: default; }
.cs-rail-nota { margin-top: 10px; font-size: 12.5px; color: var(--gray-600); line-height: 1.45; }
/* Encabezado de cada actividad dentro del panel de ortografía del editor de programa. */
.cs-rail-sub { margin: 12px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--gray-700); }
.cs-rail-sub:first-of-type { margin-top: 6px; }

/* Checklist previa a publicar */
.cs-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.cs-checklist li svg { flex: 0 0 auto; margin-top: 1px; }
.cs-checklist li.ok { color: var(--gray-700); }
.cs-checklist li.ok svg { color: var(--success); }
.cs-checklist li.aviso { color: var(--warning-text); }
.cs-checklist li.aviso svg { color: var(--warning); }

/* ── Formularios (§5.11) ─────────────────────────────────────────────────────── */
.cs-form { max-width: var(--lectura); }
.cs-app .mud-input-control .mud-input-label { font-size: 12px; font-weight: 600; color: var(--gray-800); }
.cs-app .mud-input.mud-input-outlined > input,
.cs-app .mud-input.mud-input-outlined > .mud-input-slot { min-height: 34px; font-size: 13px; }
.cs-app .mud-input-outlined .mud-input-outlined-border { border-color: var(--gray-400); border-radius: var(--radius); }
.cs-app .mud-input-helper-text { font-size: 12px; color: var(--gray-600); }

/* El foco nunca se elimina. */
.cs-app :is(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius);
}

/* Barra de guardado explícito */
.cs-guardar {
    position: sticky; bottom: 0;
    display: flex; justify-content: flex-end; gap: 10px;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 12px 0;
    margin-top: 22px;
}

/* ── Superficies ─────────────────────────────────────────────────────────────── */
.cs-app .mud-paper {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.cs-app .mud-popover, .cs-app .mud-dialog { box-shadow: var(--shadow-menu); }
.cs-app .mud-dialog { border-radius: var(--radius-lg); }
.cs-app .mud-overlay-dialog { background: rgba(58, 59, 69, .45); }

/* ── Tablas y paginación (§5.12) ─────────────────────────────────────────────── */
.cs-app .mud-table-cell { font-size: 13px; padding: 9px 12px; border-bottom: 1px solid var(--gray-200); color: var(--gray-700); }
.cs-app .mud-table-head .mud-table-cell {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--gray-600);
    background: #fff; border-bottom: 1px solid var(--border);
}
.cs-app .mud-table-row:hover { background: var(--gray-100) !important; }
.cs-paginacion { display: flex; align-items: center; gap: 8px; padding-top: 12px; }
.cs-paginacion .cuenta { font-size: 12px; color: var(--gray-600); margin-right: auto; }
.cs-paginacion button {
    height: 28px; min-width: 28px; padding: 0 8px;
    border: 1px solid var(--gray-400); border-radius: var(--radius);
    background: #fff; color: var(--gray-700);
    font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.cs-paginacion button[aria-current="page"] { background: var(--indigo-900); border-color: var(--indigo-900); color: #fff; }

/* ── Estados de datos (§5.13) ────────────────────────────────────────────────── */
.cs-vacio { text-align: center; padding: 56px 20px; }
.cs-vacio h3 { font-size: 15px; font-weight: 700; color: var(--gray-800); margin: 0 0 6px; }
.cs-vacio p { font-size: 13px; color: var(--gray-600); margin: 0 0 16px; }
.cs-error-bloque {
    border: 1px solid var(--danger-border); background: var(--danger-bg);
    border-radius: var(--radius); padding: 14px 16px; color: var(--danger-text);
}
/* Resumen de la importación de un .zip: ids renombrados, omitidos y demás. Monoespaciada
   porque casi todo lo que lista son ids. */
.cs-lista-import { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.7; }
.cs-lista-import li { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.cs-esqueleto {
    height: 44px; border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
    background-size: 400% 100%; animation: cs-brillo 1.2s ease-in-out infinite;
}
@keyframes cs-brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Movimiento reducido: solo color y opacidad ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cs-app *, .cs-app *::before, .cs-app *::after {
        animation-duration: .001ms !important;
        transition-property: background-color, color, opacity, border-color, box-shadow !important;
        transition-duration: .12s !important;
    }
}

/* ── Panel del bloque seleccionado ───────────────────────────────────────────────────────────
   Cabecera con el tipo y su posición en la pista, pestañas propias y el cuerpo en secciones.
   Lo comparten todos los tipos de bloque; lo propio de cada uno va dentro de su editor.       */
.cs-bloque { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); margin-top: 14px; }
.cs-bloque > .top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 20px 0; }
.cs-bloque > .top h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--indigo-700); letter-spacing: -.01em; }
.cs-bloque > .top .ctx { font-size: 13px; color: var(--gray-500); }
.cs-bloque > .top .acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cs-app .cs-bloque .acc {
    height: 34px; padding: 0 14px;
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--gray-300); border-radius: 10px;
    background: #fff; color: var(--gray-800);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cs-app .cs-bloque .acc:hover { background: var(--gray-100); }
.cs-app .cs-bloque .acc.peligro { color: var(--danger-text); border-color: var(--danger-border); padding: 0 10px; }
.cs-app .cs-bloque .acc.peligro:hover { background: var(--danger-bg); }

/* Pestañas: la activa se marca con la línea índigo, no con relleno. */
.cs-tabs { display: flex; gap: 26px; padding: 10px 20px 0; border-bottom: 1px solid var(--gray-200); }
.cs-app .cs-tabs button {
    border: 0; background: none; cursor: pointer; font-family: inherit;
    padding: 8px 0 12px; margin-bottom: -1px;
    font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--gray-500); border-bottom: 3px solid transparent;
}
.cs-app .cs-tabs button:hover { color: var(--gray-800); }
.cs-app .cs-tabs button.on { color: var(--indigo-700); border-bottom-color: var(--indigo-500); }

.cs-bloque > .cuerpo { padding: 20px; }
.cs-seccion { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); margin: 4px 0 14px; }
.cs-seccion.sep { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--gray-200); }
.cs-campos > * + * { margin-top: 16px; }
.cs-fila-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

/* ── Encuesta del programa ───────────────────────────────────────────────────────────────────
   La pregunta desplegada dentro de su fila, con la misma anatomía que el panel de avance de una
   actividad: ocupa el ancho completo y se separa con una línea.                                */
.cs-preg { display: flex; flex-direction: column; gap: 14px; }
/* La fila de la pregunta que se está editando abajo. */
.cs-act.sel { border-color: var(--indigo-500); box-shadow: inset 0 0 0 1px var(--indigo-500); }

/* Secciones plegables: cada una agrupa sus preguntas y en la tablet es una pantalla. */
.cs-secs { display: flex; flex-direction: column; gap: 12px; }
.cs-sec { border: 1px solid var(--gray-200); border-radius: var(--radius); background: #fff; }
.cs-sec > header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--gray-200); }
.cs-sec.colapsada > header { border-bottom: 0; }
.cs-app .cs-sec .tog { border: 0; background: none; cursor: pointer; display: inline-flex; padding: 4px; color: var(--gray-500); }
.cs-sec .tog svg { transition: transform .12s ease-out; }
.cs-sec.colapsada .tog svg { transform: rotate(-90deg); }
.cs-sec > header .cs-campo { flex: 1 1 auto; height: 34px; }
.cs-sec > header .cuenta { flex: 0 0 auto; font-size: 12.5px; color: var(--gray-600); }
.cs-sec > .cuerpo { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cs-campo-ayuda.exceso { color: var(--danger-text); font-weight: 600; }

/* Quill aislado (QuillVivo): el enunciado de la encuesta y la declaración. */
.cs-enunciado .ql-toolbar.ql-snow,
.cs-decl-editor .ql-toolbar.ql-snow { border-color: var(--gray-400); border-radius: var(--radius) var(--radius) 0 0; background: var(--gray-100); }
.cs-enunciado .ql-container.ql-snow,
.cs-decl-editor .ql-container.ql-snow { border-color: var(--gray-400); border-radius: 0 0 var(--radius) var(--radius); font-family: inherit; font-size: 14px; }
.cs-enunciado .ql-editor { min-height: 44px; }
.cs-decl-editor .ql-editor { min-height: 260px; }
.ql-snow .ql-toolbar button.ql-mark, .ql-toolbar.ql-snow button.ql-mark { width: auto; padding: 2px 10px; font-size: 12px; font-weight: 600; color: var(--gray-700); }
.ql-toolbar.ql-snow button.ql-mark.ql-active { color: var(--indigo-700); }
.ql-editor mark { background: #c9f5e6; color: inherit; padding: 0 2px; border-radius: 3px; }

/* Pestaña con contenido: el punto de "tiene declaración". */
.cs-tab-punto { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--indigo-500); vertical-align: middle; }

/* Declaración: acciones del estado vacío, problemas y la hoja de vista previa. */
.cs-vacio-acciones { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.cs-comodin { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--gray-500); }
.cs-decl-problemas { margin: 12px 0 0; padding: 10px 14px 10px 30px; border: 1px solid var(--danger-border); background: var(--danger-bg); border-radius: var(--radius); color: var(--danger-text); font-size: 13px; }
.cs-decl-hoja { max-width: 560px; margin: 0 auto; background: #f1f0ec; color: #1b1d1c; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.cs-decl-hoja .texto { padding: 26px 30px; font-size: 14px; line-height: 1.55; }
.cs-decl-hoja .texto h1, .cs-decl-hoja .texto h2 { font-size: 18px; font-weight: 500; text-align: center; margin: 0 0 14px; }
.cs-decl-hoja .texto p { margin: 0 0 10px; }
.cs-decl-hoja .texto .vacia { color: #8a8d8b; text-align: center; }
.cs-decl-hoja .texto .dato { background: #c9f5e6; border-radius: 3px; padding: 0 2px; }
.cs-decl-hoja .ql-align-center { text-align: center; }
.cs-decl-hoja .ql-indent-1 { padding-left: 2em; }
.cs-decl-hoja .ql-indent-2 { padding-left: 4em; }
.cs-decl-hoja .ql-indent-3 { padding-left: 6em; }
.cs-decl-hoja .pie { display: flex; align-items: center; gap: 16px; padding: 14px 30px; background: #e4e3de; border-top: 1px solid #d6d5cf; }
.cs-decl-hoja .pie .firma { color: #1b1d1c; border-bottom: 1px solid #8a8d8b; flex: 0 0 auto; }
.cs-decl-hoja .pie .datos { flex: 1 1 auto; }
.cs-decl-hoja .pie .nom { font-size: 14px; }
.cs-decl-hoja .pie .rut { font-family: var(--mono); font-size: 12px; color: #5c605e; }
.cs-decl-hoja .pie .pagina { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: #8a8d8b; text-align: right; }
.cs-preg-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.cs-preg-alt { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cs-preg-alt .cs-campo { flex: 1 1 auto; }
.cs-preg-opc { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-800); cursor: pointer; }
.cs-preg-opc input { width: 16px; height: 16px; accent-color: var(--indigo-500); cursor: pointer; }

/* Campo con sufijo pegado ("30 | seg") */
.cs-campo-sufijo { display: flex; }
.cs-campo-sufijo .cs-campo { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cs-campo-sufijo .suf {
    display: inline-flex; align-items: center; height: 40px; padding: 0 12px;
    border: 1px solid var(--gray-400); border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--gray-100); color: var(--gray-600); font-size: 13px;
}

/* Tarjeta de archivo: miniatura, nombre en mono y sus datos. */
.cs-archivo {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--gray-200); border-radius: var(--radius);
    background: #fff;
}
.cs-archivo .miniatura {
    width: 46px; height: 46px; flex: 0 0 auto;
    border-radius: 8px; background: var(--gray-100);
    background-image: repeating-linear-gradient(45deg, #fff 0 6px, var(--gray-200) 6px 12px);
    object-fit: cover;
}
.cs-archivo .datos { min-width: 0; flex: 1 1 auto; }
.cs-archivo .nom { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-archivo .meta { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.cs-archivo .acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cs-archivo.vacia { border-style: dashed; border-color: var(--gray-300); background: var(--gray-100); }
.cs-archivo.vacia .nom { font-family: var(--sans); font-weight: 400; color: var(--gray-500); white-space: normal; }

/* Overlay: la fila del archivo y, colgando de ella, su feedback opcional. */
.cs-overlay {
    border: 1px solid var(--gray-200); border-radius: var(--radius); background: #fff;
}
.cs-overlay > .cs-archivo { border: 0; border-radius: 0; }
.cs-fb-ov { border-top: 1px dashed var(--gray-300); padding: 10px 14px 12px; }
.cs-fb-sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cs-fb-sw span { font-size: 12.5px; font-weight: 600; color: var(--gray-600); }
.cs-fb-ov .campos { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.cs-fb-ov .fila { display: flex; align-items: flex-end; gap: 12px; }
.cs-fb-ov .fila > :first-child { flex: 1 1 auto; min-width: 0; }
.cs-fb-ov .seg { flex: 0 0 96px; display: flex; flex-direction: column; gap: 4px; }
.cs-fb-ov .seg span { font-size: 12px; color: var(--gray-500); }

/* Filas de overlay: número, id y el archivo. */
.cs-overlays > * + * { margin-top: 10px; }
.cs-idx {
    flex: 0 0 auto; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background: var(--indigo-100);
    font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--indigo-700);
}
.cs-archivo.vacia .cs-idx { background: var(--gray-200); color: var(--gray-500); }
/* Muestra del color del overlay: el input nativo, sin su marco ni su relleno. */
.cs-app .cs-color {
    flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--gray-300); border-radius: 8px;
    background: none; cursor: pointer;
}
.cs-app .cs-color::-webkit-color-swatch-wrapper { padding: 2px; }
.cs-app .cs-color::-webkit-color-swatch { border: 0; border-radius: 6px; }
.cs-app .cs-color::-moz-color-swatch { border: 0; border-radius: 6px; }
.cs-archivo .caja-archivo {
    flex: 1 1 auto; min-width: 0;
    height: 40px; box-sizing: border-box;
    display: flex; align-items: center; gap: 12px;
    padding: 0 12px;
    border: 1px solid var(--gray-300); border-radius: var(--radius);
    background: var(--gray-100);
}
.cs-archivo .caja-archivo .nom { font-family: var(--mono); font-size: 13.5px; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-archivo .caja-archivo .dim { margin-left: auto; flex: 0 0 auto; font-family: var(--mono); font-size: 12px; color: var(--gray-500); }
.cs-archivo .caja-archivo.vacio .nom { font-family: var(--sans); color: var(--gray-500); }
.cs-app .cs-enlace {
    border: 0; background: none; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 0;
    font-size: 13.5px; font-weight: 600; color: var(--indigo-700);
}
.cs-app .cs-enlace:hover { text-decoration: underline; }

/* La edición a la izquierda y la vista de la tablet a la derecha. En pantallas anchas las filas
   de archivo dejan de estirarse a lo largo de todo el panel y la vista deja de quedar tan abajo
   que hay que bajar para verla. Bajo 1200 px vuelven a apilarse. */
.cs-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); gap: 26px; align-items: start; }
.cs-cols > .edicion { min-width: 0; }
/* La vista acompaña mientras se editan los overlays, en vez de quedarse arriba. */
.cs-cols > .vista { position: sticky; top: 16px; min-width: 0; }
@media (max-width: 1200px) {
    .cs-cols { grid-template-columns: minmax(0, 1fr); }
    .cs-cols > .vista { position: static; }
}

/* Cómo se ve en la tablet. */
.cs-cols > .vista .cs-vista { margin-top: 0; }
.cs-vista { margin-top: 22px; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
.cs-vista > .cab {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--gray-200); background: var(--gray-100);
    font-size: 13.5px; font-weight: 700; color: var(--gray-800);
}
/* Conmutador acierto / error de la vista. */
.cs-vista > .cab .estados { margin-left: auto; display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: var(--gray-200); }
.cs-app .cs-vista > .cab .estados button {
    border: 0; background: none; cursor: pointer; font-family: inherit;
    padding: 4px 12px; border-radius: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--gray-600);
}
.cs-app .cs-vista > .cab .estados button.on { background: #fff; color: var(--gray-900); box-shadow: var(--shadow-card); }

/* El marco de CoreTab va sobre fondo oscuro, para que el lienzo negro no flote sobre el blanco. */
.cs-vista > .cuerpo.tablet { padding: 16px; background: var(--gray-200); display: flex; justify-content: center; }
.cs-vista .ct-hueco { position: relative; }
.cs-vista > .cuerpo { padding: 16px; }
.cs-vista .tit { font-size: 15px; font-weight: 700; color: var(--gray-900); }
.cs-vista .baj { font-size: 13.5px; color: var(--gray-600); margin-top: 2px; }
.cs-vista .lienzo {
    position: relative; margin-top: 14px; border-radius: 10px; overflow: hidden;
    background-image: repeating-linear-gradient(45deg, #fff 0 8px, var(--gray-200) 8px 16px);
    min-height: 180px; display: flex; align-items: center; justify-content: center;
}
.cs-vista .lienzo img.fondo { width: 100%; max-height: 460px; object-fit: contain; display: block; }
/* La capa es un <img> cuando el overlay no tiene color y un <div> enmascarado cuando sí lo tiene:
   la regla va por clase, no por etiqueta, o la versión tintada queda sin posición ni tamaño. */
.cs-vista .lienzo .capa { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.cs-vista .lienzo img.capa { object-fit: contain; opacity: .6; }
.cs-vista .lienzo .sin { padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--gray-200); font-family: var(--mono); font-size: 12px; color: var(--gray-500); }
.cs-vista .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cs-vista .chips span { padding: 4px 10px; border-radius: 8px; background: var(--gray-100); font-family: var(--mono); font-size: 12px; color: var(--gray-700); }
.cs-vista .nota { margin-top: 12px; font-size: 12.5px; color: var(--gray-500); }

/* ── Pestaña de feedback ─────────────────────────────────────────────────────────────────────
   Un cuadro por resultado, con su color en el filo izquierdo: verde el acierto, rojo el error.
   La barra de Quill y su cuerpo se enmarcan dentro del cuadro, no flotando sueltos.            */
.cs-toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; margin: 4px 0 18px; }
.cs-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-toggle .palanca {
    flex: 0 0 auto; width: 54px; height: 30px; border-radius: 15px;
    background: var(--gray-400); position: relative; transition: background .12s ease-out;
}
.cs-toggle .palanca::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 24px; height: 24px; border-radius: 12px; background: #fff;
    transition: transform .12s ease-out;
}
.cs-toggle input:checked + .palanca { background: var(--indigo-900); }
.cs-toggle input:checked + .palanca::after { transform: translateX(24px); }
.cs-toggle input:focus-visible + .palanca { box-shadow: var(--focus-ring); }
.cs-toggle .txt { font-size: 15px; font-weight: 700; color: var(--gray-900); }

.cs-fb {
    border: 1px solid var(--gray-200); border-left: 5px solid var(--gray-400);
    border-radius: var(--radius); overflow: hidden; background: #fff;
    margin-bottom: 18px;
}
.cs-fb.ok { border-left-color: var(--success); }
.cs-fb.mal { border-left-color: var(--danger); }
.cs-fb > header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; background: var(--gray-100); border-bottom: 1px solid var(--gray-200);
}
.cs-fb.ok > header { color: var(--success-text); }
.cs-fb.mal > header { color: var(--danger-text); }
.cs-fb > header .tit { font-size: 14.5px; font-weight: 700; }
.cs-fb > header .cuenta { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--gray-500); }
.cs-fb > header .cuenta.exceso { color: var(--danger-text); font-weight: 700; }

/* Quill dentro del cuadro: sus bordes propios estorban, los pone el cuadro. */
.cs-fb .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--gray-200); padding: 8px 12px; }
.cs-fb .ql-container.ql-snow { border: 0; font-family: var(--sans); font-size: 15px; }
.cs-fb .ql-editor { min-height: 110px; padding: 16px; color: var(--gray-900); }
.cs-fb .ql-editor.ql-blank::before { color: var(--gray-500); font-style: normal; left: 16px; }

.cs-fb > footer { padding: 12px 16px; border-top: 1px solid var(--gray-200); }
.fila-medio { display: flex; align-items: center; gap: 14px; }
.fila-medio .miniatura {
    width: 40px; height: 40px; flex: 0 0 auto; border-radius: 8px; object-fit: cover;
    background-image: repeating-linear-gradient(45deg, #fff 0 6px, var(--gray-200) 6px 12px);
}
.fila-medio .hueco {
    width: 40px; height: 40px; flex: 0 0 auto; border-radius: 8px;
    border: 1px dashed var(--gray-400);
}
.fila-medio .nom { font-family: var(--mono); font-size: 13.5px; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-medio .nom.vacio { font-family: var(--sans); color: var(--gray-500); }
.fila-medio .acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Entrega de la medalla: el congelado + cómo recorta el círculo de la pantalla grande. */
.cs-medalla-video { display: flex; gap: 24px; align-items: flex-start; margin-top: 10px; }
.cs-medalla-video .controles { flex: 0 0 220px; }
.cs-medalla-video .previa { flex: 1 1 auto; min-width: 0; }
.cs-medalla-video .previa .cab {
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--gray-500); margin-bottom: 6px;
}
/* Imita la pantalla de la entrega de CoreSafe (spec 38c): el degradado verde y el disco del video,
   que ocupa el 78 % del cuadro del aro y recorta el video desde el centro (cover). */
.cs-medalla-video .fondo {
    width: 240px; max-width: 100%; aspect-ratio: 1; display: grid; place-items: center;
    border-radius: 10px;
    background: linear-gradient(150deg, #0a6a41 0%, #0b4a46 52%, #082f3e 100%);
}
.cs-medalla-video .disco {
    width: 78%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    border: 1px solid rgba(92, 240, 192, .4); background: rgba(6, 26, 22, .5);
}
.cs-medalla-video .disco video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-medalla-video .previa .nota {
    font-size: 12px; color: var(--gray-500); margin-top: 8px; max-width: 420px;
}