@charset "UTF-8";
/* ==========================================================================
   IBMC — Sistema visual de la app de Asistencia de la Escuela Dominical
   Iglesia Bautista Misioneros de Cristo (Paraguay)

   Un solo archivo para las dos experiencias: panel administrativo y vista
   de miembro. CSS puro, sin build, sin framework, sin CDN salvo las fuentes.

   Fuente de verdad de los valores: design_handoff_asistencia_ibmc/README.md,
   seccion "Design Tokens". Los prototipos aprobados son
   "Asistencia IBMC v4.dc.html" y "Vista Miembro IBMC.dc.html".
   Las versiones v1/v2/v3 estan descartadas y no se miraron.

   Nomenclatura: todo en espanol, sin acentos en los nombres de clase.
   El catalogo completo esta en app/web/css/CATALOGO.md.

   Indice
     00. Fuentes
     01. Tokens (:root)
     02. Reset y base
     03. Accesibilidad: foco, movimiento reducido, objetivos tactiles
     04. Tipografia
     05. Layout del panel y de la vista de miembro
     06. Tarjetas
     07. Botones
     08. Toggle segmentado
     09. Chips
     10. Avatares
     11. Filas y listas
     12. Formularios
     13. Badges y puntos de estado
     14. Asistencia: presente / ausente / sin cargar
     15. Progreso: barra semaforo y anillo SVG
     16. Marco de celular (vista previa del aviso)
     17. Piezas menores
     18. Estados: deshabilitado, cargando, vacio, error, sin conexion
     19. Utilidades
     20. Responsive (corte unico en 900px) e impresion
   ========================================================================== */

/* ==========================================================================
   00. FUENTES
   Los dos @import exactos del README. Van primero: es obligatorio en CSS.
   Si el HTML ya las carga con <link rel=preconnect>+<link>, estos @import
   no duplican descarga (mismo recurso, cache del navegador).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   01. TOKENS
   Ningun #hex vive fuera de este bloque. Unica excepcion permitida en el
   HTML: el color de una clase, que viene de la API y es dato, no diseno.
   Se pasa como  style="--color-clase: #B04A3C".
   ========================================================================== */

