/* ============================================================
   ClinícaMente · Identidad de marca
   Paleta derivada del logo (cerebro en línea continua con flores)
   Turquesa = clínico/profesional · Orquídea = cálido/humano
   Este archivo re-mapea los tokens existentes de cada módulo,
   por lo que debe enlazarse DESPUÉS del <style> de la página.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

:root{
  /* ---- Tokens canónicos ClinícaMente ---- */
  --clm-teal:#2f8e99;        /* primario — acciones, títulos */
  --clm-teal-d:#1f6d77;      /* primario oscuro — hover */
  --clm-teal-l:#5dc6d1;      /* turquesa del logo */
  --clm-aqua:#ceedf0;        /* celeste del logo */
  --clm-aqua-tint:#e8f5f7;
  --clm-orchid:#b25fb4;      /* acento — botones secundarios */
  --clm-orchid-d:#92489a;
  --clm-orchid-l:#f3aef0;    /* rosa orquídea del logo */
  --clm-orchid-tint:#fbeffb;
  --clm-lavender:#d3cfe1;    /* flor lavanda del logo */
  --clm-ink:#2b3236;
  --clm-fg3:#6b7d81;
  --clm-paper:#ffffff;
  --clm-bone:#fbfdfd;
  --clm-line:#d9e6e8;
  --clm-green:#3a8f2a;
  --clm-red:#c0392b;

  /* ---- Re-mapeo de tokens legados (módulos malva/dorado) ---- */
  --mauve:var(--clm-teal);
  --mauve-d:var(--clm-teal-d);
  --gold:var(--clm-orchid);
  --gold-deep:var(--clm-orchid-d);
  --gold-tint:var(--clm-orchid-tint);
  --rose:var(--clm-orchid-l);
  --rose-deep:#d883d3;
  --rose-soft:#fdf1fc;
  --cream:var(--clm-aqua-tint);
  --bone:var(--clm-bone);
  --paper:var(--clm-paper);
  --ink:var(--clm-ink);
  --line:var(--clm-line);
  --fg3:var(--clm-fg3);
  --sage:#5d9460;

  /* ---- Re-mapeo de tokens de Consentimientos (--cm-*) ---- */
  --cm-gold:var(--clm-teal);
  --cm-gold-deep:var(--clm-teal-d);
  --cm-gold-soft:#9edae1;
  --cm-gold-tint:#e2f3f5;
  --cm-rose:var(--clm-orchid-l);
  --cm-rose-deep:#c473b8;
  --cm-rose-soft:#f9def6;
  --cm-rose-tint:#fdf0fb;
  --cm-cream:#eef6f7;
  --cm-cream-2:#e0edee;
  --cm-white:#ffffff;
  --cm-ink:#262e31;
  --cm-fg2:#46555a;
  --cm-fg3:var(--clm-fg3);
  --cm-grey-300:#c4d3d5;
  --cm-grey-200:#d9e5e6;
  --cm-grey-100:#e7efef;
  --cm-grey-50:#f4f9f9;
}

/* ---- Logo en cabeceras (sustituye al círculo "C") ---- */
header .mark,
header.app .mark{
  width:auto;
  height:54px;
  border-radius:0;
  background:none;
  box-shadow:none;
  flex-shrink:0;
}
img.cm-logo{
  display:block;
  height:54px;
  width:auto;
  object-fit:contain;
}

/* ---- Wordmark ClinícaMente (bicolor, como el logo) ---- */
.cm-word{
  font-family:'Quicksand',sans-serif;
  font-weight:600;
  font-style:normal;
  letter-spacing:.4px;
  color:var(--clm-teal);
}
.cm-word em{
  font-style:normal;
  color:var(--clm-orchid);
}
.cm-dot{
  color:var(--clm-fg3);
  font-weight:400;
}

/* ---- Iconos de línea (sustituyen emojis) ---- */
.mod .ic, .pg .ic{ color:var(--clm-teal); }
.mod.g .ic{ color:var(--clm-orchid); }
.mod .ic svg, .pg .ic svg{ display:block; }

/* ---- Pie de página de marca ---- */
footer.cm-footer{
  border-top:2px solid var(--clm-orchid);
  background:linear-gradient(135deg,var(--clm-aqua-tint),var(--clm-orchid-tint));
  padding:20px 28px;
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:32px;
}
footer.cm-footer img{height:48px;width:auto}
footer.cm-footer .w{font-family:'Quicksand',sans-serif;font-weight:600;font-size:19px;color:var(--clm-teal)}
footer.cm-footer .w em{font-style:normal;color:var(--clm-orchid)}
footer.cm-footer .l{font-size:11.5px;color:var(--clm-fg3);line-height:1.55;font-family:'Inter',sans-serif;margin-top:2px}
.container footer.cm-footer{margin-top:0}
@media print{ footer.cm-footer{display:none!important} }

/* ===== Base estructural ClinicaMente (común a todas las pantallas) ===== */
:root{
  --font-titulo:'Cormorant Garamond', Georgia, serif;
  --font-cuerpo:'Inter', system-ui, sans-serif;
  --font-lectura:'Lora', Georgia, serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-cuerpo);color:var(--ink);
  background:linear-gradient(135deg,var(--bone),var(--cream));min-height:100vh}
header{display:flex;align-items:center;gap:14px;padding:16px 28px;
  background:linear-gradient(135deg,var(--cream),var(--rose-soft));
  border-bottom:2px solid var(--gold);box-shadow:0 2px 14px rgba(47,142,153,.10)}
/* círculo "C" para las pantallas que aún no usan el logo */
header .mark:not(.cm-logo){width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 30%,var(--rose),var(--mauve));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;
  font-family:var(--font-titulo);font-weight:700}
header h1{margin:0;font-family:var(--font-titulo);font-size:27px;font-weight:600;color:var(--mauve);letter-spacing:.3px}
header .sub{font-size:13px;color:var(--fg3);font-family:var(--font-lectura)}