/* ============================================================
   TEMA CRM — la landing pasa a compartir look & feel con
   Panel.cadabra.cl (dark SaaS, cyan/teal, Instrument Sans).
   Se carga AL FINAL: sobrescribe los tokens de styles.css y los
   hex sueltos de los demás archivos, sin tocar su estructura.
   Fuente de los valores: app/CRM Whatsap/src/app/globals.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  /* Tokens propios de la landing, remapeados a la paleta del CRM */
  --ink: #e8edf2;
  --muted: #8a929c;
  --green: #42d6d0;
  --lime: #06231f;      /* texto sobre fondo cyan sólido (antes iba sobre verde) */
  --paper: #080a0d;
  --line: rgba(255, 255, 255, .08);
  --white: #0e1116;
  --font: 'Instrument Sans', sans-serif;
  --display: 'Instrument Sans', sans-serif;

  /* Tokens propios del CRM, por si se necesitan directo */
  --crm-fondo: #080a0d;
  --crm-card: #0e1116;
  --crm-card-2: #12161c;
  --crm-card-3: #151a21;
  --crm-sidebar: #0b0e12;
  --crm-linea: rgba(255, 255, 255, .055);
  --crm-linea-fuerte: rgba(255, 255, 255, .1);
  --crm-tinta: #e8edf2;
  --crm-tinta-2: #8a929c;
  --crm-tinta-3: #555e68;
  --crm-cyan: #42d6d0;
  --crm-cyan-hover: #5ee3dd;
  --crm-cyan-claro: rgba(66, 214, 208, .1);
}

body { background: var(--paper); color: var(--ink); }

