/* ─────────────────────────────────────────────────
   Citeri · Marca — capa compartida
   Solo color de marca y tipografía. NO toca estructura ni
   componentes, así que es seguro en cualquier página:
   panel, embudo de reserva o página pública.

   Se carga DESPUÉS de citeri.css, que termina con un bloque
   minificado que impone el verde anterior con `!important`;
   por eso aquí hace falta `!important` para ganarle.

   El panel carga citeri-panel.css, que ya importa este archivo.
───────────────────────────────────────────────── */

/* `body.citeri-salon-ui` redefine estas variables en citeri.css y gana a un
   `:root` por especificidad, así que hay que repetir el mismo selector. */
:root,
.dark,
[data-theme="dark"],
body.citeri-salon-ui {
  --apple-green: #0071e3;
  --apple-green-text: #0071e3;
  --apple-link: #0071e3;
  --md-sys-color-primary: #0071e3;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: rgba(0, 113, 227, 0.10);
  --md-sys-color-on-primary-container: #0071e3;
  --focus-glow: 0 0 0 3px rgba(0, 113, 227, 0.14);
  --salon-primary: #0071e3;
  --salon-primary-hover: #0077ed;
  --accent: #0071e3;
  --accent-hover: #0077ed;
}

/* La landing ya no usa la tipografía editorial: al final de citeri.css quedó
   un bloque del rebrand anterior que impone Instrument Serif en todos los
   titulares. Se vuelve a Inter con peso real. */
h1, h2, .page-title, .card-title, .kpi-title,
.brand-title, .section-headline, .modal-title, .drawer-title {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
}
h2, .card-title, .modal-title, .drawer-title { font-weight: 650 !important; }

/* Tracking por tamaño: apretado en titulares, casi neutro en texto corrido. */
.page-title, h1 { letter-spacing: -0.035em !important; }
h2 { letter-spacing: -0.028em !important; }
h3, .section-title { letter-spacing: -0.02em !important; }

/* ── Colores de marca escritos a fuego en citeri.css ── */
.btn-primary, .cta-primary, .btn-submit, .copy-btn {
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover, .cta-primary:hover, .btn-submit:hover, .copy-btn:hover {
  opacity: 0.85;
}
.btn-secondary, .btn-ghost, .btn-text, .cta-secondary, .btn-outlined-sm {
  color: var(--ink-2) !important;
}
a { color: var(--blue); }

/* citeri.css fuerza `a { color: var(--apple-green-text) !important }`, lo que
   pisa el color propio de los enlaces CON fondo de color y los deja del mismo
   tono que su fondo (texto azul sobre azul = invisible). Se re-afirma el par
   fondo/texto en los enlaces que actúan como botón sólido. */
a.biz-action:not(.secondary),
a.btn-primary,
a.cta-primary,
a.btn-submit,
a.btn-black {
  color: #fff !important;
}

.setup-progress-fill, .progress-linear-fill {
  background: var(--blue) !important;
  border-color: transparent !important;
}
.step-icon, .section-icon, .onboarding-step .step-num {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.skip-link { background: var(--ink) !important; color: #fff !important; }
input[type="checkbox"]:checked, input[type="radio"]:checked { accent-color: var(--blue); }

/* Iniciales sobre círculo de color: siempre blancas. */
.avatar, .avatar-sm { color: #fff !important; }

/* ── Neutraliza cualquier residuo del verde #5D9571 ── */
/* act-confirm chip (agenda) */
.act-confirm { background: var(--blue-light) !important; color: var(--blue) !important; }

/* summary-chip que aún use verde heredado */
.summary-chip.chip-total { background: var(--blue-light) !important; color: var(--blue) !important; }

/* appt-item border-left heredado */
.appt-item { border-left-color: var(--blue) !important; background: var(--blue-light) !important; }

/* run-dot ok (automatizaciones) */
.run-dot.ok { background: var(--success) !important; }

/* wallet-bar dot */
.wallet-bar .dot { background: var(--blue) !important; }

/* botones con style="#5D9571" a fuego: los reescribimos por clase */
.btn-black,
[class*="btn-save"],
.btn-guardar {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Map widget accent */
.citeri-map-kicker,
.citeri-map-actions a { color: var(--blue) !important; }
.citeri-map-actions a:first-child {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}
.citeri-map-marker { background: var(--blue) !important; }