:root {
  /* --- Los 19 colores de la tabla del README --------------------------- */
  --ink:            #101828; /* tarjetas hero, sidebar, texto principal */
  --ink-deep:       #080D16; /* extremo inferior del degradado del sidebar */
  --navy:           #1E3A5C; /* primario: botones, avatares, links, activos */
  --navy-soft:      #253A55; /* interior del marco de celular en la preview */
  --copper:         #B87333; /* acento: badges, rachas, CTA sobre fondo oscuro */
  --copper-dark:    #8A5426; /* texto de acento sobre fondos claros */
  --terracotta:     #B04A3C; /* semantico negativo: ausencias, riesgo, borrar */
  --bg-base:        #E9E7E0; /* fondo base del body (vista de miembro) */
  --bg-mid:         #F2F0EA; /* fondo medio del degradado; texto sobre ink */
  --bg-light:       #F8F7F3; /* extremo superior del degradado radial */
  --surface:        #FBFAF7; /* superficie de tarjetas */
  --surface-alt:    #FFFFFF; /* inputs, tarjetas anidadas */
  --border-warm:    #E6E4DC; /* bordes suaves */
  --text-muted:     #7C8797; /* labels — SOLO texto grande o decorativo (ver 03) */
  --text-muted-2:   #626B78; /* cuerpo secundario — este es el accesible */
  --text-faint:     #98A0AC; /* muy tenue — solo decorativo (ver 03) */
  --text-on-dark:   #9AA7B8; /* texto secundario sobre fondos oscuros */
  --text-body:      #3C4553; /* cuerpo de texto largo (devocional) */
  --success:        #2F6B57; /* confirmaciones (guardado, enviado) */

  /* --- Derivados translucidos del README, ya resueltos ------------------ */
  --navy-08:       rgba(30, 58, 92, 0.08);
  --navy-10:       rgba(30, 58, 92, 0.10);
  --navy-12:       rgba(30, 58, 92, 0.12);
  --navy-35:       rgba(30, 58, 92, 0.35);
  --copper-10:     rgba(184, 115, 51, 0.10);
  --copper-12:     rgba(184, 115, 51, 0.12);
  --copper-14:     rgba(184, 115, 51, 0.14);
  --copper-25:     rgba(184, 115, 51, 0.25);
  --terracotta-10: rgba(176, 74, 60, 0.10);
  --terracotta-12: rgba(176, 74, 60, 0.12);
  --terracotta-40: rgba(176, 74, 60, 0.40);
  --success-10:    rgba(47, 107, 87, 0.10);
  --success-12:    rgba(47, 107, 87, 0.12);
  --ink-03:        rgba(16, 24, 40, 0.03);
  --ink-06:        rgba(16, 24, 40, 0.06);
  --ink-07:        rgba(16, 24, 40, 0.07);
  --ink-08:        rgba(16, 24, 40, 0.08);
  --ink-12:        rgba(16, 24, 40, 0.12);
  --ink-15:        rgba(16, 24, 40, 0.15);
  --ink-22:        rgba(16, 24, 40, 0.22);
  --claro-06:      rgba(242, 240, 234, 0.06);
  --claro-12:      rgba(242, 240, 234, 0.12); /* separador del sidebar */
  --claro-96:      rgba(242, 240, 234, 0.96); /* notificacion de la preview */

  /* --- Colores por clase (avatares y acentos de grupo) ------------------ */
  --clase-ninos:   #B04A3C;
  --clase-adol:    #B87333;
  --clase-jovenes: #1E3A5C;
  --clase-adultos: #626B78;
  /* Paleta ciclica de fallback para clases creadas desde la app */
  --clase-f1: #B04A3C;
  --clase-f2: #B87333;
  --clase-f3: #1E3A5C;
  --clase-f4: #626B78;
  --clase-f5: #6D3A52;
  --clase-f6: #4A6E8A;
  --clase-f7: #2F6B57;
  --clase-f8: #8A5426;

  /* --- Colores por tipo de archivo adjunto ------------------------------ */
  --archivo-pdf:   #B04A3C;
  --archivo-doc:   #4A6E8A;
  --archivo-img:   #1E3A5C;
  --archivo-xls:   #2F6B57;
  --archivo-zip:   #7C8797;
  --archivo-otro:  #626B78;

  /* --- Tipografia ------------------------------------------------------- */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-hero:       80px; /* cifra hero de asistencia general */
  --fs-h1:         52px; /* H1 de pagina (saludo del panel) */
  --fs-figura:     56px; /* cifra grande secundaria */
  --fs-h2:         44px; /* H1 de seccion / cifra de metrica grande */
  --fs-cifra-38:   38px;
  --fs-cifra-34:   34px;
  --fs-cifra-32:   32px;
  --fs-cita:       27px; /* cita de versiculo (italica) */
  --fs-titulo-lg:  26px; /* titulo de tarjeta grande */
  --fs-titulo:     22px; /* titulo de tarjeta */
  --fs-titulo-sm:  20px; /* titulo de seccion */
  --fs-meditacion: 18px; /* pregunta de meditacion (italica) */
  --fs-lead:       16px;
  --fs-lectura:    15px; /* cuerpo de lectura */
  --fs-base:       14px; /* body / fila de lista */
  --fs-sm:         13px;
  --fs-xs:         12px;
  --fs-meta:       11px; /* metadato tenue */
  --fs-eyebrow:    10px; /* eyebrow / label de seccion */
  --fs-micro:       9px; /* fecha bajo un punto de asistencia */

  --lh-1:      1;
  --lh-titulo: 1.2;
  --lh-cita:   1.32;
  --lh-snug:   1.4;
  --lh-body:   1.55;
  --lh-lectura:1.65;

  --ls-hero:    -0.04em;
  --ls-figura:  -0.03em;
  --ls-h1:      -0.02em;
  --ls-titulo:  -0.015em;
  --ls-titulo-s:-0.01em;
  --ls-label:    0.14em;
  --ls-eyebrow:  0.20em;
  --ls-ancho:    0.24em;

  --fw-normal: 400;
  --fw-medio:  500;
  --fw-semi:   600;
  --fw-negrita:700;
  --fw-black:  800;

  /* --- Radios ----------------------------------------------------------- */
  --r-pill:      999px;
  --r-tarjeta-xl: 26px; /* tarjeta grande de la vista de miembro */
  --r-tarjeta-lg: 24px;
  --r-tarjeta:    22px; /* tarjeta hero del panel */
  --r-tarjeta-md: 20px;
  --r-tarjeta-sm: 18px;
  --r-16: 16px;
  --r-14: 14px;
  --r-12: 12px; /* input / avatar cuadrado */
  --r-10: 10px;
  --r-8:   8px; /* chip de archivo */
  --r-7:   7px;
  --r-6:   6px;
  --r-4:   4px;
  --r-celular: 44px; /* marco de celular, exterior */
  --r-pantalla: 32px; /* marco de celular, pantalla */

  /* --- Sombras ----------------------------------------------------------- */
  --sh-hero-oscura:  0 24px 48px -24px rgba(16, 24, 40, 0.55);
  --sh-hero-panel:   0 20px 40px -20px rgba(16, 24, 40, 0.40);
  --sh-celular:      0 30px 60px -20px rgba(16, 24, 40, 0.55);
  --sh-notificacion: 0 10px 20px -5px rgba(0, 0, 0, 0.30);
  --sh-nav-inferior: 0 -6px 20px rgba(0, 0, 0, 0.20);
  --sh-punto:        0 4px 10px -3px rgba(30, 58, 92, 0.40);

  /* --- Anillo de foco (obligatorio, ver seccion 03) ---------------------- */
  --anillo:         0 0 0 3px rgba(30, 58, 92, 0.35);
  --anillo-oscuro:  0 0 0 3px rgba(184, 115, 51, 0.55);

  /* --- Espaciado (multiplos de 2/4) -------------------------------------- */
  --sp-2:   2px;
  --sp-4:   4px;
  --sp-6:   6px;
  --sp-8:   8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-52: 52px;
  --sp-60: 60px;

  --pad-tarjeta:        24px;
  --pad-tarjeta-movil:  20px;
  --gap-tarjetas:       16px;
  --gap-tarjetas-lg:    22px;
  --fila-pad-y:         14px;
  --fila-pad-x:         24px;

  /* --- Medidas de layout -------------------------------------------------- */
  --ancho-contenido: 1180px; /* panel */
  --ancho-miembro:    540px; /* vista de miembro */
  --ancho-lateral:    264px;
  --toque:             44px; /* objetivo tactil minimo */

  /* --- Degradados --------------------------------------------------------- */
  --grad-panel:    radial-gradient(120% 80% at 100% 0%, #F8F7F3 0%, #F2F0EA 55%, #E6E4DC 100%);
  --grad-miembro:  radial-gradient(100% 60% at 50% 0%, #F8F7F3 0%, #F2F0EA 45%, #E9E7E0 100%);
  --grad-lateral:  linear-gradient(180deg, #101828 0%, #080D16 100%);
  --grad-brillo:   radial-gradient(circle, rgba(184, 115, 51, 0.35) 0%, transparent 68%);
  --grad-brillo-2: radial-gradient(circle, rgba(184, 115, 51, 0.25) 0%, transparent 70%);
  --grad-barra:    linear-gradient(180deg, #B87333, #8A5426);
  --grad-pantalla: linear-gradient(160deg, #253A55 0%, #101828 60%);
  --grad-asignada: linear-gradient(90deg, rgba(30, 58, 92, 0.08), rgba(184, 115, 51, 0.10));

  /* --- Movimiento (sobrio a proposito) ------------------------------------ */
  --t-rapida: 0.15s ease-out;
  --t-base:   0.2s ease-out;
}

/* ==========================================================================
   02. RESET Y BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fondo segun experiencia. Va en el <body>. */
body.fondo-panel   { background: var(--grad-panel);   background-attachment: fixed; }
body.fondo-miembro { background: var(--grad-miembro); background-attachment: fixed; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

/* Ruteo entre vistas del panel. */
.oculto { display: none !important; }

/* Texto solo para lectores de pantalla. */
.solo-lectores,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ocultar la scrollbar donde el diseno lo pide (carruseles). */
.sin-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.sin-scrollbar::-webkit-scrollbar { height: 0; width: 0; }

/* ==========================================================================
   03. ACCESIBILIDAD
   El prototipo no define foco visible. Aca se define y es obligatorio:
   sin esto la app no se puede usar con teclado.

   Contraste calculado (WCAG 2.1, no estimado — el detalle en CATALOGO.md):
     #7C8797 sobre #FBFAF7 = 3.49:1  insuficiente para texto normal
     #7C8797 sobre #F2F0EA = 3.19:1  insuficiente
     #98A0AC sobre #FBFAF7 = 2.53:1  insuficiente incluso para texto grande
     #B87333 sobre #FBFAF7 = 3.63:1  insuficiente para texto normal
     #626B78 sobre #FBFAF7 = 5.17:1  pasa AA
     #8A5426 sobre #FBFAF7 = 5.96:1  pasa AA
     #B87333 sobre #101828 = 4.68:1  pasa AA (el cobre solo sirve sobre oscuro)
   Por eso los roles de texto chico usan --text-muted-2 y --copper-dark.
   --text-muted y --text-faint quedan para texto >= 24px, bordes y adornos.
   ========================================================================== */

:focus-visible {
  outline: none;
  box-shadow: var(--anillo);
  border-radius: var(--r-6);
}

/* Sobre superficies oscuras el anillo navy se pierde: se usa el cobre. */
.tarjeta--oscura :focus-visible,
.barra-lateral :focus-visible,
.nav-inferior :focus-visible,
.marco-celular :focus-visible { box-shadow: var(--anillo-oscuro); }

/* Los elementos con forma propia conservan su radio al recibir foco. */
.boton:focus-visible,
.chip:focus-visible,
.segmentado__opcion:focus-visible,
.badge:focus-visible { border-radius: var(--r-pill); }

.tarjeta:focus-visible { border-radius: var(--r-tarjeta-lg); }

.campo__input:focus,
input.campo:focus,
select.campo:focus,
textarea.campo:focus,
.select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: var(--anillo);
}

/* Salto al contenido: primer tabulable de cada pantalla. */
.salto-contenido {
  position: absolute;
  top: var(--sp-8);
  left: var(--sp-8);
  z-index: 100;
  padding: var(--sp-10) var(--sp-18);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg-mid);
  font-size: var(--fs-sm);
  font-weight: var(--fw-negrita);
  transform: translateY(-200%);
}
.salto-contenido:focus { transform: translateY(0); text-decoration: none; }

/* Los objetivos tactiles de 44px estan al final del archivo (seccion 21).
   Tienen que ir despues de los componentes: si van aca, cualquier
   `min-height` de un boton chico o de una opcion del segmentado los pisa
   por orden de cascada. Se probo en el navegador y pasaba exactamente eso. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .esqueleto { animation: none !important; }
  .cargando::after { animation: none !important; }
  .chevron { transition: none !important; }
}

/* ==========================================================================
   04. TIPOGRAFIA
   Una clase por rol de la escala del README.
   ========================================================================== */

.serif   { font-family: var(--serif); }
.sans    { font-family: var(--sans); }
.italica { font-style: italic; }

/* --- Cifras (Fraunces) ------------------------------------------------- */
.cifra {
  font-family: var(--serif);
  font-weight: var(--fw-medio);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-h1);
}
.cifra--hero   { font-size: var(--fs-hero);     letter-spacing: var(--ls-hero); }
.cifra--grande { font-size: var(--fs-figura);   letter-spacing: var(--ls-figura); }
.cifra--44     { font-size: var(--fs-h2); }
.cifra--38     { font-size: var(--fs-cifra-38); font-weight: var(--fw-semi); }
.cifra--34     { font-size: var(--fs-cifra-34); font-weight: var(--fw-semi); }
.cifra--32     { font-size: var(--fs-cifra-32); font-weight: var(--fw-semi); }
.cifra--26     { font-size: var(--fs-titulo-lg); font-weight: var(--fw-semi); }
.cifra--20     { font-size: var(--fs-titulo-sm); font-weight: var(--fw-semi); }
.cifra--anillo { font-size: 19px; font-weight: var(--fw-semi); }
/* Cifra de racha de la vista de miembro: 26px cobre sobre fondo claro. */
.cifra--cobre  { font-size: var(--fs-titulo-lg); font-weight: var(--fw-semi); color: var(--copper-dark); }
/* El "%" chico que acompana a la cifra hero */
.cifra__unidad { font-size: 36px; color: var(--copper); letter-spacing: normal; }

/* --- Titulos ------------------------------------------------------------ */
.h1 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medio);
  letter-spacing: var(--ls-h1);
  line-height: 1.02;
}
/* Segunda linea del saludo del panel: italica cobre. */
.h1__acento { font-style: italic; color: var(--copper-dark); }

.h2 {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medio);
  letter-spacing: var(--ls-h1);
  line-height: 1.05;
}
.titulo-tarjeta {
  font-family: var(--serif);
  font-size: var(--fs-titulo);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-titulo-s);
  line-height: var(--lh-titulo);
}
.titulo-tarjeta--grande {
  font-size: var(--fs-titulo-lg);
  letter-spacing: var(--ls-titulo);
}
.titulo-seccion {
  font-family: var(--serif);
  font-size: var(--fs-titulo-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-titulo-s);
  line-height: var(--lh-titulo);
}

