/* =====================================================================
   Cruz de Guía · sistema de diseño común (panel, plataforma, app)
   Colores y medidas de las maquetas aprobadas. Clases en español.
   ===================================================================== */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700.woff') format('woff'); }

:root {
  --morado-900: #2B1640;
  --morado-800: #3A1D52;
  --morado-700: #452861;
  --morado-600: #5B2E80;
  --morado-400: #7A5C96;
  --morado-300: #B9A3CF;
  --morado-200: #D9CDE6;
  --morado-100: #ECE4F4;
  --lila: #F3EEF8;
  --lila-2: #FAF8FC;
  --oro: #C99A3A;
  --oro-claro: #E2C27A;
  --oro-medio: #D4AE5C;
  --oro-fondo: #F3E7C8;
  --oro-texto: #5E430D;
  --oro-oscuro: #8A6416;
  --tinta: #1D1A22;
  --texto-2: #625C6C;
  --texto-3: #55505E;
  --borde: #E6E2EA;
  --borde-2: #CFC8D8;
  --borde-suave: #F0EDF3;
  --fondo: #F6F5F8;
  --fondo-2: #FAFAF9;
  --blanco: #FFFFFF;
  --ok: #1F6B45; --ok-fondo: #E6F4EC;
  --error: #A3361F; --error-fondo: #FDECEA;
  --aviso: #7A4A00; --aviso-fondo: #FFF1DB;
  --info: #2D4F7C; --info-fondo: #E4ECF6;
  --rocio: #1F5E4A; --rocio-fondo: #E3F1EB;
  --gris-fondo: #EFEDF2;
  --radio: 10px;
  --radio-tarjeta: 12px;
  --sombra: 0 12px 28px rgba(20, 6, 34, .18);
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fuente-titular: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --menu-ancho: 232px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: 14px; line-height: 1.45; color: var(--tinta); background: var(--fondo); font-feature-settings: 'cv11'; -webkit-font-smoothing: antialiased; }
a { color: var(--morado-800); }
a:hover { color: var(--morado-600); }
img, svg { vertical-align: middle; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
h1 { font-size: 24px; font-weight: 700; color: var(--morado-900); }
h2 { font-size: 15px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--borde); margin: 14px 0; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--morado-600); outline-offset: 2px; }
::selection { background: var(--morado-100); }
[hidden] { display: none !important; }

