/* ════════════════════════════════════════════════════
   base.css — variables globales, reset, layout base
   Tipografía: Sour Gummy en títulos, Josefin Sans en el resto. Disposición de botones de Galaxial.

   LA PALETA NO VIVE ACÁ: la saca js/fondo.js de la foto de muestra que
   toca de fondo en cada visita (acento, acento-2, fondos, bordes y textos
   teñidos del mismo matiz) y la escribe en :root. Estos valores son solo
   el arranque neutro, lo que se ve el instante antes de que llegue la foto
   (o siempre, si no hubiera muestras).
════════════════════════════════════════════════════ */

/* Registradas como <color>: así la paleta nueva entra con un fundido y no
   con un salto (sin @property una variable CSS no se puede animar). */
@property --acento        { syntax: '<color>'; inherits: true; initial-value: #8fb8d6; }
@property --acento-2      { syntax: '<color>'; inherits: true; initial-value: #c9a27a; }
@property --acento-texto  { syntax: '<color>'; inherits: true; initial-value: #0d1a24; }
@property --bg            { syntax: '<color>'; inherits: true; initial-value: #0d0f11; }
@property --bg2           { syntax: '<color>'; inherits: true; initial-value: #14171a; }
@property --bg3           { syntax: '<color>'; inherits: true; initial-value: #1c2024; }
@property --borde         { syntax: '<color>'; inherits: true; initial-value: #2c3238; }
@property --borde-2       { syntax: '<color>'; inherits: true; initial-value: #3d444c; }
@property --texto         { syntax: '<color>'; inherits: true; initial-value: #d3d9de; }
@property --texto-tenue   { syntax: '<color>'; inherits: true; initial-value: #97a1aa; }
@property --texto-brillante { syntax: '<color>'; inherits: true; initial-value: #f1f4f6; }

:root {
  --bg:          #0d0f11;
  --bg2:         #14171a;
  --bg3:         #1c2024;
  --borde:       #2c3238;
  --borde-2:     #3d444c;   /* borde de los controles: un punto más claro que --borde */
  --texto:       #d3d9de;
  --texto-tenue: #97a1aa;
  --texto-brillante: #f1f4f6;

  --acento:       #8fb8d6;
  --acento-2:     #c9a27a;
  --acento-texto: #0d1a24;
  --acento-tenue: color-mix(in srgb, var(--acento) 12%, transparent);
  --glow:         0 0 14px color-mix(in srgb, var(--acento) 35%, transparent);

  transition: --acento .9s ease, --acento-2 .9s ease, --acento-texto .9s ease,
              --bg .9s ease, --bg2 .9s ease, --bg3 .9s ease, --borde .9s ease, --borde-2 .9s ease,
              --texto .9s ease, --texto-tenue .9s ease, --texto-brillante .9s ease;

  --fuente-display: 'Sour Gummy', 'Josefin Sans', system-ui, sans-serif;
  --fuente: 'Josefin Sans', ui-sans-serif, system-ui, sans-serif;

  /* Formas: la herramienta convierte rectángulos en círculos, y la
     interfaz lo repite — botones-icono circulares, botones con texto en
     píldora; paneles y tarjetas con esquinas suaves. */
  --r-boton: 999px;
  --r-panel: 14px;
  --r-ficha: 10px;

  /* Medidas de la interfaz del visor (mismo esquema que Galaxial) */
  --barra-h: 44px;

  --gap-s: clamp(8px, 2vw, 12px);
  --gap-m: clamp(14px, 3vw, 22px);
  --gap-l: clamp(24px, 5vw, 44px);

  color-scheme: only dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fuente);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select { font-family: inherit; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

kbd {
  font-family: inherit; font-size: .9em;
  padding: 2px 5px 1px; border: 1px solid var(--borde-2); border-radius: 5px;
  color: var(--texto);
}

/* ── Botones con texto ─────────────────────
   Mismo lenguaje que .boton de Galaxial: rótulo corto en versalitas con
   espaciado, alto mínimo de 28px (WCAG 2.5.8), borde fino, en píldora.
   El relleno de acento queda reservado para la acción principal. */
.tp-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto);
  background: var(--bg3);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-boton);
  /* Las mayúsculas de Josefin Sans quedan altas en su caja (su centro va
     0,135 em por encima del de la línea): se bajan con relleno asimétrico. */
  padding: calc(6px + .135em) 16px calc(6px - .135em);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, filter .15s;
  white-space: nowrap;
}
.tp-boton:hover { border-color: var(--acento); color: var(--texto-brillante); }
.tp-boton--primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.tp-boton--primario:hover { filter: brightness(1.08); color: var(--acento-texto); }
/* "Fuerte" (Galaxial: .boton-fuerte): contorno y texto en acento; se rellena al pasar. */
.tp-boton--fuerte { border-color: var(--acento); color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, var(--bg3)); }
.tp-boton--fuerte:hover { background: var(--acento); color: var(--acento-texto); }
.tp-boton--fantasma { background: transparent; border-color: transparent; color: var(--texto-tenue); }
.tp-boton--fantasma:hover { color: var(--texto); border-color: var(--borde); }
.tp-boton--bloqueado { opacity: .5; cursor: not-allowed; }
.tp-boton--bloqueado:hover { border-color: var(--borde-2); color: var(--texto); }
.tp-boton:disabled { opacity: .6; cursor: wait; }
.tp-boton[hidden] { display: none; }   /* inline-flex le ganaría a [hidden] (el "Entendido" del modal lo usa) */

/* Ícono dentro de un botón con texto */
.tp-ico { width: 15px; height: 15px; flex: none; display: block; }
.tp-ico--chico { width: 11px; height: 11px; }

/* ── Botones-icono ─────────────────────────
   El .icono de Galaxial, pero circular: 30px, borde fino, trazo de 1.4 sobre
   un viewBox de 24. aria-pressed (interruptores) y aria-selected (pestañas)
   comparten el mismo estado "activo" en acento. Sin rótulo visible: el
   nombre va en title (tooltip nativo, con el atajo) y en aria-label. */
.tp-icono {
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--borde-2);
  border-radius: 50%;
  background: var(--bg3);
  color: var(--texto-tenue);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.tp-icono:hover { color: var(--texto-brillante); border-color: var(--acento); }
.tp-icono[aria-pressed="true"],
.tp-icono[aria-selected="true"] {
  color: var(--acento); border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 14%, var(--bg3));
}
.tp-icono svg { width: 16px; height: 16px; display: block; }
.tp-icono[hidden] { display: none; }   /* inline-flex le ganaría a [hidden] */
.tp-icono:disabled { opacity: .35; pointer-events: none; }
/* Sin caja: para los que acompañan a otro control (las lupas del zoom) */
.tp-icono--plano { background: transparent; border-color: transparent; }
.tp-icono--plano:hover { border-color: transparent; }