/* ==========================================================================
   Scouting — sistema de diseño Material 3
   Tokens de color, tipografía, movimiento, layout y componentes.
   ========================================================================== */

@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/roboto-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/roboto-500.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("fuentes/roboto-700.woff2") format("woff2"); }

:root {
    color-scheme: light dark;

    --md-ref-typeface-brand: "Roboto", "Segoe UI", system-ui, sans-serif;
    --md-ref-typeface-plain: "Roboto", "Segoe UI", system-ui, sans-serif;

    /* Color (tema claro) */
    --md-sys-color-primary: #6750a4;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #eaddff;
    --md-sys-color-on-primary-container: #21005d;
    --md-sys-color-secondary: #625b71;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #e8def8;
    --md-sys-color-on-secondary-container: #1d192b;
    --md-sys-color-tertiary: #7d5260;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ffd8e4;
    --md-sys-color-on-tertiary-container: #31111d;
    --md-sys-color-error: #b3261e;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #f9dedc;
    --md-sys-color-on-error-container: #410e0b;
    --md-sys-color-surface: #fef7ff;
    --md-sys-color-on-surface: #1d1b20;
    --md-sys-color-surface-variant: #e7e0ec;
    --md-sys-color-on-surface-variant: #49454f;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f7f2fa;
    --md-sys-color-surface-container: #f3edf7;
    --md-sys-color-surface-container-high: #ece6f0;
    --md-sys-color-surface-container-highest: #e6e0e9;
    --md-sys-color-surface-bright: #fef7ff;
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #cac4d0;
    --md-sys-color-inverse-surface: #322f35;
    --md-sys-color-inverse-on-surface: #f5eff7;
    --md-sys-color-inverse-primary: #d0bcff;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;
    --exito: #2e7d32;
    --exito-contenedor: #c8e6c9;
    --on-exito-contenedor: #0b2e0e;

    /* Movimiento (Material 3) */
    --emph: cubic-bezier(0.2, 0, 0, 1);
    --emph-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
    --emph-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
    --corto: 150ms;
    --medio: 300ms;
    --largo: 500ms;

    --nav-ancho: 288px;
    --appbar-alto: 64px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --md-sys-color-primary: #d0bcff;
        --md-sys-color-on-primary: #381e72;
        --md-sys-color-primary-container: #4f378b;
        --md-sys-color-on-primary-container: #eaddff;
        --md-sys-color-secondary: #ccc2dc;
        --md-sys-color-on-secondary: #332d41;
        --md-sys-color-secondary-container: #4a4458;
        --md-sys-color-on-secondary-container: #e8def8;
        --md-sys-color-tertiary: #efb8c8;
        --md-sys-color-on-tertiary: #492532;
        --md-sys-color-tertiary-container: #633b48;
        --md-sys-color-on-tertiary-container: #ffd8e4;
        --md-sys-color-error: #f2b8b5;
        --md-sys-color-on-error: #601410;
        --md-sys-color-error-container: #8c1d18;
        --md-sys-color-on-error-container: #f9dedc;
        --md-sys-color-surface: #141218;
        --md-sys-color-on-surface: #e6e0e9;
        --md-sys-color-surface-variant: #49454f;
        --md-sys-color-on-surface-variant: #cac4d0;
        --md-sys-color-surface-container-lowest: #0f0d13;
        --md-sys-color-surface-container-low: #1d1b20;
        --md-sys-color-surface-container: #211f26;
        --md-sys-color-surface-container-high: #2b2930;
        --md-sys-color-surface-container-highest: #36343b;
        --md-sys-color-surface-bright: #3b383e;
        --md-sys-color-outline: #938f99;
        --md-sys-color-outline-variant: #49454f;
        --md-sys-color-inverse-surface: #e6e0e9;
        --md-sys-color-inverse-on-surface: #322f35;
        --md-sys-color-inverse-primary: #6750a4;
        --exito: #81c784;
        --exito-contenedor: #1b5e20;
        --on-exito-contenedor: #c8e6c9;
    }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }

