/* ==========================================================================
   EntreCuidados — sistema visual v1 "LA RONDA DE LA FAMILIA"
   Paleta propia (independiente de AcuerdApp): verde salvia profundo #33847A
   (calma y salud sin clínica) · terracota #D96F4E (calidez de hogar, CTA) ·
   durazno #F4E1D2 (superficies suaves) · crema #FAF6F0 (fondo) · café verdoso
   #2C3733 (texto). Público: cuidadoras ~51 años + hijos que coordinan →
   tipografía GRANDE, contraste alto, tap targets generosos, cero jerga.
   Tipografía: stack de sistema (100% offline). Claro/oscuro con [data-theme].
   ========================================================================== */

:root {
  /* --- Paleta claro --- */
  --color-bg: #FAF6F0;
  --color-bg-alt: #F3EAE0;
  --color-surface: #FFFFFF;
  --color-text: #2C3733;
  --color-text-soft: #5C6B64;
  --color-border: #E4D9CC;

  --color-primary: #33847A;      /* salvia profundo — marca, enlaces */
  --color-primary-dark: #26655D;
  --color-primary-soft: #E2EFEC;

  --color-accent: #D96F4E;       /* terracota — CTA, calidez */
  --color-accent-dark: #B5522F;
  --color-accent-soft: #F9E4DB;

  --color-ok: #4C9A62;
  --color-alerta: #C05B3E;       /* nunca rojo hospital: terracota quemado */

  --radius: 14px;
  --radius-lg: 22px;
  --sombra: 0 2px 10px rgba(44, 55, 51, 0.07);
  --sombra-alta: 0 8px 28px rgba(44, 55, 51, 0.12);
  --ancho-lectura: 720px;
}

[data-theme="dark"] {
  --color-bg: #1E2523;
  --color-bg-alt: #26302D;
  --color-surface: #2A3431;
  --color-text: #ECE6DD;
  --color-text-soft: #A9B5AE;
  --color-border: #3B4743;

  --color-primary: #6FBFB4;
  --color-primary-dark: #8FD2C8;
  --color-primary-soft: #2C4340;

  --color-accent: #E8916F;
  --color-accent-dark: #F0A98C;
  --color-accent-soft: #4A3229;

  --sombra: 0 2px 10px rgba(0, 0, 0, 0.35);
  --sombra-alta: 0 8px 28px rgba(0, 0, 0, 0.5);
}

/* --- Base --- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.06rem;               /* base grande a propósito (público 45-70) */
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; color: var(--color-text); }
h1 { font-size: clamp(1.9rem, 5.5vw, 2.7rem); margin: 0 0 14px; }
h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin: 0 0 12px; }
h3 { font-size: 1.15rem; margin: 0 0 8px; }

p { margin: 0 0 14px; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }

img { max-width: 100%; height: auto; }

.container {
  max-width: var(--ancho-lectura);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Topbar --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand .brand-cuida { color: var(--color-primary); }

.topbar nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar nav a {
  text-decoration: none;
  color: var(--color-text-soft);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 9px 12px;
  border-radius: 10px;
}
.topbar nav a:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }

.theme-toggle {
  border: none;
  background: none;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1;
}
.theme-toggle:hover { background: var(--color-bg-alt); }

/* --- Botones (tap targets grandes: mínimo 48px de alto) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--color-accent);
  color: #FFF8F4;
  box-shadow: var(--sombra);
}
.btn-primary:hover { background: var(--color-accent-dark); color: #FFF8F4; }

.btn-secondary {
  background: var(--color-primary);
  color: #F2FAF8;
}
.btn-secondary:hover { background: var(--color-primary-dark); color: #F2FAF8; }

.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* --- Cards --- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--sombra);
}

/* --- Acordeón (guías) --- */
.acordeon { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.acordeon + .acordeon { margin-top: 14px; }

.acordeon summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  font-weight: 700;
  font-size: 1.08rem;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: "＋";
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--color-primary);
  flex-shrink: 0;
}
.acordeon[open] summary::after { content: "−"; }
.acordeon[open] summary { border-bottom: 1px solid var(--color-border); }
.acordeon .acordeon-cuerpo { padding: 18px 20px 8px; }
.acordeon .emoji { font-size: 1.35rem; flex-shrink: 0; }

/* --- Formularios (ficha) --- */
label { display: block; font-weight: 700; margin: 0 0 6px; font-size: 0.98rem; }
.campo { margin-bottom: 18px; }
.campo .ayuda { font-size: 0.88rem; color: var(--color-text-soft); margin: 4px 0 0; }

input[type="text"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .fila-2 { grid-template-columns: 1fr; } }

/* --- Avisos --- */
.aviso {
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.95rem;
  margin: 16px 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.aviso-suave { background: var(--color-primary-soft); border-color: transparent; }
.aviso-acento { background: var(--color-accent-soft); border-color: transparent; }

/* --- Toast --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text);
  color: var(--color-bg);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--sombra-alta);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Footer --- */
.footer {
  margin-top: 70px;
  border-top: 1px solid var(--color-border);
  padding: 30px 0 40px;
  font-size: 0.92rem;
  color: var(--color-text-soft);
}
.footer .container { display: grid; gap: 6px; }
.footer a { color: var(--color-text-soft); }

/* --- Utilidades --- */
.centrado { text-align: center; }
.suave { color: var(--color-text-soft); }
[hidden] { display: none !important; }

@media print {
  .topbar, .footer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}