/* ════════════════════════════════════════════════════════════════════════
   comun/css/base.css · Piezas compartidas por las dos webs
   ------------------------------------------------------------------------
   1. Base (reinicio, página, foco, utilidades)
   2. Ornamentos: friso, filete, marco
   3. Botones
   4. Cabecera, logo y marca
   5. Interruptor sol / luna
   6. Banda oscura del pie
   7. Movimiento: tokens, fundido único (View Transitions) y movimiento reducido
   Depende de: tema.css (variables de color y fuentes).
   ════════════════════════════════════════════════════════════════════════ */

/* ---------- 1. Base ----------
   Escala tipográfica de 7 pasos (Beta 1.6). Ningún tamaño de texto fuera de ella (lo revisa
   herramientas/comprobar.py); mínimo 15 px. Cormorant en cursiva solo desde --f-s (16 px).
   Las excepciones son los dígitos del reloj (cqw, crecen con la esfera) y el texto dentro de los SVG. */
:root { --f-xs: .9375rem; --f-s: 1rem; --f-m: 1.125rem; --f-l: 1.35rem; --f-xl: 1.6rem; --f-2xl: 2.2rem; --f-3xl: 2.9rem; --f-4xl: 4.4rem; }
/* Títulos fluidos: solo entre dos pasos de la escala, p. ej. clamp(var(--f-2xl), 4.4vw, var(--f-3xl)) */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { overflow-x: clip; }
body {
  font-family: var(--texto); font-size: var(--f-m); line-height: 1.5; color: var(--tinta);
  min-height: 100vh; overflow-x: clip;
  background-color: var(--papel); background-image: var(--fondo-pagina); background-size: var(--fondo-tamano);
  transition: background-color var(--t-medio) var(--curva), color var(--t-medio) var(--curva);
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--estado); outline-offset: 3px; }
/* Única regla con !important: un elemento oculto con el atributo hidden debe
   ocultarse siempre, aunque otra regla le dé display (flex, grid…). */
[hidden] { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 2. Ornamentos ---------- */
/* Friso: banda de teselas con contorno (la imagen cambia con el tema) */
.friso { height: 14px; flex: none; background: var(--friso) center / 22px 14px repeat-x; border-block: 1.5px solid var(--contorno); }
/* Filete: sol (día) o luna (noche) al centro con dos latigazos, bajo los títulos */
.filete { display: block; width: 210px; max-width: 64%; height: 22px; margin: 8px auto 0; color: var(--oro); }
/* Marco: contorno castaño + línea de oro interior, como los paneles de Mucha.
   Beta 1.6: mismo doble contorno con la mitad de peso (borde 1,5 px, filete de oro claro, sombra corta). */
.marco {
  position: relative; background: var(--marfil); border: 1.5px solid var(--contorno);
  box-shadow: inset 0 0 0 5px var(--marfil), inset 0 0 0 5.8px var(--linea-suave), 0 14px 30px -24px var(--sombra);
  transition: background-color var(--t-medio) var(--curva);
}

/* ---------- 3. Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none;
  border: 1.5px solid var(--contorno); background: var(--marfil); color: var(--tinta); border-radius: 999px;
  padding: 11px 22px; font-family: var(--display); letter-spacing: .05em; font-size: var(--f-s);
  transition: background var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva);
}
.boton:hover { background: var(--blanco); }
.boton:active { transform: scale(.97); }
.boton.lleno { background: var(--accion); border-color: var(--accion); color: var(--sobre-accion); }
.boton.lleno:hover { background: var(--accion-hover); border-color: var(--accion-hover); }
/* Botón redondo con flecha (carruseles, visor) */
.flecha { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1.5px solid var(--contorno); background: var(--marfil); color: var(--tinta); cursor: pointer; display: grid; place-items: center; transition: opacity var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva); }
.flecha:hover { background: var(--blanco); }
.flecha:disabled { opacity: .35; cursor: default; }
.flecha svg { width: 20px; height: 20px; }

