/* ============================================================
   TEMA OSCURO
   ============================================================
   Todo lo de este archivo vive bajo [data-tema="oscuro"], que solo
   aparece en <html> cuando la visitante lo activa. El tema claro es el
   principal y no se toca: si se borra este archivo y su <link>, la web
   vuelve exactamente a como estaba.

   Para desactivarlo del todo:
       powershell -ExecutionPolicy Bypass -File quitar-modo-oscuro.ps1
   (está en la carpeta guchi-privado)

   Por qué hay menos reglas de las que parecería: casi todos los colores
   escritos a mano del CSS son variantes con transparencia de los tonos de
   marca, y siguen funcionando en oscuro sin tocarlos. Los filetes en tan
   sobre fondo oscuro dan 2.29:1, que es MÁS contraste que en claro (1.35:1),
   y el texto crema sobre las superficies oscuras (fichas, banda, pie) ya
   estaba pensado para eso. Lo único que había que rehacer son las
   superficies claras y las que se volvían invisibles.
   ============================================================ */

/* ---------- paleta ----------
   No se redefinen --cream ni --espresso a propósito: los usa tanto el fondo
   claro como el texto claro sobre superficies oscuras. Cambiarlos rompería
   el pie, la banda y los cuadros de tratamiento. Se redefinen solo los
   tokens que son puramente de rol.
   Contrastes medidos sobre el fondo: texto 14.3:1, secundario 7.7:1,
   rótulos 8.6:1. Todos por encima de AA. */
[data-tema="oscuro"]{
  --fondo:#1a1411;          /* marrón muy oscuro y cálido, no gris neutro */
  --paper:#241c17;          /* superficies elevadas: tarjetas, secciones */
  --ink:#ece3d6;
  --muted:#b5a695;
  --label:#c9ae93;
}

/* ---------- fondos base ---------- */
[data-tema="oscuro"] body{background:var(--fondo)}

/* .nav y .hero SOLO llevan fondo propio por debajo de 900px: ahí el menú es
   una capa a pantalla completa y necesita tapar la página. En escritorio, en
   cambio, .nav es la fila de enlaces dentro de la cabecera y no tiene fondo,
   porque la cabecera es un cristal translúcido.
   Dárselo a .nav en todos los anchos era el bloque oscuro que se recortaba
   sobre la cabecera: un rectángulo opaco pintado justo encima del degradado.
   Se replica exactamente el mismo alcance que en claro. */
@media(max-width:900px){
  [data-tema="oscuro"] .nav,
  [data-tema="oscuro"] .hero{background:var(--fondo)}
}

/* ---------- cabecera vidriada ----------
   El degradado original parte del papel claro. En oscuro se invierte para
   que el desenfoque siga leyéndose como cristal y no como una banda clara.
   Las opacidades son las mismas que en claro (.78 → .52 → .20) y el blur y la
   saturación se heredan de styles.css: el objetivo es que el cristal se
   comporte igual en los dos temas. */
[data-tema="oscuro"] .header{
  background:linear-gradient(180deg,
      rgba(36,28,23,.82) 0%,
      rgba(26,20,17,.55) 55%,
      rgba(26,20,17,.20) 100%);
  box-shadow:inset 0 1px 0 rgba(236,227,214,.07);
}
[data-tema="oscuro"] .header.is-stuck{
  background:linear-gradient(180deg,rgba(36,28,23,.94),rgba(26,20,17,.84));
  box-shadow:inset 0 1px 0 rgba(236,227,214,.09),0 18px 40px -32px rgba(0,0,0,.8);
}

/* ---------- hero ----------
   La foto es papel crema: en oscuro sería un rectángulo brillante. El truco
   invert + hue-rotate le da la vuelta a la luminosidad conservando el tono,
   así que el papel pasa a casi negro y la espiga queda como una forma algo
   más clara encima. El velo aporta el color cálido y funde el borde. */
[data-tema="oscuro"] .hero__media img{
  filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) sepia(.22) saturate(1.5);
}
[data-tema="oscuro"] .hero__media::after{
  background:
    linear-gradient(90deg,
      var(--fondo) 0%,
      rgba(26,20,17,.88) 12%,
      rgba(26,20,17,.5) 27%,
      rgba(26,20,17,0) 45%),
    linear-gradient(180deg,rgba(26,20,17,.5),rgba(26,20,17,0) 18%);
}
@media(max-width:900px){
  [data-tema="oscuro"] .hero__media::after{
    background:
      linear-gradient(180deg,
        var(--fondo) 0%,
        rgba(26,20,17,.9) 13%,
        rgba(26,20,17,.62) 34%,
        rgba(26,20,17,.55) 60%,
        rgba(26,20,17,.72) 100%);
  }
}

/* ---------- botones ----------
   El botón de contorno usaba texto espresso: sobre fondo oscuro desaparecía.
   El sólido era espresso sobre espresso, invisible contra la página. */
