/* ============================================================
   dentalAI — Design tokens
   Dos temas: "clínica" (sitio público, Clínica Aurora Dental)
   y "panel" (plataforma dentalAI).
   ============================================================ */

:root {
  /* ---- Marca clínica: porcelana y amanecer ---- */
  --esmalte: #FBF5EE;        /* fondo porcelana cálida */
  --esmalte-2: #F3EAE0;      /* porcelana sombreada (cards, franjas) */
  --petroleo-900: #0E3330;   /* tinta principal */
  --petroleo-700: #1D4E48;   /* tinta secundaria / superficies oscuras */
  --petroleo-100: #DCE9E4;   /* tinte menta suave */
  --aurora-a: #FFA05E;       /* durazno amanecer */
  --aurora-b: #FF7B8C;       /* rosa amanecer */
  --grad-aurora: linear-gradient(115deg, var(--aurora-a) 10%, var(--aurora-b) 90%);
  --blanco: #FFFFFF;

  /* ---- Panel dentalAI ---- */
  --p-bg: #F2F3F0;           /* fondo general del panel */
  --p-surface: #FFFFFF;      /* cards y superficies */
  --p-surface-2: #F8F8F6;    /* superficies hundidas */
  --p-ink: #1B2624;          /* texto principal */
  --p-ink-2: #5A6B67;        /* texto secundario */
  --p-line: #E3E5E0;         /* bordes */
  --p-accent: #14655C;       /* acción principal del panel */
  --p-accent-soft: #E0EFEC;

  /* Estados */
  --ok: #1F9D66;      --ok-soft: #E1F4EA;
  --warn: #C77D1B;    --warn-soft: #FBEFDB;
  --danger: #CE4257;  --danger-soft: #FAE4E8;
  --info: #3E6B9E;    --info-soft: #E4ECF6;

  /* Chat (estilo WhatsApp sin clonarlo) */
  --wa-wallpaper: #EFE8DE;
  --wa-paciente: #FFFFFF;
  --wa-bot: #DFF3E9;
  --wa-humano: #14655C;
  --wa-humano-texto: #FFFFFF;

  /* ---- Tipografía ----
     Webfonts con fallback local: el prototipo funciona offline. */
  --font-display: "Bricolage Grotesque", "Avenir Next", Seravek, Futura, system-ui, sans-serif;
  --font-body: "Figtree", "Avenir Next", Seravek, system-ui, sans-serif;
  --font-data: "SF Mono", ui-monospace, Menlo, monospace;

  /* Escala */
  --fs-hero: clamp(2.4rem, 6.5vw, 4.2rem);
  --fs-h1: clamp(1.9rem, 4.5vw, 2.8rem);
  --fs-h2: clamp(1.4rem, 3vw, 1.9rem);
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.78rem;

  /* Geometría */
  --radius: 14px;
  --radius-lg: 24px;
  --arco: 999px 999px 18px 18px; /* firma: arco de amanecer */
  --sombra: 0 10px 30px rgba(14, 51, 48, 0.10);
  --sombra-suave: 0 2px 10px rgba(14, 51, 48, 0.07);

  --ancho-sitio: 1080px;
}

/* ---- Temas de color seleccionables (panel → Mi sitio) ----
   Redefinen las variables de marca; sitio y panel los toman al instante. */