/* --- Cita y meditacion (Fraunces italica) -------------------------------- */
.cita {
  font-family: var(--serif);
  font-size: var(--fs-cita);
  font-weight: var(--fw-normal);
  font-style: italic;
  line-height: var(--lh-cita);
  letter-spacing: var(--ls-titulo-s);
  color: var(--bg-mid);
  text-wrap: pretty;
}
.meditacion {
  font-family: var(--serif);
  font-size: var(--fs-meditacion);
  font-weight: var(--fw-normal);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* --- Eyebrow y labels ---------------------------------------------------- */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted-2);
}
.eyebrow--ancho  { letter-spacing: var(--ls-ancho); }
.eyebrow--cobre  { color: var(--copper-dark); letter-spacing: var(--ls-ancho); }
.eyebrow--claro  { color: var(--copper); }   /* sobre fondo oscuro */

.etiqueta,
.etiqueta-campo,
.campo__etiqueta,
.campo__label {
  display: block;
  font-size: var(--fs-meta);
  font-weight: var(--fw-negrita);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted-2);
}

/* --- Cuerpo -------------------------------------------------------------- */
.texto-cuerpo {
  font-size: var(--fs-lectura);
  font-weight: var(--fw-normal);
  line-height: var(--lh-lectura);
  color: var(--text-body);
  text-wrap: pretty;
}
.texto-cuerpo--compacto { font-size: var(--fs-base); line-height: var(--lh-body); }

.texto-base {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1.35;
}
.texto-base--15     { font-size: var(--fs-lectura); }
.texto-base--fuerte { font-weight: var(--fw-negrita); }

/* Texto secundario. Usa --text-muted-2 (5.17:1), no #7C8797. */
.tenue,
.texto-tenue {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-muted-2);
  line-height: var(--lh-body);
}
.tenue--13 { font-size: var(--fs-sm); }

.texto-meta {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semi);
  color: var(--text-muted-2);
}
.texto-micro {
  font-size: var(--fs-micro);
  font-weight: var(--fw-negrita);
  color: var(--text-muted-2);
  letter-spacing: 0.02em;
}
.pie-iglesia {
  text-align: center;
  font-size: var(--fs-meta);
  font-weight: var(--fw-negrita);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted-2);
}

/* --- Colores de texto ----------------------------------------------------- */
.t-ink        { color: var(--ink); }
.t-navy       { color: var(--navy); }
.t-cobre      { color: var(--copper-dark); }  /* legible sobre fondo claro */
.t-cobre-vivo { color: var(--copper); }       /* SOLO sobre fondo oscuro */
.t-terracota  { color: var(--terracotta); }
.t-exito      { color: var(--success); }
.t-tenue      { color: var(--text-muted-2); }
.t-claro      { color: var(--bg-mid); }
.t-claro-2    { color: var(--text-on-dark); }

/* --- Recortes ------------------------------------------------------------- */
.truncar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.recorte-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tachado { text-decoration: line-through; color: var(--text-faint); }

/* ==========================================================================
   05. LAYOUT
   El prototipo resolvia el corte con un listener de resize en JS.
   Aca es una media query (seccion 20) y nada mas.
   ========================================================================== */

/* --- Panel administrativo ------------------------------------------------ */
.app { display: flex; min-height: 100vh; }

.barra-lateral {
  width: var(--ancho-lateral);
  flex-shrink: 0;
  min-height: 100vh;
  padding: var(--sp-28) 0;
  display: flex;
  flex-direction: column;
  background: var(--grad-lateral);
  position: sticky;
  top: 0;
  align-self: flex-start;
}
.barra-lateral__marca {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: 0 var(--sp-22) var(--sp-22);
}
.barra-lateral__nombre {
  font-family: var(--serif);
  font-size: var(--fs-titulo);
  font-weight: var(--fw-semi);
  color: var(--bg-mid);
  line-height: var(--lh-1);
}
.barra-lateral__sub {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: var(--sp-4);
}
.barra-lateral__separador {
  height: 1px;
  background: var(--claro-12);
  margin: 0 var(--sp-22) var(--sp-18);
}
.barra-lateral__pie { margin-top: auto; padding: var(--sp-18) var(--sp-12) 0; }

.nav-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: 0 var(--sp-12);
}
.nav-lateral__item {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: 100%;
  padding: 11px var(--sp-14);
  border-radius: var(--r-12);
  font-size: var(--fs-base);
  font-weight: var(--fw-medio);
  color: var(--text-on-dark);
  background: transparent;
  text-align: left;
  text-decoration: none;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.nav-lateral__item:hover {
  background: var(--claro-06);
  color: var(--bg-mid);
  text-decoration: none;
}
.nav-lateral__item--activo,
.nav-lateral__item[aria-current='page'] {
  background: var(--copper-14);
  color: var(--bg-mid);
  font-weight: var(--fw-negrita);
}
.nav-lateral__texto { flex: 1; min-width: 0; }
.nav-lateral__punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
  flex-shrink: 0;
}

/* Tarjeta "Proximo servicio" al pie del sidebar */
.proximo-servicio {
  background: var(--copper-10);
  border: 1px solid var(--copper-25);
  border-radius: var(--r-14);
  padding: var(--sp-14) var(--sp-16);
}
.proximo-servicio__cuando {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: var(--fw-semi);
  color: var(--bg-mid);
  margin-top: var(--sp-6);
}

/* Nav inferior: oculta en desktop, aparece bajo 900px (seccion 20). */
.nav-inferior { display: none; }

.contenido {
  flex: 1;
  min-width: 0;
  padding: var(--sp-52) var(--sp-60);
  max-width: var(--ancho-contenido);
}

/* Vista ruteada del panel. Ocultar con .oculto. */
.pagina { display: block; }

.cabecera-pagina {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-18);
  flex-wrap: wrap;
  margin-bottom: var(--sp-28);
}
.cabecera-pagina__acciones { display: flex; gap: var(--sp-10); flex-wrap: wrap; }

/* --- Vista de miembro ---------------------------------------------------- */
.pagina-miembro {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 0 0 var(--sp-40);
}
.contenedor {
  width: 100%;
  max-width: var(--ancho-miembro);
  padding: 0 var(--sp-18);
}
.cabecera-miembro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-22) var(--sp-2) var(--sp-20);
}

/* Pantalla de ingreso */
.pantalla-entrar {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24) var(--sp-18);
}
.tarjeta-entrar { width: 100%; max-width: 400px; }
.marca-ibmc { width: 40px; height: 40px; flex-shrink: 0; }

/* --- Grillas -------------------------------------------------------------- */
.grilla-principal {          /* 1.4fr 1fr — panel */
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gap-tarjetas-lg);
}
.grilla-compuesta {          /* 1.15fr 1fr — avisos */
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-28);
}
.grilla-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-14);
}
.grilla-metricas--sm { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grilla-metricas--3  { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ==========================================================================
   06. TARJETAS
   ========================================================================== */

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--ink-07);
  border-radius: var(--r-tarjeta-lg);
  padding: var(--pad-tarjeta);
}
.tarjeta--xl { border-radius: var(--r-tarjeta-xl); padding: var(--sp-26); }
.tarjeta--lg { border-radius: var(--r-tarjeta);    padding: var(--sp-26); }
.tarjeta--md { border-radius: var(--r-tarjeta-sm); padding: var(--sp-22); }
.tarjeta--sm { border-radius: var(--r-14);         padding: var(--sp-18); }
/* Tarjeta de metrica del panel: es la media, con nombre propio por claridad. */
.tarjeta--metrica { border-radius: var(--r-tarjeta-sm); padding: var(--sp-22); }
/* Tarjeta que contiene una lista: sin padding, recorta las filas. */
.tarjeta--lista { padding: 0; overflow: hidden; }
/* Tarjeta blanca anidada (pedido de oracion, adjunto). */
.tarjeta--anidada {
  background: var(--surface-alt);
  border-radius: var(--r-tarjeta-sm);
  padding: var(--sp-16) var(--sp-18);
}
.tarjeta--elevada { box-shadow: var(--sh-hero-panel); }

