/* =============================================================================
   base.css — SINGLE SOURCE OF TRUTH (Farmacias Homeopáticas Hernández)
   Sistema de diseño canónico compartido por los 3 wireframes:
   design-system.html · mvp-home.html · mvp-product.html
   -----------------------------------------------------------------------------
   Se enlaza AL FINAL del <head> (después del <style> inline) para que gane por
   orden de cascada y sea AUTORITATIVO. Mata la deriva de tokens (P0-3), unifica
   foco (P0-2), sucursales-card (P0-1), botones (P0-4) y contraste AA (P1-3).
   Regla de oro: todo grupo/control = superficie + borde/sombra + padding.
   ============================================================================= */

/* ---------- 1 · TOKENS DE MARCA + ESCALAS (no dependen de tema) ---------- */
:root{
  /* Marino — escala desde el logo */
  --navy-900:#0B1736; --navy-800:#0F1E45; --navy-700:#15275C; --navy-600:#22356E;
  --navy-500:#33477F; --navy-300:#92A0BE; --navy-100:#E5E9F1;
  --gold:#C7A763;              /* SOLO decorativo (estrellas / hairlines). Nunca texto funcional. */
  --accent-2:#C7A763;          /* alias legado del dorado */

  /* Tipografía */
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  /* Layout */
  --maxw:1280px; --header-h:68px;

  /* Espaciado — escala 4pt */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Radios */
  --radius-sm:8px; --radius:12px; --radius-lg:18px; --radius-pill:999px;

  /* Escala tipográfica */
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px; --fs-lg:18px;
  --fs-xl:22px; --fs-2xl:28px; --fs-3xl:clamp(34px,5vw,56px);
}

/* ---------- 2 · TOKENS DE ROL — TEMA CLARO ---------- */
:root[data-theme="light"]{
  --bg:#EDF1F8;            /* fondo de página */
  --surface:#FFFFFF;       /* card / panel por defecto */
  --raised:#FFFFFF;        /* overlay / drawer / dropdown (= surface + sombra fuerte) */
  --sunken:#E6EBF4;        /* input inset, tracks, estados suaves */
  --surface-2:#E6EBF4;     /* alias legado de --sunken */
  --surface-3:#DCE2EE;

  --line:#D8DFEA;          /* hairline nivel-1 */
  --line-strong:#C4CDDE;   /* borde de card (subido para que se vea — “la línea no basta”) */

  --ink:#101A33;           /* texto principal (~14:1) */
  --ink-muted:#4C566F;     /* texto secundario — AA en surface, sunken y surface-3 */
  --ink-soft:#4C566F;      /* alias legado → ahora cumple AA */

  --primary:#15275C; --primary-ink:#FFFFFF;
  --accent:#2A3F7A;        /* acento interactivo (links, selección) — 6.9:1 sobre blanco */
  --accent-tint:#E7ECF7;   /* fondo de estado seleccionado */

  --success:#2E7D5B; --warning:#8A5E12; --error:#B23B30;  /* warning oscurecido para AA */

  --focus-ring:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  --shadow-sm:0 1px 2px rgba(15,30,69,.08);
  --shadow-md:0 10px 30px -16px rgba(15,30,69,.20);
  --shadow-lg:0 24px 60px -30px rgba(15,30,69,.30);
  --shadow:0 24px 60px -30px rgba(15,30,69,.30);          /* alias legado (home usa --shadow) */

  --logo-filter:none;
}

/* ---------- 3 · TOKENS DE ROL — TEMA OSCURO ---------- */
:root[data-theme="dark"]{
  --bg:#0C1322;
  --surface:#121A2C;
  --raised:#16203A;
  --sunken:#162035;
  --surface-2:#162035;
  --surface-3:#1B2740;

  --line:#243049;
  --line-strong:#33405C;

  --ink:#EAEEF6;
  --ink-muted:#A7B2CC;     /* subido para AA sobre superficies oscuras */
  --ink-soft:#A7B2CC;

  --primary:#3D5AA8; --primary-ink:#FFFFFF;
  --accent:#8FA6E0;        /* aclarado para verse sobre fondo oscuro */
  --accent-tint:#1B2540;

  --success:#4FB98A; --warning:#D9A64A; --error:#E07268;

  --focus-ring:0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 12px 30px -16px rgba(0,0,0,.6);
  --shadow-lg:0 26px 60px -30px rgba(0,0,0,.7);
  --shadow:0 26px 60px -30px rgba(0,0,0,.7);

  --logo-filter:brightness(0) invert(1);
}

