/* ============================================================================
   Rescue Capacitar — componentes.css: botones, formularios, tarjetas, avisos,
   tablas, chips, estados vacíos y contenedores de escena (DOCS/06 §5).
   ============================================================================ */

/* --- Botones -------------------------------------------------------------------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-sm);font-weight:700;font-size:14.5px;border:1px solid transparent;transition:background var(--t-rapida) var(--ease),border-color var(--t-rapida) var(--ease),color var(--t-rapida) var(--ease),filter var(--t-rapida) var(--ease);text-decoration:none;white-space:nowrap}
.boton--primario{background:var(--ui-accent);color:var(--ui-accent-ink)}
.boton--primario:hover{filter:brightness(1.07);color:var(--ui-accent-ink)}
.boton--marca{min-height:50px;border-radius:12px;background:linear-gradient(120deg,var(--boton-marca-1),var(--boton-marca-2));color:var(--boton-marca-ink);box-shadow:var(--boton-marca-sombra);font-size:15.5px}
.boton--marca:hover{filter:brightness(1.06) saturate(1.1);color:var(--boton-marca-ink)}
.boton--marca .ico{transition:transform var(--t-rapida) var(--ease)}
.boton--marca:hover .ico{transform:translateX(3px)}
.boton--cristal{background:var(--ui-vidrio);border-color:var(--ui-vidrio-borde);color:var(--ui-text)}
.boton--cristal:hover{border-color:var(--ui-accent);color:var(--ui-text)}
.boton--claro{background:var(--aula-destacado-texto);color:var(--aula-destacado-1);border-radius:var(--r-pill)}
.boton--claro:hover{filter:brightness(.94);color:var(--aula-destacado-1)}
.boton--secundario{border-color:var(--ui-border);color:var(--ui-text);background:transparent}
.boton--secundario:hover{border-color:var(--ui-accent);color:var(--ui-accent)}
.boton--peligro{border-color:color-mix(in srgb,var(--ui-red) 55%,var(--ui-border));color:var(--ui-red);background:transparent}
.boton--peligro:hover{background:color-mix(in srgb,var(--ui-red) 10%,transparent)}
.boton--bloque{width:100%}
.boton--pequeno{min-height:34px;padding:0 12px;font-size:13px}
.boton[disabled],.boton[aria-busy="true"]{opacity:.6;cursor:not-allowed}
.enlace-boton{background:none;border:0;color:var(--ui-accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;padding:0}

/* --- Formularios -------------------------------------------------------------- */
.campo{margin:0 0 16px}
.campo>label,.campo__etiqueta{display:block;font-size:12px;font-weight:700;color:var(--ui-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.campo__control{position:relative;display:flex;align-items:center}
.campo__control>.selector{flex:1;min-width:0}
.campo__control>.ico{position:absolute;left:13px;color:var(--ui-muted);pointer-events:none}
.campo input:not([type=checkbox]):not([type=radio]),.campo select,.campo textarea{width:100%;min-height:46px;background:var(--ui-panel-2);border:1px solid var(--ui-border);border-radius:var(--r-sm);padding:10px 13px;font-size:15px;transition:border-color var(--t-rapida) var(--ease),box-shadow var(--t-rapida) var(--ease)}
.campo .campo__control>.ico~input:not([type=checkbox]){padding-left:42px}
.campo textarea{min-height:96px;resize:vertical;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--ui-accent);box-shadow:0 0 0 3px var(--ui-accent-ring)}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:var(--ui-red)}
.campo__ayuda{font-size:12.5px;color:var(--ui-muted);margin-top:6px}
.campo__ayuda ul{margin:4px 0 0 18px}
.campo__error{font-size:13px;color:var(--ui-red);margin-top:6px;font-weight:600}
.campo__ojo{position:absolute;right:6px;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--ui-muted)}
.campo__ojo:hover{color:var(--ui-text);background:var(--ui-panel)}
.campo__ojo .ico-ocultar{display:none}
.campo__ojo[aria-pressed="true"] .ico-ver{display:none}
.campo__ojo[aria-pressed="true"] .ico-ocultar{display:block}
.casilla{display:inline-flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.casilla input{width:18px;height:18px;accent-color:var(--ui-accent)}
.casilla>span{display:grid;gap:2px}
.casilla small{font-size:12.5px;font-weight:400;color:var(--ui-muted)}
.casilla:has(small){align-items:flex-start}
.casilla:has(small) input{margin-top:2px}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulario__acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.grupo{border:1px solid var(--ui-border);border-radius:var(--r);padding:18px 20px;margin-bottom:18px;background:var(--ui-panel)}
.grupo>legend{font-family:var(--font-display);font-size:19px;font-weight:700;padding:0 8px}
.rejilla-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
@media (max-width:640px){.rejilla-2{grid-template-columns:1fr}}

/* --- Avisos -------------------------------------------------------------------- */
.aviso{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-sm);padding:12px 14px;font-size:14px;border:1px solid var(--ui-border);background:var(--ui-panel-2);margin-bottom:14px}
.aviso--error{border-color:color-mix(in srgb,var(--ui-red) 50%,transparent);background:color-mix(in srgb,var(--ui-red) 10%,transparent)}
.aviso--exito{border-color:color-mix(in srgb,var(--ui-accent) 45%,transparent);background:var(--ui-accent-glow)}
.aviso--info{border-color:color-mix(in srgb,var(--ui-blue) 45%,transparent);background:color-mix(in srgb,var(--ui-blue) 10%,transparent)}
.aviso--warning{border-color:color-mix(in srgb,var(--ui-warn) 50%,transparent);background:color-mix(in srgb,var(--ui-warn) 10%,transparent)}
.aviso .ico{margin-top:2px}