body {
    margin: 0;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 400 14px/20px var(--md-ref-typeface-plain);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--md-sys-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p { margin: 0; }
img, svg { max-width: 100%; }

.t-display { font: 400 36px/44px var(--md-ref-typeface-brand); }
.t-headline { font: 400 28px/36px var(--md-ref-typeface-brand); }
.t-title-l { font: 400 22px/28px var(--md-ref-typeface-brand); }
.t-title-m { font: 500 16px/24px var(--md-ref-typeface-brand); }
.t-body-l { font: 400 16px/24px var(--md-ref-typeface-plain); }
.t-label { font: 500 12px/16px var(--md-ref-typeface-plain); letter-spacing: 0.5px; }
.suave { color: var(--md-sys-color-on-surface-variant); }

/* Evita el destello de componentes aún sin definir */
md-filled-button:not(:defined), md-filled-tonal-button:not(:defined), md-outlined-button:not(:defined),
md-text-button:not(:defined), md-icon-button:not(:defined), md-filled-tonal-icon-button:not(:defined),
md-fab:not(:defined), md-tabs:not(:defined), md-outlined-text-field:not(:defined),
md-outlined-select:not(:defined), md-switch:not(:defined), md-icon:not(:defined) { visibility: hidden; }

md-icon svg, .icono svg { width: 100%; height: 100%; fill: currentColor; }
.icono { display: inline-flex; width: 24px; height: 24px; flex: none; }

/* ---------- Estructura de la app ---------- */
.app { display: grid; grid-template-columns: var(--nav-ancho) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

.nav {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding: 12px;
    overflow-y: auto;
    background: var(--md-sys-color-surface-container-low);
    border-radius: 0 16px 16px 0;
}
.nav-marca { display: flex; align-items: center; gap: 12px; padding: 12px 16px 20px; }
.logo {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--md-sys-color-on-primary);
    background: var(--md-sys-color-primary);
    border-radius: 12px;
}
.logo svg { width: 24px; height: 24px; fill: currentColor; }
.nav-marca strong { display: block; font: 500 16px/20px var(--md-ref-typeface-brand); }
.nav-marca span { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }

.nav-grupo { padding: 16px 16px 8px; font: 500 12px/16px var(--md-ref-typeface-plain); letter-spacing: 0.5px; color: var(--md-sys-color-on-surface-variant); }
.nav md-list { --md-list-container-color: transparent; padding: 0; background: transparent; }
.nav md-list-item {
    --md-list-item-one-line-container-height: 56px;
    --md-list-item-label-text-color: var(--md-sys-color-on-surface-variant);
    --md-list-item-leading-icon-color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 4px;
    border-radius: 28px;
    transition: background-color var(--medio) var(--emph);
}
.nav md-list-item.activo {
    background: var(--md-sys-color-secondary-container);
    --md-list-item-label-text-color: var(--md-sys-color-on-secondary-container);
    --md-list-item-leading-icon-color: var(--md-sys-color-on-secondary-container);
}
.nav-pie { margin-top: auto; padding-top: 12px; }
.usuario-tarjeta { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--md-sys-color-surface-container); }
.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    font: 500 18px/1 var(--md-ref-typeface-brand);
    color: var(--md-sys-color-on-primary-container);
    background: var(--md-sys-color-primary-container);
    border-radius: 50%;
}
.usuario-tarjeta strong { display: block; font: 500 14px/20px var(--md-ref-typeface-plain); }
.usuario-tarjeta span { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }

.scrim {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: var(--md-sys-color-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--medio) var(--emph);
}

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

.appbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--appbar-alto);
    padding: 0 16px;
    background: var(--md-sys-color-surface);
    transition: background-color var(--medio) var(--emph), box-shadow var(--medio) var(--emph);
}
.appbar.elevada { background: var(--md-sys-color-surface-container); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.appbar-titulo { flex: 1; min-width: 0; overflow: hidden; font: 400 22px/28px var(--md-ref-typeface-brand); text-overflow: ellipsis; white-space: nowrap; }
.btn-menu { display: none; }
.progreso-barra { position: sticky; top: var(--appbar-alto); z-index: 9; height: 4px; margin-top: -4px; }
.progreso-barra md-linear-progress { width: 100%; --md-linear-progress-track-height: 4px; --md-linear-progress-active-indicator-height: 4px; }

.contenido { width: 100%; max-width: 1120px; margin: 0 auto; padding: 8px 24px 120px; }

.cabecera-pagina { margin: 8px 0 24px; }
.cabecera-pagina h1 { font: 400 32px/40px var(--md-ref-typeface-brand); }
.cabecera-pagina p { margin-top: 4px; color: var(--md-sys-color-on-surface-variant); font-size: 16px; line-height: 24px; }

@media (max-width: 899px) {
    .app { display: block; }
    .nav {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        width: min(320px, 88vw);
        transform: translateX(-105%);
        transition: transform 350ms var(--emph);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }
    .nav.abierta { transform: none; }
    .scrim.visible { opacity: 0.32; pointer-events: auto; }
    .btn-menu { display: inline-flex; }
    .contenido { padding: 8px 16px 120px; }
}

/* ---------- Animaciones de entrada ---------- */
@keyframes entrada {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes temblor { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.contenido > * { animation: entrada 500ms var(--emph-decel) both; animation-delay: calc(var(--i, 0) * 60ms); }
.rejilla > *, .estadisticas > * { animation: entrada 500ms var(--emph-decel) both; animation-delay: calc(var(--j, 0) * 55ms + 120ms); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

/* ---------- Tarjetas, rejillas, estadísticas ---------- */
.tarjeta {
    position: relative;
    padding: 20px;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-low);
    border-radius: 16px;
    --md-elevation-level: 0;
}
.tarjeta.contorno { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); }
.tarjeta.elevable { --md-elevation-level: 1; background: var(--md-sys-color-surface-container-lowest); transition: transform var(--medio) var(--emph); }
.tarjeta.elevable:hover { --md-elevation-level: 3; transform: translateY(-2px); }
.tarjeta md-elevation { --md-elevation-level: inherit; transition-duration: var(--medio); }
.tarjeta-enlace { display: block; color: inherit; text-decoration: none; cursor: pointer; overflow: hidden; }
.tarjeta-enlace:hover { text-decoration: none; }

.seccion { margin: 32px 0 12px; display: flex; align-items: center; gap: 12px; }
.seccion h2 { flex: 1; font: 400 22px/28px var(--md-ref-typeface-brand); }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.rejilla.ancha { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
@media (max-width: 520px) { .rejilla, .rejilla.ancha { grid-template-columns: minmax(0, 1fr); } }

.contenido > .estadisticas { margin-top: 16px; }
.estadisticas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.estadistica { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--md-sys-color-surface-container); border-radius: 16px; }
.estadistica .icono-circulo {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    color: var(--md-sys-color-on-primary-container);
    background: var(--md-sys-color-primary-container);
    border-radius: 50%;
}
.estadistica .icono-circulo .icono { width: 24px; height: 24px; }
.estadistica b { display: block; font: 400 32px/36px var(--md-ref-typeface-brand); }
.estadistica span { color: var(--md-sys-color-on-surface-variant); }

.bienvenida {
    padding: 28px;
    background: linear-gradient(135deg, var(--md-sys-color-primary-container), var(--md-sys-color-tertiary-container));
    color: var(--md-sys-color-on-primary-container);
    border-radius: 28px;
}
.bienvenida h1 { font: 400 32px/40px var(--md-ref-typeface-brand); }
.bienvenida p { margin-top: 8px; font-size: 16px; line-height: 24px; opacity: 0.85; }

/* Tarjeta de encuesta */
.encuesta { display: flex; flex-direction: column; gap: 12px; }
.encuesta h3 { font: 500 18px/24px var(--md-ref-typeface-brand); }
.encuesta .desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 40px;
    overflow: hidden;
    color: var(--md-sys-color-on-surface-variant);
}
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    font: 500 12px/16px var(--md-ref-typeface-plain);
    color: var(--md-sys-color-on-surface-variant);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
}
.etiqueta.ok { color: var(--on-exito-contenedor); background: var(--exito-contenedor); border-color: transparent; }
.etiqueta.borrador { color: var(--md-sys-color-on-secondary-container); background: var(--md-sys-color-secondary-container); border-color: transparent; }
.etiqueta .icono { width: 16px; height: 16px; }
.acciones-tarjeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.acciones-tarjeta .espacio { flex: 1; }