/* ---------- 4 · FOCO DE TECLADO VISIBLE (WCAG 2.4.7 / 2.1.1) ---------- */
/* !important garantiza que gane sobre los `outline:none` inline de inputs. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
[role="button"]:focus-visible, [role="checkbox"]:focus-visible, [role="radio"]:focus-visible,
[role="tab"]:focus-visible, .btn:focus-visible, .iconbtn:focus-visible,
.chip:focus-visible, .chip-f:focus-visible, .v:focus-visible, .opt:focus-visible,
.check:focus-visible, .switch:focus-visible, .sbar:focus-visible{
  outline:2px solid var(--accent) !important;
  outline-offset:2px;
  box-shadow:var(--focus-ring);
  border-radius:var(--radius-sm);
}
/* Foco DENTRO de menús/dropdowns: offset negativo para no cortarse */
.menu a:focus-visible, .sucdrop a:focus-visible{ outline-offset:-2px; }

/* ---------- 5 · ELEVACIÓN (utilidades E0–E3) ---------- */
/* E0 plano · E1 card-en-superficie · E2 card-sobre-bg · E3 flotante.
   Sombra solo si el elemento está por encima de su plano; borde siempre. */
.e0{ border:0; }
.e1{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.e2{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.e3{ background:var(--raised); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-lg); }

/* ---------- 6 · BOTONES — 1 set canónico, contorno SIEMPRE visible ---------- */
.btn{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-base);
  min-height:44px; padding:0 22px; border-radius:var(--radius-sm);
  border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; cursor:pointer; line-height:1;
  transition:background .18s, border-color .18s, box-shadow .18s, color .18s;
}
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.btn-primary{ background:var(--primary); color:var(--primary-ink); border-color:transparent; }
.btn-primary:hover{ background:var(--navy-800); }
.btn-primary:active{ background:var(--navy-900); }

.btn-secondary{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-secondary:hover{ background:var(--sunken); border-color:var(--ink-muted); }
.btn-secondary:active{ background:var(--surface-3); }

/* .btn-ghost: transparente PERO con borde visible (nunca “flotando”) */
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--sunken); }