:root[data-tema="oceano"] {
  --esmalte: #F1F6F8;
  --esmalte-2: #E3EDF1;
  --petroleo-900: #0C2D3F;
  --petroleo-700: #14506B;
  --petroleo-100: #D7E7ED;
  --aurora-a: #2EC4B6;
  --aurora-b: #4C9FF0;
  --p-accent: #0F6E8C;
  --p-accent-soft: #DDEEF3;
  --wa-humano: #14506B;
}
:root[data-tema="orquidea"] {
  --esmalte: #FAF5F9;
  --esmalte-2: #F1E7F0;
  --petroleo-900: #3B1F42;
  --petroleo-700: #5E3A6B;
  --petroleo-100: #E8DCEA;
  --aurora-a: #9D5BD2;
  --aurora-b: #E85D9E;
  --p-accent: #8A4A9E;
  --p-accent-soft: #F0E4F4;
  --wa-humano: #5E3A6B;
}
/* Dorado (AOD): negro cálido profundo + oro, fiel a la lámina de marca */
:root[data-tema="dorado"] {
  --esmalte: #14100A;
  --esmalte-2: #221B10;
  --petroleo-900: #0B0906;
  --petroleo-700: #C9A45C;
  --petroleo-100: #3A2F1B;
  --aurora-a: #C9A45C;
  --aurora-b: #E9CD8C;
  --p-accent: #8A6D2F;
  --p-accent-soft: #F1E8D5;
  --wa-humano: #6B5527;
  --tinta: #F2E8D0;
  --blanco: #221C12;   /* cards del sitio: superficie oscura en el tema dorado */
  --superficie: #221C12;
  --superficie-hover: #2B2317;
  --superficie-sel: #352916;
  --wa-tinta: #1F1A12;
}
/* retoques del tema dorado en el sitio: oro manda, texto oscuro sobre oro */
[data-tema="dorado"] .btn--aurora,
[data-tema="dorado"] .fab-wsp {
  color: #14100A;
  box-shadow: 0 6px 18px rgba(201, 164, 92, 0.35);
}
[data-tema="dorado"] .telefono { background: #050403; }
[data-tema="dorado"] .telefono-header { color: #14100A; }
[data-tema="dorado"] .servicio-agendar:hover { color: #14100A; }
[data-tema="dorado"] .widget-enviar { color: #14100A; }

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--aurora-a); outline-offset: 2px; }
.panel :focus-visible, [data-theme="panel"] :focus-visible { outline-color: var(--p-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Componentes compartidos mínimos ---- */

/* Anillo aurora: señala dónde está trabajando la IA (firma del panel) */
.anillo-ia {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
}
.anillo-ia::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--grad-aurora);
  animation: anillo-girar 3.2s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
@keyframes anillo-girar {
  to { transform: rotate(1turn); }
}

/* Chips de estado */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.chip--ok     { background: var(--ok-soft);     color: var(--ok); }
.chip--warn   { background: var(--warn-soft);   color: var(--warn); }
.chip--danger { background: var(--danger-soft); color: var(--danger); }
.chip--info   { background: var(--info-soft);   color: var(--info); }
.chip--ia     { background: linear-gradient(115deg, #FFEDE0, #FFE4E8); color: #C25E33; }

/* Avatares */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  flex: none;
}
.avatar--bot { background: var(--petroleo-700); }
.avatar--sm { width: 30px; height: 30px; font-size: 0.7rem; }

/* Burbujas de chat (widget del sitio, inbox y playground del panel) */
.hilo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.burbuja {
  position: relative;
  color: var(--wa-tinta, var(--petroleo-900));
  max-width: 78%;
  padding: 9px 12px 7px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.45;
  box-shadow: 0 1px 1px rgba(14, 51, 48, 0.08);
}
.burbuja p { margin: 0; }
.burbuja--paciente {
  align-self: flex-end;
  background: var(--wa-paciente);
  border-bottom-right-radius: 4px;
}
.burbuja--bot {
  align-self: flex-start;
  background: var(--wa-bot);
  border-bottom-left-radius: 4px;
}
.burbuja--humano {
  align-self: flex-start;
  background: var(--wa-humano);
  color: var(--wa-humano-texto);
  border-bottom-left-radius: 4px;
}
.burbuja-firma {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 2px;
}
.burbuja--bot .burbuja-firma { color: #0E7A5F; }
.burbuja-hora {
  display: block;
  font-size: 0.65rem;
  opacity: 0.55;
  text-align: right;
  margin-top: 3px;
  font-family: var(--font-data);
}
.burbuja--escribiendo {
  align-self: flex-start;
  background: var(--wa-bot);
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
}
.burbuja--escribiendo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0E7A5F;
  opacity: 0.4;
  animation: punto 1.2s infinite;
}
.burbuja--escribiendo i:nth-child(2) { animation-delay: 0.2s; }
.burbuja--escribiendo i:nth-child(3) { animation-delay: 0.4s; }
@keyframes punto {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Respuestas rápidas del bot */
.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 16px 14px;
}
.quick-replies button {
  border: 1.5px solid var(--petroleo-700);
  color: var(--petroleo-700);
  background: #fff;
  border-radius: 999px;
  padding: 0.45em 1em;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.quick-replies button:hover {
  background: var(--petroleo-700);
  color: #fff;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 120%);
  background: var(--petroleo-900);
  color: #fff;
  padding: 0.8em 1.3em;
  border-radius: 12px;
  box-shadow: var(--sombra);
  font-size: var(--fs-small);
  z-index: 1000;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  max-width: min(92vw, 480px);
  text-align: center;
}
.toast.visible { transform: translate(-50%, 0); }