/* ---------- utilidades ---------- */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
table.sr { left: -10000px; } /* una tabla no encoge a 1px: fuera de la pantalla para que no desborde (tablas de los gráficos) */
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--blanco); color: var(--morado-900); padding: 10px 14px; border-radius: var(--radio); font-weight: 700; }
.saltar:focus { top: 8px; }
.texto-sec { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }
.texto-peq { font-size: 12px; }
.texto-ok { color: var(--ok); } .texto-error { color: var(--error); } .texto-aviso { color: var(--aviso); } .texto-oro { color: var(--oro-oscuro); }
.negrita { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
.derecha { text-align: right; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fila-entre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pila { display: flex; flex-direction: column; gap: 12px; }
.pila-16 { display: flex; flex-direction: column; gap: 16px; }
/* las utilidades de margen ganan siempre a los márgenes de los componentes (.datos, .ayuda, p…) */
.mt-4 { margin-top: 4px !important; } .mt-8 { margin-top: 8px !important; } .mt-12 { margin-top: 12px !important; } .mt-16 { margin-top: 16px !important; } .mt-24 { margin-top: 24px !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-8 { margin-bottom: 8px !important; } .mb-12 { margin-bottom: 12px !important; }
.ancho-completo { width: 100%; }
.ancho-auto { width: auto !important; }
.crece { flex: 1 1 auto; min-width: 0; }
.m-0 { margin: 0 !important; }
.bloque { display: block; }
.en-linea-form { display: inline; }
.min-0 { min-width: 0; }
.gap-6 { gap: 6px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; }
.sin-salto { flex-wrap: nowrap; }
.en-columna { flex-direction: column; align-items: flex-start; }
.una-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codigo-largo { overflow-wrap: anywhere; }
.lista-pasos { padding-left: 18px; margin: 12px 0 0; }
.cursor-mano { cursor: pointer; }
.flex-3 { flex: 3 1 400px; } .flex-3-ancho { flex: 3 1 640px; } .flex-2 { flex: 2 1 300px; }
.texto-claro { color: var(--morado-200); } .texto-claro-2 { color: #E3DAEE; }
.max-200 { max-width: 200px; } .max-640 { max-width: 640px; } .max-860 { max-width: 860px; }
.separador { height: 1px; background: var(--borde); margin: 4px 0; border: 0; }
.solo-movil { display: none !important; }
.titular { font-family: var(--fuente-titular); font-weight: 700; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--radio); border: 1px solid var(--borde-2); background: var(--blanco); color: var(--morado-900); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.btn:hover { background: var(--lila); color: var(--morado-900); border-color: var(--morado-300); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn .icono { flex: none; }
.btn-primario { background: var(--morado-800); border-color: var(--morado-800); color: var(--blanco); }
.btn-primario:hover { background: var(--morado-900); border-color: var(--morado-900); color: var(--blanco); }
.btn-oro { background: var(--oro-medio); border-color: var(--oro-medio); color: #241133; font-weight: 700; }
.btn-oro:hover { background: var(--oro-claro); border-color: var(--oro-claro); color: #241133; }
.btn-secundario { background: var(--blanco); }
.btn-peligro { color: var(--error); border-color: #E7B9AE; }
.btn-peligro:hover { background: var(--error-fondo); color: var(--error); border-color: var(--error); }
.btn-peligro.btn-lleno { background: var(--error); color: var(--blanco); border-color: var(--error); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: var(--blanco); }
.btn-enlace { border-color: transparent; background: transparent; color: var(--morado-800); padding: 0 8px; }
.btn-enlace:hover { background: var(--lila); border-color: transparent; }
.btn-sm { min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.btn-xs { min-height: 28px; padding: 0 8px; border-radius: 7px; font-size: 12px; }
.btn-gr { min-height: 50px; padding: 0 20px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.btn-icono { width: 40px; padding: 0; }
.btn-icono.btn-sm { width: 32px; }
.btn-bloque { display: flex; width: 100%; }
.grupo-botones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- tarjetas ---------- */
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 16px 18px; min-width: 0; }
.tarjeta-sin { padding: 0; overflow: hidden; }
.tarjeta-destacada { border: 2px solid var(--morado-800); }
.tarjeta-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.tarjeta-cabecera .enlace { font-size: 13px; font-weight: 600; }
.tarjeta > h2 + *, .tarjeta-cabecera + * { margin-top: 12px; }
.tarjeta-pie { margin-top: 12px; font-size: 12px; color: var(--texto-2); }
.tarjeta-oscura { background: var(--morado-900); color: var(--blanco); border-color: var(--morado-900); }
.tarjeta-oscura h2 { color: var(--oro-claro); }
.seccion-titulo { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--texto-2); font-weight: 700; margin: 12px 0 2px; }

/* ---------- KPIs ---------- */
.kpis { display: flex; flex-wrap: wrap; gap: 12px; }
.kpi { flex: 1 1 200px; min-width: 0; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 14px 16px; text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; gap: 4px; }
a.kpi:hover { border-color: var(--morado-300); color: var(--tinta); }
.kpi-etiqueta { font-size: 13px; color: var(--texto-2); }
.kpi-valor { font-size: 26px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; font-weight: 600; color: var(--texto-3); }
.kpi-sub.ok { color: var(--ok); } .kpi-sub.error { color: var(--error); } .kpi-sub.aviso { color: var(--aviso); } .kpi-sub.oro { color: var(--oro-oscuro); }

/* ---------- tablas compactas ---------- */
.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { background: var(--lila-2); text-align: left; color: var(--texto-3); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 4px 12px; height: 38px; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: #FCFBFD; }
.tabla tr.seleccionada td { background: var(--lila); }
.tabla .num, .tabla td.num { font-variant-numeric: tabular-nums; color: var(--texto-3); }
.tabla .derecha { text-align: right; }
.tabla td.acciones { text-align: right; white-space: nowrap; }
.tabla td.principal, .tabla td .principal { font-weight: 600; }
.tabla a.fila-enlace { color: var(--tinta); text-decoration: none; font-weight: 600; }
.tabla a.fila-enlace:hover { color: var(--morado-600); text-decoration: underline; }
.tabla-min { min-width: 720px; }
.tabla-min-640 { min-width: 640px; } .tabla-min-820 { min-width: 820px; }
.tabla td.celda-vacia { height: 60px; text-align: center; }
.tabla-holgada td { height: 48px; padding-top: 6px; padding-bottom: 6px; line-height: 1.35; }
.filtros-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tabla-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; color: var(--texto-2); border-top: 1px solid var(--borde); }
.tabla-pie .paginas { display: flex; align-items: center; gap: 6px; }
.tabla-pie .pagina-actual { padding: 0 6px; }
.tabla-titulo { padding: 14px 16px 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; background: var(--gris-fondo); color: var(--texto-3); white-space: nowrap; }
.chip-ok { background: var(--ok-fondo); color: var(--ok); }
.chip-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.chip-error { background: var(--error-fondo); color: var(--error); }
.chip-info { background: var(--info-fondo); color: var(--info); }
.chip-morado { background: var(--morado-100); color: var(--morado-800); }
.chip-oro { background: var(--oro-fondo); color: var(--oro-texto); }
.chip-rocio { background: var(--rocio-fondo); color: var(--rocio); }
.chip-cuadrado { border-radius: 6px; padding: 2px 8px; }
.contador { display: inline-block; min-width: 28px; text-align: center; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 6px; background: var(--morado-100); color: var(--morado-800); }
.contador.error { background: var(--error-fondo); color: var(--error); }
.contador.aviso { display: inline-block; gap: 0; padding: 2px 6px; font-size: 12px; line-height: normal; background: var(--aviso-fondo); color: var(--aviso); }
.contador.ok { background: var(--ok-fondo); color: var(--ok); }

/* filtros tipo píldora (maqueta Hermanos) */
.filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borde-2); background: var(--blanco); color: var(--morado-900); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.filtro:hover { border-color: var(--morado-300); color: var(--morado-900); background: var(--lila); }
.filtro .n { opacity: .8; font-weight: 500; }
.filtro.activo, .filtro[aria-current="true"] { background: var(--morado-800); border-color: var(--morado-800); color: var(--blanco); }

/* ---------- avisos (mensajes) ---------- */
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radio); font-size: 14px; background: var(--lila); color: var(--morado-800); line-height: 1.45; }
.aviso .icono { flex: none; margin-top: 1px; }
.aviso > div { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.aviso-ok { background: var(--ok-fondo); color: var(--ok); }
.aviso-error { background: var(--error-fondo); color: var(--error); }
.aviso-info { background: var(--lila); color: var(--morado-800); }
.aviso-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.aviso-oro { background: #FFF8EA; color: var(--oro-texto); }
.aviso .cerrar-aviso { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 2px; border-radius: 6px; opacity: .75; }
.aviso .cerrar-aviso:hover { opacity: 1; }
.flashes { display: flex; flex-direction: column; gap: 8px; }

/* ---------- formularios ---------- */
.form-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 14px; }
.form-rejilla .campo-ancho, .form-rejilla .campo-completo { grid-column: 1 / -1; }
.form-rejilla .campo-2 { grid-column: span 2; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label, .campo > .etiqueta, .etiqueta { font-size: 13px; font-weight: 600; color: var(--tinta); }
.campo .opcional { font-weight: 400; color: var(--texto-2); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="date"], input[type="url"], input[type="time"], input[type="datetime-local"], input:not([type]), select, textarea {
  min-height: 40px; width: 100%; border: 1px solid var(--borde-2); border-radius: var(--radio); padding: 0 10px; background: var(--blanco); font-size: 14px; font-weight: 400; color: var(--tinta);
}
textarea { padding: 8px 10px; min-height: 84px; resize: vertical; line-height: 1.45; }
select { padding: 0 8px; }
input[type="file"] { font-size: 13px; max-width: 100%; }
input[type="color"] { width: 64px; height: 40px; padding: 3px; border: 1px solid var(--borde-2); border-radius: var(--radio); background: var(--blanco); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--morado-600); outline-offset: 0; border-color: var(--morado-600); }
input::placeholder, textarea::placeholder { color: #8C8595; }
input[readonly] { background: var(--lila-2); }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea, input.con-error { border-color: var(--error); background: #FFFBFA; }
.ayuda { font-size: 12px; color: var(--texto-2); margin: 0; }
.error-campo { font-size: 12px; color: var(--error); font-weight: 600; margin: 0; }
.form-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 4px; }
.form-acciones.izquierda { justify-content: flex-start; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto-3); cursor: pointer; min-height: 28px; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--morado-800); flex: none; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.grupo-form { border-top: 1px solid var(--borde-suave); padding-top: 14px; margin-top: 2px; }
.grupo-form > h3 { margin-bottom: 10px; }

/* control segmentado (radios) */
.seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--lila); border-radius: 12px; padding: 4px; }
.seg label { flex: 1 1 120px; position: relative; display: flex; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 40px; padding: 0 12px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--texto-3); cursor: pointer; }
.seg input:checked + span { background: var(--blanco); color: var(--morado-900); box-shadow: 0 1px 3px rgba(43, 22, 64, .14); }
.seg input:focus-visible + span { outline: 2px solid var(--morado-600); outline-offset: 1px; }

/* interruptor (checkbox con aspecto de switch, maqueta Ajustes) */
.interruptor { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 44px; flex: none; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.interruptor-pista { position: relative; display: block; width: 44px; height: 26px; border-radius: 999px; background: var(--borde-2); transition: background .15s; }
.interruptor-pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--blanco); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); transition: left .15s; }
.interruptor input:checked + .interruptor-pista { background: var(--morado-800); }
.interruptor input:checked + .interruptor-pista::after { left: 21px; }
.interruptor input:focus-visible + .interruptor-pista { outline: 2px solid var(--morado-600); outline-offset: 2px; }
.interruptor input:disabled { cursor: not-allowed; }
.interruptor input:disabled + .interruptor-pista { opacity: .45; }

/* casillas tipo píldora (tipos de hermandad) */
.opcion-pildora { position: relative; display: inline-flex; }
.opcion-pildora input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion-pildora span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--borde-2); background: var(--blanco); color: var(--texto-3); font-size: 14px; font-weight: 700; cursor: pointer; }
.opcion-pildora span::before { content: ''; width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--borde-2); background: var(--blanco); flex: none; }
.opcion-pildora input:checked + span { border-color: var(--morado-800); background: var(--lila); color: var(--morado-900); }
.opcion-pildora input:checked + span::before { border-color: var(--morado-800); background: var(--morado-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.opcion-pildora input:focus-visible + span { outline: 2px solid var(--morado-600); outline-offset: 2px; }

/* ---------- pestañas ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--borde); }
.pestanas a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--texto-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pestanas a:hover { color: var(--morado-900); }
.pestanas a.activa, .pestanas a[aria-current="page"] { font-weight: 700; color: var(--morado-900); border-bottom-color: var(--morado-800); }
.pestanas .insignia { font-size: 11px; font-weight: 700; background: var(--error-fondo); color: var(--error); border-radius: 999px; padding: 1px 7px; }

/* ---------- vacío ---------- */
.vacio { text-align: center; padding: 28px 16px; color: var(--texto-2); }
.vacio .vacio-icono { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; background: var(--lila); color: var(--morado-800); display: flex; align-items: center; justify-content: center; }
.vacio h2, .vacio h3 { color: var(--tinta); font-size: 15px; margin-bottom: 4px; }
.vacio p { font-size: 13px; max-width: 420px; margin: 0 auto 10px; }

/* ---------- rejillas y cabeceras ---------- */
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.rejilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.columnas { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.columnas > .col-principal { flex: 999 1 600px; min-width: 0; }
.columnas > .col-lateral { flex: 1 1 300px; min-width: 0; }
.columnas.estirar { align-items: stretch; }
.cabecera-pagina { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cabecera-pagina h1 { margin: 0; }
.cabecera-pagina p, .cabecera-pagina .subtitulo { margin: 4px 0 0; font-size: 14px; color: var(--texto-2); }
.cabecera-pagina .acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.migas { font-size: 13px; color: var(--texto-2); margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.migas a { color: var(--texto-2); text-decoration: none; }
.migas a:hover { color: var(--morado-800); text-decoration: underline; }
.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tarjeta-sin > .barra-filtros { padding: 12px 14px; }
.barra-filtros input[type="search"] { flex: 1 1 240px; max-width: 340px; min-width: 0; }
.barra-filtros select { width: auto; min-height: 36px; font-size: 13px; }
.barra-filtros .derecha, .barra-filtros .empujar { margin-left: auto; }
.barra-filtros label.en-linea { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); }

/* ---------- listas compactas ---------- */
.lista-compacta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-compacta > li, .lista-compacta > a, .lista-compacta > div { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--borde-suave); font-size: 13px; color: var(--tinta); text-decoration: none; padding: 4px 0; }
.lista-compacta > li:last-child, .lista-compacta > a:last-child, .lista-compacta > div:last-child { border-bottom: 0; }
.lista-compacta a.item, .lista-compacta > a { color: var(--tinta); }
.lista-compacta > a:hover { color: var(--morado-600); }
.lista-compacta .crece { flex: 1 1 auto; min-width: 0; }
.lista-compacta .fecha { width: 58px; flex: none; font-weight: 700; color: var(--oro-oscuro); }
.lista-compacta .sub { display: block; font-size: 12px; color: var(--texto-2); }
.lista-compacta.alta > li, .lista-compacta.alta > a, .lista-compacta.alta > div { min-height: 50px; }

/* ---------- datos (dl) ---------- */
.datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; font-size: 13px; }
.datos dt { color: var(--texto-2); }
.datos dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.datos .ancho { grid-column: 1 / -1; }
.datos-3 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ---------- avatar y escudo ---------- */
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--morado-100); color: var(--morado-800); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; text-transform: uppercase; }
.avatar-gr { width: 56px; height: 56px; font-size: 20px; }
.escudo { width: 30px; height: 30px; border-radius: 50%; background: var(--morado-800); color: var(--oro-claro); display: inline-flex; align-items: center; justify-content: center; font-family: var(--fuente-titular); font-weight: 700; font-size: 16px; flex: none; overflow: hidden; }
.escudo img { width: 100%; height: 100%; object-fit: cover; background: var(--blanco); }
.escudo-borde { border: 1px solid var(--oro-claro); }

