:root {
  color-scheme: light;
  --paper: #ffffff;
  --paper-sunk: #f4f4f4;
  --card: #ffffff;
  --ink: #000000;
  --ink-2: #555555;
  --ink-3: #8a8a8a;
  --rule: #e8e8e8;
  --rule-strong: #cfcfcf;
  --series-1: #2a78d6;   /* altas / activos */
  --series-2: #eb6834;   /* bajas */
  --mapa-0: #d3e4f8; --mapa-1: #a3c6ef; --mapa-2: #6aa2e4; --mapa-3: #2a78d6; --mapa-4: #164a8c;
  --mapa-vacio: #ededed; --mapa-borde: #ffffff;
  --noroeste: #3b7bc0; --noreste: #d94a3d; --occidente: #dcb03d; --centro: #6d3a8a; --sureste: #6ba838;
  --good: #1f8a3b;
  --warn: #b26b00;
  --bad: #c62f2f;
  --info: #2a78d6;
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --radius: 12px;
  --oro: #F7B33E; --oro-suave: #FFF0CF; --oro-tinta: #7a4b00;
  --t-lila: #EEE8FF; --t-menta: #DDF4E7; --t-cielo: #E1EEFF; --t-durazno: #FFE7D9; --t-rosa: #FFE1EC; --t-oro: #FFF0CF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #000000; --paper-sunk: #0d0d0d; --card: #0b0b0b;
    --ink: #ffffff; --ink-2: #b8b8b8; --ink-3: #7a7a7a;
    --rule: #1d1d1d; --rule-strong: #2e2e2e;
    --series-1: #3987e5; --series-2: #d95926;
    --mapa-0: #15324f; --mapa-1: #1d4f82; --mapa-2: #2a6db8; --mapa-3: #3d8ae6; --mapa-4: #8dbdf3;
    --mapa-vacio: #050505; --mapa-borde: #0b0b0b;
    --noroeste: #5b9be0; --noreste: #f16b5e; --occidente: #f0c860; --centro: #a570c4; --sureste: #8bcc58;
    --good: #4cc26a; --warn: #f0b13d; --bad: #f16b5e; --info: #5b9be0;
    --oro-suave: #33270c; --oro-tinta: #F7B33E;
    --t-lila: #221c38; --t-menta: #0f281b; --t-cielo: #12223a; --t-durazno: #33200f; --t-rosa: #351624; --t-oro: #33270c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #000000; --paper-sunk: #0d0d0d; --card: #0b0b0b;
  --ink: #ffffff; --ink-2: #b8b8b8; --ink-3: #7a7a7a;
  --rule: #1d1d1d; --rule-strong: #2e2e2e;
  --series-1: #3987e5; --series-2: #d95926;
    --mapa-0: #15324f; --mapa-1: #1d4f82; --mapa-2: #2a6db8; --mapa-3: #3d8ae6; --mapa-4: #8dbdf3;
    --mapa-vacio: #050505; --mapa-borde: #0b0b0b;
    --noroeste: #5b9be0; --noreste: #f16b5e; --occidente: #f0c860; --centro: #a570c4; --sureste: #8bcc58;
  --good: #4cc26a; --warn: #f0b13d; --bad: #f16b5e; --info: #5b9be0;
  --oro-suave: #33270c; --oro-tinta: #F7B33E;
    --t-lila: #221c38; --t-menta: #0f281b; --t-cielo: #12223a; --t-durazno: #33200f; --t-rosa: #351624; --t-oro: #33270c;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
/* Nada puede ensanchar la página en el celular (si algo se sale, iPhone aleja todo y la pantalla se ve chiquita) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }  /* clip no rompe los encabezados fijos */
body { font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
.muted { color: var(--ink-2); }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }

.logo { height: 28px; width: auto; display: block; }
.logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-claro { display: none; }
  :root:not([data-theme="light"]) .logo-oscuro { display: block; }
}

/* Marca de agua con el correo del usuario: desalienta capturas de pantalla */
#marca-agua {
  position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; contain: strict;
  opacity: .035; color: var(--ink); font-size: 13px; font-weight: 600; user-select: none;
}
/* El giro va adentro: la caja de afuera nunca se sale de la pantalla */
#marca-agua .marca-giro {
  position: absolute; inset: -20%; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 70px 90px; padding: 40px;
  transform: rotate(-18deg);
}

/* Botones y campos */
.btn {
  font: inherit; font-weight: 600; font-size: 13px; border-radius: 999px; padding: 8px 16px;
  border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink); cursor: pointer;
  white-space: nowrap; min-height: 36px;
}
.btn:hover { border-color: var(--ink-3); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primario { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primario:hover { opacity: .88; }
.btn-peligro { color: var(--bad); }
.btn-peligro-lleno { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn-peligro-lleno:hover { opacity: .88; }
.btn-chico { padding: 4px 10px; font-size: 12px; min-height: 28px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--rule-strong);
  border-radius: 8px; padding: 8px 10px; min-height: 36px; width: 100%;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
.select { width: auto; }
label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--paper-sunk); }
.login-card {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--rule);
  border-radius: 18px; padding: 28px; display: grid; gap: 14px;
}
.login-card .logo { height: 34px; margin-bottom: 6px; }
.login-card h1 { font-size: 22px; }
.sub { margin: -6px 0 4px; color: var(--ink-2); font-size: 13px; }
.error { color: var(--bad); margin: 0; min-height: 1em; font-size: 13px; }
.nota { margin: 0; font-size: 12px; color: var(--ink-3); }
.login { grid-template-rows: 1fr auto; }
.powered { margin: 16px 0 0; font-size: 12px; color: var(--ink-3); text-align: center; letter-spacing: .02em; }
.powered a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.powered a:hover { text-decoration: underline; }