[data-tema="oscuro"] .btn{--fg:var(--ink);--bd:rgba(236,227,214,.4)}
[data-tema="oscuro"] .btn--outline{--bd:rgba(236,227,214,.32)}
[data-tema="oscuro"] .btn--solid{
  --bg:var(--ink);--fg:#1a1411;--bd:var(--ink);--glow:236,227,214;
}
[data-tema="oscuro"] .btn--cream{--bg:var(--ink);--fg:#1a1411;--bd:var(--ink);--glow:236,227,214}
[data-tema="oscuro"] .link{color:var(--label)}

/* El «Reservar cita» del menú móvil llevaba color:var(--cream) fijado por
   «.nav .nav__cta», que gana por especificidad al color del botón. Como en
   oscuro ese botón pasa a tener fondo claro, quedaba texto claro sobre fondo
   claro: ilegible. Hace falta el mismo peso de selector para revertirlo. */
[data-tema="oscuro"] .nav .nav__cta,
[data-tema="oscuro"] .nav .nav__cta:hover,
[data-tema="oscuro"] .nav .nav__cta:focus-visible{color:#1a1411}

/* ---------- textos que se quedaron en color de tema claro ----------
   Mismo problema que el botón de arriba, en otros sitios. Hay trozos de CSS
   que escriben var(--espresso) o var(--cocoa) directamente en vez de usar
   --ink o --label, y esos dos tonos NO se redefinen en oscuro a propósito
   (los usan también los fondos oscuros del pie, la banda y los cuadros).
   Resultado: marrón oscuro sobre marrón oscuro. Medido antes de tocar nada:
   espresso 1.58:1 sobre el fondo y 1.45:1 sobre las tarjetas; cocoa 2.97:1 y
   2.73:1. Prácticamente invisible el primero, por debajo de AA el segundo.
   Con los tokens de oscuro quedan en 14.3:1 (ink) y 8.6:1 (label). */
[data-tema="oscuro"] .trust__num,
[data-tema="oscuro"] .trust__claim,
[data-tema="oscuro"] .trust__cities,
[data-tema="oscuro"] .value h4,
[data-tema="oscuro"] .faq summary,
[data-tema="oscuro"] .crumbs [aria-current],
[data-tema="oscuro"] .nav a:hover,
[data-tema="oscuro"] .nav a.active,
[data-tema="oscuro"] .qindex a:hover{color:var(--ink)}

/* las tres rayitas del menú también eran espresso: no se veían */
[data-tema="oscuro"] .burger span{background:var(--ink)}

/* estados de foco y hover: cobre apagado → arena, que sí destaca */
[data-tema="oscuro"] .faq summary:hover,
[data-tema="oscuro"] .faq details[open] summary,
[data-tema="oscuro"] .scroll-cue:hover{color:var(--label)}
[data-tema="oscuro"] .scroll-cue:hover{border-color:var(--label)}
[data-tema="oscuro"] .nav a::after{background:var(--label)}
[data-tema="oscuro"] .crumbs a:hover,
[data-tema="oscuro"] .legal a:hover{border-bottom-color:var(--label)}
[data-tema="oscuro"] .tile:focus-visible{outline-color:var(--label)}

/* el enlace a Doctoralia y el botón de contorno del hero en móvil aclaraban
   al pasar por encima, que en oscuro es justo al revés de lo que hace falta */
[data-tema="oscuro"] .quote__source:hover{color:var(--ink);border-color:var(--ink)}
[data-tema="oscuro"] .hero__cta .btn--outline:hover,
[data-tema="oscuro"] .hero__cta .btn--outline:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- banda «Experiencia médica» ----------
   El tan a pleno sería un bloque muy luminoso en mitad de una página
   oscura. Se apaga a un cobre profundo conservando el calor. */
[data-tema="oscuro"] .band{
  background:linear-gradient(115deg,#4a3627 0%,#432f22 55%,#3a291d 100%);
}
[data-tema="oscuro"] .band__list li{border-bottom-color:rgba(236,227,214,.18)}

/* ---------- llamada final y pie ----------
   Ambos eran los bloques oscuros que contrastaban contra la página clara.
   En oscuro hay que diferenciarlos del fondo, no al revés. */
[data-tema="oscuro"] .cta{background:#2b211a}
[data-tema="oscuro"] .cta::before{
  background:radial-gradient(circle,rgba(178,150,125,.16),transparent 62%);
}
[data-tema="oscuro"] .footer{background:#120d0b}

/* ---------- hueco a la espera de texto ---------- */
[data-tema="oscuro"] .slot{background:rgba(236,227,214,.04)}

/* ---------- logos de marca ----------
   multiply sobre oscuro los volvería negros. screen hace lo contrario:
   deja pasar lo claro del logo y funde el blanco del fondo. */
[data-tema="oscuro"] .brand-logo img{mix-blend-mode:screen;opacity:.72}
[data-tema="oscuro"] .brand-logo:hover img{opacity:1}

/* ---------- monograma ----------
   El PNG del logotipo es rosa oscuro; sobre el fondo oscuro pierde fuerza. */
[data-tema="oscuro"] .header .mark img,
[data-tema="oscuro"] .footer .mark img{filter:brightness(1.35) saturate(.9)}

/* ---------- interruptor del tema ---------- */
.tema{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;padding:0;
  background:none;border:1px solid rgba(178,150,125,.5);border-radius:50%;
  color:var(--label);cursor:pointer;
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.tema:hover{color:var(--ink);border-color:var(--label);transform:translateY(-1px)}
.tema:focus-visible{outline:1px solid var(--label);outline-offset:3px}
.tema svg{width:16px;height:16px}
/* solo se ve el icono que corresponde al tema activo */
.tema .tema__luna{display:block}
.tema .tema__sol{display:none}
[data-tema="oscuro"] .tema .tema__luna{display:none}
[data-tema="oscuro"] .tema .tema__sol{display:block}
[data-tema="oscuro"] .tema{border-color:rgba(236,227,214,.32)}

/* en el menú móvil el interruptor va dentro del desplegable, con etiqueta */
@media(max-width:900px){
  .tema{width:auto;height:auto;border-radius:999px;padding:.7rem 1.4rem;gap:.7rem}
  .tema::after{
    content:'Modo oscuro';
    font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  }
  [data-tema="oscuro"] .tema::after{content:'Modo claro'}
}

/* quien pide menos movimiento no quiere la transición de color al cambiar */
@media(prefers-reduced-motion:no-preference){
  body,.header,.cta,.footer,.band,.quote,.trust,.about{
    transition:background-color .35s var(--ease),color .35s var(--ease);
  }
}