/* Lo común de la presentación y la guía: letra, colores (los de app/src/lib/estilos.ts e identidad de marca, negro,
   crema y rojo copihue), foco, botón de tema. Se carga antes de presentacion.css o estilos.css. */

/* Bricolage Grotesque ExtraBold (licencia OFL, ver fuentes/OFL.txt), alojada aquí y no en Google Fonts. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fuentes/bricolage-extrabold.woff") format("woff");
  font-weight: 800;
  font-display: swap;
}

:root {
  --negro: #0e0e10;
  --crema: #f6ebdd;
  --rojo: #e0384b;
  --rojo-sobre-crema: #d0263b;

  --fondo: #fbf8f4;
  --fondo-alterno: #f4ede3;
  --superficie: #ffffff;
  --texto: #141416;
  --tenue: #5f5c64;
  --borde: #e6e2dc;
  --primario: var(--negro);
  --primario-suave: #f3ece2;
  --primario-oscuro: #000000;
  --sobre-primario: var(--crema);
  --marca: var(--rojo-sobre-crema);
  --figura: var(--negro);
  --peligro: #c2410c;
  --peligro-suave: #fdeee6;
  --aviso-suave: #fff6d6;
  --aviso: #8a6800;
  --leido: #1f8fd6;
  --burbuja-propia: var(--crema);
  --burbuja-ajena: #ffffff;
  /* Secciones negras de marca: negro puro en tema claro, un tono más claro que la página en oscuro. */
  --seccion-oscura: var(--negro);
  --tarjeta-oscura: #18181b;
  --borde-oscuro: #2a292d;

  --titulos: "Bricolage Grotesque", system-ui, sans-serif;
  --radio: 20px;
  --sombra: 0 1px 2px rgba(14, 14, 16, 0.06), 0 12px 32px -12px rgba(14, 14, 16, 0.18);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0e0e10;
    --fondo-alterno: #141416;
    --superficie: #1a1a1d;
    --texto: #efece8;
    --tenue: #a3a1a6;
    --borde: #2e2d31;
    --primario: var(--crema);
    --primario-suave: #2a2622;
    --primario-oscuro: #ffffff;
    --sobre-primario: var(--negro);
    --marca: var(--rojo);
    --figura: var(--crema);
    --peligro: #fb8a4c;
    --peligro-suave: #3a2216;
    --aviso-suave: #2b2614;
    --aviso: #e2c25a;
    --leido: #5cb3ee;
    --burbuja-propia: #2f2a24;
    --burbuja-ajena: #1c1c1f;
    --seccion-oscura: #18181b;
    --tarjeta-oscura: #222226;
    --borde-oscuro: #333237;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
/* Elegido con el botón de tema (tema.js): igual que el oscuro del sistema. */
:root[data-theme="dark"] {
  --fondo: #0e0e10;
  --fondo-alterno: #141416;
  --superficie: #1a1a1d;
  --texto: #efece8;
  --tenue: #a3a1a6;
  --borde: #2e2d31;
  --primario: var(--crema);
  --primario-suave: #2a2622;
  --primario-oscuro: #ffffff;
  --sobre-primario: var(--negro);
  --marca: var(--rojo);
  --figura: var(--crema);
  --peligro: #fb8a4c;
  --peligro-suave: #3a2216;
  --aviso-suave: #2b2614;
  --aviso: #e2c25a;
  --leido: #5cb3ee;
  --burbuja-propia: #2f2a24;
  --burbuja-ajena: #1c1c1f;
  --seccion-oscura: #18181b;
  --tarjeta-oscura: #222226;
  --borde-oscuro: #333237;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Los íconos reutilizables (<symbol>): definidos, pero sin ocupar lugar. */
.sprite { position: absolute; }

/* --- Accesibilidad --- */

.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--primario); color: var(--sobre-primario); padding: 8px 14px; border-radius: 10px; }
.saltar:focus { left: 8px; }

.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 6px; }

/* --- Botón de tema claro u oscuro (tema.js) --- */

.boton-tema {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  transition: background 0.15s, transform 0.2s;
}
.boton-tema:hover { transform: rotate(-12deg); }
.boton-tema svg { width: 19px; height: 19px; display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton-tema { transition: none; }
  .boton-tema:hover { transform: none; }
}