.tarjeta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-22) var(--fila-pad-x) var(--sp-14);
}
.tarjeta__pie {
  padding: var(--sp-18) var(--fila-pad-x);
  border-top: 1px solid var(--ink-06);
  font-size: var(--fs-base);
  color: var(--text-muted-2);
}

/* --- Tarjeta oscura con brillo radial cobre ------------------------------- */
.tarjeta--oscura {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border: none;
  border-radius: var(--r-tarjeta);
  color: var(--bg-mid);
  box-shadow: var(--sh-hero-oscura);
}
.tarjeta--oscura.tarjeta--xl { border-radius: var(--r-tarjeta-xl); padding: 30px var(--sp-26) var(--sp-24); }
.tarjeta--oscura.tarjeta--sm { box-shadow: none; border-radius: var(--r-16); }

/* El brillo es un pseudo-elemento: no hace falta un div vacio en el HTML,
   y asi no puede quedar olvidado ni duplicado. */
.tarjeta--oscura::after {
  content: '';
  position: absolute;
  top: -70px;
  right: -50px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--grad-brillo);
  pointer-events: none;
}
/* Segundo brillo, mas tenue, abajo a la izquierda (versiculo del dia). */
.tarjeta--brillo-2::before {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--grad-brillo-2);
  pointer-events: none;
}
.tarjeta--sin-brillo::after { display: none; }
/* Si quedo un <div class="brillo"> en el marcado, no molesta: el brillo
   real es el pseudo-elemento. */
.brillo { display: none; }

/* El contenido va por encima del brillo. */
.tarjeta--oscura > * { position: relative; z-index: 1; }

/* Los textos tenues cambian de color dentro de una tarjeta oscura. */
.tarjeta--oscura .eyebrow    { color: var(--copper); }
.tarjeta--oscura .tenue,
.tarjeta--oscura .texto-tenue,
.tarjeta--oscura .texto-meta,
.tarjeta--oscura .texto-micro { color: var(--text-on-dark); }
.tarjeta--oscura .titulo-tarjeta,
.tarjeta--oscura .titulo-seccion,
.tarjeta--oscura .cifra { color: var(--bg-mid); }

/* --- Banners ------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  background: var(--navy-08);
  border-radius: var(--r-14);
  padding: 13px var(--sp-16);
  font-size: var(--fs-sm);
  font-weight: var(--fw-negrita);
  color: var(--navy);
  line-height: var(--lh-body);
}
.banner--asignada {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--grad-asignada);
  border: 1px solid rgba(30, 58, 92, 0.15);
  border-radius: var(--r-12);
  padding: var(--sp-14) var(--sp-16);
}
.banner--exito   { background: var(--success-10);    color: var(--success); }
.banner--peligro { background: var(--terracotta-12); color: var(--terracotta); }

/* Bloque "Para meditar": borde izquierdo cobre de 2px. */
.para-meditar {
  border-left: 2px solid var(--copper);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-16);
  margin-top: var(--sp-2);
}

/* Ficha oscura dentro de una fila expandida (himnario). */
.ficha-himno {
  margin-top: var(--sp-14);
  background: var(--ink);
  color: var(--bg-mid);
  border-radius: var(--r-16);
  padding: var(--sp-18);
}
.ficha-himno .tenue,
.ficha-himno .texto-tenue { color: var(--text-on-dark); }

/* ==========================================================================
   07. BOTONES
   El alto minimo real lo garantiza min-height, no el padding.
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  border: none;
  border-radius: var(--r-pill);
  padding: var(--sp-12) var(--sp-22);
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-negrita);
  line-height: 1.2;
  min-height: 40px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-rapida), border-color var(--t-rapida),
              color var(--t-rapida), transform var(--t-rapida);
}
.boton:hover  { text-decoration: none; }
.boton:active { transform: scale(0.97); }

/* Tamanos */
.boton--grande { padding: var(--sp-14) var(--sp-28); font-size: var(--fs-lectura); min-height: 48px; }
.boton--chico  { padding: var(--sp-8) var(--sp-18);  font-size: var(--fs-sm);      min-height: 36px; }
.boton--mini   { padding: var(--sp-6) var(--sp-14);  font-size: var(--fs-xs);      min-height: 32px; }
.boton--bloque { display: flex; width: 100%; }

/* Variantes solidas */
.boton--solido  { background: var(--ink);        color: var(--bg-mid); }
.boton--navy    { background: var(--navy);       color: var(--bg-mid); }
.boton--cobre   { background: var(--copper);     color: var(--ink); }
.boton--peligro { background: var(--terracotta); color: var(--bg-mid); }

/* Hover en solidos: oscurecer ~8%. Una capa negra encima sirve para
   cualquier fondo, sin repetir un hex por variante. */
.boton--solido:hover,
.boton--navy:hover,
.boton--cobre:hover,
.boton--peligro:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
}

/* Variantes contorno. Hover: fondo del color del borde al 8%. */
.boton--contorno {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-weight: var(--fw-semi);
}
.boton--contorno:hover { background: var(--ink-08); }

.boton--contorno-navy {
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
}
.boton--contorno-navy:hover { background: var(--navy-08); }

.boton--contorno-peligro {
  background: transparent;
  border: 1.5px solid var(--terracotta-40);
  color: var(--terracotta);
}
.boton--contorno-peligro:hover { background: var(--terracotta-12); }

/* Variantes suaves */
.boton--suave {
  background: var(--navy-08);
  color: var(--navy);
  font-weight: var(--fw-black);
}
.boton--suave:hover { background: var(--navy-12); }
.boton--fantasma { background: transparent; color: var(--navy); }
.boton--fantasma:hover { background: var(--navy-08); }

/* Botones circulares de icono */
.boton--icono {
  width: var(--toque);
  height: var(--toque);
  min-height: var(--toque);
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}
.boton--icono-sm {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}
.boton--icono-46 { width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; flex-shrink: 0; }

/* Circular sobre superficie clara (campana de avisos) */
.boton--superficie {
  background: var(--surface);
  border: 1px solid var(--ink-08);
  color: var(--ink);
}
.boton--superficie:hover { background: var(--bg-mid); }

/* Link de vuelta ("Volver a alumnos") */
.boton-volver {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: var(--fw-negrita);
  color: var(--text-muted-2);
  min-height: 32px;
  margin-bottom: var(--sp-16);
}
.boton-volver:hover { color: var(--navy); text-decoration: none; }

/* ==========================================================================
   08. TOGGLE SEGMENTADO
   Presente/Ausente, Individual/Por grupo, y los 3 destinatarios del aviso.
   El activo se marca con .segmentado__opcion--activo o aria-pressed="true".
   ========================================================================== */

.segmentado {
  display: inline-flex;
  gap: var(--sp-6);
  background: var(--bg-mid);
  border-radius: var(--r-pill);
  padding: var(--sp-4);
}
.segmentado--bloque { display: flex; width: 100%; }
.segmentado--bloque .segmentado__opcion { flex: 1; }
/* Variante clara con borde: el toggle de informes. */
.segmentado--contorno {
  background: var(--surface);
  border: 1px solid var(--ink-06);
  gap: var(--sp-4);
}