/* Barra */
.barra {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 24px; border-bottom: 1px solid var(--rule); background: var(--paper);
  position: sticky; top: 0; z-index: 10;
}
.barra-izq, .barra-der { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.alcance { display: grid; line-height: 1.25; border-left: 1px solid var(--rule); padding-left: 16px; }
.alcance strong { font-size: 15px; }
.alcance span { font-size: 12px; color: var(--ink-2); }

.contenido { padding: 24px 32px; max-width: 1600px; margin: 0 auto; }

/* Guía */
.guia-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.guia-boton {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none;
}
a.guia-boton:hover { border-color: var(--ink); }
.guia-boton > span:nth-child(2) { display: grid; gap: 4px; }
.guia-boton strong { font-size: 16px; }
.guia-boton.destacado { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.guia-icono { font-size: 30px; }
.guia-ir { font-weight: 700; font-size: 13px; white-space: nowrap; }
.guia-pasos { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.guia-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guia-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.guia-bloques > div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--rule); border-radius: 10px; }
.etiqueta-bloque { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 12px; }
@media (max-width: 640px) {
  .guia-boton { grid-template-columns: auto 1fr; }
  .guia-boton > :last-child { grid-column: 1 / -1; }
}
.tab { display: grid; gap: 20px; min-width: 0; }
.tab > * { min-width: 0; }
.tabla-wrap { max-width: 100%; }
.encabezado { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; }
.kpi .etq { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.kpi .val { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi .det { font-size: 12px; color: var(--ink-2); }
.delta-pos { color: var(--good); font-weight: 700; }
.delta-neg { color: var(--bad); font-weight: 700; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.tarjeta { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
/* Nada dentro de una tarjeta la estira más que la pantalla (el selector de archivo de «Gestión de datos» se salía 40 px) */
.tarjeta > * { min-width: 0; }
input[type=file] { max-width: 100%; }
/* Red de seguridad: la página nunca se desliza de lado en el celular (clip no rompe la barra fija) */
html, body { overflow-x: clip; }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* Gráficas */
.grafica { position: relative; }
.grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafica .eje { fill: var(--ink-3); font-size: 11px; font-family: var(--sans); }
.grafica .rejilla-linea { stroke: var(--rule); stroke-width: 1; }
.grafica .base { stroke: var(--rule-strong); stroke-width: 1; }
.grafica .etq-valor { fill: var(--ink-2); font-size: 11px; font-weight: 600; font-family: var(--sans); }
.leyenda { display: flex; gap: 16px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tooltip {
  position: absolute; pointer-events: none; background: var(--ink); color: var(--paper);
  font-size: 12px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -110%);
  opacity: 0; transition: opacity .1s; z-index: 5;
}
.tooltip.visible { opacity: 1; }

/* Mapa */
.mapa svg { max-height: 620px; }
.mapa path.edo { stroke: var(--mapa-borde); stroke-width: 1; stroke-linejoin: round; cursor: default; transition: filter .12s; }
.mapa path.edo:hover { filter: brightness(1.15); }
.mapa path.edo.sel { stroke: var(--ink); stroke-width: 2.5; }
.titulo-espaciado { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .28em; color: var(--ink-2); }
.leyenda-regiones { gap: 22px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; }
.leyenda-regiones i.punto { width: 11px; height: 11px; border-radius: 50%; }
.mapa-cab { align-items: center; }

/* Barras horizontales en tablas */
.barra-h { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.barra-h span.b { height: 8px; border-radius: 0 4px 4px 0; background: var(--series-1); min-width: 2px; }

/* Tablas */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); font-weight: 700; background: var(--paper-sunk); position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: var(--paper-sunk); }
td .nombre { font-weight: 600; }
/* Celdas que aguantan cualquier texto: máximo 2 líneas y el resto en el tooltip */
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
td.c-nombre { min-width: 150px; max-width: 230px; }
td.c-tel { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
td.c-corta { min-width: 100px; max-width: 170px; }
td.c-esc { min-width: 120px; max-width: 220px; }
/* Puntitos de origen y entrevista */
.punto-origen { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex: none; }
.punto-origen.pase_directo { background: #3b82f6; }
.punto-origen.formulario { background: #22a447; }
.punto-origen.pendiente { background: #f2b51f; }
.nombre-fila { display: flex; align-items: flex-start; gap: 2px; }
.nombre-fila .puntos { display: inline-flex; flex: none; padding-top: 5px; }
.nombre-fila .puntos:empty { display: none; }
.nombre-fila .punto-origen { margin-right: 4px; }
.leyenda-puntos { font-size: 12px; gap: 16px; }
.leyenda-puntos i.punto-origen { width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.kpi .etq .punto-origen { margin-right: 6px; }
.tel-raro { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--ink-2); }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros input[type="search"] { max-width: 280px; }
.filtros select { width: auto; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Chips de estado: siempre texto + punto, nunca solo color */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rule-strong); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.activo, .chip.realizada { color: var(--good); }
.chip.baja, .chip.no_localizado { color: var(--bad); }
.chip.pendiente { color: var(--warn); }
.chip.enviada { color: var(--info); }
.chip.muy_activo { color: var(--good); }
.chip.poco_activo { color: var(--warn); }
.chip.inactivo { color: var(--ink-3); }

/* Selectores con forma de chip (estatus y entrevista en la tabla) */
.chip-sel {
  width: auto; min-height: 28px; padding: 2px 26px 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--rule-strong); background-color: var(--card); cursor: pointer; color: var(--ink);
}
.chip-sel.muy_activo, .chip-sel.realizada { color: var(--good); border-color: color-mix(in oklab, var(--good) 45%, var(--rule-strong)); }
.chip-sel.activo { color: var(--good); }
.chip-sel.poco_activo, .chip-sel.pendiente { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, var(--rule-strong)); }
.chip-sel.inactivo { color: var(--ink-3); }
.chip-sel.baja, .chip-sel.no_localizado { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 45%, var(--rule-strong)); }
.chip-sel.enviada { color: var(--info); }
.chip-sel option { color: var(--ink); }
a.wa { color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; border-bottom: 1px dashed var(--rule-strong); }
a.wa:hover { color: var(--good); border-bottom-color: var(--good); }

.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--paper-sunk); border: 1px solid var(--rule); font-size: 11px; text-align: center; color: var(--ink); }

.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-simple li { display: flex; justify-content: space-between; gap: 12px; }

/* Diálogo */
.dialogo {
  border: 1px solid var(--rule-strong); border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 32px));
  background: var(--card); color: var(--ink); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  /* Que nada empuje el diálogo a los lados y que el scroll no se pase a la página de atrás (en celular «se movía») */
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.dialogo .cuerpo > * { min-width: 0; }
/* Con un diálogo abierto, la página de atrás no se desplaza */
html:has(dialog[open]), html:has(dialog[open]) body { overflow: hidden; }
.dialogo::backdrop { background: rgba(0,0,0,.45); }
.dialogo .cuerpo { padding: 20px; display: grid; gap: 14px; }
.dialogo dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.dialogo dt { color: var(--ink-2); font-weight: 600; }
.dialogo dd { margin: 0; overflow-wrap: anywhere; }
.caja { border: 1px solid var(--rule); border-radius: 10px; padding: 12px; display: grid; gap: 10px; background: var(--paper-sunk); }
.clave-mostrada { font-family: ui-monospace, Menlo, monospace; font-size: 20px; font-weight: 700; letter-spacing: .08em; }
.aviso { border-left: 3px solid var(--warn); padding: 8px 12px; background: var(--paper-sunk); border-radius: 0 8px 8px 0; font-size: 13px; }
.fila-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 13px; opacity: 0; transition: .2s; z-index: 100; pointer-events: none;
  max-width: calc(100vw - 32px);
}
@media (max-width: 899px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.vacio { padding: 32px; text-align: center; color: var(--ink-2); }

/* Entrevistas: flujo en pasos */
.flujo { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.flujo-paso {
  font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; flex: 1 1 180px; min-width: 0;
}
.flujo-paso:hover { border-color: var(--ink-3); }
.flujo-paso.activo { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.flujo-paso.secundario { flex: 0 1 190px; }
.flujo-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--paper-sunk); border: 1px solid var(--rule-strong); font-weight: 800; font-size: 13px;
}
.flujo-paso.activo .flujo-num { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.flujo-paso.secundario .flujo-num { background: none; border: 0; font-size: 18px; }
.flujo-txt { display: grid; line-height: 1.25; min-width: 0; }
.flujo-txt strong { font-size: 13px; }
.flujo-cifra { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.flujo-cifra small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; line-height: 1.3; }
.flujo-flecha { align-self: center; color: var(--ink-3); font-size: 18px; }
.txt-tarde { color: var(--warn); }

.grupos-ent { display: grid; gap: 14px; }
.estado-ent { gap: 0; padding: 0; overflow: hidden; }
.estado-ent-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--paper-sunk); border-bottom: 1px solid var(--rule); }
.estado-ent-cab h3 { font-size: 16px; }
.estado-ent-cab .persona-dias { margin-left: auto; }
.grupo-ent { padding: 12px 16px 4px 28px; border-top: 1px solid var(--rule); position: relative; }
.estado-ent-cab + .grupo-ent { border-top: 0; }
.grupo-ent::before { content: ""; position: absolute; left: 16px; top: 16px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--rule-strong); }
.grupo-ent h4 { margin: 0; font-size: 14px; }
.grupo-ent .tarjeta-cab { align-items: center; }
@media (max-width: 720px) { .grupo-ent { padding-left: 24px; } .grupo-ent::before { left: 12px; } }
.personas { list-style: none; margin: 0; padding: 0; display: grid; }
.persona {
  display: grid; grid-template-columns: minmax(180px, 1.6fr) minmax(140px, auto) minmax(110px, auto) auto; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--rule);
}
.persona-info { cursor: pointer; min-width: 0; }
.persona-info:hover .persona-nombre { text-decoration: underline; }
.persona-nombre { font-weight: 600; overflow-wrap: anywhere; }
.persona-tel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-dias { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.persona-dias.tarde { color: var(--warn); font-weight: 700; }
.persona-dias.tarde::before { content: "⚠️ "; }
.persona-acciones { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.etiqueta { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; vertical-align: 1px; }
.etiqueta.nueva { background: var(--info); color: #fff; }

/* Cumpleaños */
.cumples { list-style: none; margin: 0; padding: 0; display: grid; }
.cumple { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
.cumple > .cumple-acciones { grid-column: 2 / -1; gap: 6px; }
.cumple-info { cursor: pointer; }
.cumple-info:hover .persona-nombre { text-decoration: underline; }
td .cumple-acciones { flex-wrap: nowrap; gap: 6px; }
.cumple:first-child { border-top: 0; }
.cumple-dia { width: 44px; height: 44px; border-radius: 12px; background: var(--paper-sunk); border: 1px solid var(--rule); display: grid; place-items: center; align-content: center; line-height: 1.05; font-size: 20px; }
.cumple-dia strong { font-size: 17px; }
.cumple-dia span { font-size: 10px; text-transform: uppercase; color: var(--ink-2); letter-spacing: .05em; }
.cumple-info { min-width: 0; }
@media (max-width: 640px) { .cumple { grid-template-columns: 44px minmax(0, 1fr); } .cumple > .chip { grid-column: 2; justify-self: start; } td .cumple-acciones { flex-wrap: wrap; } }
@media (max-width: 720px) {
  .flujo-flecha { display: none; }
  .flujo-paso { flex: 1 1 calc(50% - 8px); padding: 10px 12px; }
  .flujo-paso.secundario { flex: 1 1 calc(50% - 8px); }
  .flujo-cifra { font-size: 20px; }
  .persona { grid-template-columns: 1fr auto; row-gap: 4px; }
  .persona-tel { grid-column: 1; }
  .persona-dias { grid-column: 2; grid-row: 1; text-align: right; }
  .persona-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 640px) {
  .barra, .contenido { padding-left: 16px; padding-right: 16px; }
  .rejilla { grid-template-columns: 1fr; }
  .alcance { border-left: 0; padding-left: 0; }
  #usuario-correo { display: none; }
  .dialogo dl { grid-template-columns: 1fr; }
  .dialogo dt { margin-top: 6px; }
  .kpi .val { font-size: 24px; }
}

/* Movimientos de la estructura */
.mov-detalle dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.mov-detalle dt { color: var(--ink-2); font-weight: 600; }
.mov-detalle dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .mov-detalle dl { grid-template-columns: 1fr; } }
.mov-revision { display: flex; gap: 16px; align-items: flex-start; }
.mov-revision .mov-detalle { flex: 1; min-width: 0; }
.mov-foto { width: 112px; height: 112px; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper-sunk); flex: none; }
@media (max-width: 640px) { .mov-revision { flex-direction: column; } }

/* Estructura: subpestañas e inducción */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.subtabs button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); cursor: pointer; }
.subtabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.subtabs button[aria-selected="true"] .muted { color: inherit; opacity: .7; }
.sesiones { display: inline-flex; gap: 3px; vertical-align: middle; }
.ses { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--rule); display: inline-block; }
.ses.si { background: var(--good); border-color: var(--good); }