/* Estado vacío */
.vacio { display: grid; place-items: center; gap: 12px; padding: 48px 24px; text-align: center; color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface-container-low); border-radius: 28px; }
.vacio .ilustracion {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    border-radius: 50%;
}
.vacio .ilustracion .icono { width: 48px; height: 48px; }
.vacio h3 { font: 400 22px/28px var(--md-ref-typeface-brand); color: var(--md-sys-color-on-surface); }

/* Lista simple */
.lista-simple { display: flex; flex-direction: column; background: var(--md-sys-color-surface-container-low); border-radius: 16px; overflow: hidden; }
.fila-simple { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.fila-simple:last-child { border-bottom: none; }
.fila-simple .grande { flex: 1; min-width: 0; }
.fila-simple strong { font-weight: 500; }

/* ---------- Pestañas, chips, tablas ---------- */
.pestanas { margin: 0 0 24px; --md-primary-tab-container-color: transparent; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
md-tabs { --md-primary-tab-container-color: transparent; }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtros md-chip-set { flex: 1; }

.tabla-caja { overflow-x: auto; background: var(--md-sys-color-surface-container-low); border-radius: 16px; }
table.datos { width: 100%; border-collapse: collapse; }
table.datos th, table.datos td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
table.datos th { position: sticky; top: 0; font: 500 12px/16px var(--md-ref-typeface-plain); letter-spacing: 0.5px; color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface-container); white-space: nowrap; }
table.datos tbody tr { transition: background-color var(--corto) var(--emph); }
table.datos tbody tr:hover { background: var(--md-sys-color-surface-container); }
table.datos tbody tr:last-child td { border-bottom: none; }
table.datos td.num { color: var(--md-sys-color-on-surface-variant); }

/* Barras de resumen */
.resumen-pregunta { display: flex; flex-direction: column; gap: 10px; }
.resumen-pregunta h3 { font: 500 16px/24px var(--md-ref-typeface-brand); }
.opcion-barra { display: grid; grid-template-columns: minmax(80px, 160px) 1fr 56px; align-items: center; gap: 12px; }
.opcion-barra .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcion-barra .cuenta { text-align: right; color: var(--md-sys-color-on-surface-variant); }
.barra {
    height: 8px;
    overflow: hidden;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: 4px;
}
.barra i {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    background: var(--md-sys-color-primary);
    border-radius: 4px;
    transform-origin: left;
    animation: crecer 900ms var(--emph-decel) both;
    animation-delay: 250ms;
}
@keyframes crecer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mini-stats { display: flex; flex-wrap: wrap; gap: 8px; }

/* Gráficas */
.grafica { display: flex; flex-direction: column; gap: 12px; }
.grafica h3 { font: 500 16px/24px var(--md-ref-typeface-brand); }
.grafica .lienzo { position: relative; height: 320px; }

/* ---------- Snackbar y diálogos ---------- */
.snackbar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 288px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 14px 16px;
    color: var(--md-sys-color-inverse-on-surface);
    background: var(--md-sys-color-inverse-surface);
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translate(-50%, 24px) scale(0.96);
    pointer-events: none;
    transition: opacity var(--medio) var(--emph), transform var(--medio) var(--emph-decel);
}
.snackbar.visible { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.snackbar.error { color: var(--md-sys-color-on-error-container); background: var(--md-sys-color-error-container); }
.snackbar .icono { width: 20px; height: 20px; }

md-dialog { --md-dialog-container-color: var(--md-sys-color-surface-container-high); max-width: min(560px, calc(100vw - 32px)); }
.dialogo-campos { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; min-width: min(480px, 70vw); }
.dialogo-campos md-outlined-text-field { width: 100%; }

md-fab { position: fixed; right: 24px; bottom: 24px; z-index: 20; animation: pop 500ms var(--emph-decel) 400ms both; }
@media (max-width: 899px) { md-fab { right: 16px; bottom: 16px; } }

/* ---------- Formularios genéricos ---------- */
.formulario { display: flex; flex-direction: column; gap: 16px; }
.formulario md-outlined-text-field, .formulario md-outlined-select { width: 100%; }
.fila-campos { display: flex; flex-wrap: wrap; gap: 16px; }
.fila-campos > * { flex: 1; min-width: 160px; }
.acciones-formulario { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- Login ---------- */
.login-fondo {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    background:
        radial-gradient(60vmax 60vmax at 0% 0%, color-mix(in srgb, var(--md-sys-color-primary-container) 80%, transparent), transparent 60%),
        radial-gradient(50vmax 50vmax at 100% 100%, color-mix(in srgb, var(--md-sys-color-tertiary-container) 80%, transparent), transparent 60%),
        var(--md-sys-color-surface);
}
.login-tarjeta {
    width: min(420px, 100%);
    padding: 40px 32px 32px;
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: 28px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
    animation: entrada 600ms var(--emph-decel) both;
}
.login-tarjeta.error { animation: temblor 420ms var(--emph) both; }
.login-marca { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; text-align: center; }
.login-marca .logo { width: 56px; height: 56px; border-radius: 18px; animation: pop 600ms var(--emph-decel) 150ms both; }
.login-marca .logo svg { width: 32px; height: 32px; }
.login-marca h1 { font: 400 28px/36px var(--md-ref-typeface-brand); }
.login-marca p { color: var(--md-sys-color-on-surface-variant); }
.login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    color: var(--md-sys-color-on-error-container);
    background: var(--md-sys-color-error-container);
    border-radius: 12px;
}
.login-error .icono { width: 20px; height: 20px; }
.login-campos { display: flex; flex-direction: column; gap: 16px; }
.login-campos md-outlined-text-field { width: 100%; }
.login-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.login-acciones md-circular-progress { --md-circular-progress-size: 32px; display: none; }
.login-tarjeta.enviando .login-acciones md-circular-progress { display: block; }

/* ---------- Responder encuesta ---------- */
.responder { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.responder .encabezado { padding: 24px; border-radius: 28px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.responder .encabezado h1 { font: 400 32px/40px var(--md-ref-typeface-brand); }
.responder .encabezado p { margin-top: 8px; opacity: 0.85; font-size: 16px; line-height: 24px; }
.responder .encabezado .nota { margin-top: 16px; font-size: 12px; opacity: 0.8; }

.pregunta-resp { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--md-sys-color-surface-container-low); border: 1px solid transparent; border-radius: 20px; transition: border-color var(--medio) var(--emph), background-color var(--medio) var(--emph); }
.pregunta-resp.error { border-color: var(--md-sys-color-error); background: color-mix(in srgb, var(--md-sys-color-error-container) 35%, var(--md-sys-color-surface-container-low)); animation: temblor 380ms var(--emph) both; }
.pregunta-resp .enunciado { display: flex; align-items: flex-start; gap: 12px; }
.pregunta-resp .enunciado .num {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    font: 500 13px/1 var(--md-ref-typeface-plain);
    color: var(--md-sys-color-on-secondary-container);
    background: var(--md-sys-color-secondary-container);
    border-radius: 50%;
}
.pregunta-resp .enunciado .texto { flex: 1; font: 500 16px/24px var(--md-ref-typeface-brand); }
.pregunta-resp .obl { color: var(--md-sys-color-error); margin-left: 4px; }
.pregunta-resp md-outlined-text-field, .pregunta-resp md-outlined-select { width: 100%; }
.opciones-resp { display: flex; flex-direction: column; gap: 4px; }
label.opc {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 4px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
}
label.opc:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); }
.slider-resp { display: flex; align-items: center; gap: 16px; }
.slider-resp md-slider { flex: 1; }
.slider-resp .extremo { min-width: 24px; text-align: center; color: var(--md-sys-color-on-surface-variant); }
.msg-error { display: none; align-items: center; gap: 8px; color: var(--md-sys-color-error); font-size: 13px; }
.msg-error .icono { width: 18px; height: 18px; }
.pregunta-resp.error .msg-error { display: flex; }
.barra-envio { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--md-sys-color-surface-container-high); border-radius: 20px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
.barra-envio .espacio { flex: 1; }
.barra-envio .contador { color: var(--md-sys-color-on-surface-variant); }