/* ---------- diálogo ---------- */
dialog.modal { border: 0; border-radius: 14px; padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(20, 6, 34, .35); color: var(--tinta); }
dialog.modal::backdrop { background: rgba(29, 26, 34, .45); }
dialog.modal .modal-cuerpo { padding: 20px 20px 8px; font-size: 15px; line-height: 1.5; }
dialog.modal .modal-cuerpo h2 { font-size: 17px; margin-bottom: 8px; }
dialog.modal .modal-acciones { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; flex-wrap: wrap; }

/* ---------- gráficos ---------- */
.grafico { margin: 0; min-width: 0; }
.grafico-area { position: relative; margin: 14px 0 0 36px; border-bottom: 1px solid var(--borde-2); }
.grafico-svg { display: block; width: 100%; overflow: visible; }
.grafico-guia { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--borde); pointer-events: none; }
.grafico-guia span { position: absolute; right: 100%; margin-right: 6px; top: -8px; font-size: 11px; color: var(--texto-2); white-space: nowrap; line-height: 1.3; }
.grafico-cifra { position: absolute; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--texto-3); white-space: nowrap; line-height: 1; }
.grafico-ejex { display: flex; margin: 6px 0 0 36px; }
.grafico-ejex span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 11px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.grafico-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--texto-2); justify-content: flex-end; }
.grafico-leyenda li { display: flex; align-items: center; gap: 6px; }
.grafico-muestra { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.grafico-vacio { font-size: 13px; color: var(--texto-2); padding: 18px 0; text-align: center; }
.grafico-h { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.grafico-h-fila { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.grafico-h-etiqueta { width: 96px; flex: none; }
.grafico-h-pista { flex: 1 1 auto; height: 14px; background: #ECE8F0; border-radius: 999px; overflow: hidden; }
.grafico-h-barra { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.grafico-h-valor { min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.grafico-progreso + .grafico-progreso { margin-top: 14px; }
.grafico-progreso-texto { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.grafico-progreso-texto span:last-child { color: var(--texto-2); }
.grafico-progreso-texto b { color: var(--tinta); }
.grafico-progreso-pista { height: 8px; background: #ECE8F0; border-radius: 999px; margin-top: 6px; overflow: hidden; }
.grafico-progreso-pista span { display: block; height: 100%; border-radius: 999px; }
.grafico-apilada-barra { display: flex; height: 18px; border-radius: 999px; overflow: hidden; gap: 2px; margin-top: 18px; }
.grafico-apilada-barra span { display: block; height: 100%; }
.grafico-apilada-leyenda { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.grafico-apilada-leyenda li { display: flex; align-items: center; gap: 8px; }
.grafico-ley-texto { flex: 1 1 auto; }

/* ---------- QR ---------- */
.qr { display: inline-flex; align-items: center; justify-content: center; background: var(--blanco); line-height: 0; vertical-align: middle; }
.qr svg { width: 100%; height: auto; display: block; }
.qr .qr-dibujo, .qr .qr-respaldo { display: block; width: 100%; }
.qr-caja { width: 160px; min-height: 40px; border: 1px solid var(--borde); border-radius: 10px; padding: 6px; }
.qr-caja-200 { width: 200px; min-height: 60px; padding: 8px; }
.qr-texto { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; line-height: 1.3; word-break: break-all; color: var(--tinta); padding: 6px; text-align: center; }
.qr.qr-listo .qr-respaldo, .qr.qr-listo .qr-texto { display: none; }

/* ---------- inicio: widgets de los módulos ---------- */
.widgets { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.widget { min-width: 0; display: flex; flex-direction: column; }
.widget > * { flex: 1 1 auto; }
.widget-1 { flex: 1 1 300px; }
.widget-2 { flex: 2 1 520px; }
.widget-3 { flex: 1 1 100%; }

/* ---------- ajustes: módulos ---------- */
.fila-modulo { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 0; border-bottom: 1px solid var(--borde-suave); }
.fila-modulo:last-child { border-bottom: 0; }
.fila-modulo .nombre { font-size: 14px; font-weight: 600; color: var(--tinta); }
.fila-modulo .desc { font-size: 12px; color: var(--texto-2); }
.fila-modulo.apagado .nombre { color: var(--texto-2); }
.fila-modulo.no-ofrecido { opacity: .62; }
.fila-modulo .incluido { font-size: 12px; font-weight: 600; color: var(--texto-2); padding: 0 6px; }
.modulos-lista { padding-top: 6px; padding-bottom: 10px; }
.modulos-lista .seccion-titulo:first-child { margin-top: 6px; }
.vista-menu h2 { font-size: 14px; }
.vista-grupo { margin-top: 12px; }
.vista-grupo-titulo { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--morado-300); font-weight: 600; }
.chip-menu { font-size: 13px; background: var(--morado-800); color: #F1EBF7; border-radius: 8px; padding: 4px 10px; }
.vista-pie { margin-top: 14px; padding-top: 12px; border-top: 1px solid #4A2C66; font-size: 13px; color: #E3DAEE; }
.grupo-permisos { border: 1px solid var(--borde-suave); border-radius: 10px; padding: 10px 12px; }
.grupo-permisos legend { padding: 0 4px; }
.grupo-permisos .checks { flex-direction: column; gap: 2px; }
.grupo-permisos .check .chip { margin-left: 6px; font-size: 11px; padding: 0 6px; }
.escudo-muestra { width: 64px; height: 64px; font-size: 32px; }

/* =====================================================================
   LAYOUT PANEL (junta)
   ===================================================================== */
.cdg-panel { display: flex; min-height: 100vh; min-height: 100dvh; background: linear-gradient(to right, var(--morado-900) var(--menu-ancho), var(--fondo) var(--menu-ancho)); }
.menu-lateral { width: var(--menu-ancho); flex: none; background: var(--morado-900); color: var(--blanco); padding: 18px 12px 24px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--morado-700) transparent; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--blanco); text-decoration: none; padding: 0 8px; }
.marca:hover { color: var(--blanco); }
.marca-nombre { font-family: var(--fuente-titular); font-size: 24px; font-weight: 700; line-height: 1; }
.marca svg { flex: none; }
.menu-grupo { display: flex; flex-direction: column; gap: 2px; }
.menu-grupo-titulo { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--morado-300); font-weight: 600; padding: 0 10px 6px; }
.menu-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; text-decoration: none; color: #D9CDE6; font-weight: 500; }
.menu-item:hover { color: var(--blanco); background: rgba(69, 40, 97, .4); }
.menu-item .punto { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #6E5288; }
.menu-item .texto { flex: 1 1 auto; min-width: 0; }
.menu-item.activo { color: var(--blanco); background: rgba(69, 40, 97, .5); font-weight: 700; }
.menu-item.activo .punto { background: var(--oro-claro); }
.menu-item .insignia { font-size: 11px; font-weight: 700; background: var(--oro-medio); color: #241133; border-radius: 999px; padding: 1px 7px; }
.menu-item:focus-visible { outline-color: var(--oro-claro); }
.menu-ayuda { margin-top: 6px; background: var(--morado-800); border-radius: 10px; padding: 12px; font-size: 13px; color: #E3DAEE; line-height: 1.45; }
.menu-ayuda b { color: var(--blanco); display: block; }
.menu-ayuda a { color: var(--oro-claro); font-weight: 600; }
.panel-principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.barra-superior { background: var(--blanco); border-bottom: 1px solid var(--borde); padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; position: relative; z-index: 20; }
.selector-hermandad { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); color: inherit; text-decoration: none; text-align: left; max-width: 100%; min-width: 0; }
.selector-hermandad:hover { border-color: var(--morado-300); color: inherit; }
.selector-hermandad .nombres { display: flex; flex-direction: column; min-width: 0; }
.selector-hermandad .nombre { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selector-hermandad .sub { font-size: 12px; color: var(--texto-2); }
.selector-hermandad .icono { color: var(--texto-2); flex: none; }
.buscador-global { flex: 1 1 220px; min-width: 0; display: flex; }
.buscador-global input { min-height: 40px; border-color: var(--borde); background: var(--fondo-2); }
.temporada { font-size: 13px; font-weight: 600; color: var(--oro-texto); background: var(--oro-fondo); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.boton-campana { position: relative; width: 40px; height: 40px; border-radius: var(--radio); display: inline-flex; align-items: center; justify-content: center; color: var(--texto-3); text-decoration: none; }
.boton-campana:hover { background: var(--lila); color: var(--morado-900); }
.boton-campana .insignia { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--oro-medio); color: #241133; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.menu-usuario { position: relative; }
.menu-usuario > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 6px; border-radius: var(--radio); }
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario > summary:hover { background: var(--lila); }
.menu-usuario .quien { display: flex; flex-direction: column; line-height: 1.25; }
.menu-usuario .quien b { font-size: 13px; font-weight: 600; }
.menu-usuario .quien span { font-size: 12px; color: var(--texto-2); }
.menu-usuario-panel { position: absolute; right: 0; top: calc(100% + 6px); background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); min-width: 230px; padding: 6px; z-index: 30; display: flex; flex-direction: column; }
.menu-usuario-panel a, .menu-usuario-panel button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: 14px; border: 0; background: transparent; cursor: pointer; text-align: left; width: 100%; }
.menu-usuario-panel a:hover, .menu-usuario-panel button:hover { background: var(--lila); }
.menu-usuario-panel .cabeza { padding: 8px 10px 10px; border-bottom: 1px solid var(--borde-suave); margin-bottom: 4px; font-size: 13px; }
.menu-usuario-panel .cabeza b { display: block; }
.menu-usuario-panel form { margin: 0; }
.boton-menu-movil { display: none; }
.contenido { padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.banda-soporte { background: var(--oro-medio); color: #241133; padding: 8px 24px; font-size: 14px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; justify-content: center; }
.banda-soporte form { margin: 0; }
.banda-soporte button { border: 1px solid #241133; background: transparent; color: #241133; border-radius: 8px; min-height: 32px; padding: 0 12px; font-weight: 700; cursor: pointer; }
.banda-soporte button:hover { background: #241133; color: var(--oro-claro); }
.velo-menu { display: none; }
.pie-panel { padding: 0 24px 20px; font-size: 12px; color: var(--texto-2); }

@media (max-width: 900px) {
  .menu-lateral { position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: 280px; z-index: 60; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
  body.menu-abierto .menu-lateral { transform: none; }
  body.menu-abierto .velo-menu { display: block; position: fixed; inset: 0; background: rgba(29, 26, 34, .45); z-index: 55; }
  .boton-menu-movil { display: inline-flex; }
  .cdg-panel { background: var(--fondo); }
  .barra-superior { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .buscador-global { order: 10; flex: 1 1 100%; }
  .selector-hermandad { flex: 1 1 0; padding: 0 8px; min-height: 42px; }
  .selector-hermandad .nombres { overflow: hidden; }
  .selector-hermandad .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .selector-hermandad .icono { display: none; }
  .temporada { display: none; }
  .menu-usuario .quien { display: none; }
  .contenido { padding: 16px 12px 24px; }
  .banda-soporte { padding: 8px 12px; }
  .solo-movil { display: initial !important; }
  .solo-escritorio { display: none !important; }
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }
  .cabecera-pagina .acciones { width: 100%; }
}
@media (max-width: 560px) {
  h1 { font-size: 21px; }
  .kpi { flex-basis: calc(50% - 6px); padding: 12px; }
  .kpi-valor { font-size: 22px; }
  .datos { grid-template-columns: minmax(0, 1fr); }
  .form-rejilla { grid-template-columns: minmax(0, 1fr); }
  .form-rejilla .campo-2 { grid-column: auto; }
  .tarjeta { padding: 14px; }
  .barra-filtros input[type="search"] { max-width: none; flex-basis: 100%; }
  .filtros-chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 24px); margin: 0 -12px; padding: 2px 12px 6px; scrollbar-width: none; }
  .filtros-chips::-webkit-scrollbar { display: none; }
  .tabla .col-opcional { display: none; }
  .tabla.adaptable { min-width: 0; }
  .tabla.adaptable th, .tabla.adaptable td { padding-left: 8px; padding-right: 8px; }
  .tabla.adaptable td.principal, .tabla.adaptable td .principal { white-space: normal; }
}

/* =====================================================================
   LAYOUT PLATAFORMA (superadmin)
   ===================================================================== */
.cdg-plataforma { min-height: 100vh; background: var(--fondo); }
.plataforma-cabecera { background: var(--tinta); color: var(--blanco); }
.plataforma-cabecera .interior { max-width: 1360px; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; min-height: 64px; }
.plataforma-cabecera .marca { padding: 0; }
.plataforma-cabecera .marca-nombre { font-size: 24px; }
.distintivo { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; background: #3A3540; color: var(--oro-claro); padding: 3px 8px; border-radius: 6px; font-family: var(--fuente); }
.plataforma-nav { display: flex; flex-wrap: wrap; gap: 4px; align-self: stretch; }
.plataforma-nav a { display: inline-flex; align-items: center; padding: 0 12px; min-height: 64px; text-decoration: none; font-size: 14px; font-weight: 500; color: #C9C3CF; border-bottom: 3px solid transparent; }
.plataforma-nav a:hover { color: var(--blanco); }
.plataforma-nav a.activa { font-weight: 700; color: var(--blanco); border-bottom-color: var(--oro-claro); }
.plataforma-usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.plataforma-usuario .avatar { background: #3A3540; color: var(--oro-claro); width: 32px; height: 32px; }
.plataforma-usuario a, .plataforma-usuario button { color: #C9C3CF; background: transparent; border: 0; cursor: pointer; font-size: 13px; text-decoration: none; padding: 6px 8px; border-radius: 8px; }
.plataforma-usuario a:hover, .plataforma-usuario button:hover { color: var(--blanco); background: #3A3540; }
.plataforma-usuario form { margin: 0; }
.plataforma-contenido { max-width: 1360px; margin: 0 auto; padding: 22px 24px 32px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
  .plataforma-cabecera .interior { padding: 8px 12px; gap: 4px 12px; }
  .plataforma-nav { order: 10; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .plataforma-nav a { min-height: 44px; }
  .plataforma-contenido { padding: 16px 12px 24px; }
}

/* =====================================================================
   LAYOUT SIMPLE (acceso, instalador, errores) y pantalla de acceso partida
   ===================================================================== */
.cdg-simple { min-height: 100vh; min-height: 100dvh; background: var(--fondo-2); }
.simple-centro { max-width: 560px; margin: 0 auto; padding: 32px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.simple-ancho { max-width: 860px; }
.simple-muy-ancho { max-width: 1100px; }
.simple-flashes { padding-bottom: 0; }
.simple-marca { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--morado-900); text-decoration: none; margin-bottom: 4px; }
.simple-marca .marca-nombre { font-size: 28px; }
.simple-tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.simple-tarjeta h1 { font-size: 22px; }
.simple-pie { text-align: center; font-size: 13px; color: var(--texto-2); }

.acceso { display: flex; flex-wrap: wrap; min-height: 100vh; min-height: 100dvh; background: var(--fondo-2); }
.acceso-hero { flex: 1 1 420px; min-width: 0; background: var(--morado-900); color: var(--blanco); padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.acceso-hero .marca { padding: 0; }
.acceso-hero .marca-nombre { font-size: 30px; }
.acceso-hero h1 { font-family: var(--fuente-titular); font-size: 52px; line-height: 1.05; font-weight: 700; color: var(--blanco); max-width: 480px; }
.acceso-hero .lema { margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: #E3DAEE; max-width: 480px; }
.acceso-hero ul { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 16px; color: #F1EBF7; }
.acceso-hero li { display: flex; gap: 10px; }
.acceso-hero li .icono { color: var(--oro-claro); flex: none; margin-top: 3px; }
.acceso-hero .pie { font-size: 14px; color: #D9CDE6; margin: 0; }
.acceso-hero .pie a { color: var(--oro-claro); font-weight: 600; }
.acceso-formulario { flex: 1 1 420px; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.acceso-formulario form, .acceso-formulario .caja { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.acceso-formulario h2 { font-size: 28px; font-weight: 700; color: var(--morado-900); }
.acceso-formulario .subtitulo { margin: 8px 0 0; font-size: 15px; color: var(--texto-3); }
.acceso-formulario .campo > label { font-size: 14px; }
.acceso-formulario input[type="email"], .acceso-formulario input[type="password"], .acceso-formulario input[type="text"] { min-height: 46px; padding: 0 12px; font-size: 15px; }
.acceso-formulario .linea { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.acceso-formulario .linea a { font-weight: 600; }
.acceso-formulario .nota { margin: 0; font-size: 13px; color: var(--texto-2); text-align: center; }
.acceso-formulario .divisor { height: 1px; background: var(--borde); margin: 4px 0; }
.acceso-formulario .btn-gr { width: 100%; }
.acceso-formulario .enlaces { display: flex; flex-direction: column; gap: 10px; }
.acceso-formulario .enlaces a { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; }
.acceso-formulario .enlaces a.secundario { border: 1px solid var(--borde-2); color: var(--morado-900); }
.acceso-formulario .enlaces a.secundario:hover { background: var(--lila); }
.acceso-formulario .enlaces a.terciario { color: var(--morado-800); }
.campo-clave { position: relative; display: flex; }
.campo-clave input { padding-right: 48px; }
.campo-clave .ver-clave { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 38px; border: 0; background: transparent; color: var(--texto-2); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.campo-clave .ver-clave:hover { color: var(--morado-900); background: var(--lila); }
.codigo-2fa { font-size: 26px !important; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .acceso-hero { flex-basis: 100%; padding: 22px 20px 26px; gap: 18px; }
  .acceso-hero h1 { font-size: 32px; }
  .acceso-hero .lema { font-size: 15px; margin-top: 10px; }
  .acceso-hero ul, .acceso-hero .pie { display: none; }
  .acceso-formulario { padding: 24px 16px 40px; align-items: flex-start; }
  .acceso-formulario h2 { font-size: 24px; }
}

/* pasos del instalador */
.pasos { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li { flex: 1 1 0; font-size: 12px; font-weight: 600; color: var(--texto-2); border-top: 3px solid var(--borde); padding-top: 6px; }
.pasos li.hecho { border-top-color: var(--morado-300); }
.pasos li.actual { border-top-color: var(--morado-800); color: var(--morado-900); }
.requisitos { list-style: none; margin: 0; padding: 0; }
.requisitos li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--borde-suave); font-size: 14px; }
.requisitos li .icono { flex: none; margin-top: 1px; }
.requisitos .ok .icono { color: var(--ok); } .requisitos .mal .icono { color: var(--error); } .requisitos .aviso-req .icono { color: var(--aviso); }
.requisitos small { display: block; color: var(--texto-2); font-size: 12px; }
.tabla-accesos td { height: auto; padding: 8px 12px; vertical-align: top; }

/* =====================================================================
   LAYOUT APP (hermano, PWA)
   ===================================================================== */
body.cuerpo-app { background: #E9E6EE; }
.cdg-app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--fondo); display: flex; flex-direction: column; position: relative; }
.app-cabecera { background: var(--morado-900); color: var(--blanco); padding: calc(env(safe-area-inset-top, 0px) + 22px) 20px 70px; }
.app-cabecera .linea { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-cabecera .hermandad { display: flex; align-items: center; gap: 10px; min-width: 0; color: #D9CDE6; text-decoration: none; font-size: 13px; }
.app-cabecera .hermandad span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-cabecera .escudo { width: 34px; height: 34px; font-size: 18px; border: 1px solid var(--oro-claro); }
.app-cabecera h1 { color: var(--blanco); font-size: 26px; font-weight: 700; margin-top: 14px; }
.app-cabecera .saludo-sub { color: #D9CDE6; font-size: 13px; margin: 4px 0 0; }
.app-campana { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--blanco); flex: none; }
.app-campana:hover { background: rgba(255, 255, 255, .08); color: var(--blanco); }
.app-campana .punto { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--oro-claro); }
.app-cabecera-interior { background: var(--morado-900); color: var(--blanco); padding: calc(env(safe-area-inset-top, 0px) + 10px) 8px 12px; display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 10; }
.app-cabecera-interior h1 { color: var(--blanco); font-size: 18px; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-volver { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--blanco); flex: none; }
.app-volver:hover { background: rgba(255, 255, 255, .08); color: var(--blanco); }
.carnet { margin: -56px 16px 0; background: var(--morado-800); color: var(--blanco); border-radius: 18px; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; box-shadow: 0 12px 28px rgba(20, 6, 34, .28); text-decoration: none; position: relative; z-index: 2; }
.carnet:hover { color: var(--blanco); }
.carnet .datos-carnet { min-width: 0; }
.carnet .etiqueta-carnet { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--oro-claro); font-weight: 600; }
.carnet .nombre-carnet { font-size: 17px; font-weight: 700; margin-top: 6px; overflow-wrap: anywhere; }
.carnet .sub-carnet { font-size: 13px; color: #D9CDE6; margin-top: 2px; }
.carnet .chip { margin-top: 8px; }
.carnet .qr { flex: none; width: 96px; min-height: 96px; padding: 4px; border-radius: 8px; }
.app-contenido { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
.app-contenido.sin-pestanas { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
.app-acciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.app-accion { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 72px; padding: 10px 4px; background: var(--blanco); border-radius: 14px; text-decoration: none; color: var(--morado-900); font-size: 11px; font-weight: 600; text-align: center; }
.app-accion:hover { color: var(--morado-900); background: var(--lila-2); }
.app-accion .caja-icono { width: 32px; height: 32px; border-radius: 10px; background: var(--lila); color: var(--morado-800); display: flex; align-items: center; justify-content: center; }
.app-tarjeta { background: var(--blanco); border-radius: 14px; padding: 14px; }
.app-tarjeta h2 { font-size: 14px; }
.app-tarjeta .sub { font-size: 12px; color: var(--texto-2); margin-top: 2px; }
a.app-tarjeta { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); }
a.app-tarjeta:hover { color: var(--tinta); background: var(--lila-2); }
.app-tarjeta-fila { display: flex; align-items: center; gap: 12px; }
.app-titulo { font-size: 22px; }
.app-aviso-etiqueta { display: block; font-size: 12px; color: var(--oro-oscuro); font-weight: 700; }
.app-aviso-titulo { display: block; font-size: 14px; font-weight: 700; margin-top: 2px; }
.app-aviso-ver { font-size: 13px; font-weight: 700; color: var(--morado-800); }
.app-aviso-cabecera { font-size: 18px; margin-top: 4px; }
.app-aviso-cuerpo { font-size: 15px; line-height: 1.55; }
.app-tarjeta-fila .crece { flex: 1 1 auto; min-width: 0; }
.app-icono-tarjeta { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--oro-fondo); color: var(--oro-texto); display: flex; align-items: center; justify-content: center; }
.app-pestanas { position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; background: var(--blanco); border-top: 1px solid var(--borde); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 20; }
.app-pestanas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; text-decoration: none; font-size: 11px; font-weight: 500; color: var(--texto-2); }
.app-pestanas a .barra { width: 22px; height: 4px; border-radius: 999px; background: transparent; }
.app-pestanas a.activa { font-weight: 700; color: var(--morado-900); }
.app-pestanas a.activa .barra { background: var(--morado-800); }
.app-pestanas a .icono { display: none; }
.app-lista { background: var(--blanco); border-radius: 14px; overflow: hidden; }
.app-lista > a, .app-lista > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--borde-suave); color: var(--tinta); text-decoration: none; min-height: 56px; }
.app-lista > a:last-child, .app-lista > div:last-child { border-bottom: 0; }
.app-lista > a:hover { background: var(--lila-2); }
.app-lista .crece { flex: 1 1 auto; min-width: 0; }
.app-lista .titulo { font-weight: 700; font-size: 14px; display: block; }
.app-lista .sub { font-size: 12px; color: var(--texto-2); display: block; margin-top: 2px; }
.app-lista .no-leido { width: 9px; height: 9px; border-radius: 50%; background: var(--oro-medio); flex: none; }
.app-lista .leido { width: 9px; height: 9px; flex: none; }
.app-formulario { display: flex; flex-direction: column; gap: 14px; }
.cdg-app input[type="text"], .cdg-app input[type="email"], .cdg-app input[type="password"], .cdg-app input[type="tel"], .cdg-app input[type="search"] { min-height: 48px; border-radius: 12px; padding: 0 14px; font-size: 16px; }
.cdg-app .campo > label { font-size: 14px; }
.cdg-app .btn { min-height: 44px; border-radius: 12px; }
.cdg-app .btn-gr { min-height: 52px; border-radius: 14px; }
.app-acceso-cabecera { background: var(--morado-900); color: var(--blanco); padding: calc(env(safe-area-inset-top, 0px) + 44px) 24px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.app-acceso-cabecera .escudo { width: 72px; height: 72px; font-size: 34px; border: 2px solid var(--oro-claro); }
.app-acceso-cabecera .nombre-hermandad { font-family: var(--fuente-titular); font-size: 26px; font-weight: 700; line-height: 1.1; max-width: 320px; }
.app-acceso-cabecera .cambiar { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--morado-400); color: #E3DAEE; font-size: 12px; text-decoration: none; }
.app-acceso-cabecera .cambiar:hover { color: var(--blanco); border-color: var(--morado-200); }
.app-acceso-cuerpo { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; }
.app-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #ECE8F0; border-radius: 12px; padding: 4px; gap: 4px; }
.app-tabs a { min-height: 44px; border-radius: 9px; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--texto-3); }
.app-tabs a.activa { background: var(--blanco); color: var(--morado-900); }
.app-acceso-pie { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding-bottom: env(safe-area-inset-bottom, 0px); }
.app-acceso-pie a { font-weight: 600; }
.carnet-grande { background: var(--morado-800); color: var(--blanco); border-radius: 22px; padding: 22px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--sombra); }
.carnet-grande .etiqueta-carnet { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--oro-claro); font-weight: 600; }
.carnet-grande .escudo { width: 52px; height: 52px; font-size: 26px; border: 1px solid var(--oro-claro); }
.carnet-grande .nombre-carnet { font-size: 21px; font-weight: 700; margin-top: 4px; }
.carnet-grande .sub-carnet { font-size: 14px; color: #D9CDE6; }
.carnet-grande .qr { width: min(260px, 72vw); padding: 12px; border-radius: 14px; margin-top: 12px; }
.carnet-grande .ayuda-qr { font-size: 12px; color: #D9CDE6; margin-top: 8px; }
.banda-offline { background: var(--aviso-fondo); color: var(--aviso); font-size: 13px; font-weight: 600; text-align: center; padding: 8px 12px; }
.app-lista-hermandades { display: flex; flex-direction: column; gap: 8px; }
.app-lista-hermandades a { display: flex; align-items: center; gap: 12px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px; min-height: 64px; color: var(--tinta); text-decoration: none; }
.app-lista-hermandades a:hover { border-color: var(--morado-300); color: var(--tinta); }
.app-lista-hermandades .escudo { width: 40px; height: 40px; font-size: 20px; }
.app-lista-hermandades .sub { display: block; font-size: 12px; color: var(--texto-2); }
@media (min-width: 520px) {
  .cdg-app { box-shadow: 0 0 0 1px var(--borde), 0 20px 60px rgba(43, 22, 64, .12); }
}

/* ---------- impresión ---------- */
@media print {
  body { background: #fff; }
  .menu-lateral, .barra-superior, .banda-soporte, .app-pestanas, .app-cabecera-interior, .no-imprimir, .flashes, .velo-menu, .plataforma-cabecera { display: none !important; }
  .cdg-panel, .cdg-app { display: block; box-shadow: none; }
  .contenido, .app-contenido { padding: 0; }
  .tarjeta { border-color: #bbb; break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}