.sel-nombrar, #sel-todas { width: 18px; height: 18px; padding: 0; }

/* ================= Navegación ================= */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.principal { min-width: 0; }
.lateral { display: none; }

/* Avatar con aro dorado */
.avatar {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  width: 44px; height: 44px; font-size: 15px; font-weight: 800; letter-spacing: .02em;
  background: #000; color: var(--oro);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--oro);
}
.avatar-chico { width: 32px; height: 32px; font-size: 12px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--oro); }
.avatar-grande { width: 96px; height: 96px; font-size: 34px; box-shadow: 0 0 0 5px var(--card), 0 0 0 8px var(--oro); }
.avatar-boton { background: none; border: 0; padding: 4px; cursor: pointer; border-radius: 50%; }
.avatar-boton:focus-visible, .nav-abajo button:focus-visible, .nav-lateral > div > *:focus-visible,
.app:focus-visible, .hoy button:focus-visible, .yo-mini:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* Celular: barra de abajo */
.nav-abajo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--rule);
}
.nav-abajo button {
  position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--ink-3);
  background: none; border: 0; padding: 2px 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nav-abajo button > span:not(.badge) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav-abajo .ico { width: 24px; height: 24px; padding: 4px 16px; box-sizing: content-box; border-radius: 999px; transition: background-color .2s; }