.segmentado__opcion {
  border: none;
  border-radius: var(--r-pill);
  padding: var(--sp-8) var(--sp-14);
  font-size: var(--fs-sm);
  font-weight: var(--fw-negrita);
  color: var(--text-muted-2);
  background: transparent;
  cursor: pointer;
  min-height: 34px;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.segmentado__opcion:hover { background: var(--ink-06); color: var(--ink); }

/* Activo generico (navy) */
.segmentado__opcion--activo,
.segmentado__opcion[aria-pressed='true'],
.segmentado__opcion[aria-selected='true'] {
  background: var(--navy);
  color: var(--bg-mid);
}
.segmentado__opcion--activo:hover { background: var(--navy); }

/* Activos semanticos de la lista de asistencia */
.segmentado__opcion--presente.segmentado__opcion--activo,
.segmentado__opcion--presente[aria-pressed='true'] { background: var(--navy);       color: var(--bg-mid); }
.segmentado__opcion--ausente.segmentado__opcion--activo,
.segmentado__opcion--ausente[aria-pressed='true']  { background: var(--terracotta); color: var(--bg-mid); }

/* TERCER ESTADO — sin cargar.
   Nadie paso lista todavia: ninguna opcion queda rellena y el riel pasa a
   borde punteado. El punteado significa "falta el dato"; el relleno solido
   terracota significa "la persona falto". No se confunden. */
.segmentado--sin-cargar {
  background: transparent;
  border: 1.5px dashed var(--ink-22);
  padding: 2.5px;
}
.segmentado--sin-cargar .segmentado__opcion { color: var(--text-muted-2); }
.segmentado--sin-cargar .segmentado__opcion:hover { background: var(--ink-06); }

/* ==========================================================================
   09. CHIPS
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-08);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  min-height: 36px;
  cursor: pointer;
  transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida);
}
.chip:hover { background: var(--bg-mid); border-color: var(--ink-15); }
.chip--activo,
.chip[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg-mid);
}
.chip--activo:hover { background: var(--ink); }

.fila-chips { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: var(--sp-18); }

/* Chips informativos, no clickeables. */
.chip-suave {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  background: rgba(30, 58, 92, 0.07);
  border-radius: var(--r-8);
  padding: var(--sp-6) var(--sp-10);
  font-size: var(--fs-meta);
  font-weight: var(--fw-negrita);
  color: var(--navy);
  cursor: default;
}
.chip-cobre {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  background: var(--copper-12);
  border-radius: var(--r-pill);
  padding: var(--sp-6) 11px;
  font-size: var(--fs-meta);
  font-weight: var(--fw-black);
  color: var(--copper-dark);
  cursor: default;
}

/* --- Chip de archivo adjunto --------------------------------------------- */
.chip-archivo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-10);
  background: var(--surface-alt);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-10);
  padding: var(--sp-6) var(--sp-10);
}
.chip-archivo__ext {
  width: 26px;
  height: 32px;
  border-radius: var(--r-4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  color: var(--surface);
  background: var(--archivo-otro);
  text-transform: uppercase;
}
.chip-archivo__ext--pdf { background: var(--archivo-pdf); }
.chip-archivo__ext--doc { background: var(--archivo-doc); }
.chip-archivo__ext--img { background: var(--archivo-img); }
.chip-archivo__ext--xls { background: var(--archivo-xls); }
.chip-archivo__ext--zip { background: var(--archivo-zip); }
.chip-archivo__nombre {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: var(--fw-negrita);
}
.chip-archivo__tamano { font-size: var(--fs-meta); color: var(--text-muted-2); }
.chip-archivo__quitar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-08);
  color: var(--text-muted-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--fs-xs);
  line-height: 1;
}
.chip-archivo__quitar:hover { background: var(--terracotta-12); color: var(--terracotta); }

/* ==========================================================================
   10. AVATARES
   El color viene de la clase de la persona (dato de la API):
     <span class="avatar avatar--38" style="--color-clase:#B04A3C">MF</span>
   ========================================================================== */

.avatar {
  --color-clase: var(--navy);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-clase);
  color: var(--surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  letter-spacing: 0.02em;
  overflow: hidden;
}
.avatar--30, .avatar--mini { width: 30px; height: 30px; font-size: var(--fs-meta); }
.avatar--36               { width: 36px; height: 36px; font-size: var(--fs-xs); }
.avatar--38, .avatar--chico { width: 38px; height: 38px; font-size: var(--fs-sm); }
.avatar--40               { width: 40px; height: 40px; }
.avatar--44 {
  width: var(--toque);
  height: var(--toque);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: var(--fw-semi);
}
.avatar--80 {
  width: 80px;
  height: 80px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: var(--fw-semi);
}
.avatar--cuadrado { border-radius: var(--r-12); }

/* Colores de clase listos para las 4 clases base */
.avatar--ninos   { --color-clase: var(--clase-ninos); }
.avatar--adol    { --color-clase: var(--clase-adol); }
.avatar--jovenes { --color-clase: var(--clase-jovenes); }
.avatar--adultos { --color-clase: var(--clase-adultos); }

/* ==========================================================================
   11. FILAS Y LISTAS
   ========================================================================== */

.lista { display: flex; flex-direction: column; }

.fila {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: 100%;
  padding: var(--fila-pad-y) var(--fila-pad-x);
  border-top: 1px solid var(--ink-06);
  text-align: left;
  background: transparent;
}
.lista > .fila:first-child { border-top: none; }
.fila--ajustada { padding: 13px var(--fila-pad-x); }
.fila--sin-lados { padding-left: 0; padding-right: 0; }
.fila--sin-borde { border-top: none; }
.fila__principal { flex: 1; min-width: 0; }
.fila__lateral   { flex-shrink: 0; text-align: right; }

.fila--clic,
.fila-toque {
  cursor: pointer;
  transition: background var(--t-rapida);
}
.fila--clic:hover,
.fila-toque:hover { background: var(--ink-03); }

/* Fila con checkbox: pasajes del plan de lectura, destinatarios del aviso. */
.fila-check {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: 100%;
  padding: var(--sp-12) var(--sp-14);
  background: var(--surface-alt);
  border: 1px solid var(--ink-07);
  border-radius: var(--r-14);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-rapida), border-color var(--t-rapida);
}
.fila-check:hover { background: var(--bg-light); border-color: var(--ink-12); }

/* Lista scrolleable (destinatarios individuales). */
.lista--scroll {
  max-height: 220px;
  overflow-y: auto;
  gap: var(--sp-8);
  padding-right: var(--sp-4);
}

/* Chevron que rota al expandir (himnario). */
.chevron {
  flex-shrink: 0;
  color: var(--text-muted-2);
  transition: transform var(--t-base);
}
.chevron--abierto { transform: rotate(90deg); }

/* Cuadro de numero de himno. */
.caja-numero {
  width: 38px;
  height: 38px;
  border-radius: var(--r-12);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: var(--fs-lectura);
  font-weight: var(--fw-semi);
  background: var(--navy-08);
  color: var(--navy);
  transition: background var(--t-rapida), color var(--t-rapida);
}
.caja-numero--activo { background: var(--navy); color: var(--bg-mid); }

/* ==========================================================================
   12. FORMULARIOS
   `.campo` sobre un <div> es el bloque (label + control apilados).
   `.campo` sobre un <input>/<select>/<textarea> es el control.
   `.campo__input` es el nombre canonico del control; los dos funcionan.
   ========================================================================== */

.campo:not(input):not(select):not(textarea) {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-bottom: var(--sp-16);
}
.fila-campos { display: flex; gap: var(--sp-12); flex-wrap: wrap; }
.fila-campos > .campo { flex: 1; min-width: 180px; }

.campo__input,
input.campo,
select.campo,
textarea.campo,
.select,
.textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: var(--fs-lectura);
  font-weight: var(--fw-medio);
  color: var(--ink);
  padding: var(--sp-12) var(--sp-14);
  min-height: var(--toque);
  border: 1px solid var(--ink-15);
  border-radius: var(--r-12);
  background: var(--surface-alt);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.campo__input::placeholder,
input.campo::placeholder,
textarea.campo::placeholder,
.textarea::placeholder { color: var(--text-muted-2); opacity: 1; }

/* Modificadores del control */
.campo--pill      { border-radius: var(--r-pill); padding: 13px var(--sp-16); }
.campo--caja      { border-radius: var(--r-14); }
.campo--con-icono { padding-left: 40px; }
.campo--num       { width: 80px; min-width: 80px; }
.campo--titulo    { font-size: var(--fs-lead); }
.campo--auto      { width: auto; min-width: 240px; }
.campo--superficie{ background: var(--surface); }
.campo--serif {
  font-family: var(--serif);
  font-size: var(--fs-titulo-sm);
  font-weight: var(--fw-semi);
  border-radius: var(--r-10);
}
.campo--error { border-color: var(--terracotta); }
.campo--error:focus { box-shadow: 0 0 0 3px var(--terracotta-40); }

textarea.campo,
.textarea { resize: vertical; min-height: 110px; line-height: var(--lh-body); }

select.campo,
.select {
  appearance: none;
  padding-right: var(--sp-32);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626B78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-14) center;
}

/* Buscador con lupa */
.buscador { position: relative; }
.buscador__icono {
  position: absolute;
  left: var(--sp-14);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted-2);
  pointer-events: none;
}
.buscador .campo__input,
.buscador input.campo { padding-left: 40px; }

/* Checkbox cuadrado dibujado. El <input> real va con .solo-lectores. */
.check {
  width: 22px;
  height: 22px;
  border-radius: var(--r-7);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.8px solid var(--ink-22);
  color: var(--bg-mid);
  transition: background var(--t-rapida), border-color var(--t-rapida);
}
.check--chico { width: 18px; height: 18px; border-radius: 5px; }
.check--hecho,
.check--activo,
input:checked + .check { background: var(--navy); border-color: var(--navy); }
input:focus-visible + .check { box-shadow: var(--anillo); }