.exito { display: grid; place-items: center; gap: 16px; padding: 48px 24px; text-align: center; background: var(--md-sys-color-surface-container-low); border-radius: 28px; }
.exito .check { width: 96px; height: 96px; color: var(--exito); animation: pop 700ms var(--emph-decel) both; }
.exito .check svg { width: 100%; height: 100%; fill: currentColor; }
.exito h2 { font: 400 28px/36px var(--md-ref-typeface-brand); }
.exito .acciones-formulario { justify-content: center; }

/* ---------- Editor de encuesta ---------- */
.editor-lista { display: flex; flex-direction: column; gap: 12px; }
.pregunta {
    position: relative;
    overflow: hidden;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid transparent;
    border-radius: 20px;
    transition: background-color var(--medio) var(--emph), box-shadow var(--medio) var(--emph), border-color var(--medio) var(--emph);
    animation: entrada 450ms var(--emph-decel) both;
    animation-delay: calc(var(--j, 0) * 45ms);
}
.pregunta.abierta { background: var(--md-sys-color-surface-container-lowest); border-color: var(--md-sys-color-primary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.pregunta-cabeza { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer; outline: none; }
.pregunta-cabeza .numero {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    font: 500 14px/1 var(--md-ref-typeface-plain);
    color: var(--md-sys-color-on-primary-container);
    background: var(--md-sys-color-primary-container);
    border-radius: 50%;
}
.pregunta-resumen { flex: 1; min-width: 0; }
.pregunta-titulo { overflow: hidden; font: 500 16px/24px var(--md-ref-typeface-brand); text-overflow: ellipsis; white-space: nowrap; }
.pregunta-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pregunta-meta .etiqueta { height: 22px; padding: 0 8px; font-size: 11px; }
.pregunta .flecha { flex: none; color: var(--md-sys-color-on-surface-variant); transition: transform var(--medio) var(--emph); }
.pregunta.abierta .flecha { transform: rotate(180deg); }
.editor-envoltura { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--medio) var(--emph); }
.pregunta.abierta .editor-envoltura { grid-template-rows: 1fr; }
.editor-interior { min-height: 0; overflow: hidden; }
.editor-contenido { display: flex; flex-direction: column; gap: 16px; padding: 4px 20px 20px; }
.editor-contenido md-outlined-text-field, .editor-contenido md-outlined-select { width: 100%; }
.fila-principal { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; }
@media (max-width: 720px) { .fila-principal { grid-template-columns: minmax(0, 1fr); } }
.bloque-opciones, .bloque-slider, .bloque-texto { display: none; }
.pregunta[data-tipo="dropdown"] .bloque-opciones,
.pregunta[data-tipo="unica"] .bloque-opciones,
.pregunta[data-tipo="multiple"] .bloque-opciones { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pregunta[data-tipo="slider"] .bloque-slider { display: flex; flex-wrap: wrap; gap: 12px; }
.pregunta[data-tipo="texto"] .bloque-texto { display: block; color: var(--md-sys-color-on-surface-variant); }
.lista-opciones { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.opcion { display: flex; align-items: center; gap: 8px; animation: entrada 300ms var(--emph-decel) both; }
.opcion md-outlined-text-field { flex: 1; --md-outlined-text-field-top-space: 10px; --md-outlined-text-field-bottom-space: 10px; }
.bloque-slider md-outlined-text-field { width: 120px; }
.editor-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 12px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.editor-pie .espacio { flex: 1; }
.fila-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding: 0 8px; }
.cabecera-editor { display: flex; flex-direction: column; gap: 16px; }
.cabecera-editor .fila-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.cabecera-editor .fila-estado .espacio { flex: 1; }

/* ---------- Configurar gráficas ---------- */
.selector-preguntas { display: flex; flex-direction: column; gap: 4px; }

/* ---------- Auxiliares ---------- */
.oculto { display: none !important; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.espacio { flex: 1; }

/* Los componentes con display propio ignoran [hidden]; se corrige aquí */
md-linear-progress[hidden], md-circular-progress[hidden] { display: none; }

.en-linea { display: inline-flex; margin: 0; }