.nav-abajo button[aria-current] { color: var(--ink); }
.nav-abajo button[aria-current] .ico { background: var(--oro); color: #000; }
.nav-abajo .badge, .app-ico .badge, .nav-lateral .badge {
  min-width: 18px; height: 18px; line-height: 16px; padding: 0 5px; font-size: 10px; font-weight: 800;
  background: #e5484d; color: #fff; border: 1.5px solid var(--paper); border-radius: 999px;
}
.nav-abajo .badge { position: absolute; top: -2px; left: calc(50% + 6px); }
.contenido { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* Computadora: navegación a la izquierda */
@media (min-width: 900px) {
  #vista-app { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .nav-abajo, .avatar-boton { display: none; }
  .barra .barra-logo { display: none !important; }
  .contenido { padding-bottom: 40px; }
  .lateral {
    display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: 20px 14px 16px; border-right: 1px solid var(--rule); background: var(--paper); z-index: 11;
  }
  .lateral-logo { padding: 2px 10px 6px; }
  .nav-lateral { display: grid; gap: 8px; }
  .nav-grupo { display: grid; gap: 2px; }
  .nav-grupo-t { font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 0 12px 4px; }
  .nav-lateral button, .nav-lateral a {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 12px; border-radius: 12px;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); background: none; border: 0;
    text-align: left; cursor: pointer; text-decoration: none;
  }
  .nav-lateral button { padding: 6px 12px; }
  .nav-lateral a { font-size: 13px; font-weight: 500; }
  .nav-lateral a .ico { width: 18px; height: 18px; margin: 0 2px; }
  .nav-lateral button:hover, .nav-lateral a:hover { background: var(--paper-sunk); color: var(--ink); }
  .nav-lateral button[aria-current] { background: var(--oro-suave); color: var(--ink); font-weight: 700; }
  .nav-lateral button[aria-current] .ico { color: var(--oro-tinta); }
  .nav-lateral .badge { margin-left: auto; }
  .lateral-pie { margin-top: auto; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rule); }
  .yo-mini { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
  .yo-mini:hover { background: var(--paper-sunk); }
  .yo-mini-txt { display: grid; min-width: 0; line-height: 1.3; }
  .yo-mini-txt strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .yo-mini-txt span { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 899px) {
  .barra { padding-top: 10px; padding-bottom: 10px; flex-wrap: nowrap; }
  .barra .alcance { display: none; }
  .barra .logo { height: 24px; }
  .barra-der { gap: 10px; flex-wrap: nowrap; }
  #filtro-estado { max-width: 52vw; min-height: 34px; font-size: 13px; padding: 6px 8px; }
}

/* Hoja "Más" */
.hoja {
  border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88vh;
  border-radius: 26px 26px 0 0; background: var(--card); color: var(--ink);
}
.hoja::backdrop { background: rgba(0, 0, 0, .42); }
.hoja[open] { animation: hoja-sube .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes hoja-sube { from { transform: translateY(40%); opacity: .4; } }
@media (min-width: 900px) {
  .hoja { margin: auto; max-width: 440px; border-radius: 26px; }
  .hoja[open] { animation-name: hoja-aparece; }
  @keyframes hoja-aparece { from { transform: scale(.96); opacity: 0; } }
  .hoja-asa { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hoja[open] { animation: none; } }
.hoja-cuerpo { padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 20px; }
.hoja-asa { width: 40px; height: 5px; border-radius: 3px; background: var(--rule-strong); justify-self: center; }
.hoja-yo { display: flex; align-items: center; gap: 14px; }
.hoja-yo > span:last-child { display: grid; line-height: 1.35; min-width: 0; }
.hoja-yo strong { font-size: 16px; }
.hoja-rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; }
.hoja-enlaces { display: grid; }
.hoja-enlaces a { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.hoja-enlaces a .ico { width: 18px; height: 18px; color: var(--ink-3); }
.hoja-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hoja-pie .btn { display: inline-flex; align-items: center; gap: 6px; }
.hoja-pie .ico { width: 16px; height: 16px; }

/* Ícono tipo app (Inicio y hoja "Más") */
.app {
  display: grid; justify-items: center; align-content: start; gap: 7px; min-width: 0;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.app-ico {
  position: relative; width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center;
  font-size: 28px; line-height: 1; transition: transform .15s;
}
.app:active .app-ico, .hoy button:active { transform: scale(.95); }
.app-ico .badge { position: absolute; top: -5px; right: -5px; }
.app-ico .ico { width: 26px; height: 26px; }
.tinta-lila { background: var(--t-lila); } .tinta-menta { background: var(--t-menta); } .tinta-cielo { background: var(--t-cielo); }
.tinta-durazno { background: var(--t-durazno); } .tinta-rosa { background: var(--t-rosa); } .tinta-oro { background: var(--t-oro); }
.app-voluntarios .app-ico, .app-entrevistas .app-ico { background: var(--t-lila); }
.app-resumen .app-ico, .app-municipios .app-ico, .app-importar .app-ico { background: var(--t-cielo); }
.app-cumpleanos .app-ico { background: var(--t-durazno); }
.app-movimientos .app-ico, .app-equipo .app-ico { background: var(--t-menta); }
.app-usuarios .app-ico, .app-bitacora .app-ico, .app-guia .app-ico { background: var(--t-oro); }

/* ================= Inicio: perfil ================= */
#tab-inicio { width: 100%; gap: 26px; }
/* Computadora grande: aprovecha todo el ancho; pendientes y "más activos" lado a lado */
@media (min-width: 1100px) {
  #tab-inicio:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 28px; }
  #tab-inicio > .perfil, #tab-inicio > .recuerda, #tab-inicio > .solo-celular, #tab-inicio > .buscador-inicio { grid-column: 1 / -1; }
  #tab-inicio:has(#inicio-activos[hidden]) > .bloque { grid-column: 1 / -1; }
}
.perfil { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 28px; padding: 0 22px 22px; overflow: hidden; }
.perfil-portada {
  height: 104px; margin: 0 -22px;
  background:
    radial-gradient(circle at 12% 135%, #ffd68a 0 34%, transparent 35%),
    radial-gradient(circle at 92% -30%, #ffe2a8 0 40%, transparent 41%),
    radial-gradient(circle at 70% 160%, #f39c1f 0 30%, transparent 31%),
    var(--oro);
}
.perfil-fila { display: flex; align-items: flex-start; gap: 18px; margin-top: -48px; }
.perfil-cifras { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 58px 0 0; min-width: 0; }
.cifra { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; padding: 6px 2px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; cursor: pointer; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.cifra:hover, .cifra:focus-visible { background: var(--paper-sunk); }
.cifra:active { transform: scale(.97); }
.cifra-n { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cifra-t { font-size: 12px; color: var(--ink-2); line-height: 1.25; }
.perfil-saludo { margin: 16px 0 0; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.perfil-nombre { font-size: 30px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.perfil-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pchip { padding: 5px 12px; border-radius: 999px; background: var(--paper-sunk); border: 1px solid var(--rule); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pchip-oro { background: var(--oro-suave); border-color: transparent; color: var(--oro-tinta); }

.bloque { display: grid; gap: 12px; }
/* Foto del Inicio: se toca para cambiarla; sin foto, una camarita y el recordatorio */
.perfil-foto-grande { border-radius: 50%; }
.perfil-camara { position: absolute; right: 2px; bottom: 4px; width: 30px; height: 30px; border-radius: 50%; display: none; place-items: center; font-size: 15px; background: var(--card); box-shadow: 0 0 0 2px var(--oro), 0 4px 10px rgba(0,0,0,.18); }
.perfil-foto-grande.sin-foto .perfil-camara { display: grid; }
.perfil-sin-foto { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--oro); border-radius: 18px; background: var(--oro-suave); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.perfil-sin-foto[hidden] { display: none; }
.perfil-sin-foto > span:first-child { font-size: 22px; }
.perfil-sin-foto strong { display: block; font-size: 14px; }
.perfil-sin-foto-ir { margin-left: auto; font-weight: 800; color: var(--oro-tinta); white-space: nowrap; }
/* Buscador del Inicio */
.buscador-caja { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 54px; border: 1px solid var(--rule); border-radius: 18px; background: var(--card); cursor: text; transition: border-color .15s, box-shadow .15s; }
.buscador-caja:focus-within { border-color: var(--oro); box-shadow: 0 0 0 4px var(--oro-suave); }
.buscador-caja input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; box-shadow: none; padding: 14px 0; font: inherit; font-size: 15px; color: inherit; }
.buscador-res { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--rule); border-radius: 18px; background: var(--card); }
.buscador-res button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.buscador-res button:hover, .buscador-res button:focus-visible { background: var(--paper-sunk); }
.buscador-res .avatar-chico { flex: none; }
.buscador-todos { justify-content: center; font-weight: 700; color: var(--oro-tinta) !important; }
.buscador-nada { padding: 12px; color: var(--ink-2); font-size: 13px; }
.hoy-resumen { font-size: 12px; font-weight: 700; color: var(--oro-tinta); background: var(--oro-suave); padding: 4px 10px; border-radius: 999px; }
.rapida-oro { background: var(--oro-suave); border-color: transparent; }
.bloque-t { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }

.hoy { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hoy button {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px;
  border-radius: 20px; background: var(--card); border: 1px solid var(--rule); color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s;
}
.hoy button:hover { border-color: var(--rule-strong); }
.hoy-ico { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; font-size: 21px; flex: none; }
.hoy-txt { display: grid; gap: 1px; flex: 1; min-width: 0; }
.hoy-txt strong { font-size: 14px; line-height: 1.3; }
.hoy-txt span { font-size: 12px; color: var(--ink-2); }
.hoy-n { min-width: 34px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.hoy-vacio { margin: 0; padding: 16px 18px; border-radius: 20px; background: var(--t-menta); font-weight: 600; display: flex; gap: 10px; align-items: center; }
.hoy-vacio.muted { background: var(--paper-sunk); font-weight: 500; }

.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 18px 8px; }

.recuerda {
  display: grid; gap: 16px; padding: 22px; border-radius: 24px; background: #000; color: #fff;
  border: 1px solid #000;
}
:root[data-theme="dark"] .recuerda { border-color: var(--rule-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .recuerda { border-color: var(--rule-strong); } }
.recuerda strong { font-size: 17px; letter-spacing: -0.02em; line-height: 1.3; display: block; }
.recuerda p { margin: 6px 0 0; color: #c9c9c9; font-size: 13px; }
.recuerda-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.recuerda .btn { min-height: 42px; padding: 10px 16px; }
.recuerda-oro { background: var(--oro); border-color: var(--oro); color: #000; }
.recuerda-sec { background: transparent; border-color: #444; color: #fff; }
.recuerda-sec:hover { border-color: #888; }

@media (max-width: 480px) {
  .perfil { padding: 0 16px 18px; border-radius: 24px; }
  .perfil-portada { margin: 0 -16px; height: 92px; }
  .perfil-fila { gap: 12px; }
  .avatar-grande { width: 84px; height: 84px; font-size: 30px; }
  .perfil-cifras dd { font-size: 19px; }
  .perfil-cifras dt { font-size: 11px; }
  .perfil-nombre { font-size: 26px; }
  .recuerda-botones .btn { flex: 1 1 100%; }
}
/* La foto siempre en círculo perfecto, aunque el archivo no sea cuadrado */
.avatar { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.avatar.con-foto { background: var(--paper-sunk); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

/* Botón de la foto (abre el editor) */
.perfil-foto { position: relative; flex: none; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
.perfil-foto:focus-visible { outline: 2px solid var(--info); outline-offset: 6px; }
.enlace-boton { font: inherit; font-size: 12px; font-weight: 700; color: var(--oro-tinta); background: none; border: 0; padding: 2px 0 0; cursor: pointer; justify-self: start; }

/* Editor de foto */
.editor-foto { justify-items: stretch; }
.recorte {
  position: relative; width: min(280px, 72vw); aspect-ratio: 1 / 1; margin: 4px auto; border-radius: 50%; overflow: hidden;
  background: var(--paper-sunk); touch-action: none; cursor: grab; user-select: none;
  box-shadow: 0 0 0 4px var(--card), 0 0 0 7px var(--oro);
}
.recorte.arrastrando { cursor: grabbing; }
.recorte img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.recorte-zoom { display: grid; gap: 6px; }
.recorte-zoom input { accent-color: var(--oro); padding: 0; min-height: 28px; border: 0; background: none; }
.recorte-acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.recorte-elegir { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.recorte-elegir .ico { width: 16px; height: 16px; }

/* ================= Mi equipo ================= */
#tab-equipo { max-width: 1100px; margin: 0 auto; width: 100%; gap: 22px; }
.equipo-cab h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.equipo-cab p { margin: 4px 0 0; }
.equipo-filtros { display: grid; gap: 10px; }
.equipo-filtros input { min-height: 44px; border-radius: 999px; padding: 10px 18px; font-size: 15px; }
.equipo-filtros .subtabs { margin: 0; }
.equipo-bloque { display: grid; gap: 12px; }
.equipo-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.miembro {
  width: 100%; height: 100%; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px;
  background: var(--card); border: 1px solid var(--rule); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.miembro:hover { border-color: var(--rule-strong); }
.miembro:active { transform: scale(.98); }
.miembro:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.miembro-txt { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.miembro-txt strong { font-size: 15px; overflow-wrap: anywhere; }
.miembro-txt > span { font-size: 12px; color: var(--ink-2); }
.miembro-txt .miembro-lugar { font-weight: 700; color: var(--ink); }
.miembro-txt .miembro-estado { margin-top: 6px; }

/* Aro de avance: se llena en dorado según las sesiones; completo cuando ya está nombrada */
.aro {
  --p: 0%; flex: none; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; padding: 4px;
  background: conic-gradient(var(--oro) var(--p), var(--rule-strong) 0);
}
.aro .avatar { width: 100%; height: 100%; font-size: 18px; box-shadow: 0 0 0 2.5px var(--card); background: var(--paper-sunk); color: var(--ink-2); }
.aro-nombrada { background: var(--oro); }
.aro-nombrada .avatar { background: #000; color: var(--oro); }
.aro .avatar > span { position: relative; }
.aro-grande { width: 132px; height: 132px; padding: 5px; }
.aro-grande .avatar { font-size: 40px; box-shadow: 0 0 0 4px var(--card); }

.sello { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; background: var(--oro-suave); color: var(--oro-tinta); }
.sello-ind { background: var(--paper-sunk); color: var(--ink-2); border: 1px solid var(--rule); }

/* Ficha de una persona */
.ficha { text-align: center; }
.ficha-cerrar { display: flex; justify-content: flex-end; margin-bottom: -10px; }
.ficha-cab { display: grid; justify-items: center; gap: 6px; }
.ficha-cab h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; }
.ficha-cab p { margin: 0; }
.ficha-ind { display: grid; gap: 6px; justify-items: center; padding: 12px; border-radius: 16px; background: var(--paper-sunk); }
.ficha-contacto { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ficha-contacto .btn { min-width: 120px; min-height: 42px; }
.ficha-datos { text-align: left; }
.dialogo .ficha-datos { display: grid; grid-template-columns: 90px 1fr; }

@media (max-width: 640px) {
  .equipo-lista { grid-template-columns: 1fr; gap: 8px; }
  .miembro { padding: 12px; border-radius: 20px; }
  .aro { width: 56px; height: 56px; }
  .aro-grande { width: 116px; height: 116px; }
}
.dialogo .ficha-datos dt { margin-top: 0; }

/* Ficha: foto e inducción */
.ficha-foto { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.recorte-quitar { justify-self: center; color: var(--bad); }
.ind-editor { display: grid; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid var(--rule); background: var(--card); text-align: left; }
.ind-sesiones { display: flex; flex-wrap: wrap; gap: 8px; }
.ind-ses { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--rule-strong);
  background: var(--card); color: var(--ink-2); cursor: pointer; min-height: 38px; }
.ind-ses[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: #000; }
.ind-ses[aria-pressed="true"]::before { content: '✓ '; }
.ind-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .ind-fila { grid-template-columns: 1fr; } }

/* ================= Asistencia ================= */
#tab-asistencia { max-width: 900px; margin: 0 auto; width: 100%; }
.eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.evento { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 14px; border-radius: 22px; background: var(--card); border: 1px solid var(--rule); }
.ev-fecha { width: 64px; height: 64px; border-radius: 18px; background: var(--oro-suave); display: grid; place-content: center; text-align: center; line-height: 1; }
.ev-fecha strong { font-size: 24px; font-weight: 800; }
.ev-fecha span { font-size: 12px; font-weight: 700; color: var(--oro-tinta); text-transform: capitalize; margin-top: 3px; }
.ev-info { display: grid; gap: 3px; min-width: 0; }
.ev-info strong { font-size: 15px; overflow-wrap: anywhere; }
.chip-ev { justify-self: start; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--t-lila); }
.chip-ev.ev-induccion { background: var(--t-menta); } .chip-ev.ev-actividad { background: var(--t-durazno); }
.ev-num { text-align: center; display: grid; line-height: 1.1; }
.ev-num strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ev-num span { font-size: 11px; color: var(--ink-2); }
.ev-acciones { grid-column: 2 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 520px) { .evento { grid-template-columns: 56px minmax(0, 1fr) auto; } .ev-fecha { width: 56px; height: 56px; } .ev-acciones { grid-column: 1 / -1; } }

/* Ranking */
.podio { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; text-align: center; margin: 6px 0 4px; }
.podio-lugar { display: grid; justify-items: center; gap: 4px; padding: 14px 6px 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--rule); position: relative; min-width: 0; }
.podio-lugar strong { font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.podio-1 { padding-top: 22px; padding-bottom: 26px; border-color: var(--oro); box-shadow: 0 18px 40px -24px rgba(247,179,62,.8); }
.aro-podio { width: 64px; height: 64px; --p: 100%; background: #cfd3d8; }
.podio-1 .aro-podio { width: 78px; height: 78px; background: var(--oro); }
.podio-3 .aro-podio { background: #d8a37a; }
.aro-podio .avatar { background: #000; color: var(--oro); font-size: 20px; }
.podio-medalla { position: absolute; top: 8px; left: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; background: var(--paper-sunk); }
.podio-1 .podio-medalla { background: var(--oro); color: #000; }
.podio-pts { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ranking li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); }
.rk-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--paper-sunk); flex: none; }
.rk-1 { background: var(--oro); color: #000; } .rk-2 { background: #cfd3d8; color: #000; } .rk-3 { background: #d8a37a; color: #000; }
.rk-info { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.rk-info strong { font-size: 14px; overflow-wrap: anywhere; }
.rk-pts { display: grid; text-align: right; line-height: 1.2; }
.rk-pts strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.nivel-oro { background: var(--oro); color: #000; } .nivel-plata { background: #e3e6ea; color: #333; } .nivel-bronce { background: #f1d3bc; color: #6b3a14; }
.ranking-mini li { padding: 8px 12px; }
.ficha-actividad { margin: 0; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 14px; }

/* Lista de asistentes */
.as-manual { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--paper-sunk); }
.as-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.as-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); }
.as-lista li > span { display: grid; min-width: 0; }
/* Ajustes de actividad (regional y nacional) */

.podio-lugar .enlace-boton { justify-self: center; color: var(--ink-3); }

/* Celular y tableta: campos de 16 px (si son más chicos, iPhone hace zoom al tocarlos y la pantalla se descuadra).
   Con !important para ganarle a las reglas más específicas (p. ej. el buscador del Inicio) y a los estilos en línea. */
@media (max-width: 899px), (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  .chip-sel { font-size: 16px; min-height: 34px; }
}

/* Celular: la lista de voluntarios se ve como tarjetas en lugar de una tabla ancha */
@media (max-width: 640px) {
  .tabla-wrap:has(> .tabla-vol) { overflow: visible; }
  .tabla-vol, .tabla-vol tbody { display: block; }
  .tabla-vol thead { display: none; }
  .tabla-vol tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; position: relative; padding: 12px 12px 12px 42px; border-bottom: 1px solid var(--rule); }
  .tabla-vol tr:last-child { border-bottom: 0; }
  .tabla-vol td { padding: 0; border: 0; min-width: 0; max-width: none; }
  .tabla-vol td.vacio { padding: 8px 0; flex-basis: 100%; }
  .tabla-vol td.c-sel { position: absolute; left: 14px; top: 13px; }
  .tabla-vol td.c-nombre { flex: 1 1 100%; padding-right: 72px; font-size: 15px; }
  .tabla-vol td.c-copiar { position: absolute; right: 12px; top: 10px; }
  .tabla-vol td.c-tel { flex: 1 1 100%; }
  .tabla-vol td.c-estado, .tabla-vol td.c-mun, .tabla-vol td.c-esc, .tabla-vol td.c-alta { color: var(--ink-2); font-size: 13px; }
  .tabla-vol td.c-mun + td.c-esc::before, .tabla-vol td.c-estado + td.c-mun::before { content: '·'; margin-right: 10px; }
  .tabla-vol td.c-alta { flex-basis: 100%; font-size: 12px; }
  .tabla-vol td.c-alta::before { content: 'Alta: '; }
  .tabla-vol td .clamp2 { display: inline; }
  .tabla-vol td.c-estatus, .tabla-vol td.c-ent { margin-top: 6px; flex: 1 1 40%; }
  .tabla-vol td.c-estatus .chip-sel, .tabla-vol td.c-ent .chip-sel { width: 100%; text-overflow: ellipsis; }
}
.as-lista .rk-pts strong { white-space: nowrap; }

/* Datos por revisar */
#revisar details.tarjeta > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; }
#revisar details.tarjeta > summary::-webkit-details-marker { display: none; }
#revisar details.tarjeta > summary::before { content: '▸'; color: var(--ink-3); }
#revisar details[open].tarjeta > summary::before { content: '▾'; }
.rev-lista { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.rev-lista ul { padding-left: 0; list-style: none; display: grid; gap: 2px; border-left: 2px solid var(--line, #ddd); padding-left: 10px; }
.rev-lista .enlace-boton { text-align: left; }

.kpi-origen { display: grid; gap: 2px; margin: 6px 0 2px; font-size: 14px; }
.kpi-origen b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 4px; }
.rev-orden { color: var(--ink-3); font-size: 13px; margin: 8px 2px 0; }
#revisar details.tarjeta { padding-top: 12px; padding-bottom: 12px; }
@media (min-width: 900px) { .bloque.solo-celular { display: none; } } /* en computadora estos atajos ya están en el menú lateral */
#revisar details.tarjeta:not([open]) { display: block; }
#revisar details.tarjeta { margin-bottom: 8px; }
/* Celular: filtros a todo lo ancho, el buscador arriba y los demás de dos en dos */
@media (max-width: 640px) {
  .filtros { display: grid; grid-template-columns: 1fr 1fr; }
  .filtros input[type="search"] { max-width: none; grid-column: 1 / -1; }
  .filtros select { width: 100%; min-width: 0; }
}

/* Cuenta: primera vez, contraseña y app en el celular */
.dialogo-cuenta .cuerpo { display: grid; gap: 14px; max-width: 520px; }
.cuenta-hola { display: flex; gap: 14px; align-items: flex-start; }
.cuenta-hola img { border-radius: 14px; flex: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.cuenta-hola h2 { margin: 0 0 4px; font-size: 19px; }
.cuenta-hola p { margin: 0; }
.clave-reglas { margin: -4px 0 0; padding-left: 0; list-style: none; display: grid; gap: 2px; }
.clave-reglas li::before { content: '○ '; }
.clave-reglas li.ok { color: var(--good); }
.clave-reglas li.ok::before { content: '✓ '; }
.chk { display: flex; align-items: center; gap: 8px; }
.chk input { width: auto; min-height: 0; }
.app-paso { border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; }
.app-paso h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.app-paso h3 span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 13px; }
.app-pasos { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.app-hecho { margin: 0; color: var(--good); font-weight: 600; }
.ico-ios { display: inline-block; border: 1.5px solid currentColor; border-radius: 4px; padding: 0 4px; font-size: 12px; line-height: 1.4; }
.hoja-cuenta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hoja-cuenta .btn { white-space: normal; }
.lateral-cuenta { display: flex; justify-content: space-between; gap: 6px; padding: 0 6px; font-size: 12px; }
.form-resp { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 6px 12px; margin: 6px 0 0; font-size: 14px; }
.form-resp dt { color: var(--ink-3); font-weight: 600; }
.form-resp dd { margin: 0; white-space: pre-wrap; }
@media (max-width: 520px) { .form-resp { grid-template-columns: 1fr; } .form-resp dd { margin-bottom: 6px; } }
.don-destinos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .don-destinos .pchip { cursor: pointer; border: 0; font: inherit; }

/* Semáforo de presidencias (Por entrevistar) */
.semaforo h3 { margin: 0; }
.semaforo-ok { font-size: 14px; }
.semaforo-leyenda { display: flex; gap: 14px; flex-wrap: wrap; }
.semaforo-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.sem { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.sem.verde { background: var(--good); } .sem.ambar { background: var(--warn); } .sem.rojo { background: var(--bad); }
.semaforo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.semaforo-fila { display: grid; grid-template-columns: 10px minmax(0, 1fr) 110px 120px 170px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.semaforo-fila.rojo { border-color: color-mix(in oklab, var(--bad) 35%, var(--rule)); background: color-mix(in oklab, var(--bad) 6%, var(--paper)); }
.sem-lugar { display: grid; min-width: 0; } .sem-lugar > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sem-n { display: grid; text-align: center; line-height: 1.1; } .sem-n strong { font-size: 18px; }
.sem-dias { font-weight: 700; font-size: 13px; text-align: right; white-space: nowrap; }
.sem-accion { display: flex; justify-content: flex-end; }
.sem-dias.rojo { color: var(--bad); } .sem-dias.ambar { color: var(--warn); } .sem-dias.verde { color: var(--good); }
@media (max-width: 640px) {
  .semaforo-fila { grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 10px; }
  .sem-n strong { font-size: 16px; }
  .sem-accion { grid-column: 2 / -1; justify-content: flex-start; }
}

.semaforo-cab { background: none !important; border: 0 !important; padding: 0 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.semaforo-cab .sem { visibility: hidden; }
.semaforo-cab .sem-n, .semaforo-cab .sem-dias { font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
@media (max-width: 640px) { .semaforo-cab { display: none; } }

/* Admisiones por presidencia */
.encabezado .seg-vista { display: inline-flex; padding: 3px; background: var(--paper-sunk); border-radius: 999px; gap: 2px; align-self: flex-start; }
.seg-vista button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; color: var(--ink-2); cursor: pointer; }
.seg-vista button.activo { background: var(--ink); color: var(--paper); }
.rangos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rango { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; text-align: left; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--card); cursor: pointer; font: inherit; color: var(--ink); }
.rango span { font-size: 15px; } .rango span strong { font-size: 22px; letter-spacing: -.02em; }
.rango small { grid-column: 2; color: var(--ink-3); font-size: 12px; }
.rango.activo { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rango.rojo .sem, .rango.ambar .sem, .rango.verde .sem { width: 12px; height: 12px; }
.pcards { display: grid; gap: 12px; }
.pcard { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--good); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 12px; }
.pcard.rojo { border-left-color: var(--bad); } .pcard.ambar { border-left-color: var(--warn); }
.pcard-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pcard-cab h3 { margin: 0; font-size: 18px; }
.pcard-lugar { display: grid; min-width: 0; }
.pcard-dias { display: grid; text-align: right; line-height: 1.2; }
.pcard-dias strong { font-size: 17px; white-space: nowrap; }
.pcard-dias.rojo strong { color: var(--bad); } .pcard-dias.ambar strong { color: var(--warn); } .pcard-dias.verde strong { color: var(--good); }
.pcard-cifras { display: flex; flex-wrap: wrap; gap: 8px; }
.pcifra { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--paper-sunk); }
.pcifra strong { font-size: 15px; }
.pcard .acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pcard-personas summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.pcard-personas[open] summary { margin-bottom: 8px; }
@media (max-width: 720px) {
  .rangos { gap: 6px; }
  .rango { grid-template-columns: 1fr; padding: 10px; gap: 2px; }
  .rango .sem { display: none; }
  .rango span { font-size: 12px; } .rango span strong { display: block; font-size: 20px; }
  .rango small { grid-column: 1; font-size: 10.5px; }
  .rango.rojo span strong { color: var(--bad); } .rango.ambar span strong { color: var(--warn); } .rango.verde span strong { color: var(--good); }
  .pcard-cab { grid-template-columns: auto minmax(0, 1fr); }
  .pcard-dias { grid-column: 2; text-align: left; }
}

/* Grupos al dar de alta */
.mov-grupos { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; margin: 0; }
.mov-grupos legend { font-weight: 700; padding: 0 6px; }
.mov-grupos label { display: flex; gap: 8px; align-items: center; font-weight: 500; }

/* Tutorial */
#tutorial { position: fixed; inset: 0; z-index: 1000; }
#tutorial.centro { background: rgba(14,14,13,.55); }
.tut-luz { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(14,14,13,.55); transition: all .25s ease; pointer-events: none; }
.tut-caja { position: fixed; background: var(--card); color: var(--ink); border-radius: 18px; padding: 18px 18px 14px; box-shadow: 0 20px 50px -10px rgba(0,0,0,.45); max-width: 340px; transition: left .25s ease, top .25s ease; }
#tutorial.centro .tut-caja { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 32px)); }
.tut-caja h3 { margin: 2px 0 6px; font-size: 19px; }
.tut-caja p { margin: 0 0 12px; line-height: 1.5; color: var(--ink-2); }
.tut-num { font-size: 11px !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-tinta) !important; margin: 0 !important; }
.tut-acciones { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tut-acciones span { display: inline-flex; gap: 6px; }
.lateral-logo, .barra-logo { cursor: pointer; }
/* Municipios/escuelas por estado */
details.nom-estado { display: block; padding: 14px 16px; }
details.nom-estado > summary { cursor: pointer; list-style: revert; }
details.nom-estado[open] > summary { margin-bottom: 12px; }
.nom-estado + .nom-estado { margin-top: 8px; }

/* Accesos · equipos municipales */
.equipos { display: grid; gap: 14px; }
.eq-resumen { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.eq-resumen strong { font-size: 18px; }
.eq-filtros { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.eq-filtros label { display: inline-flex; gap: 8px; align-items: center; }
.eq-filtros input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; }
.eq-filtros select { width: auto; max-width: 100%; }
.eq-mun { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--rule); }
.eq-mun-cab { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 4px; }
.eq-mun-cab h4 { margin: 0; font-size: 16px; flex: 1 1 160px; }
.eq-alinea { display: inline-flex !important; flex-wrap: nowrap; gap: 8px; align-items: center; }
.eq-alinea > span { white-space: nowrap; }
.eq-alinea select { max-width: 280px; }
.eq-fila { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.eq-fila:hover { background: var(--paper-sunk); }
.eq-fila.apagada { cursor: default; opacity: .75; }
.eq-fila input { width: 18px; height: 18px; }
.eq-quien { display: grid; gap: 2px; min-width: 0; }
.eq-quien .small { overflow-wrap: anywhere; }
.eq-barra { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule-strong); box-shadow: 0 12px 30px -12px rgba(0,0,0,.3); }
.eq-barra > span { margin-right: auto; }
@media (max-width: 640px) { .eq-fila { grid-template-columns: auto 1fr; } .eq-fila .chip { grid-column: 2; justify-self: start; } .eq-alinea { flex-wrap: wrap; } .eq-alinea select { max-width: 100%; } }

/* Asistencia · liga para mostrar el QR */
.lp-pasos { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }
.liga-pantalla input[readonly] { font-size: 13px; color: var(--ink-2); }
.login-card .enlace-boton { font-size: 13px; justify-self: center; }

/* Actividad · rankings por región, estado y municipio, y personas repetidas */
.rk-grupos { display: grid; gap: 4px; }
@media (min-width: 1100px) { .rk-grupos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 24px; } }
.rk-barra { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: var(--paper-sunk); overflow: hidden; }
.rk-barra i { display: block; height: 100%; border-radius: inherit; background: var(--oro, #f7b33e); }
.dup-grupo { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--rule); }
.dup-grupo .btn { justify-self: start; }
.dup-fila { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.dup-fila input { width: 18px; height: 18px; flex: none; }
.dup-fila > span { display: grid; min-width: 0; }
.rk-ajustar { display: inline-flex; gap: 6px; flex: none; }
.podio-ajustes { display: inline-flex; gap: 12px; justify-content: center; }
.as-quitadas { display: grid; gap: 4px; padding-top: 12px; border-top: 1px dashed var(--rule-strong); }
.deshecho > strong { text-decoration: line-through; color: var(--ink-3); }
.faltan { display: flex; flex-wrap: wrap; gap: 6px; }
.fila-grupo td { background: var(--paper-sunk); padding-top: 8px; padding-bottom: 8px; }

/* Selección nacional (+32) */
.sel-tarjeta { display: grid; gap: 10px; }
.sel-contacto a { font-weight: 600; }
.sel-horarios { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--paper-sunk); }
.sel-dia { display: grid; gap: 6px; }
.sel-dia > span { font-weight: 600; display: block; }
.sel-dia > span::first-letter, .sel-cita strong::first-letter { text-transform: uppercase; }
.sel-horas { display: flex; flex-wrap: wrap; gap: 6px; }
.sel-cita { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--oro-suave); }
.sel-cita strong { display: block; }
.sel-nota { margin: 0; color: var(--ink-2); }

/* Admisiones · horarios y entrevistas agendadas */
.cita-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--oro-suave); color: var(--oro-tinta); }
.cita-chip.hor { background: color-mix(in oklab, var(--info) 14%, transparent); color: var(--info); }
.cita-chip.pasada { background: var(--paper-sunk); color: var(--ink-3); }
.cita-horas { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cita-horas legend { font-size: 13px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.cita-horas label { display: inline-flex; cursor: pointer; }
.cita-horas input { position: absolute; opacity: 0; pointer-events: none; }
.cita-horas span { padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--rule-strong); font-size: 13px; font-weight: 600; }
.cita-horas input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cita-horas input:focus-visible + span { outline: 2px solid var(--focus, #387ec2); outline-offset: 2px; }

/* Admisiones · tablero de tiempos */
.tiempos-filtros { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.tiempos-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tiempos-kpis .kpi { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); }
.tiempos-kpis .kpi span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.tiempos-kpis .kpi strong { font-size: 28px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tiempos-kpis .kpi small { font-size: 12px; color: var(--ink-3); }
.tiempos-kpis strong.bien, .t-sem.bien { color: var(--good); }
.tiempos-kpis strong.medio, .t-sem.medio { color: var(--warn); }
.tiempos-kpis strong.mal, .t-sem.mal { color: var(--bad); }
.t-sem { font-weight: 700; white-space: nowrap; }
.tabla-tiempos td.num, .tabla-tiempos th.num { text-align: right; white-space: nowrap; }
.tabla-tiempos th, .tabla-tiempos td { padding-left: 10px; padding-right: 10px; }
.tabla-tiempos .sub-cita { display: block; }

/* Admisiones · proceso paso por paso (celular primero) */
.adm-etapas { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.adm-etapas::-webkit-scrollbar { display: none; }
.adm-etapa { scroll-snap-align: start; flex: 0 0 132px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; text-align: left; min-height: 96px;
  padding: 12px 14px; border-radius: 16px; border: 1px solid var(--rule); background: var(--card); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.adm-etapa:hover { border-color: var(--rule-strong); }
.adm-etapa:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.adm-etapa .adm-t { font-size: 12.5px; font-weight: 700; color: var(--ink-2); line-height: 1.25; }
.adm-etapa .adm-fila { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.adm-etapa strong { font-size: 26px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.adm-etapa small { font-size: 11px; font-weight: 800; color: var(--oro-tinta); background: var(--oro-suave); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.adm-etapa.activa { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.adm-etapa.activa .adm-t { color: var(--paper); opacity: .8; }
.adm-etapa.alerta:not(.activa) { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.adm-etapa.cierre { background: var(--paper-sunk); }
.adm-etapa.cierre.activa { background: var(--ink); }
.adm-sep { flex: 0 0 1px; align-self: stretch; background: var(--rule-strong); margin: 6px 2px; }
@media (min-width: 1000px) { .adm-etapas { display: grid; grid-template-columns: repeat(4, 1fr) 1px repeat(3, 1fr); overflow: visible; } .adm-etapa { min-width: 0; } .adm-sep { margin: 6px 0; } }
.adm-barra { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.adm-barra p { margin: 0; flex: 1 1 260px; }
.adm-barra input { flex: 0 1 320px; min-width: 0; width: 100%; }
.adm-aviso .btn { margin-left: 6px; }
.pc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.pc { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); }
.pc-urgente { border-color: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 18%, transparent); }
.pc-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pc-nombre { font: inherit; font-size: 16px; font-weight: 800; text-align: left; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.pc-nombre:hover { text-decoration: underline; }
.pc-espera { flex: none; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--paper-sunk); color: var(--ink-2); }
.pc-espera.tarde { background: color-mix(in oklab, var(--bad) 14%, transparent); color: var(--bad); }
.pc-datos { font-size: 13px; color: var(--ink-2); }
.pc-pasos { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pc-pasos li { height: 6px; border-radius: 999px; background: var(--rule-strong); position: relative; }
.pc-pasos li.hecho { background: var(--good); }
.pc-pasos li.no { background: var(--bad); }
.pc-pasos li span { position: absolute; top: 9px; left: 0; font-size: 10.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.pc-pasos li.hecho span { color: var(--ink-2); }
.pc-estado { margin: 14px 0 0; font-size: 14px; line-height: 1.45; }
.pc-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-acciones:empty { display: none; }
@media (max-width: 420px) { .pc-pasos li span { display: none; } .pc-estado { margin-top: 4px; } }
.dec-opciones { display: grid; gap: 8px; }
.dec-opciones .btn { display: grid; justify-items: start; gap: 2px; text-align: left; padding: 14px 16px; }
.dec-opciones small { font-weight: 500; font-size: 12px; opacity: .75; }
.proc-ficha { padding: 12px 14px; border-radius: 14px; background: var(--paper-sunk); display: grid; gap: 8px; }
.proc-ficha ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.proc-ficha li { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; font-size: 13px; }
.proc-ficha li::before { content: '○'; color: var(--ink-3); font-weight: 900; }
.proc-ficha li.hecho::before { content: '●'; color: var(--good); }
.proc-ficha li small { grid-column: 2; color: var(--ink-2); }
.sel-cargo { font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); }
.eq-estatal { background: color-mix(in oklab, var(--oro-suave) 50%, transparent); border-radius: 12px; padding-left: 10px; padding-right: 10px; }

/* ---------- Reuniones: invitación, modalidad y semáforo ---------- */
.ev-extra { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.ev-extra span { overflow-wrap: anywhere; }
.modo-ev, .inv-ev { border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.modo-ev { grid-template-columns: 1fr 1fr; }
.modo-ev legend, .inv-ev legend { font-weight: 700; font-size: 13px; padding: 0 4px; }
.modo-ev label { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: 1px solid var(--rule-strong); border-radius: 10px; cursor: pointer; font-weight: 600; min-width: 0; }
.modo-ev label:has(input:checked) { border-color: var(--oro); background: var(--oro-suave); color: var(--oro-tinta); }
.modo-ev input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.modo-ev label:has(input:focus-visible) { outline: 2px solid var(--info); outline-offset: 1px; }
.inv-casillas { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); margin-bottom: 8px; }
.inv-casillas label, .inv-toggle { display: flex; align-items: center; gap: 8px; font-weight: 500; flex-direction: row; }
.inv-casillas input, .inv-toggle input { width: 18px; height: 18px; flex: none; accent-color: var(--oro); }
#ev-inv-nota { margin: 0 0 8px; }
.inv-resumen { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--paper-sunk); overflow-wrap: anywhere; }
.inv-espera { color: var(--warn); font-weight: 600; }
#ir-texto { width: 100%; font: inherit; font-size: 14px; resize: vertical; }
.sem-punto { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--ink-3); }
.sem-verde .sem-punto { background: var(--good); } .sem-amarillo .sem-punto { background: var(--warn); } .sem-rojo .sem-punto { background: var(--bad); }
.reu-hero { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center; padding: 18px; border-radius: 16px; border: 1px solid var(--rule); border-left: 6px solid var(--ink-3); background: var(--card); margin: 12px 0; }
.reu-hero.sem-verde { border-left-color: var(--good); } .reu-hero.sem-amarillo { border-left-color: var(--warn); } .reu-hero.sem-rojo { border-left-color: var(--bad); }
.reu-hero .btn { grid-column: 1 / -1; justify-self: start; }
.reu-num { display: grid; justify-items: center; min-width: 76px; }
.reu-num strong { font-size: 40px; line-height: 1; }
.reu-hero.sem-verde .reu-num strong { color: var(--good); } .reu-hero.sem-amarillo .reu-num strong { color: var(--warn); } .reu-hero.sem-rojo .reu-num strong { color: var(--bad); }
.reu-num span { font-size: 11px; color: var(--ink-3); text-align: center; }
.reu-txt { display: grid; gap: 3px; min-width: 0; }
.reu-txt > strong { font-size: 17px; }
@media (min-width: 760px) { .reu-hero { grid-template-columns: auto 1fr auto; } .reu-hero .btn { grid-column: auto; } }
.reu-kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 12px 0; align-items: center; }
.reu-kpis > div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); }
.reu-kpis > div:last-child { border: 0; padding: 0; }
.reu-kpis strong { font-size: 26px; } .reu-kpis small { font-size: 15px; color: var(--ink-3); } .reu-kpis span { font-size: 13px; color: var(--ink-2); }
.reu-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.reu-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; min-width: 0; }
.reu-lista .rk-info { flex: 1; min-width: 0; }
.reu-al-dia { display: grid; justify-items: end; text-align: right; }
.reu-mas { margin-top: 10px; } .reu-mas summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.reu-aviso { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--rule); background: var(--card); color: inherit; font: inherit; cursor: pointer; }
.reu-aviso.sem-amarillo, .reu-aviso.sem-rojo { background: color-mix(in oklab, var(--bad) 7%, var(--card)); }
.reu-aviso .hoy-txt { flex: 1; display: grid; gap: 2px; } .reu-aviso .hoy-txt span { font-size: 13px; color: var(--ink-2); }
.reu-aviso-ir { font-weight: 700; color: var(--oro-tinta); white-space: nowrap; }
.reu-extra { font-size: 14px; }
@media (max-width: 759px) { .reu-hero { grid-template-columns: 64px 1fr; padding: 14px; gap: 12px; } .reu-num { min-width: 0; } .reu-num strong { font-size: 32px; } }
.inv-personas { display: grid; gap: 8px; margin-bottom: 8px; }
.inv-elegidas { display: flex; flex-wrap: wrap; gap: 6px; } .inv-elegidas:empty { display: none; }
.inv-chip { border: 0; border-radius: 999px; padding: 6px 12px; background: var(--oro-suave); color: var(--oro-tinta); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.inv-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 280px; overflow-y: auto; border: 1px solid var(--rule); border-radius: 10px; padding: 4px; }
.inv-sub { padding: 6px 8px 2px; }
.inv-p { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.inv-p:hover { background: var(--paper-sunk); } .inv-p.si { background: var(--oro-suave); }
.inv-p .avatar { width: 34px; height: 34px; flex: none; font-size: 12px; }
.inv-p-t { flex: 1; min-width: 0; display: grid; } .inv-p-t strong, .inv-p-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-p-ok { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule-strong); font-weight: 700; }
.inv-p.si .inv-p-ok { background: var(--oro); border-color: var(--oro); color: #000; }

/* Reuniones: invitar por equipos */
.inv-equipos { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-bottom: 10px; }
.inv-equipo { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 10px; cursor: pointer; flex-direction: row; font-weight: 500; }
.inv-equipo:has(input:checked) { border-color: var(--oro); background: var(--oro-suave); color: var(--oro-tinta); }
.inv-equipo input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--oro); }
.inv-equipo > span { display: grid; gap: 2px; }
.inv-equipo:has(input:checked) .muted { color: var(--oro-tinta); }

/* Donantes: meses, recordatorios */
.don-meses { display: inline-flex; gap: 3px; }
.don-mes { width: 18px; height: 22px; border-radius: 5px; background: var(--paper-sunk); border: 1px solid var(--rule); display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: var(--ink-3); }
.don-mes.si { background: var(--oro); border-color: var(--oro); color: #3a2400; }
.don-acc { white-space: nowrap; }
.don-acc .btn + .btn { margin-left: 4px; }
.don-recordar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin: 0 0 12px; border-radius: var(--radius); background: var(--oro-suave); color: var(--oro-tinta); font-size: 14px; }
.don-mesames { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-bottom: 14px; }
.don-mesames > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--paper-sunk); border: 1px solid var(--rule); }
.don-mesames > div span { font-size: 11px; color: var(--ink-3); text-transform: capitalize; }
.don-mesames > div strong { font-size: 14px; }
.don-mesames > div.si { background: var(--oro-suave); border-color: var(--oro); }

/* Inicio: acciones rápidas, avisos, próximos y donantes */
.bloque-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rapidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 8px; }
.rapida { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; border: 1px solid var(--rule); background: var(--card); color: inherit; font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s; }
.rapida:hover { border-color: var(--rule-strong); }
.rapida:active { transform: scale(.97); }
.rapida:focus-visible, .aviso-item:focus-visible, .proximo:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.rapida-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: var(--oro-suave); flex: none; }
.avisos-lista, .proximos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aviso-item, .proximo { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--rule); background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.aviso-item.nuevo { border-color: var(--oro); background: var(--oro-suave); }
.aviso-item.nuevo .hoy-txt span { color: var(--oro-tinta); }
.aviso-item-ico, .proximo-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: var(--paper-sunk); flex: none; }
.aviso-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); flex: none; }
.proximos li { display: flex; align-items: center; gap: 8px; }
.proximos li .proximo { flex: 1; min-width: 0; }
.btn-ancho { width: 100%; justify-content: center; }
.donantes-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--t-rosa); }
.donantes-n { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.don-edos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.don-edos li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--paper-sunk); font-size: 14px; }
.kpis-chicos { grid-template-columns: repeat(3, 1fr); }

/* Ventana de aviso */
.dialogo-aviso { max-width: min(520px, calc(100vw - 32px)); }
.aviso-ventana { display: grid; gap: 12px; }
.aviso-ventana h2 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.aviso-eti { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--oro-suave); color: var(--oro-tinta); font-size: 12px; font-weight: 700; }
.aviso-texto { font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.aviso-texto a { color: var(--info); }

/* Liga de registro del evento */
.reg-liga { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius); background: var(--oro-suave); color: var(--oro-tinta); }
.reg-liga-url { font-weight: 800; font-size: 15px; overflow-wrap: anywhere; color: var(--ink); }
.reg-liga .muted { color: var(--oro-tinta); }
.reg-prefijo { display: flex; align-items: stretch; border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden; }
.reg-prefijo span { padding: 10px 10px; background: var(--paper-sunk); color: var(--ink-2); font-size: 13px; font-weight: 500; white-space: nowrap; display: flex; align-items: center; }
.reg-prefijo input { border: 0 !important; border-radius: 0 !important; flex: 1; min-width: 0; }
@media (max-width: 480px) { .reg-prefijo { flex-direction: column; } }
.aviso-ok { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--t-menta); color: var(--good); font-weight: 600; font-size: 14px; }
.inv-toggle span strong { font-weight: 700; }
.conf-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 46vh; overflow: auto; border: 1px solid var(--rule); border-radius: 12px; }
.conf-lista li { display: grid; gap: 1px; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.conf-lista li:last-child { border-bottom: 0; }
.inv-estado.inv-enviada { color: var(--good); } .inv-estado.inv-error { color: var(--bad); font-weight: 700; } .inv-estado.inv-pendiente { color: var(--warn); }

/* Voluntarios: buscador, pestañas de estatus y filtros con etiqueta */
.vol-busca input { width: 100%; font-size: 16px; padding: 12px 16px; border-radius: 14px; }
.vol-pestanas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.vol-pestanas::-webkit-scrollbar { display: none; }
.vol-pestanas button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.vol-pestanas button span { font-size: 12px; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vol-pestanas button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.vol-pestanas button[aria-selected="true"] span { color: var(--oro); }
.vol-pestanas button:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.vol-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px 10px; }
.vol-mas > summary { display: none; }
@media (max-width: 640px) {
  .vol-mas > summary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule-strong); font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; }
  .vol-mas > summary::-webkit-details-marker { display: none; }
  .vol-mas > summary::after { content: '▾'; color: var(--ink-3); }
  .vol-mas[open] > summary { margin-bottom: 10px; }
}
.vol-filtros label { display: grid; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.vol-filtros select { width: 100%; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink); }
@media (max-width: 640px) { .vol-filtros { grid-template-columns: 1fr 1fr; } }
.vol-activos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vol-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; border-radius: 999px; border: 0; background: var(--oro-suave); color: var(--oro-tinta); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vol-chip span[aria-hidden] { font-size: 16px; line-height: 1; }
.vol-sel { padding: 10px 12px; border-radius: var(--radius); background: var(--paper-sunk); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#tab-voluntarios { gap: 12px; }

/* Agendar reunión: lo necesario a la vista */
.ev-rapida { margin: -4px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--paper-sunk); }
.fila-fecha { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.fila-fecha input { min-width: 0; }
/* El botón de enviar siempre a la mano al final del diálogo largo */
.dialogo .acciones-fijas { position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--rule); z-index: 1; }
.dialogo .acciones-fijas .btn { flex: 1 1 auto; min-height: 44px; font-size: 15px; }
.inv-cargando { padding: 6px 8px; }
/* Invitados de la reunión: correo y WhatsApp por persona */
.inv-invitados { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; border: 1px solid var(--rule); border-radius: 12px; }
.inv-invitados li { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--rule); min-width: 0; }
.inv-invitados li:last-child { border-bottom: 0; }
.inv-invitados .avatar { width: 34px; height: 34px; flex: none; font-size: 12px; }
.inv-medios { display: flex; align-items: center; gap: 6px; flex: none; }
.btn-wa { border-color: #25d366; color: #128c4a; white-space: nowrap; }
.btn-unirse { justify-self: start; margin-top: 6px; }
/* Próximas reuniones */
.reu-prox { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reu-prox li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.reu-prox-t { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.reu-prox-a { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 640px) {
  .dialogo { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .dialogo .cuerpo { padding: 16px; }
  .dialogo .acciones-fijas { bottom: -16px; margin: 0 -16px -16px; padding-left: 16px; padding-right: 16px; }
  .inv-p, .inv-invitados li { min-height: 48px; }
}

/* Apoyos que consiguió el equipo con sus ligas personales */
.donantes-equipo { margin: 8px 2px 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* Mi firma para constancias */
.firma-caja { position: relative; height: 190px; border: 1.5px dashed var(--rule-strong); border-radius: 16px; background: #fff; touch-action: none; overflow: hidden; }
.firma-caja canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.firma-linea { position: absolute; left: 10%; right: 10%; bottom: 46px; border-top: 1.5px solid #c9c7c0; pointer-events: none; }
.firma-x { position: absolute; left: calc(10% - 4px); bottom: 50px; color: #9a9890; font-size: 14px; pointer-events: none; }
.firma-cargo { text-align: center; margin: 0; }

/* Salud de equipos: un renglón por municipio con su semáforo */
.salud-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.salud-filtros select { max-width: 100%; }
.chip-filtro { appearance: none; border: 1px solid var(--rule); background: transparent; color: inherit; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.chip-filtro.activo { background: var(--ink, #0E0E0D); color: var(--paper, #fff); border-color: transparent; }
.salud-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.salud-fila { border: 1px solid var(--rule); border-left-width: 4px; border-radius: 12px; padding: 12px 14px; min-width: 0; }
.salud-rojo { border-left-color: #d64545; } .salud-amarillo { border-left-color: #f7b33e; } .salud-verde { border-left-color: #3aa55d; }
.salud-cab { display: flex; gap: 10px; align-items: center; min-width: 0; }
.salud-luz { font-size: 18px; line-height: 1; }
.salud-nom { display: flex; flex-direction: column; min-width: 0; }
.salud-nom strong { overflow-wrap: anywhere; }
.salud-sin { color: #d64545; font-weight: 700; }
.salud-motivos { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.salud-datos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.salud-datos span { font-size: 12.5px; padding: 4px 9px; border-radius: 999px; background: var(--t-cielo); }
.salud-datos span.mal { background: var(--t-rosa); }

/* Primer ingreso guiado */
.arranque { border: 1px solid var(--rule); border-radius: 16px; padding: 14px 16px; }
.arranque-barra { height: 8px; border-radius: 99px; background: var(--rule); overflow: hidden; margin: 4px 0 10px; }
.arranque-barra span { display: block; height: 100%; background: #f7b33e; border-radius: 99px; }
.arranque-pasos { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.arranque-pasos li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--rule); min-width: 0; }
.arranque-pasos li.hecho .arranque-txt { opacity: .55; }
.arranque-ico { font-size: 20px; flex: none; width: 28px; text-align: center; }
.arranque-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .arranque-txt span { font-size: 13px; color: var(--ink-2); }
/* Pedidos de ayuda recibidos */
.ayuda-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ayuda-lista li { border: 1px solid var(--rule); border-left: 4px solid #d64545; border-radius: 12px; padding: 12px 14px; min-width: 0; }
.ayuda-lista p { margin: 6px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Referidos */
.cifras-ref { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.cifras-ref div { border: 1px solid var(--rule); border-radius: 12px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; }
.cifras-ref b { font-size: 22px; } .cifras-ref span { font-size: 12px; color: var(--ink-2); }
#ref-q { width: 100%; margin-bottom: 10px; }
.ref-lista-p { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ref-fila details { border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.ref-fila summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; min-width: 0; }
.ref-fila summary::-webkit-details-marker { display: none; }
.ref-pos { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--t-oro); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.ref-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ref-nom strong { overflow-wrap: anywhere; }
.ref-cifras { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; white-space: nowrap; }
.ref-t { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.ref-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; } .ref-lista li { overflow-wrap: anywhere; }
@media (max-width: 420px) { .cifras-ref { grid-template-columns: repeat(2, minmax(0, 1fr)); } }