/* Zona para adjuntar archivos */
.zona-adjuntar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  background: var(--bg-mid);
  border: 1px dashed var(--navy-35);
  border-radius: var(--r-12);
  padding: var(--sp-12) var(--sp-16);
  min-height: var(--toque);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  color: var(--navy);
  transition: background var(--t-rapida), border-color var(--t-rapida);
}
.zona-adjuntar:hover { background: var(--navy-08); border-color: var(--navy); }
.zona-adjuntar:focus-within { box-shadow: var(--anillo); }
.zona-adjuntar input[type='file'] { display: none; }

/* Confirmacion junto a un boton ("Guardado correctamente") */
.confirmacion {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--success);
  font-size: var(--fs-sm);
  font-weight: var(--fw-negrita);
}

/* Mensaje de error de formulario. Va con role="alert". */
.mensaje-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  background: var(--terracotta-10);
  color: var(--terracotta);
  border-radius: var(--r-12);
  padding: var(--sp-12) var(--sp-14);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: var(--lh-body);
}

/* ==========================================================================
   13. BADGES Y PUNTOS DE ESTADO
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  border-radius: var(--r-pill);
  padding: var(--sp-4) var(--sp-12);
  font-size: var(--fs-sm);
  font-weight: var(--fw-negrita);
  background: var(--ink-06);
  color: var(--text-muted-2);
  white-space: nowrap;
}
.badge--navy      { background: var(--navy-10);      color: var(--navy); }
.badge--terracota { background: var(--terracotta-12); color: var(--terracotta); }
.badge--cobre     { background: var(--copper-12);    color: var(--copper-dark); }
.badge--exito     { background: var(--success-12);   color: var(--success); }
.badge--riesgo {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-negrita);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--sp-4) var(--sp-10);
  background: var(--terracotta-12);
  color: var(--terracotta);
}
/* Sin cargar: punteado y neutro, igual que el resto del tercer estado. */
.badge--sin-cargar {
  background: transparent;
  border: 1px dashed var(--ink-22);
  color: var(--text-muted-2);
}

/* Contador de no leidos sobre la campana. El contenedor lleva .relativo. */
.badge--contador {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  background: var(--copper);
  color: var(--surface-alt);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-black);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Punto de leido / no leido de un aviso */
.punto-estado {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: var(--sp-6);
  flex-shrink: 0;
  background: rgba(16, 24, 40, 0.15);
}
.punto-estado--sin-leer { background: var(--copper); }

/* Barra vertical de color de una clase */
.barra-clase {
  --color-clase: var(--navy);
  width: 14px;
  height: var(--toque);
  border-radius: var(--r-6);
  background: var(--color-clase);
  flex-shrink: 0;
}

/* ==========================================================================
   14. ASISTENCIA: PRESENTE / AUSENTE / SIN CARGAR

   Tres estados que se distinguen por color Y por forma, para que sirvan
   tambien a quien no distingue colores:
     presente   -> circulo relleno navy, con sombra
     ausente    -> circulo vacio con contorno SOLIDO terracota
     sin cargar -> circulo vacio con contorno PUNTEADO gris y un guion dentro

   El punteado y el guion dicen "falta el dato". El contorno solido dice
   "la persona falto". Es la distincion que el prototipo no tenia y que
   arregla el bug de producto: no es lo mismo "nadie vino" que "nadie cargo".
   Siempre acompanar con texto en title / aria-label.
   ========================================================================== */

.tira-puntos { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.tira-puntos--repartida { gap: 7px; justify-content: space-between; flex-wrap: nowrap; }
.tira-puntos--repartida .punto-celda { flex: 1; }

.punto-celda {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}
.punto-celda__fecha {
  font-size: var(--fs-micro);
  font-weight: var(--fw-negrita);
  color: var(--text-muted-2);
}

.punto-asistencia {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  background: transparent;
}
.punto-asistencia--26 { width: 26px; height: 26px; }

.punto-asistencia--presente {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: var(--sh-punto);
}
.punto-asistencia--ausente {
  background: transparent;
  border-color: var(--terracotta);
}
.punto-asistencia--sin-cargar {
  background: transparent;
  border-style: dashed;
  border-color: var(--text-muted);
}
/* El guion interior refuerza "sin dato" sin depender del color. */
.punto-asistencia--sin-cargar::before {
  content: '';
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: var(--text-muted);
}

/* Fila cuyo domingo todavia no se cargo: trama diagonal muy suave para que
   se lea de un vistazo que falta pasar lista, sin gritar. */
.fila--sin-cargar {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    rgba(16, 24, 40, 0.02) 6px 12px
  );
}
.fila--sin-cargar .fila__principal { opacity: 0.8; }

/* Aviso de cabecera cuando el domingo entero esta sin cargar. */
.aviso-sin-cargar {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  border: 1px dashed var(--ink-22);
  border-radius: var(--r-12);
  padding: var(--sp-12) var(--sp-16);
  background: transparent;
  color: var(--text-muted-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: var(--lh-body);
}

/* ==========================================================================
   15. PROGRESO
   ========================================================================== */

/* Barra con color semaforo. El valor se pasa con --valor (0 a 100):
     <div class="barra-progreso barra-progreso--bien">
       <span class="barra-progreso__relleno" style="--valor:89"></span>
     </div>
   Umbrales del README: >=80 bien, >=60 alerta, <60 riesgo. */
.barra-progreso {
  --valor: 0;
  width: 100px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--ink-08);
  overflow: hidden;
  flex-shrink: 0;
}
.barra-progreso--bloque { width: 100%; }
.barra-progreso__relleno {
  display: block;
  height: 100%;
  width: calc(var(--valor) * 1%);
  border-radius: var(--r-pill);
  background: var(--navy);
  transition: width var(--t-base);
}
.barra-progreso--bien   .barra-progreso__relleno { background: var(--navy); }
.barra-progreso--alerta .barra-progreso__relleno { background: var(--copper); }
.barra-progreso--riesgo .barra-progreso__relleno { background: var(--terracotta); }
.barra-progreso--sin-cargar {
  background: transparent;
  border: 1px dashed var(--ink-22);
  height: 8px;
}
.barra-progreso--sin-cargar .barra-progreso__relleno { display: none; }

/* Anillo SVG de 70px. r=30, circunferencia = 2*PI*30 = 188.5.
   En el HTML: stroke-dashoffset = 188.5 * (1 - pct/100). */
.anillo-progreso {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}
.anillo-progreso__svg   { transform: rotate(-90deg); }
.anillo-progreso__pista { fill: none; stroke: var(--navy-12); stroke-width: 7; }
.anillo-progreso__valor {
  fill: none;
  stroke: var(--navy);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 188.5;
  transition: stroke-dashoffset var(--t-base);
}
.anillo-progreso__centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: var(--fw-semi);
  color: var(--navy);
}

/* ==========================================================================
   16. MARCO DE CELULAR (vista previa del aviso)
   ========================================================================== */

.marco-celular {
  max-width: 320px;
  background: var(--ink);
  border-radius: var(--r-celular);
  padding: var(--sp-14);
  box-shadow: var(--sh-celular);
}
.pantalla-celular {
  background: var(--grad-pantalla);
  border-radius: var(--r-pantalla);
  min-height: 340px;
  padding: var(--sp-22) var(--sp-18);
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
}
.pantalla-celular__hora {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medio);
  color: var(--bg-mid);
  line-height: var(--lh-1);
  text-align: center;
}
.pantalla-celular__fecha {
  font-size: var(--fs-meta);
  font-weight: var(--fw-negrita);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-on-dark);
  text-align: center;
}