/* ---------- 4. Cabecera, logo y marca ----------
   Una sola cabecera para las dos webs (Beta 1.6). Rejilla de tres columnas:
     marca (izquierda) · .nav-central: secciones con rombos (centro) · .menu: utilidades (derecha)
   Orden de .menu: funciones propias del sitio → interruptor de modo → .divisor → enlace al otro sitio
   (siempre el último, discreto). Todos los controles miden 36 px de alto (44 px de toque en celular).
   Ningún sitio redefine esta pieza (lo revisa herramientas/comprobar.py). */
:root { --ancho-cabecera: 1240px; --alto-control: 36px; }
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--cabecera); backdrop-filter: blur(8px); }
.cabecera-fila {
  max-width: var(--ancho-cabecera); margin: 0 auto; padding: 0 24px; height: 70px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px;
}
.cabecera-fila > .marca { grid-column: 1; justify-self: start; }
.cabecera-fila > .nav-central { grid-column: 2; }
.cabecera-fila > .menu { grid-column: 3; justify-self: end; }
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--tinta); }
.marca-nombre { font-family: var(--display); font-size: var(--f-l); letter-spacing: .06em; white-space: nowrap; }
/* El logo toma el color del texto de su contenedor (currentColor) */
.logo { display: block; flex: none; width: 40px; height: 40px; color: var(--contorno); }
/* Secciones al centro (en el pomodoro, js/secciones.js marca la actual con aria-current) */
.nav-central { display: flex; align-items: center; gap: 14px; }
.nav-central a {
  font-family: var(--display); letter-spacing: .08em; font-size: var(--f-s); color: var(--enlace); text-decoration: none;
  padding: 6px 2px 4px; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
.nav-central a:hover { color: var(--enlace-activo); }
.nav-central a[aria-current] { color: var(--enlace-activo); border-bottom-color: var(--estado); }
.nav-central .sep { width: 6px; height: 6px; transform: rotate(45deg); background: var(--oro); opacity: .7; }
/* Utilidades a la derecha */
.menu { display: flex; align-items: center; gap: 6px; }
.menu .tema-switch { margin: 0 4px; }
.menu .divisor { width: 1px; height: 22px; background: var(--linea-suave); margin: 0 6px; }
.menu-enlace { font-family: var(--display); letter-spacing: .06em; font-size: var(--f-s); text-decoration: none; white-space: nowrap; color: var(--enlace); }
.menu-enlace:hover { color: var(--enlace-activo); }
/* Enlace al otro sitio: siempre al final y discreto (no compite con la acción principal) */
.menu-enlace.otro-sitio {
  display: inline-flex; align-items: center; height: var(--alto-control); padding: 0 14px;
  border: 1px solid var(--linea-suave); border-radius: 999px;
  transition: color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
.menu-enlace.otro-sitio:hover { border-color: var(--contorno); }
@media (max-width: 1100px) { .nav-central { gap: 10px; } .nav-central a { font-size: var(--f-xs); letter-spacing: .06em; } }
/* Entre 760 y 960 px no caben marca, secciones y utilidades con texto: queda solo el logo */
@media (max-width: 959.98px) {
  .cabecera-fila { grid-template-columns: auto minmax(0, 1fr) auto; }   /* las secciones usan el espacio libre del medio */
  .cabecera-fila > .nav-central { justify-self: center; }
  .cabecera-fila:has(.nav-central) .marca-nombre { display: none; }
}
@media (max-width: 759.98px) {
  .nav-central { display: none; }
  .cabecera-fila { padding: 0 14px; gap: 8px; }
  .marca-nombre { font-size: var(--f-m); }
  .menu-enlace.otro-sitio { padding: 0 12px; font-size: var(--f-xs); }
}
@media (max-width: 400px) { .marca-nombre { display: none; } }

/* ---------- 5. Interruptor sol / luna (lo controla comun/js/tema.js) ---------- */
.tema-switch { position: relative; flex: none; width: 64px; height: 32px; padding: 0; border-radius: 999px; border: 1.5px solid var(--contorno); background: var(--pista); cursor: pointer; box-shadow: inset 0 1px 3px rgba(0,0,0,.18); transition: background var(--t-medio) var(--curva); }
.tema-switch .ico { position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; fill: none; stroke: var(--sepia); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.tema-switch .ico.sol { left: 8px; }
.tema-switch .ico.luna { right: 8px; }
.tema-switch .perilla { position: absolute; top: 2px; left: 2px; width: 25px; height: 25px; border-radius: 50%; background: var(--perilla); border: 1.5px solid var(--contorno); display: grid; place-items: center; color: var(--perilla-ico); box-shadow: 0 2px 5px rgba(0,0,0,.22); transition: transform var(--t-medio) cubic-bezier(.45, 1.45, .55, 1), background var(--t-medio) var(--curva);   /* curva propia: un pequeño rebote al llegar */ }
.tema-switch .perilla svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tema-switch .p-sol { fill: none; }
.tema-switch .p-luna { display: none; fill: currentColor; }
.tema-switch[aria-checked="true"] .perilla { transform: translateX(32px); }
.tema-switch[aria-checked="true"] .p-sol { display: none; }
.tema-switch[aria-checked="true"] .p-luna { display: block; }
.tema-switch:focus-visible { outline-color: var(--oro); }

/* ---------- 6. Pie común (Beta 1.6) ----------
   El mismo en las dos webs y sus páginas legales, versión clara (elegida el 24-10):
   friso · marca · contacto, privacidad (y libro de reclamaciones en la tienda) · el otro sitio al final
   · una línea de crédito. Ningún sitio lo redefine (lo revisa herramientas/comprobar.py). */
.pie { margin-top: 72px; color: var(--sepia); }
.pie-fila {
  max-width: var(--ancho-cabecera); margin: 0 auto; padding: 22px 24px 8px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.marca-pie { display: flex; align-items: center; gap: 10px; font-family: var(--display); letter-spacing: .06em; font-size: var(--f-m); color: var(--tinta); }
.pie .logo { width: 28px; height: 28px; color: var(--contorno); }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--display); letter-spacing: .05em; font-size: var(--f-xs); }
.pie a { color: var(--enlace); text-decoration: none; transition: color var(--t-rapido) var(--curva); }
.pie a:hover { color: var(--enlace-activo); }
.pie-credito { max-width: var(--ancho-cabecera); margin: 0 auto; padding: 0 24px 26px; font-size: var(--f-s); font-style: italic; }
@media (max-width: 759.98px) { .pie-fila { padding: 20px 16px 6px; } .pie-credito { padding: 0 16px 22px; } }
/* Rótulo pequeño sobre un título de sección (kicker): DOS MODELOS, PLAN DEL DÍA… */
.kicker { font-family: var(--display); letter-spacing: .28em; font-size: var(--f-xs); color: var(--rotulo); text-transform: uppercase; }

/* ---------- 7. Movimiento ----------
   Tres duraciones y una curva para todo (Beta 1.6); ninguna otra duración en el CSS
   (lo revisa herramientas/comprobar.py):
     --t-rapido  respuesta al tocar (pasar el cursor, pulsar)
     --t-medio   abrir y cerrar (Ajustes, Ambiente, avisos)
     --t-lento   cambios del entorno (etapa, láminas)
   El cambio de modo día/noche y de estilo del reloj es UN fundido de toda la página
   (comun/js/tema.js, TEMA.transicion). Mientras dura, .en-transicion pone las duraciones
   en 0 para que nada funda a otro ritmo por debajo. */
:root { --t-rapido: .15s; --t-medio: .26s; --t-lento: .9s; --curva: cubic-bezier(.2, .7, .2, 1); }
:root.en-transicion { --t-rapido: 0s; --t-medio: 0s; --t-lento: 0s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
:root[data-vt="tema"]::view-transition-old(root), :root[data-vt="tema"]::view-transition-new(root) { animation-duration: .45s; }
/* Si la persona pidió menos animaciones en su sistema, se quitan todas.
   Aquí !important es lo correcto: debe ganar a cualquier transición.
   Ojo: !important va siempre al final del valor; si no, el navegador descarta la declaración
   entera sin avisar (pasó en la Beta 1.6; lo vigilan js/pruebas.js y herramientas/comprobar.py). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}