/* .btn-outline: legado — antes tenía borde invisible (#fff sobre #fff). Redefinido = secondary. */
.btn-outline{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-outline:hover{ background:var(--sunken); border-color:var(--ink-muted); }

/* .btn-onimg: para CTAs sobre fotografía — blanco sólido, nombre explícito */
.btn-onimg{ background:#fff; color:var(--navy-800); border-color:transparent; }
.btn-onimg:hover{ background:#EEF1F8; }

/* .btn-text: SOLO links inline, nunca acción principal */
.btn-text{ background:transparent; color:var(--accent); min-height:auto; padding:8px 10px; border-color:transparent; }
.btn-text:hover{ color:var(--navy-800); text-decoration:underline; }

.btn.sm{ min-height:38px; padding:0 15px; font-size:var(--fs-sm); }
.btn.lg{ min-height:52px; padding:0 28px; font-size:var(--fs-md); }
.btn.pill{ border-radius:var(--radius-pill); }
.btn.block{ width:100%; }

/* ---------- 7 · SUCURSALES = CARD (P0-1) ---------- */
/* Card con FONDO PROPIO distinto del bg + borde en los 4 lados + sombra.
   Sin línea de acento a la izquierda (la card se distingue por superficie, no por raya). */
.sucrow{
  display:flex; flex-direction:column; gap:8px;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:16px 18px;
  box-shadow:var(--shadow-sm);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.sucrow:hover{ box-shadow:var(--shadow-md); border-color:var(--accent); transform:translateY(-2px); }
.sucrow .sinfo b{ font-family:var(--font-display); font-size:var(--fs-base); color:var(--ink); }
.sucrow .sinfo .addr{ font-size:12.5px; color:var(--ink-muted); margin-top:3px; }
/* Acciones (Mapa/Tel/WhatsApp) — target táctil ≥ 40px de alto útil */
.sacts a{ min-height:40px; padding:9px 13px; }

/* ---------- 8 · SELECTORES INTERACTIVOS — matar lo “transparente” ---------- */
/* Estado por defecto con relleno + borde; estado .on claramente distinto (accent-tint). */
.chip-f, .v, .opt{ cursor:pointer; }
.chip-f{
  min-height:36px; display:inline-flex; align-items:center; gap:6px;
  padding:0 14px; border-radius:var(--radius-pill);
  background:var(--sunken); border:1px solid var(--line-strong); color:var(--ink);
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm);
}
.chip-f:hover{ border-color:var(--accent); }
.chip-f.on, .chip-f[aria-pressed="true"]{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent); }

/* ---------- 9 · TARGETS TÁCTILES (WCAG 2.5.8) ---------- */
.themeseg button, .viewtoggle button, .secnav a{ min-height:40px; }
.iconbtn{ min-width:42px; min-height:42px; }

/* ---------- 10 · ICONOS DECORATIVOS ---------- */
/* Los <svg class="ic"> son decorativos; evitar que lectores de pantalla los anuncien.
   (Refuerzo por CSS; el aria-hidden explícito se añade en markup donde aplique.) */
.ic{ pointer-events:none; }

/* ---------- 11 · HEADER / NAV UNIFICADO (P1-1) ---------- */
/* Un solo nav para home y product: alineado a la izquierda (la atención lee a la
   izquierda), con subrayado animado y mismo tracking. Tools/acciones a la derecha. */
.nav{ display:flex; gap:20px; margin-left:var(--s2); align-items:center; }
.nav a{
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase; padding:8px 0;
  position:relative; color:var(--ink-muted); cursor:pointer;
}
.nav a:hover{ color:var(--ink); }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px;
  height:2px; background:var(--accent); transition:right .25s;
}
.nav a:hover::after{ right:0; }
.tools{ margin-left:auto; }   /* empuja las acciones a la derecha cuando el nav va a la izquierda */

/* ---------- 12 · PRODUCT CARD — ficha COMPLETA y consistente (P1-2) ---------- */
/* Toda la .pcard es UNA sola card: superficie + borde + sombra + padding, con la imagen
   Y la meta dentro. Elimina el look "mitad blanca (imagen) / mitad transparente (meta)". */
.pcard{
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:10px;
  overflow:hidden;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.pcard:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
/* La imagen ya NO lleva marco propio (evita caja-dentro-de-caja); packshot sobre la card */
.pcard .imgwrap{
  border:none; box-shadow:none; background:var(--surface);
  border-radius:calc(var(--radius) - 4px);
}
.pcard .imgwrap img{ object-fit:contain; padding:8%; }
/* Meta con padding interno para que respire dentro de la card */
.pcard .meta{ padding:12px 6px 4px; }

/* ---------- 13 · NAV MÓVIL — hamburguesa + panel (P1-6) ---------- */
/* La hamburguesa y el panel se inyectan por base.js (clonando los links de .nav),
   así que estas reglas sirven a los 3 archivos sin tocar su markup. */
.hamburger{ display:none; }
@media (max-width:820px){
  .nav{ display:none !important; }             /* oculta el nav de escritorio */
  .sbar{ display:none !important; }            /* oculta la barra de búsqueda inline del PDP */
  .hamburger{
    display:grid; place-items:center; min-width:44px; min-height:44px;
    border:none; background:transparent; color:var(--ink); cursor:pointer; border-radius:50%;
  }
  .hamburger:hover{ background:var(--sunken); }
}
.mnav{
  position:fixed; left:0; right:0; top:0; z-index:70;
  background:var(--raised); border-bottom:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg); padding:14px var(--s6) 22px;
  transform:translateY(-100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  max-height:90vh; overflow:auto;
}
.mnav.open{ transform:none; }
.mnav-head{ display:flex; align-items:center; justify-content:space-between; height:52px; margin-bottom:4px; }
.mnav-head strong{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--ink); }
.mnav a{
  display:block; padding:15px 6px; font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-md); color:var(--ink); border-bottom:1px solid var(--line); cursor:pointer;
}
.mnav a:last-child{ border-bottom:0; }
.mnav a:hover{ color:var(--accent); }
.mnav-close{
  min-width:44px; min-height:44px; border:none; background:transparent; color:var(--ink);
  cursor:pointer; border-radius:50%; display:grid; place-items:center;
}
.mnav-close:hover{ background:var(--sunken); }
.mnav-backdrop{ display:none; }
.mnav-backdrop.open{ display:block; position:fixed; inset:0; z-index:69; background:rgba(11,23,54,.42); }

/* ---------- 14 · ACCIONES DE SUCURSAL — botones de solo icono ---------- */
/* Mapa · Teléfono · WhatsApp se colapsan a iconos circulares (base.js añade
   .icon-only + aria-label + title). Los enlaces de texto (p.ej. "Ver las 5 sedes")
   NO reciben .icon-only y quedan como están. */
.sacts a.icon-only{
  width:40px; height:40px; min-height:40px; padding:0;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--surface);
  color:var(--accent);
  transition:border-color .18s, background .18s, color .18s;
}
.sacts a.icon-only:hover{ border-color:var(--accent); background:var(--accent-tint); }
.sacts a.icon-only .ic{ width:18px; height:18px; }
.sacts a.icon-only .lbl{ display:none; }
.sacts a.wa.icon-only{ color:#1f9d55; border-color:color-mix(in srgb,#1f9d55 34%,transparent); }
.sacts a.wa.icon-only:hover{ color:#1a854a; border-color:#1f9d55; background:color-mix(in srgb,#1f9d55 12%,transparent); }