/* --- Tarjetas, chips y tablas -------------------------------------------------- */
.tarjeta{background:var(--ui-panel);border:1px solid var(--ui-border);border-radius:var(--r);padding:20px}
.tarjeta h2,.tarjeta h3{font-size:20px;margin-bottom:10px}
.rejilla-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.04em;background:var(--ui-badge-muted);color:var(--ui-muted)}
.chip--ok{background:var(--ui-accent-glow);color:var(--ui-accent)}
.chip--alerta{background:color-mix(in srgb,var(--ui-red) 14%,transparent);color:var(--ui-red)}
.chip--marca{background:var(--aula-azul-suave);color:var(--ui-progress)}
.chip .ico{width:14px;height:14px}
.tabla-envoltura{position:relative;overflow-x:auto;border:1px solid var(--ui-border);border-radius:var(--r);background:var(--ui-panel)}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-muted);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--ui-border);background:var(--ui-panel-2)}
.tabla td{padding:12px 14px;border-bottom:1px solid var(--ui-border);vertical-align:middle}
.tabla tbody th{text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--ui-text);background:none;vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}

/* --- Estado vacío ----------------------------------------------------------------- */
.vacio{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 20px;border:1px dashed var(--ui-border);border-radius:var(--r);color:var(--ui-muted)}
.vacio__escena{width:180px;height:140px;margin-bottom:10px}
.vacio h2,.vacio h3{color:var(--ui-text);font-size:24px;margin-bottom:6px}
.vacio p{max-width:440px}

/* --- Contenedor de escena Three.js (DOCS/11 §2) ------------------------------- */
.escena{position:relative;overflow:hidden;contain:strict}
.escena>canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.escena__respaldo{position:absolute;inset:0;margin:auto;width:min(60%,320px);height:min(60%,320px);color:var(--escena-primario);opacity:.9}
.escena[data-estado="lista"] .escena__respaldo,.escena[data-estado="congelada"] .escena__respaldo{display:none}
.escena--fondo{position:fixed;inset:0;z-index:0;contain:strict;background:var(--escena-fondo)}
.escena--fondo .escena__respaldo{width:min(56vmin,480px);height:min(56vmin,480px);opacity:.6}
@media (min-width:901px){.escena--izquierda .escena__respaldo{transform:translate(-20vw,-8vh)}}
@media (max-width:900px){.escena--fondo .escena__respaldo{width:min(46vmin,260px);height:min(46vmin,260px);margin:9vh auto auto}}