.notificacion {
  background: var(--claro-96);
  border-radius: var(--r-tarjeta-md);
  padding: var(--sp-14);
  box-shadow: var(--sh-notificacion);
  color: var(--ink);
}
.notificacion__cabecera {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.notificacion__app {
  width: 24px;
  height: 24px;
  border-radius: var(--r-6);
  background: var(--ink);
  color: var(--copper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semi);
  flex-shrink: 0;
}
.notificacion__meta   { font-size: var(--fs-meta); font-weight: var(--fw-semi); color: var(--text-muted-2); }
.notificacion__titulo { font-size: var(--fs-lectura); font-weight: var(--fw-negrita); }
.notificacion__cuerpo {
  font-size: var(--fs-sm);
  color: var(--text-body);
  line-height: var(--lh-body);
  margin-top: var(--sp-4);
}
.notificacion--vacia .notificacion__titulo,
.notificacion--vacia .notificacion__cuerpo { color: var(--text-muted-2); }

/* ==========================================================================
   17. PIEZAS MENORES
   ========================================================================== */

/* Mini grafico de tendencia (9 semanas). Cada barra lleva --alto de 0 a 1:
     <span class="mini-grafico__barra" style="--alto:.82"></span> */
.mini-grafico { display: flex; align-items: flex-end; gap: var(--sp-6); height: 60px; }
.mini-grafico__barra {
  --alto: 0;
  flex: 1;
  height: max(6px, calc(var(--alto) * 60px));
  border-radius: 3px;
  background: var(--grad-barra);
}
.mini-grafico__eje {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-6);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-negrita);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}

/* Bloque de fecha de cumpleanos (44x44 con el color de la clase). */
.bloque-fecha {
  --color-clase: var(--navy);
  width: var(--toque);
  height: var(--toque);
  border-radius: var(--r-14);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-clase);
  color: var(--surface);
}
.bloque-fecha__dia {
  font-family: var(--serif);
  font-size: var(--fs-meditacion);
  font-weight: var(--fw-semi);
  line-height: var(--lh-1);
}
.bloque-fecha__mes {
  font-size: var(--fs-micro);
  font-weight: var(--fw-negrita);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Carrusel horizontal de cumpleanos. */
.carrusel {
  display: flex;
  gap: var(--sp-12);
  overflow-x: auto;
  padding: var(--sp-2) var(--sp-4) var(--sp-6);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrusel::-webkit-scrollbar { height: 0; width: 0; }
.carrusel__item {
  flex: 0 0 auto;
  width: 148px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--ink-07);
  border-radius: var(--r-tarjeta-md);
  padding: var(--sp-18) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

/* Badge de racha (icono de llama + texto). */
.racha {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  background: var(--copper-12);
  border-radius: var(--r-pill);
  padding: var(--sp-6) 11px;
  font-size: var(--fs-meta);
  font-weight: var(--fw-black);
  color: var(--copper-dark);
}

/* Circulo de icono de las tarjetas de metrica. */
.circulo-icono {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terracotta-12);
  color: var(--terracotta);
}
.circulo-icono--navy  { background: var(--navy-08);   color: var(--navy); }
.circulo-icono--cobre { background: var(--copper-12); color: var(--copper-dark); }
.circulo-icono--chico { width: 42px; height: 42px; }

/* Iconos SVG de linea: el estilo del prototipo en una sola clase. */
.icono {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icono--sm { width: 20px; height: 20px; }
.icono--xs { width: 16px; height: 16px; }
.icono--lg { width: 28px; height: 28px; }
/* El glifo de WhatsApp usa fill, no stroke. */
.icono--relleno { fill: currentColor; stroke: none; }

.separador { height: 1px; background: var(--ink-06); border: none; margin: var(--sp-18) 0; }
.separador--oscuro { background: var(--claro-12); }

/* ==========================================================================
   18. ESTADOS
   ========================================================================== */

/* --- Deshabilitado -------------------------------------------------------- */
.boton:disabled,
.boton--deshabilitado,
.chip:disabled,
.segmentado__opcion:disabled,
.campo__input:disabled,
input.campo:disabled,
select.campo:disabled,
textarea.campo:disabled,
.select:disabled,
[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.campo__input:disabled,
input.campo:disabled,
select.campo:disabled,
textarea.campo:disabled { background: var(--bg-mid); opacity: 0.7; }

/* --- Cargando ------------------------------------------------------------- */
/* Sobre un boton: conserva el ancho y muestra un aro girando. */
.cargando,
.cargando-en-linea {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.cargando > *,
.cargando-en-linea > * { visibility: hidden; }
.cargando::after,
.cargando-en-linea::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--bg-mid);
  animation: ibmc-girar 0.7s linear infinite;
}
.boton--contorno.cargando::after,
.boton--contorno-navy.cargando::after,
.boton--suave.cargando::after,
.boton--fantasma.cargando::after { color: var(--navy); }

@keyframes ibmc-girar { to { transform: rotate(360deg); } }

/* --- Esqueleto de carga ---------------------------------------------------- */
.esqueleto {
  background: var(--ink-06);
  border-radius: var(--r-8);
  color: transparent;
  animation: ibmc-pulso 1.4s ease-in-out infinite;
}
.esqueleto--linea   { height: 12px; margin: var(--sp-6) 0; }
.esqueleto--titulo  { height: 22px; width: 60%; margin: var(--sp-6) 0; }
.esqueleto--bloque  { height: 96px; border-radius: var(--r-14); }
.esqueleto--circulo { width: 40px; height: 40px; border-radius: 50%; }

@keyframes ibmc-pulso { 50% { opacity: 0.5; } }

/* --- Bloques de estado (vacio, error, sin conexion, cargando) -------------- */
.estado {
  padding: var(--sp-40) var(--sp-24);
  text-align: center;
  color: var(--text-muted-2);
  border-radius: var(--r-14);
}
.estado__titulo {
  font-family: var(--serif);
  font-size: var(--fs-titulo-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
  margin-bottom: var(--sp-6);
}
.estado__texto {
  font-size: var(--fs-base);
  font-weight: var(--fw-medio);
  line-height: var(--lh-body);
}
.estado--vacio        { color: var(--text-muted-2); }
.estado--error        { background: var(--terracotta-10); color: var(--terracotta); }
.estado--error .estado__titulo { color: var(--terracotta); }
.estado--sin-conexion { background: var(--ink-06); }
.estado--cargando     { color: var(--text-muted-2); }

/* Estado breve dentro de una lista ("Sin resultados"). */
.estado--fila {
  padding: var(--sp-28) var(--fila-pad-x);
  text-align: left;
  font-size: var(--fs-base);
  border-radius: 0;
}

/* --- Dialogo modal --------------------------------------------------------
   Pensado para <dialog> nativo con showModal(): el foco atrapado, Escape y
   el backdrop los da el navegador. Aca va solo lo visual. La tarjeta de
   adentro es la que pinta, por eso el <dialog> queda transparente.
     <dialog class="dialogo">
       <div class="tarjeta tarjeta--elevada dialogo__caja pila-14"> … </div>
     </dialog>                                                              */
.dialogo {
  width: min(460px, calc(100vw - 32px));
  max-width: 460px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
.dialogo::backdrop { background: rgba(16, 24, 40, 0.55); }
.dialogo__caja     { padding: var(--sp-26); }
.dialogo__titulo   { margin-bottom: var(--sp-4); }
.dialogo__cuerpo   { font-weight: var(--fw-medio); line-height: var(--lh-body); color: var(--text-body); }
.dialogo__acciones { justify-content: flex-end; flex-wrap: wrap; margin-top: var(--sp-8); }

/* Vista previa de un texto dentro del dialogo (titulo y cuerpo del aviso
   tal como van a salir). Es cita de contenido, no decoracion. */
.dialogo__cita {
  border-left: 2px solid var(--navy-35);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-14);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: var(--lh-body);
  color: var(--ink);
}
.dialogo__cita--tenue { font-weight: var(--fw-normal); color: var(--text-muted-2); }

/* --- Avisos flotantes (toast) ---------------------------------------------
   El contenedor va al final del <body> con aria-live="polite". El navegador
   no lo mueve, asi que queda arriba a la derecha en desktop y arriba y
   centrado en movil (donde el pulgar no lo tapa).                          */
.avisos-flotantes {
  position: fixed;
  top: var(--sp-16);
  right: var(--sp-16);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-8);
  pointer-events: none;
}
.aviso-flotante {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  max-width: 340px;
  padding: var(--sp-12) var(--sp-18);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg-mid);
  font-size: var(--fs-sm);
  font-weight: var(--fw-negrita);
  line-height: var(--lh-body);
  box-shadow: var(--sh-hero-panel);
  pointer-events: auto;
  animation: ibmc-entrar-aviso 0.2s ease-out;
}
.aviso-flotante--ok    { background: var(--success); }
.aviso-flotante--error { background: var(--terracotta); }

@keyframes ibmc-entrar-aviso {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Barra fija de aviso cuando se cae la red. */
.aviso-conexion {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-16);
  padding-top: calc(var(--sp-10) + env(safe-area-inset-top, 0px));
  background: var(--terracotta);
  color: var(--bg-mid);
  font-size: var(--fs-sm);
  font-weight: var(--fw-negrita);
}

/* ==========================================================================
   19. UTILIDADES
   Las minimas para que las pantallas no tengan que escribir estilos sueltos.
   ========================================================================== */

.pila     { display: flex; flex-direction: column; }
.pila-4   { display: flex; flex-direction: column; gap: var(--sp-4); }
.pila-6   { display: flex; flex-direction: column; gap: var(--sp-6); }
.pila-8   { display: flex; flex-direction: column; gap: var(--sp-8); }
.pila-12  { display: flex; flex-direction: column; gap: var(--sp-12); }
.pila-14  { display: flex; flex-direction: column; gap: var(--sp-14); }
.pila-16  { display: flex; flex-direction: column; gap: var(--sp-16); }
.pila-18  { display: flex; flex-direction: column; gap: var(--sp-18); }
.pila-22  { display: flex; flex-direction: column; gap: var(--sp-22); }

.linea    { display: flex; align-items: center; gap: var(--sp-12); }
.linea-6  { display: flex; align-items: center; gap: var(--sp-6); }
.linea-8  { display: flex; align-items: center; gap: var(--sp-8); }
.linea-10 { display: flex; align-items: center; gap: var(--sp-10); }
.linea-14 { display: flex; align-items: center; gap: var(--sp-14); }
.linea-18 { display: flex; align-items: center; gap: var(--sp-18); }
.linea--arriba { align-items: flex-start; }
.linea--base   { align-items: baseline; }
.linea--envuelve { flex-wrap: wrap; }

.reparte       { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.reparte--arriba { align-items: flex-start; }
.reparte--base   { align-items: baseline; }
.reparte--abajo  { align-items: flex-end; }

.crece     { flex: 1; min-width: 0; }
.no-encoge { flex-shrink: 0; }
.relativo  { position: relative; }
.der       { text-align: right; }
.centro    { text-align: center; }

.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mt-16 { margin-top: var(--sp-16); }
.mt-20 { margin-top: var(--sp-20); }
.mt-24 { margin-top: var(--sp-24); }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: var(--sp-8); }
.mb-12 { margin-bottom: var(--sp-12); }
.mb-16 { margin-bottom: var(--sp-16); }
.mb-18 { margin-bottom: var(--sp-18); }
.mb-24 { margin-bottom: var(--sp-24); }

/* Separacion vertical por defecto entre tarjetas del feed de miembro. */
.contenedor > .tarjeta,
.contenedor > .tarjeta--oscura { margin-bottom: var(--gap-tarjetas); }

/* ==========================================================================
   20. RESPONSIVE
   Un solo corte: 900px. Debajo, el sidebar se va y aparece la nav inferior
   fija. La vista de miembro es mobile-first y no necesita corte: ya es una
   columna de 540px centrada que funciona igual en desktop.
   ========================================================================== */

@media (max-width: 899px) {
  .barra-lateral { display: none; }

  .contenido {
    padding: var(--sp-28) var(--sp-20) 100px; /* 100px libres bajo la nav fija */
    max-width: none;
  }

  .nav-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: space-around;
    padding: var(--sp-10) var(--sp-4) var(--sp-12);
    padding-bottom: calc(var(--sp-12) + env(safe-area-inset-bottom, 0px));
    background: var(--ink);
    box-shadow: var(--sh-nav-inferior);
  }
  .nav-inferior__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    flex: 1;
    min-height: var(--toque);
    padding: var(--sp-4);
    border-radius: var(--r-10);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semi);
    color: var(--text-on-dark);
    text-decoration: none;
  }
  .nav-inferior__item:hover { text-decoration: none; }
  .nav-inferior__item--activo,
  .nav-inferior__item[aria-current='page'] {
    color: var(--copper);
    font-weight: var(--fw-negrita);
  }

  /* Las dos grillas de dos columnas colapsan. */
  .grilla-principal,
  .grilla-compuesta { grid-template-columns: 1fr; gap: var(--gap-tarjetas); }

  /* Padding de tarjeta y de fila, mas ajustado. */
  .tarjeta            { padding: var(--pad-tarjeta-movil); }
  .tarjeta--xl,
  .tarjeta--lg        { padding: var(--sp-22); }
  .tarjeta--md        { padding: var(--sp-18); }
  .tarjeta--lista     { padding: 0; }
  .tarjeta__cabecera  { padding: var(--sp-18) var(--sp-20) var(--sp-12); }
  .tarjeta__pie       { padding: var(--sp-16) var(--sp-20); }
  .fila               { padding: var(--fila-pad-y) var(--sp-20); }

  /* La escala tipografica baja un escalon en las cifras mas grandes. */
  .cifra--hero   { font-size: 60px; }
  .cifra--grande { font-size: 42px; }
  .cifra--44     { font-size: 34px; }
  .h1            { font-size: 36px; }
  .h2            { font-size: 32px; }
  .cita          { font-size: 23px; }

  .cabecera-pagina { margin-bottom: var(--sp-22); }
  .cabecera-pagina__acciones { width: 100%; }
  .cabecera-pagina__acciones .boton { flex: 1; }

  .marco-celular { margin: 0 auto; }
}

