/* ============================================================
   Tribufam — Sistema de diseño "Confianza moderna" (2026)
   ------------------------------------------------------------
   Se carga EL ÚLTIMO en cada página, así que sus :root y sus
   reglas base ganan a los <style> heredados sin tocar el resto
   del CSS de cada archivo. Como la app pinta con var(--teal),
   var(--txm)… al redefinir aquí esos tokens, TODA la interfaz
   adopta el look nuevo. Mantiene los NOMBRES de variables de
   siempre (para no tocar app.js) y solo cambia sus VALORES.
   ============================================================ */

:root {
  /* — Marca: verde esmeralda fresco (paleta elegida por Marco, 2026-07-14) — */
  --teal:#0fa08a; --teal2:#0c8474; --teal3:#9fe3d5; --teal-pale:#e3f6f2; --teal-dark:#0a4a40;
  --green:#0fa08a; --green-pale:#e3f6f2;

  /* — Acento cálido: coral vivo y puntual (calidez sin infantilismo) — */
  --amber:#ff7a59; --amber2:#ff9478; --amber-pale:#fff0ea;
  --gold:#b6862f;

  /* — Estado de error — */
  --red:#e14b3b; --red-pale:#fdeae7;

  /* — Neutros: escala nítida y fría (slate), en vez del crema cálido — */
  --txt:#10201c; --txm:#566b66; --txl:#93a6a1;
  --bdr:#e5efec;
  --c:#f5faf8; --w:#ffffff;

  /* — Sombras modernas: bajas, suaves, de poca dispersión — */
  --sh:0 1px 2px rgba(15,27,24,.05), 0 1px 3px rgba(15,27,24,.04);
  --sh2:0 14px 34px rgba(15,27,24,.11);
  --sh-brand:0 10px 24px rgba(15,160,138,.26);

  /* — Radios: medios (más actuales que el pill total) — */
  --r:16px; --rs:12px;

  --font:'Inter','DM Sans',system-ui,-apple-system,sans-serif;
  --font-display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
}

/* — Tipografía moderna: fuera la serif (es lo que más "envejecía") — */
body { font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,.wordmark,.sec-title,.hero h1,.pdname,.section-head {
  font-family:var(--font-display); letter-spacing:-.02em;
}
h1,h2,h3 { line-height:1.14; }

/* — Botones: radio medio, peso justo, sombra de marca discreta — */
.btn { border-radius:12px; font-family:var(--font); font-weight:600; letter-spacing:0; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn-solid { background:var(--teal); box-shadow:var(--sh-brand); }
.btn-solid:hover { background:var(--teal2); transform:translateY(-1px); box-shadow:0 14px 30px rgba(15,160,138,.32); }
.btn-ghost { background:var(--w); border:1.5px solid var(--bdr); color:var(--teal); }
.btn-ghost:hover { background:var(--teal-pale); border-color:var(--teal3); transform:translateY(-1px); }

/* — Campos de formulario: nítidos, con anillo de foco de marca — */
.form-input, .inp, input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=number], input[type=date], select, textarea {
  border-radius:11px; border:1.5px solid var(--bdr); font-family:var(--font); transition:border-color .15s, box-shadow .15s;
}
.form-input:focus, .inp:focus, input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,160,138,.14);
}

/* — Cabecera con desenfoque translúcido moderno — */
.site-header { background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid rgba(232,237,235,.8); }
/* Logo = icono vectorial (logo.svg, solo el símbolo) + palabra "Tribufam" en la tipografía
   display, bicolor (Tuto en tinta, Care en verde). Nítido a cualquier tamaño y a juego con
   la paleta nueva; sustituye al PNG antiguo (que llevaba el nombre y un eslogan ilegible). */
.logo .wordmark { display:inline; font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:-.03em; color:var(--txt); line-height:1; }
.logo .wordmark .wm-c { color:var(--teal); }
.logo img { border-radius:0; }

/* — Chips/píldoras y badges: bordes suaves y coherentes — */
.badge, .pill, .chip, .mc-tag, .tag { letter-spacing:.01em; }

::selection { background:rgba(15,160,138,.16); }

/* — Foco visible accesible en toda la interfaz — */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-item:focus-visible {
  outline:2px solid var(--teal); outline-offset:2px; border-radius:8px;
}

/* — Móvil: la cabecera NO debe llevar backdrop-filter. Ese filtro crea un
   "containing block" para descendientes position:fixed, lo que anclaría la barra
   de navegación inferior de la app a la cabecera (saldría arriba) en vez de al
   viewport. Sin él, la barra fija inferior queda bien pegada abajo. — */
@media (max-width:900px) {
  .site-header { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--w); }
}

/* — iOS amplía la página SOLO cuando enfocas un campo con letra menor de 16px, y al
   salir no lo deshace: la app se quedaba descolocada en cuanto empezabas a escribir
   (login, chat…). Se sube a 16px solo en móvil; el diseño de escritorio no cambia.
   No se usa maximum-scale/user-scalable: eso rompería el zoom manual (accesibilidad). — */
@media (max-width:900px) {
  input, select, textarea,
  .form-input, .form-select, .form-textarea, .chat-input, .inp {
    font-size: 16px;
  }
}