/* --- Código (2FA) ---------------------------------------------------------------- */
.codigos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-family:ui-monospace,Consolas,monospace;font-size:15px;margin:10px 0}
.codigos li{list-style:none;background:var(--ui-panel-2);border:1px solid var(--ui-border);border-radius:var(--r-sm);padding:8px 10px;text-align:center;letter-spacing:.08em}
.qr{width:200px;height:200px;background:#fff;padding:8px;border-radius:var(--r-sm)}
.qr svg{width:100%;height:100%}

/* --- Utilidades -------------------------------------------------------------- */
.ancho-formulario{max-width:640px}
.separado-arriba{margin-top:16px}
.separado-abajo{margin-bottom:12px}
.cabecera--sin-relleno{padding:0 0 12px}

/* --- Progreso (<progress> nativo, sin estilos en línea) ----------------------- */
.barra-progreso,.medidor{-webkit-appearance:none;appearance:none;display:block;width:100%;height:10px;border:0;border-radius:var(--r-pill);background:var(--ui-panel-2);overflow:hidden;color:var(--ui-accent)}
.barra-progreso::-webkit-progress-bar,.medidor::-webkit-progress-bar{background:var(--ui-panel-2);border-radius:var(--r-pill)}
.barra-progreso::-webkit-progress-value{background:linear-gradient(90deg,var(--boton-marca-1),var(--boton-marca-2));border-radius:var(--r-pill)}
.barra-progreso::-moz-progress-bar{background:linear-gradient(90deg,var(--boton-marca-1),var(--boton-marca-2));border-radius:var(--r-pill)}
.medidor{height:6px}
.medidor::-webkit-progress-value{background:var(--ui-progress);border-radius:var(--r-pill)}
.medidor::-moz-progress-bar{background:var(--ui-progress);border-radius:var(--r-pill)}

/* --- Paginación -------------------------------------------------------------- */
.paginacion{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:13.5px}
.paginacion__estado{color:var(--ui-muted)}
.paginacion__boton{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--ui-border);border-radius:var(--r-sm);font-weight:600;background:var(--ui-panel)}
a.paginacion__boton:hover{border-color:var(--ui-accent)}
.paginacion__boton[aria-disabled="true"]{color:var(--ui-muted);background:transparent}

