/* LA MARCA EN LOS PANELES (agenda y métricas, 04/11/2026).
   Las pantallas vienen de Nativos y cada una trae sus colores en variables (--bg, --surface, --acento…), en claro y en
   oscuro (html[data-tema="oscuro"]). Esta hoja va DESPUÉS de los estilos de cada pantalla y cambia solo esas variables,
   la letra y el fondo: la estructura y el funcionamiento de cada pantalla quedan como estaban.
   Colores y letra: los de la página (estilos.css): negro #060606, marfil #f4f1ec, coral #e47860, Montserrat y el degradado. */

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200 600; font-display: swap; src: url(/fuentes/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/fuentes/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200 600; font-display: swap; src: url(/fuentes/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/fuentes/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Los colores ── */
:root {
  --degradado: linear-gradient(90deg, #8061d6, #ce6bbb 25%, #fb6ea2 48%, #ff7774 72%, #f69e3d);
  --bg: #f6f3ee; --surface: rgb(255 255 255 / .9); --surface2: #efebe5; --linea: #e2dcd3;
  --texto: #15120f; --muted: #6b645e; --acento: #b84c36; --acento-txt: #ffffff;
  color-scheme: light;
}
html[data-tema="oscuro"] {
  --bg: #060606; --surface: rgb(20 20 20 / .84); --surface2: #1b1a19; --linea: #2b2927;
  --texto: #f4f1ec; --muted: #a9a4a0; --acento: #e47860; --acento-txt: #1c0d08;
  color-scheme: dark;
}

/* ── La letra y el fondo ── */
html { background: var(--bg); }
body { background: transparent !important; font-family: "Montserrat", "Segoe UI", system-ui, sans-serif !important; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--acento); color: var(--acento-txt); }

/* Las tarjetas dejan ver el diente detrás, apenas, sin perder lectura */
.card, .login-caja, .modal-caja, .resumen, .barra { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Títulos como los de la página: mayúsculas delgadas, con el logo de la R adelante */
.cabecera h1 { text-transform: uppercase; font-weight: 300; letter-spacing: .02em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cabecera h1::before {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: url(/img/logo-r-blanco.png) center / contain no-repeat;
}
html:not([data-tema="oscuro"]) .cabecera h1::before { filter: invert(1); }
.cabecera h1 span { text-transform: none; letter-spacing: 0; }
.cabecera h1 strong, .marca-degradado {
  font-weight: 800; color: transparent; background: var(--degradado); -webkit-background-clip: text; background-clip: text;
}

/* Botones redondos, como en la página */
button.primario, button.principal, .b-confirmar, .nb, .tema { border-radius: 999px !important; }
button.primario, button.principal, .b-confirmar { font-weight: 700; letter-spacing: .04em; }

/* ── El diente de fondo (panel/fondo-diente.js) ── */
#fondo-diente {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease;
}
.con-diente #fondo-diente { opacity: .42; }
html:not([data-tema="oscuro"]).con-diente #fondo-diente { opacity: .6; }
#fondo-tratamiento {
  position: fixed; right: clamp(16px, 4vw, 48px); bottom: clamp(14px, 3vh, 32px); z-index: -1; pointer-events: none;
  font: 800 11px/1 "Montserrat", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .28em;
  color: transparent; background: var(--degradado); -webkit-background-clip: text; background-clip: text;
  opacity: 0; transform: translateY(6px); transition: opacity .8s ease, transform .8s ease;
}
#fondo-tratamiento.visible { opacity: .85; transform: none; }
@media (max-width: 700px) {
  .con-diente #fondo-diente { opacity: .25; }
  #fondo-tratamiento { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #fondo-diente, #fondo-tratamiento { transition: none; }
}