/* ════════════════════════════════════════════════════════════════════
   AUREUS · theme.css — capa de TEMA CLARO (papel marfil old money)
   ────────────────────────────────────────────────────────────────────
   Cargar DESPUÉS del CSS de cada app (styles.css / reservar.css / panel.css).
   El tema OSCURO sigue viviendo en el :root de cada app (no se toca).
   Esta hoja solo añade el tema claro y arregla los puntos que tenían
   colores "oscuros" horneados (texto sobre oro y cristales translúcidos).
   No toca ningún id, data-* ni lógica JS.
   ════════════════════════════════════════════════════════════════════ */

/* Transición suave al conmutar de tema */
html.aureus-theming,
html.aureus-theming body,
html.aureus-theming .panel-header,
html.aureus-theming .topbar,
html.aureus-theming .botnav,
html.aureus-theming nav,
html.aureus-theming .card-demo {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* ─────────────────────────────────────────────────────────────────────
   TEMA CLARO — redefine los mismos tokens que ya usan las 3 apps
   ───────────────────────────────────────────────────────────────────── */
:root[data-theme="light"]{
  /* Oro: más profundo en claro para contraste sobre marfil */
  --gold:#8A6A2C; --gold-light:#A6823C; --gold-dim:#6E5424;
  --gold-l:#A6823C; --gold-d:#6E5424;                 /* alias app de cliente */

  /* Fondos y superficies (papel cálido) */
  --bg:#F2ECDF; --bg-2:#EAE2D0; --bg-3:#E3DAC4;
  --surface:#FBF8F0; --surface-2:#F4EDDF; --card:#FBF8F0;

  /* Texto */
  --cream:#23201A; --cream-dim:#5C5446; --cream-d:#5C5446; --muted:#8C846F;

  /* Firma de la web pública en claro (verde apenas insinuado) */
  --green:#E8E6D6;

  /* Bordes */
  --border:rgba(138,106,44,.30); --border-dim:rgba(138,106,44,.15); --border-2:rgba(138,106,44,.42);

  /* Semánticos */
  --ok:#2E7D52; --error:#B0473F; --err:#B0473F; --emerald:#2E7D52;

  /* Tinta fija sobre oro (oscura en ambos temas) */
  --on-gold:#14130D;
}

/* ─────────────────────────────────────────────────────────────────────
   TEXTO SOBRE ORO — las 3 apps usan color:var(--bg) para la tinta oscura
   sobre botones dorados. En claro var(--bg) es marfil → ilegible.
   Se fija una tinta oscura en estos elementos solo en tema claro.
   ───────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .nav-cta,
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .fab,
:root[data-theme="light"] .au-tab.on,
:root[data-theme="light"] .btn-au,
:root[data-theme="light"] .btn-gold,
:root[data-theme="light"] .btn-gold.sm,
:root[data-theme="light"] .hm-lvl,
:root[data-theme="light"] .sd.done,
:root[data-theme="light"] .cd.sel,
:root[data-theme="light"] .btn-next,
:root[data-theme="light"] .btn-save,
:root[data-theme="light"] .staff-btn.primary,
:root[data-theme="light"] .agenda-action-start:hover:not(:disabled),
:root[data-theme="light"] .agenda-action-complete:hover:not(:disabled) {
  color: var(--on-gold);
}

/* ─────────────────────────────────────────────────────────────────────
   CRISTALES TRANSLÚCIDOS con valor oscuro horneado → claro
   ───────────────────────────────────────────────────────────────────── */
/* Landing */
:root[data-theme="light"] nav.scrolled        { background:rgba(247,243,234,.92); border-bottom-color:var(--border-dim); }
:root[data-theme="light"] .modal-overlay      { background:rgba(40,33,18,.42); }
/* App de cliente */
:root[data-theme="light"] .topbar             { background:rgba(251,248,240,.95); }
:root[data-theme="light"] .botnav             { background:rgba(251,248,240,.97); }
:root[data-theme="light"] .sheet-modal        { background:rgba(40,33,18,.42); }
:root[data-theme="light"] .lvl-modal          { background:rgba(40,33,18,.5); }
:root[data-theme="light"] #toast              { box-shadow:var(--shadow-2,0 8px 24px rgba(60,48,20,.18)); }
/* Panel interno */
:root[data-theme="light"] .panel-header       { background:rgba(251,248,240,.9); }
:root[data-theme="light"] .notif-panel        { box-shadow:0 12px 40px rgba(60,48,20,.18); }

/* La sombra de la marca en el hero es para fondo oscuro; suavizar en claro */
:root[data-theme="light"] .hero-imagotipo img { filter:drop-shadow(0 4px 18px rgba(138,106,44,.18)); }

/* Textura de ruido de fondo: bajarla en claro para no ensuciar el marfil */
:root[data-theme="light"] body::before { opacity:.28; }

/* ─────────────────────────────────────────────────────────────────────
   BOTÓN DE TEMA (inyectado por aureus-theme-toggle.js)
   ───────────────────────────────────────────────────────────────────── */
.aureus-theme-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  width:34px; height:34px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); color:var(--gold);
  border-radius:999px; transition:border-color .2s,color .2s,background .2s;
}
.aureus-theme-btn:hover{ border-color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,transparent); }
.aureus-theme-btn svg{ width:17px; height:17px; display:block; }
.aureus-theme-btn .ico-sun{ display:none; }
:root[data-theme="light"] .aureus-theme-btn .ico-sun{ display:block; }
:root[data-theme="light"] .aureus-theme-btn .ico-moon{ display:none; }
/* Variante flotante (si no hay cabecera donde anclarlo) */
.aureus-theme-btn.floating{
  position:fixed; top:max(12px,env(safe-area-inset-top)); right:14px; z-index:600;
  width:38px; height:38px; background:var(--surface);
  box-shadow:var(--shadow-2,0 8px 24px rgba(0,0,0,.4));
}