/* ══════════════════════════════════════════════════════════════════════
   ayu-ficha.css · la ficha del socio y la agenda
   ──────────────────────────────────────────────────────────────────────
   20/09/2026 · PARTE 3 DE 3

   Misma disciplina que las partes 1 y 2: fichero aparte, el último, con
   su señal de vida. Si no llega, el JS no mete nada y la app se queda
   exactamente como estaba.
   ══════════════════════════════════════════════════════════════════════ */

:root{ --ayu-ficha:1; }

/* ── El aviso del director ────────────────────────────────────────────
   Va arriba del todo y en rojo. Si hace falta saber que un crío es
   alérgico, no puede estar escondido: se lee antes que nada. */
.ayu-f-aviso{
  display:flex; align-items:flex-start; gap:8px;
  background:var(--red-soft); border:1px solid var(--red);
  border-radius:var(--r-sm); padding:10px 12px; margin-bottom:11px;
  font-size:0.86rem; line-height:1.4; color:var(--text);
}
.ayu-f-aviso b{ font-weight:800; }

/* La marca de la cabecera, para verlo sin abrir la tarjeta. */
.ayu-f-marca{
  margin-left:6px; font-size:0.85rem; line-height:1;
  filter:saturate(1.3);
}

/* ── A quién llamar ──────────────────────────────────────────────────
   Botones grandes: esto se usa con una mano, de pie, con prisa. */
.ayu-f-tels{ display:grid; gap:7px; margin-bottom:11px; }
.ayu-f-tel{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line2); background:var(--card2);
  color:var(--text); text-decoration:none; font-family:inherit;
  transition:background .16s, border-color .16s;
}
.ayu-f-tel:hover{ background:var(--acc-soft); border-color:var(--acc); }
.ayu-f-tel:active{ transform:scale(0.98); }
.ayu-f-tel-i{ font-size:1.15rem; line-height:1; flex-shrink:0; }
.ayu-f-tel-q{
  display:flex; flex-direction:column; line-height:1.25; min-width:0;
  font-weight:800; font-size:0.86rem;
}
.ayu-f-tel-q i{
  font-style:normal; font-weight:600; font-size:0.8rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Los datos ───────────────────────────────────────────────────────── */
.ayu-f-datos{
  border-top:1px solid var(--line); padding-top:9px; margin-bottom:11px;
}
.ayu-f-d{
  display:flex; align-items:baseline; gap:10px;
  padding:4px 0; font-size:0.83rem;
}
.ayu-f-d span{ color:var(--muted); min-width:96px; flex-shrink:0; }
.ayu-f-d b{ font-weight:700; flex:1; min-width:0; word-break:break-word; }

/* ── La agenda ───────────────────────────────────────────────────────── */
.ayu-ev{
  background:var(--card2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:13px; margin:0 0 11px;
}
.ayu-ev.hidden{ display:none; }
.ayu-ev-nom{
  font-family:'Sora','Outfit',sans-serif; font-weight:800; font-size:1rem;
  margin-bottom:6px; line-height:1.25;
}
.ayu-ev-f{ font-size:0.84rem; color:var(--muted); line-height:1.5; }
.ayu-ev-f b{ color:var(--acc-txt); font-weight:800; }
.ayu-ev-desc{
  margin-top:9px; padding-top:9px; border-top:1px solid var(--line);
  font-size:0.82rem; line-height:1.45; color:var(--muted);
  white-space:pre-wrap; word-break:break-word;
}
.ayu-ev-lim{
  margin-top:9px; font-size:0.78rem; font-weight:700;
  color:var(--muted); background:var(--card);
  border-radius:var(--r-xs); padding:7px 10px;
}
.ayu-ev-lim.urge{
  color:var(--acc-ink); background:linear-gradient(135deg,var(--acc),var(--acc2));
}
.ayu-ev-lim.cerrado{
  color:var(--red); background:var(--red-soft); border:1px solid var(--red);
}