/* --- Volver arriba (subir.js): la Cuncuna es la nave; Po y Po chico, los propulsores --- */

.subir {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  --subir-nave: var(--sobre-primario);
  --subir-ojos: var(--primario);
  z-index: 45; /* bajo la barra de arriba y, en la guía, bajo el panel de temas (ver estilos.css) */
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), visibility 0.2s;
}
.subir.visible { opacity: 1; visibility: visible; transform: none; }
.subir:focus-visible { border-radius: 50%; }

.subir-fondo { position: absolute; inset: 0; border-radius: 50%; background: var(--primario); box-shadow: var(--sombra); }
.subir-nave, .subir-propulsores { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.subir svg { display: block; width: auto; height: 52px; overflow: visible; }
.subir-nave rect, .subir-nave circle { transition: fill 0.15s 0.2s; }
.subir-propulsores { transform-origin: 42% 82%; }
.subir-humo { position: absolute; left: 50%; bottom: 2px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: color-mix(in srgb, var(--tenue) 45%, transparent); opacity: 0; pointer-events: none; }

/* Calentando motores: la nave tiembla y los propulsores laten. */
@media (hover: hover) {
  .subir.visible:not(.despegando):hover .subir-nave { animation: subir-tiembla 0.16s linear infinite; }
  .subir.visible:not(.despegando):hover .subir-propulsores { animation: subir-laten 0.32s ease-in-out infinite; }
}
.subir.visible:not(.despegando):focus-visible .subir-nave { animation: subir-tiembla 0.16s linear infinite; }
.subir.visible:not(.despegando):focus-visible .subir-propulsores { animation: subir-laten 0.32s ease-in-out infinite; }

/* Despegue: se agacha, parte lento y acelera. Los propulsores siguen a la nave, un poco atrás y estirados. */
/* Fuera del círculo, la nave toma el color de la figura: si no, sería crema sobre la página clara. */
.subir.despegando { opacity: 1; visibility: visible; transform: none; --subir-nave: var(--figura); --subir-ojos: var(--fondo); }
.subir.despegando .subir-nave svg { filter: drop-shadow(0 0 1.5px var(--fondo)); }
.subir.despegando .subir-fondo { animation: subir-plataforma 0.9s ease-in forwards; }
.subir.despegando .subir-nave { animation: subir-despega 1.15s cubic-bezier(0.6, 0, 0.9, 0.4) forwards; }
.subir.despegando .subir-propulsores { animation: subir-empuje 1.15s cubic-bezier(0.6, 0, 0.9, 0.4) forwards; }
.subir.despegando .subir-humo { animation: subir-nube 0.9s ease-out 0.16s forwards; }
.subir.despegando .subir-humo:nth-of-type(2) { --lado: -30px; animation-delay: 0.1s; }
.subir.despegando .subir-humo:nth-of-type(3) { --lado: 30px; animation-delay: 0.22s; }
.subir.despegando .subir-humo:nth-of-type(4) { --lado: 4px; animation-delay: 0.3s; }

@keyframes subir-tiembla { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, -1px); } }
@keyframes subir-laten { 0%, 100% { transform: scale(1); } 50% { transform: translateY(1px) scale(1.14, 1.2); } }
@keyframes subir-plataforma { 0%, 12% { transform: scale(1); opacity: 1; } 55%, 100% { transform: scale(0.5); opacity: 0; } }
@keyframes subir-despega {
  0% { transform: none; }
  14% { transform: translateY(5px) scale(1.04, 0.95); }
  100% { transform: translateY(calc(var(--vuelo, 900px) * -1)) rotate(-11deg) scale(0.92, 1.1); }
}
@keyframes subir-empuje {
  0% { transform: none; }
  14% { transform: translateY(5px) scale(1.2); }
  100% { transform: translateY(calc(var(--vuelo, 900px) * -1 + 26px)) rotate(-11deg) scale(1.05, 1.7); }
}
@keyframes subir-nube { 0% { opacity: 0.9; transform: translate(0, 0) scale(0.4); } 100% { opacity: 0; transform: translate(var(--lado, 0), -8px) scale(1.9); } }

@media (prefers-reduced-motion: reduce) {
  .subir, .subir * { transition: none; animation: none !important; }
}

@media print { .subir { display: none; } }