/* Portal del miembro — lo propio del portal real sobre el sistema de la maqueta 23
 * (css/maqueta.css, que se carga antes). Aquí van: lo que la maqueta no trae (enlace para
 * saltar al contenido, avisos cortos, ventanas) y las clases de las páginas que ya
 * existían (tarjeta, lista, boton, campo, cifra…), pintadas con los mismos colores,
 * radios y tamaños de la maqueta, en claro y en oscuro. */

[hidden], .oculto { display: none !important; }
body { font-family: var(--sans); }
a { color: var(--blue2); }

/* Saltar al contenido (teclado). */
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px;
  background: var(--ink); color: #fff; font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; }
[data-theme="dark"] .saltar { background: #007AC3; }

/* ── Marco ─────────────────────────────────────────────────────────────────────── */
.side { flex: 0 0 248px; }
.side > .menu { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; }
.who-dd summary { list-style: none; cursor: pointer; }
.who-dd summary::-webkit-details-marker { display: none; }
.who-dd[open] .profile-mini { border-radius: 14px 14px 0 0; margin-bottom: 0; }
.who-dd .wd-foot { flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; }
.who-dd .wd-it.on { cursor: default; }
.avatar-foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.crumb a.crumb-a { color: inherit; text-decoration: none; }
.crumb a.crumb-a:hover { text-decoration: underline; }
button.tsearch { font: inherit; text-align: left; }
.topbar .who { flex-wrap: nowrap; }
.lang { position: relative; }
.contenido > h1 { font-size: clamp(30px, 3vw, 40px); letter-spacing: -1.1px; padding-top: 32px; }
.page.contenido { padding-top: 6px; }
@media (max-width: 760px) {
  .side > .menu { max-height: none; }
  body.side-open .app > .side { display: flex; }
  body.side-open::after {
    content: ""; position: fixed; inset: 0 0 0 80%; z-index: 79; background: rgba(0, 38, 75, .5);
  }
  .topbar { min-height: 60px; }
}

/* ── Piezas de las páginas que ya existían, con el aspecto de la maqueta ─────────── */
.tarjeta {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; min-width: 0;
  color: var(--text);
}
.tarjeta + .tarjeta { margin-top: 0; }
:not(.page) > .tarjeta + .tarjeta { margin-top: 16px; }
.tarjeta > h2:first-child, .tarjeta > .encabezado:first-child h2 { font-size: 19px; margin-bottom: 12px; }
.tarjeta h2 { font-size: 19px; }
.tarjeta.alerta { border-color: #F3B8B1; background: var(--bad-bg); }
.tarjeta.alerta strong { color: var(--bad); font-size: 18px; }
.suave, .ayuda { color: var(--muted); }
.ayuda { font-size: 12px; }
.aviso { color: var(--bad); font-weight: 600; font-size: 13px; }
.ok { color: var(--ok); }
.vencido { color: var(--bad); font-weight: 700; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line-2);
  font-size: 13.5px;
}
.lista li:first-child { border-top: 0; padding-top: 2px; }
.lista a.fila { color: inherit; text-decoration: none; }
.lista a.fila:hover strong { color: var(--blue2); }
.lista select { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font: inherit; background: var(--surface); color: var(--text); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }
.cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fila .cuerpo { flex: 1 1 260px; gap: 6px; }
.fila h3 { margin: 0; font-size: 15px; }
.foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #D8EAF2; flex: none; }
.foto.inicial { display: grid; place-items: center; font-weight: 700; color: var(--blue2); }

/* Botones: primario azul en píldora, secundario blanco con borde. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px;
  border: none; border-radius: 30px; padding: 10px 18px; font: 700 13px var(--sans); cursor: pointer;
  background: var(--blue); color: #fff; box-shadow: 0 6px 15px rgba(0, 122, 195, .2); text-decoration: none;
  transition: transform .18s, background .2s;
}
.boton:hover { background: var(--blue2); }
.boton[disabled] { background: var(--off-bg); color: #8A949B; box-shadow: none; cursor: not-allowed; }
.boton.secundario { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.boton.secundario:hover { border-color: var(--blue); }
.boton.claro { background: #E9A901; color: #00264B; box-shadow: none; width: auto; }
.boton.borde-claro { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .17); color: #fff; width: auto; box-shadow: none; }
.boton.chico { width: auto; min-height: 34px; padding: 7px 13px; font-size: 12px; }
.boton.peligro { background: var(--bad); box-shadow: none; }
.enlace {
  background: none; border: 0; padding: 4px 0; color: var(--blue2); font: 700 12.5px var(--sans); cursor: pointer;
  text-decoration: none;
}
.enlace:hover { text-decoration: underline; }
.botonera { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.botonera.fin { justify-content: flex-end; margin-top: 16px; }
.acciones { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Formularios: los campos de la maqueta. */
.campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.campo label { font-size: 12px; font-weight: 700; color: var(--ink); }
.campo input, .campo select, .campo textarea, .preguntas input[type="text"], .preguntas input[type="number"], .preguntas input[type="date"] {
  width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid #D8E3E2; border-radius: 10px;
  background: var(--surface); font: 400 14px var(--sans); color: var(--ink);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .preguntas input:focus {
  border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 122, 195, .11);
}
.campo [aria-invalid="true"], .preguntas [aria-invalid="true"] { border-color: #B42318; }
.campo .enlace { align-self: flex-end; font-size: 12px; }
.campo input[type="range"] { padding: 0; border: 0; box-shadow: none; min-height: 0; }
.formulario { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.casilla { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13.5px; }
.casilla input { width: 18px; height: 18px; accent-color: var(--blue); }

/* Cifras de una página = indicadores de la maqueta. */
.cifras { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.cifra {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); color: inherit; text-decoration: none; min-width: 0;
}
a.cifra:hover { border-color: var(--blue); }
/* Como el indicador de la maqueta: etiqueta arriba, cifra grande y nota debajo. */
.cifra small { order: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.cifra b { order: 1; font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); }
.cifra b.texto { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.cifra em { order: 2; font-size: 12px; font-style: normal; color: var(--muted); }
.cifra em.vencido { color: var(--bad); font-weight: 700; }
.cifras + .dos-columnas, .cifras + .tarjeta, .sec-head + .cifras { margin-top: 17px; }
.barras-etapa { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.barras-etapa .hrow { text-decoration: none; }
.hbar > span { display: block; height: 100%; border-radius: 20px; }
#rol-distrito, #rol-grupo, #rol-mision { display: flex; flex-direction: column; gap: 17px; }
#rol-mision { padding: 22px clamp(16px, 2vw, 26px); border-radius: 22px; background: #F2F6F3; }
[data-theme="dark"] #rol-mision { background: var(--surface-2); }

/* Avance. */
.progreso { height: 6px; border-radius: 6px; background: #E3EAF2; overflow: hidden; }
.progreso span { display: block; height: 100%; background: #007AC3; }
[data-theme="dark"] .progreso, [data-theme="dark"] .cc-bar { background: #22476E; }
.camino { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.camino li { padding: 6px 12px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.camino li[aria-current="step"] { background: #E9A901; border-color: #E9A901; color: #00264B; font-weight: 700; }

/* Filtros y opciones = chips de la maqueta. */
.filtros, .tipos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.filtros button, .tipos button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 14px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 12.5px/1 var(--sans); cursor: pointer;
}
.filtros button b { color: var(--ink); }
.filtros button[aria-pressed="true"], .tipos button[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filtros button[aria-pressed="true"] b { color: var(--gold-soft); }
[data-theme="dark"] .filtros button[aria-pressed="true"], [data-theme="dark"] .tipos button[aria-checked="true"] { background: #007AC3; border-color: #007AC3; }
.opciones { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); padding: 0; margin: 0; list-style: none; }
.opciones button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); font: 500 13.5px var(--sans); text-align: left; cursor: pointer; color: var(--text);
}
.opciones button[aria-checked="true"] { border-color: var(--blue); background: var(--info-bg); }
.opciones button[aria-disabled="true"] { cursor: default; }
.opciones .casillero {
  width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid var(--haze); display: grid; place-items: center;
  font-size: 12px; color: #fff;
}
.opciones button[aria-checked="true"] .casillero { background: var(--blue); border-color: var(--blue); }
.opciones small { display: block; color: var(--muted); font-size: 11.5px; }
.sesion { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.sesion:has(input:checked) { border-color: var(--blue); background: var(--info-bg); }
.sesion:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.sesion span { flex: 1; }

/* Cursos: reproductor, preguntas. */
.reproductor { display: grid; gap: 17px; grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
.indice { padding: 10px 0; }
.indice h2 { font-size: 16px; margin: 4px 18px 8px; }
.indice .seccion { margin: 12px 18px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.indice ul { list-style: none; margin: 0; padding: 0; }
.indice button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 18px; border: 0; border-left: 3px solid transparent;
  background: none; font: 500 13.5px var(--sans); text-align: left; cursor: pointer; color: var(--text);
}
.indice button:hover { background: var(--surface-2); }
.indice button[aria-current="true"] { border-left-color: #E9A901; background: var(--info-bg); font-weight: 700; color: var(--blue2); }
.marca-leccion { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--haze); }
.marca-leccion.hecha { background: var(--blue); border-color: var(--blue); }
.leccion-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.leccion-cabeza h2 { margin: 0; font-size: 22px; }
.texto-leccion { white-space: pre-wrap; line-height: 1.65; font-size: 14.5px; }
.preguntas { display: flex; flex-direction: column; gap: 16px; padding: 0; margin: 0; list-style: none; }
.preguntas > li { border-bottom: 1px solid var(--line-2); padding-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.preguntas > li:last-child { border-bottom: 0; }
.preguntas .titulo { font-weight: 700; }
.preguntas label { display: flex; align-items: center; gap: 8px; }
.preguntas input[type="text"], .preguntas input[type="number"], .preguntas input[type="date"] { max-width: 320px; }
.datos-examen { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.datos-evento { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }

/* Programas. */
.programas { display: grid; gap: 17px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); padding: 0; margin: 0; list-style: none; }
.programas li { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.programas .franja { height: 8px; background: var(--blue); }
.programas .cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.programas h2 { font-size: 19px; margin: 0; }
.programas p { margin: 0; white-space: pre-line; color: var(--muted); }
.programas .pie-tarjeta { margin-top: auto; }

/* Encabezados con acciones, datos, columnas. */
.encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.encabezado h1, .encabezado h2 { margin-bottom: 0; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 13.5px; }
.datos dt { color: var(--muted); }
.datos dd { margin: 0; }
.recibo dt { color: var(--muted); font-size: 12px; }
.recibo dd { margin: 0 0 10px; }
.dos-columnas { display: grid; gap: 17px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
.dos-columnas > .tarjeta { margin-top: 0 !important; }
.lineas { white-space: pre-line; }
.vinetas { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.versiculo { margin: 0; padding: 4px 0 4px 14px; border-left: 3px solid #E9A901; font-style: italic; }

/* Barras de asistencia del grupo. */
.barras { display: flex; align-items: flex-end; gap: 10px; height: 140px; padding-top: 8px; }
.barra-columna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; text-decoration: none; color: var(--muted); }
.barra-caja { flex: 1; width: 100%; max-width: 36px; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.barra-relleno { width: 100%; background: #007AC3; border-radius: 8px 8px 0 0; }
.barra-columna small { font-size: 11px; }

/* Tablas = tabla de la maqueta. */
.tabla-caja { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th, .tabla td { padding: 12px 16px; border-top: 1px solid var(--line-2); text-align: left; white-space: nowrap; color: var(--ink); }
.tabla thead th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: var(--surface-2); border-top: 0; }
.tabla tfoot th, .tabla tfoot td { font-weight: 700; background: var(--surface-2); }
.tabla .numero { text-align: right; font-variant-numeric: tabular-nums; }

/* «i» de ayuda que se abre con clic o teclado. */
.info-i { position: relative; display: inline-block; vertical-align: middle; }
.info-i summary {
  list-style: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--haze); background: var(--surface);
  color: var(--blue2); display: grid; place-items: center; font: italic 700 11px/1 var(--sans); cursor: pointer;
}
.info-i summary::-webkit-details-marker { display: none; }
.info-i p {
  position: absolute; z-index: 10; top: 26px; left: -8px; width: min(320px, 80vw); margin: 0; padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); font-size: 12.5px; font-weight: 400; color: var(--text);
}

/* Ventanas (dialog) y avisos cortos. */
.ventana-dialogo {
  border: 1px solid var(--line); border-radius: 20px; padding: 24px; width: min(520px, calc(100vw - 32px)); background: var(--surface);
  color: var(--text); box-shadow: 0 40px 80px -30px rgba(0, 38, 75, .45);
}
.ventana-dialogo::backdrop { background: rgba(0, 38, 75, .45); }
.ventana-dialogo h2 { margin: 0 0 12px; font-size: 21px; }
#avisos { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 95; width: min(420px, calc(100vw - 32px)); }
#avisos .nota { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font: 600 14px var(--sans); box-shadow: var(--shadow); }
#avisos .nota.aviso { background: var(--bad); }
[data-theme="dark"] #avisos .nota { background: #007AC3; }
@media (max-width: 760px) { #avisos { bottom: 92px; } .reproductor { grid-template-columns: 1fr; } }

/* ── Páginas de acceso (ingresar, restablecer, confirmar) ────────────────────────── */
.auth .auth-brand { display: flex; align-items: flex-end; gap: 8px; text-decoration: none; }
.auth .auth-brand .brand-sub { color: #5A6B7E; margin: 0 0 0 4px; padding-bottom: 4px; }
.auth .lema { font-family: var(--sans); color: #33414B; font-size: 16px; text-align: center; }
.auth h1 { font-size: 30px; }
.auth .pie-auth { border-top: 1px solid #DCE7E6; padding-top: 16px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.auth .pie-auth a { font-weight: 700; }
.auth .campo { margin-bottom: 0; }
.auth form { display: flex; flex-direction: column; gap: 16px; }
.auth .estado { align-items: center; text-align: center; gap: 12px; }
.auth .empty-ic.bien { background: #E2F3EB; color: #17724F; }
.auth .empty-ic.mal { background: #FDE9E7; color: #B42318; }
[data-theme="dark"] .auth-card { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .auth .lema { color: var(--muted); }

/* ── Piezas nuevas del portal ────────────────────────────────────────────────────── */
/* Bloque que todavía no existe en la obra: se ve, gris y sin clic. */
.proximo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 30px 20px; border: 1px dashed var(--line); border-radius: 17px; color: var(--muted); font-size: 13px; }
.proximo b { color: var(--ink); font-size: 14px; }
.pill-prox { background: var(--off-bg); color: var(--off); }
.vacio-dz { padding: 18px; border: 1px dashed var(--panel-line); border-radius: 14px; color: var(--muted); font-size: 13px; text-align: center; background: var(--surface); }
.dz-dark .vacio-dz, .dz-iglesia .vacio-dz, .dz-formacion .vacio-dz { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: #C2D2DC; }
.dz-one { display: grid; }
.paso-dialogo { max-width: 560px; }
.paso-dialogo[open] { display: flex; flex-direction: column; gap: 14px; }
.paso-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.paso-cabeza h3 { font-size: 21px; }
.auth .campo:has(> .enlace) { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.auth .campo:has(> .enlace) label { grid-row: 1; }
.auth .campo:has(> .enlace) .enlace { grid-row: 1; grid-column: 2; padding: 0; text-decoration: underline; }
.auth .campo:has(> .enlace) input { grid-column: 1 / -1; }
.auth .aviso { padding: 12px 14px; border-radius: 12px; background: var(--bad-bg); color: var(--bad); }
.auth .aviso.ok, .auth .nota-ok { background: #E2F3EB; color: #0F4F37; }
.auth .boton { min-height: 44px; }
/* Lista de la oficina sin casilla de «hecho» (el ERP todavía no guarda esa marca). */
.ofc-t.sin-chk { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
@media (max-width: 640px) {
  .ofc-t.sin-chk { grid-template-columns: minmax(0, 1fr) auto; }
  .ofc-t.sin-chk .btn { grid-column: 1 / -1; }
}
/* Ritmo vertical dentro de las tarjetas de las páginas que ya existían. */
.tarjeta > * { margin-top: 0; margin-bottom: 0; }
.tarjeta > * + * { margin-top: 14px; }
.tarjeta > h2 + p, .tarjeta > .encabezado + p { margin-top: 6px; }
.tarjeta form > .botonera, .tarjeta form > .boton { margin-top: 4px; }
/* Reproductor del curso. */
.curso-volver { padding-top: 24px; }
.curso-cabeza { padding-top: 4px; }
.curso-cabeza .phead-l { flex: 1 1 460px; }
.curso-avance { flex: 0 1 320px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.curso-avance-fila { display: flex; justify-content: space-between; align-items: center; }
.curso-avance .kpi-n { font-size: 28px; font-weight: 700; color: var(--ink); }
.quien { display: flex; align-items: center; gap: 14px; min-width: 0; }
.quien > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quien strong { font-size: 16px; }
img.foto:not([src]), img.foto[src=""] { content: linear-gradient(#D8EAF2, #D8EAF2); }
/* Modo oscuro: antetítulos y enlaces de los paneles claros que la maqueta deja en navy. */
[data-theme="dark"] .dz-agenda .dz-t small, [data-theme="dark"] .dz-rec .dz-t small, [data-theme="dark"] .dz-programas .dz-t small,
[data-theme="dark"] .dz-dones .dz-t small { color: #9CD3F7; }
[data-theme="dark"] .dz-agenda .dz-link, [data-theme="dark"] .dz-rec .dz-link, [data-theme="dark"] .dz-programas .dz-link,
[data-theme="dark"] .dz-dones .dz-link { color: #9CD3F7; }
.ofc-q[disabled] { opacity: .55; cursor: not-allowed; }
a.tab-btn { text-decoration: none; display: inline-flex; align-items: center; }
.int-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.int-bar .mtb-q { flex: 1 1 280px; }
.card.llamar { border-color: #F3B8B1; display: flex; flex-direction: column; gap: 6px; }
.card.llamar h3 { color: #8A3523; }
[data-theme="dark"] .card.llamar h3 { color: var(--bad); }
.li-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.li-sub { font-size: 12.5px; color: var(--muted); }
.card.aprobar { display: flex; flex-direction: column; gap: 14px; }
.aprobar-h { display: flex; gap: 12px; align-items: center; }
.aprobar-h h3 { font-size: 17px; }
.aprobar-nota { border-left: 3px solid #E9A901; padding: 2px 0 2px 14px; font-size: 16px; color: var(--text); }
.date-block.cita { width: 70px; height: 76px; border-radius: 14px; background: #00264B; }
.date-block.cita b { font: 700 28px/1 var(--sans); color: #fff; }
.date-block.cita small { color: #F6D772; }
.date-block.cita small:last-child { color: #C2D2DC; text-transform: none; }

/* ── Pantallas de rol (segunda pasada) ──────────────────────────────────────────── */
.icon-btn.sin-tel { opacity: .45; cursor: default; }
.card.atencion { border-color: #F3B8B1; }
.columnas-etapa { display: flex; align-items: flex-end; justify-content: space-around; gap: 16px; padding-top: 8px; }
.col-etapa { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; flex: 1 1 0; max-width: 110px; }
.col-etapa b { font-size: 15px; color: var(--ink); }
.col-barra { display: block; width: 100%; max-width: 64px; border-radius: 10px 10px 4px 4px; }
.col-etapa small { font-size: 13px; font-weight: 700; color: var(--ink); text-align: center; padding-top: 10px; border-top: 1px solid var(--line); width: 100%; }
.fecha-chip { flex: 0 0 auto; min-width: 92px; text-align: center; padding: 6px 12px; border-radius: 999px; background: #00264B; color: #fff; font-size: 12px; font-weight: 700; }
.conteo-asistencia { font-weight: 700; color: var(--ink); }
.grid.asistencia { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.check-nombre { font-weight: 600; color: var(--ink); }
[data-theme="dark"] .check { background: var(--surface); }
[data-theme="dark"] .check.on { background: rgba(47, 163, 122, .16); }
.alert.guardada { background: #E2F3EB; color: #0F4F37; border: 1.5px solid #A9DCC4; padding: 12px 16px; font-weight: 700; }
.ficha-cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.ficha-izq { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ficha-der { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.seg-form { padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); margin: 6px 0; }
.li.seg-fila { align-items: flex-start; }
.li .icon-btn, .li .btn { flex: 0 0 auto; }
#tarjeta-acompanamiento { display: flex; flex-direction: column; gap: 12px; }
.seg-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: #FFF3D8; color: #8B6A16; }
.seg-ic.hecho { background: #E2F3EB; color: #17724F; }
.dato-contacto { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 700; text-decoration: none; }
.dato-contacto:hover { border-color: var(--blue); }
.dato-contacto.vacio { font-weight: 500; color: var(--muted); }
#tarjeta-etapa { padding: 18px 22px; }