/* --- Contenido de las personas (DOCS/08 F5.10–F5.12) ------------------------------ */
.contenido-usuario{line-height:1.65;overflow-wrap:anywhere}
.contenido-usuario>:first-child{margin-top:0}
.contenido-usuario :is(h2,h3,h4){margin:1.2em 0 .5em;font-family:var(--font-display);line-height:1.2}
.contenido-usuario p{margin:0 0 .9em}
.contenido-usuario :is(ul,ol){margin:0 0 .9em 1.3em}
.contenido-usuario img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.contenido-usuario :is(video,iframe){display:block;width:100%;max-width:760px;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r);background:var(--marca-negro)}
.contenido-usuario audio{width:100%;max-width:520px}
.contenido-usuario blockquote{margin:1em 0;padding:.6em 1em;border-left:4px solid var(--ui-accent);background:var(--ui-panel-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.contenido-usuario table{border-collapse:collapse;margin:1em 0;min-width:50%;max-width:100%;display:block;overflow-x:auto}
.contenido-usuario :is(th,td){border:1px solid var(--ui-border);padding:6px 10px;vertical-align:top}
.contenido-usuario th{background:var(--ui-panel-2);text-align:left}
.contenido-usuario :is(th,td) p{margin:0}
.contenido-usuario pre{margin:1em 0;overflow-x:auto;padding:12px 14px;border-radius:var(--r);background:var(--ui-panel-2);border:1px solid var(--ui-border);font-size:13.5px;line-height:1.5}
.contenido-usuario code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.contenido-usuario :not(pre)>code{padding:1px 5px;border-radius:5px;background:var(--ui-panel-2)}
.contenido-usuario details{margin:1em 0;border:1px solid var(--ui-border);border-radius:var(--r);padding:0 14px}
.contenido-usuario summary{cursor:pointer;padding:10px 0;font-weight:700}
.contenido-usuario details[open]>summary{border-bottom:1px solid var(--ui-border);margin-bottom:10px}
.contenido-usuario details.descripcion-larga{font-size:14px;border-style:dashed}
.alinear-centro{text-align:center}
.alinear-derecha{text-align:right}
.alinear-justificar{text-align:justify}
.matematica[data-modo="bloque"]{display:block;margin:1em 0;text-align:center;overflow-x:auto}
.medio-diferido{display:grid;place-items:center;max-width:760px;aspect-ratio:16/9;margin:1em 0;border-radius:var(--r);background:linear-gradient(135deg,var(--aula-hero-1),var(--aula-hero-2));border:1px solid var(--ui-border);overflow:hidden}
.medio-diferido--cargado{background:var(--marca-negro);border-color:transparent}
.medio-diferido iframe{width:100%;height:100%;max-width:none;border-radius:0}
.medio-diferido__boton{display:inline-flex;align-items:center;gap:8px;min-height:46px;max-width:90%;padding:0 20px;border:0;border-radius:var(--r-pill);background:var(--ui-panel);color:var(--ui-text);font-weight:700;box-shadow:var(--ui-shadow);cursor:pointer}
.medio-diferido__boton:hover{color:var(--ui-accent)}
.correo-protegido{padding:0;border:0;background:none;color:var(--ui-accent);font:inherit;text-decoration:underline;cursor:pointer}
.enlace-visor{font-size:.9em}
/* Resaltado de código con los colores del tema (highlight.js sin hoja propia) */
.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-type{color:var(--ui-blue)}
.hljs-string,.hljs-regexp,.hljs-template-tag{color:var(--ui-accent)}
.hljs-comment,.hljs-quote{color:var(--ui-muted);font-style:italic}
.hljs-number,.hljs-literal,.hljs-symbol{color:var(--ui-warn)}
.hljs-title,.hljs-section,.hljs-name,.hljs-function{color:var(--ui-progress)}
.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-params{color:var(--ui-red)}

/* --- Diálogos del selector de archivos y del editor --------------------------------- */
.dialogo{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--ui-border);border-radius:var(--r-lg);background:var(--ui-panel);color:var(--ui-text);box-shadow:var(--ui-shadow)}
.dialogo::backdrop{background:color-mix(in srgb,var(--marca-negro) 55%,transparent)}
.dialogo__formulario{display:grid;gap:14px;padding:22px}
.dialogo__titulo{font-family:var(--font-display);font-size:22px}
.dialogo__descripcion{color:var(--ui-muted);font-size:14px}
.dialogo__error{min-height:1em;color:var(--ui-red);font-size:13.5px}
.dialogo__error:empty{display:none}
.dialogo__acciones{display:flex;justify-content:flex-end;gap:8px}
.dialogo .casilla{align-items:flex-start}
input[type="file"]::file-selector-button{margin-right:10px;padding:6px 12px;border:1px solid var(--ui-border);border-radius:var(--r-sm);background:var(--ui-panel-2);color:var(--ui-text);font:inherit;font-weight:600;cursor:pointer}
.dialogo .casilla small{display:block;font-size:12.5px;color:var(--ui-muted)}

/* Filtros (búsqueda en píldora + selector) y segmentos: los usan el Aula y la consola */
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.filtros__busqueda{position:relative;display:flex;align-items:center;flex:1;min-width:240px;max-width:560px}
.filtros__busqueda>.ico{position:absolute;left:16px;color:var(--ui-muted);pointer-events:none}
.filtros input,.filtros select{width:100%;min-height:46px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--ui-border);background:var(--ui-panel);font-size:14.5px;box-shadow:var(--aula-sombra)}
.filtros__busqueda input{padding-left:44px}
.filtros input:focus,.filtros select:focus{outline:none;border-color:var(--ui-accent);box-shadow:0 0 0 3px var(--ui-accent-ring)}
.filtros__selector{min-width:230px}
select.filtros__selector{width:auto;flex:0 1 auto}
.filtros .boton{min-height:46px;padding:0 22px;border-radius:var(--r-pill)}
.segmentos{display:inline-flex;flex-wrap:wrap;gap:4px;margin-bottom:16px;padding:4px;border-radius:22px;background:var(--ui-panel-2)}
.segmentos a,.segmentos button{padding:8px 14px;border:0;border-radius:var(--r-pill);background:transparent;font:inherit;font-size:13.5px;font-weight:600;color:var(--ui-muted);cursor:pointer}
.segmentos a:hover,.segmentos button:hover{color:var(--ui-text)}
.segmentos a[aria-current="true"],.segmentos button[aria-pressed="true"]{background:var(--ui-panel);color:var(--ui-text);box-shadow:var(--aula-sombra)}
@media (max-width:640px){.filtros__busqueda{flex-basis:100%;max-width:none}.filtros__selector,select.filtros__selector{min-width:0;flex:1}}