/* Pantallas muy angostas. */
@media (max-width: 420px) {
  /* Una fila horizontal que ya no entra prefiere bajar de linea antes que
     desbordar la pantalla. Solo se activa cuando de verdad no entra. */
  .linea, .linea-6, .linea-8, .linea-10, .linea-14, .linea-18 { flex-wrap: wrap; }
  .avisos-flotantes { left: var(--sp-12); right: var(--sp-12); align-items: stretch; }
  .aviso-flotante { max-width: none; }
  .dialogo__acciones .boton { flex: 1; }
  .fila { gap: var(--sp-10); padding-left: var(--sp-16); padding-right: var(--sp-16); }
  .tarjeta__cabecera { padding-left: var(--sp-16); padding-right: var(--sp-16); }
  .tarjeta__pie      { padding-left: var(--sp-16); padding-right: var(--sp-16); }
  .segmentado__opcion { padding: var(--sp-8) var(--sp-10); font-size: var(--fs-xs); }
  .cifra--hero { font-size: 52px; }
  .contenedor { padding: 0 var(--sp-14); }
}

/* Impresion: los informes de ausencias se llevan impresos a la reunion. */
@media print {
  body { background: var(--surface-alt); }
  .barra-lateral,
  .nav-inferior,
  .boton,
  .aviso-conexion,
  .salto-contenido { display: none !important; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { border: 1px solid var(--border-warm); box-shadow: none; break-inside: avoid; }
  .tarjeta--oscura { background: var(--surface-alt); color: var(--ink); box-shadow: none; }
  .tarjeta--oscura::after,
  .tarjeta--brillo-2::before { display: none; }
  .tarjeta--oscura .eyebrow,
  .tarjeta--oscura .tenue,
  .tarjeta--oscura .texto-tenue,
  .tarjeta--oscura .texto-meta { color: var(--text-muted-2); }
  .tarjeta--oscura .cita,
  .tarjeta--oscura .cifra,
  .tarjeta--oscura .titulo-tarjeta { color: var(--ink); }
}

/* ==========================================================================
   21. OBJETIVOS TACTILES DE 44px

   Va al final a proposito: estas reglas tienen la misma especificidad que
   las de los componentes, asi que si estuvieran arriba las pisaria cualquier
   `min-height` posterior (.boton--chico 36, .segmentado__opcion 34,
   .chip 36). Probado en el navegador: arriba no funcionaba.

   El README avisa que varios controles del prototipo rondan 30-38px. En
   punteros gruesos suben a 44 sin que cambie el aspecto del relleno.
   ========================================================================== */

@media (pointer: coarse) {
  .boton,
  .boton--chico,
  .boton--mini,
  .chip,
  .segmentado__opcion,
  .nav-lateral__item,
  .nav-inferior__item,
  .fila--clic,
  .fila-toque,
  .fila-check,
  .boton-volver,
  .campo__input,
  input.campo,
  select.campo,
  textarea.campo,
  .select,
  .zona-adjuntar { min-height: var(--toque); }

  .boton--icono,
  .boton--icono-sm,
  .boton--icono-46 { min-width: var(--toque); min-height: var(--toque); }

  /* El riel del segmentado crece con sus opciones. */
  .segmentado { align-items: stretch; }

  /* Controles que no pueden crecer visualmente sin romper el diseno
     (el check de 22px, la "x" de 20px del adjunto): se les agrega area de
     toque invisible alrededor con .area-toque. */
  .area-toque { position: relative; }
  .area-toque::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--toque));
    height: max(100%, var(--toque));
    transform: translate(-50%, -50%);
  }
}