/* ---- Header ---- */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.brand-mark { background: var(--green); color: var(--acento-tinta, #06231f); }
.status-dot { background: var(--green) !important; box-shadow: 0 0 0 4px var(--crm-cyan-claro) !important; }

.header-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--crm-cyan-claro);
  border-radius: 7px;
  background: transparent;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.header-login::after {
  content: "→";
  font-size: 13px;
}
.header-login:hover {
  background: var(--crm-cyan-claro);
  border-color: var(--green);
}

/* ---- Hero (ya oscuro vía hero-layout.css: se ajusta el degradado a cyan) ---- */
.hero::before { background: radial-gradient(ellipse at 76% 48%, #0f2621 0%, #0c1a17 38%, var(--crm-fondo) 76%) !important; }
.hero-copy h1 span, .hero-copy .eyebrow, .hero-copy .status-dot { color: var(--green) !important; }
.hero-cta { background: var(--green) !important; color: var(--acento-tinta, #06231f) !important; }
.hero-cta:hover { background: var(--crm-cyan-hover) !important; }

/* ---- Tarjeta de formulario (lead + hero) ---- */
.form-card {
  background: var(--crm-card) !important;
  border: 1px solid var(--crm-linea-fuerte) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5) !important;
}
.form-card h2 { color: var(--ink); }
.form-card > p { color: var(--muted); }
.form-card label { color: var(--muted); }
.form-card input {
  background: var(--crm-card-2) !important;
  border: 1px solid var(--crm-linea-fuerte) !important;
  color: var(--ink) !important;
}
.form-card input::placeholder { color: var(--crm-tinta-3) !important; }
.form-card input:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px var(--crm-cyan-claro) !important;
}
.submit-button { background: var(--green) !important; color: var(--acento-tinta, #06231f) !important; }
.submit-button:hover { background: var(--crm-cyan-hover) !important; }
.submit-button span { color: var(--acento-tinta, #06231f) !important; }
.form-privacy { color: var(--crm-tinta-3) !important; }
.form-status { color: var(--green) !important; }

.check { background: var(--crm-cyan-claro) !important; color: var(--green) !important; }
.trust-note { color: var(--crm-tinta-2) !important; }
.trust-icon { border-color: var(--crm-linea-fuerte) !important; color: var(--green) !important; }
.hero-lede { color: var(--crm-tinta-2) !important; }
.proof-item { color: var(--crm-tinta) !important; }

/* ---- Sección lead (fondo claro) ---- */
/* El fondo debe cubrir todo el ancho de la pantalla, no solo el max-width de
   <main> — mismo truco que ya usan .hero::before y .faq-section::before. */
.lead-section { position: relative; isolation: isolate; }
.lead-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--crm-card-2);
  border-top: 1px solid var(--crm-linea);
}
.lead-intro h2 { color: var(--ink); }
.lead-intro p { color: var(--muted); }

/* ---- API Meta ---- */
.whatsapp-api { background: var(--crm-card-2) !important; color: var(--ink) !important; border: 1px solid var(--crm-linea-fuerte); }
.whatsapp-api::after { border-color: rgba(66, 214, 208, .18) !important; box-shadow: 0 0 0 23px rgba(66, 214, 208, .05), 0 0 0 47px rgba(66, 214, 208, .04) !important; }
.meta-logo-wrap { border-color: var(--crm-linea-fuerte) !important; background: var(--crm-fondo) !important; }
.api-eyebrow { background: var(--crm-cyan-claro) !important; color: var(--green) !important; }
.api-copy h2 { color: var(--ink); }
.api-copy p { color: var(--crm-tinta-2) !important; }
.api-badge { border-color: var(--crm-linea-fuerte) !important; color: var(--ink) !important; }

/* ---- Business view (showcase) ---- */
.business-view { border-top: 1px solid var(--line); }
.business-heading h2 { color: var(--ink); }
.business-heading h2 span { color: var(--green) !important; }
.business-heading > p { color: var(--muted); }
.showcase-card {
  border: 1px solid var(--crm-linea-fuerte) !important;
  background: var(--crm-card) !important;
}
.crm-card { background: var(--crm-card-2) !important; }
.showcase-label { color: var(--green) !important; }
.showcase-card .showcase-label { background: var(--crm-cyan-claro) !important; color: var(--green) !important; }
.showcase-copy h3 { color: var(--ink); }
.showcase-copy p { color: var(--crm-tinta-2) !important; }
.showcase-card img { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); }
.showcase-note { color: var(--crm-tinta-3) !important; }

.trial-offer { background: var(--crm-card-3) !important; border: 1px solid var(--crm-linea-fuerte); color: var(--ink) !important; }
.trial-offer p { color: var(--crm-tinta-2) !important; }
.trial-offer .showcase-label { color: var(--green) !important; }
.trial-price span { color: var(--crm-tinta-2) !important; }
.trial-price strong { background: var(--green) !important; color: var(--acento-tinta, #06231f) !important; }

/* ---- Features / closing ---- */
.feature-band { border-color: var(--line) !important; }
.feature-number { color: var(--crm-tinta-3) !important; }
.feature h3 { color: var(--ink); }
.feature p { color: var(--crm-tinta-2) !important; }
.closing p { color: var(--ink); }
.closing > a { color: var(--green) !important; }

/* ---- FAQ ---- */
.faq-section { border-color: var(--line) !important; }
.faq-section::before { background: var(--crm-card-2) !important; }
.faq-intro > p { color: var(--muted); }
.faq-intro > a { color: var(--green) !important; }
.faq-list details { border-color: var(--line) !important; }
.faq-list summary { color: var(--ink); }
.faq-list summary::after { color: var(--green) !important; }
.faq-list details p { color: var(--crm-tinta-2) !important; }
.faq-list summary:focus-visible, .faq-intro > a:focus-visible { outline-color: var(--green) !important; }

/* ---- Footer ---- */
.site-footer { border-color: var(--line) !important; color: var(--crm-tinta-3); }
.footer-about p { color: var(--crm-tinta-2) !important; }
.footer-location svg { color: var(--green) !important; }
.footer-contact a { color: var(--ink) !important; }
.footer-contact a:hover { color: var(--green) !important; }
.footer-contact svg { color: var(--green) !important; }
.footer-bottom { border-color: var(--line) !important; }
.footer-bottom > a { color: var(--green) !important; }

/* ---- Foco accesible, consistente con el CRM ---- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

/* ---- Scrollbar oscura, igual al panel ---- */
* { scrollbar-color: rgba(255, 255, 255, .12) transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); }