/* =====================================================================
   La Banda de la Abuela — recursos compartidos
   Tokens de diseño + reset base + tipografías (@font-face)
   Editar aquí afecta a TODAS las páginas (home + las 3 herramientas).
   Rutas relativas a este archivo (tokens.css).
   ===================================================================== */

/* ===== Tipografías (una sola copia en fonts/) ===== */
@font-face{
  font-family:'Bricolage';
  src:url('fonts/Bricolage.ttf') format('truetype');
  font-weight:200 800; font-display:swap;
}
@font-face{
  font-family:'Hanken';
  src:url('fonts/HankenGrotesk.ttf') format('truetype');
  font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Hanken';
  src:url('fonts/HankenGrotesk-Italic.ttf') format('truetype');
  font-weight:300 800; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'SpaceMono';
  src:url('fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'SpaceMono';
  src:url('fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight:700; font-display:swap;
}
/* Fuentes del rebrand v3 "Escenario". Ya NO son opcionales: desde 2026-09-22
   son las de toda la web, los carteles de Instagram y los documentos de
   cliente (ver MEJORAS.md §65). Las de abajo —Bricolage y Space Mono, bajo
   --font-doc-*— son lo que queda del sistema viejo: solo las usa el editor de
   documentos, y al cerrarlo se van ellas, sus @font-face y sus ficheros. */
@font-face{
  font-family:'Anton';
  src:url('fonts/Anton-Regular.ttf') format('truetype');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'MartianMono';
  src:url('fonts/MartianMono.ttf') format('truetype');
  font-weight:100 800; font-display:swap;
}

/* ===== Tokens de color (cámbialos aquí y afecta a todo) ===== */
:root{
  /* ===== Paleta LEGADO — solo DOCUMENTOS claros =====
     Tras el rebrand v3, estos tokens ya NO los usa la web (landing, panel,
     páginas públicas, calendario, login), que va sobre la paleta v3 de abajo.
     Los conservan las superficies tipo documento impreso, que son claras:
     presupuesto, contratación y el dossier (fondo papel + texto oscuro). */
  --ink:#1A1513;
  --ink-2:#241E1A;
  --ink-3:#2F2823;
  --paper:#F1ECE4;
  --paper-2:#E8E0D4;
  --paper-3:#D8CDBC;
  --line:#CDC1AE;
  --red:#DC3A2B;
  --red-deep:#B62A1D;
  --muted:#8A7E70;
  --muted-2:#A89C8C;
  --cream:#EFE8DD;
  --cream-2:#C9BFB1;

  /* ===== Tipografía de marca v3 (consolidada) =====
     Default de toda la web. Los DOCUMENTOS impresos (presupuesto, contratación,
     dossier) y los carteles conservan su tipografía original vía --font-doc-*. */
  --font-display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body:'Hanken', system-ui, -apple-system, sans-serif;
  --font-mono:'MartianMono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* LEGADO, en retirada: ya no son "la tipografía de documento" sino lo que
     falta por migrar. No las uses en nada nuevo (ver MEJORAS.md §65). */
  --font-doc-display:'Bricolage', system-ui, sans-serif;
  --font-doc-mono:'SpaceMono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ===== Paleta de marca v3 "Escenario" — DEFAULT de toda la web =====
     Un solo mundo oscuro + un solo color (rojo eléctrico); el ámbar es SOLO
     estrellas. Cambiar el look de la web = editar aquí (1 sitio). Sin remapeos
     scoped: landing/panel/públicas/calendario referencian estos tokens. */
  --bg:#141110;
  --surface:#1F1B18;
  --surface-2:#292420;
  --surface-3:#2E2622;
  --text:#F5EFE8;
  --text-dim:#B7ADA2;
  --brand:#FF2E38;
  --brand-deep:#D21120;
  --brand-crimson:#B90D1A;
  --star:#F5A623;
  --hair:rgba(255,240,230,.10);
  --hair-2:rgba(255,240,230,.20);
}

/* ===== Reset base común ===== */
*{margin:0;padding:0;box-sizing:border-box;}
/* Chrome Android pinta un recuadro azul semitransparente sobre cualquier
   <a>/botón al tocarlo (su resalte táctil por defecto, ajeno a nuestra
   paleta): se ve en las tarjetas de músico y en los botones de presupuesto.
   Safari no lo hace, por eso solo se nota en Android. */
*{-webkit-tap-highlight-color:transparent;}
/* Fondo oscuro en el propio body: evita que asome el fondo por defecto del
   navegador en la franja que la barra móvil deja al descubierto al hacer scroll. */
html,body{background:var(--ink);}
a{color:inherit;text-decoration:none;}

/* Los controles de formulario NO heredan fuente ni tamaño del documento: sin
   esto, un input al que no le llegue ninguna regla cae al tamaño por defecto
   del navegador (~13px), que en iOS además dispara el zoom automático al
   enfocarlo. 16px es el mínimo que Safari no amplía. Cualquier clase puede
   bajarlo a propósito (mono de acordes, etc.); esto solo es el suelo. */
input,select,textarea{font-family:inherit;font-size:16px;}
/* button tiene el mismo problema de fuente que los de arriba (cae en la UI
   del sistema, no en Hanken) pero no el de tamaño: cada botón ya fija su
   propio font-size por clase (.pub-btn, .lb-btn, .pnl-btn…), y al no ser un
   campo de texto no dispara el zoom de iOS. Sin este inherit, la fuente del
   sistema tiene métricas de línea distintas a Hanken y el texto se ve
   descentrado dentro del padding aunque este sea simétrico. */
button{font-family:inherit;}

/* ===== Inputs de fecha/hora nativos =====
   En iOS/WebKit, sin appearance:none el control nativo usa su tamaño intrínseco
   e ignora padding/box-sizing, así que el valor y el icono se desbordan de la
   caja. Esto los normaliza para que se comporten como un input de texto normal
   en todo el proyecto. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"]{
  -webkit-appearance:none;
  appearance:none;
}
/* El valor mostrado (día/mes/año, hora): alineado a la izquierda y sin el
   margen por defecto de WebKit que lo empuja fuera de la caja.
   El min-height es lo que evita que la caja COLAPSE en iOS: al quitar el
   appearance nativo, un campo vacío no tiene contenido que le dé altura y
   queda más bajo que los inputs de texto de al lado. En em (no en px) para
   que la altura la marque el propio tamaño de letra del campo y no haya que
   recalcular un número mágico cada vez que cambia el padding en otra hoja. */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="week"]::-webkit-date-and-time-value{
  text-align:left;
  margin:0;
  min-height:1.2em;
}
/* Zona editable de los segmentos: sin padding/altura extra que descuadre. */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit{
  padding:0;
  line-height:normal;
}
/* Icono del selector (calendario/reloj): visible sobre fondo oscuro y clicable. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(0.8);
  opacity:0.65;
  cursor:pointer;
}

/* ===== Bandera de país (components/Bandera.jsx) =====
   Un solo sitio para el tamaño: alto en em, así se escala solo con el
   font-size de donde viva (9.5px en la ficha de un músico, 15-16px en el
   selector de teléfono) sin necesitar una prop de tamaño por caso de uso. */
.bandera-grupo{display:inline-flex;align-items:center;gap:3px;vertical-align:-0.15em;}
.bandera{display:block;height:0.85em;width:auto;border-radius:2px;}

/* ===== Firma del sitio (components/Firma.jsx) =====
   Mismo tratamiento que .lb-footer__credito en la landing (mono, pequeña,
   atenuada, copyright y firma en renglones distintos), para que la misma
   línea se lea igual venga de donde venga. Aquí y no en publico.css porque
   /login y /invitacion no importan esa hoja. Respeta la safe-area de iOS: es
   lo último de la página y en un iPhone caería bajo la barra de gestos. */
.lba-firma{
  display:flex;flex-direction:column;gap:4px;
  margin:0;
  padding:26px 22px calc(env(safe-area-inset-bottom) + 26px);
  text-align:center;
  font-family:var(--font-mono),monospace;
  font-size:11px;letter-spacing:.06em;line-height:1.5;
  color:var(--text-dim);
}
.lba-firma a{color:inherit;border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease;}
@media (hover:hover) and (pointer:fine){
  .lba-firma a:hover{color:var(--text);border-bottom-color:var(--hair-2);}
}
.lba-firma a:focus-visible{outline:2px solid var(--hair-2);outline-offset:3px;border-radius:4px;}

/* ===== Póster superpuesto de vídeo (components/VideoConSonido.jsx) =====
   Usado en la landing (Escuchanos) y en /bio. Aquí y no en landing.css/bio.css
   porque el componente es compartido y el fix es del componente, no de una
   pantalla. Se retira con fundido, no con corte, en cuanto el vídeo confirma
   fotograma real (ver comentario en VideoConSonido.jsx sobre el parpadeo de
   iOS Safari con preload="none"). pointer-events:none para no tapar el botón
   de sonido, que va por encima en el DOM. */
.lb-video-poster{
  pointer-events:none;
  transition:opacity .22s ease-out;
}
@media (prefers-reduced-motion:reduce){
  .lb-video-poster{transition:none;}
}

/* ===== Modo app (PWA instalada) =====
   Lo pone components/ModoApp.jsx en el <html> al arrancar. El pinch lo quita
   el meta viewport desde ahí; esto mata el OTRO zoom, el del doble toque, que
   el viewport no cubre y que en el panel salta solo al pulsar rápido dos filas
   seguidas de una tabla. `manipulation` conserva el desplazamiento y el pinch
   allí donde el viewport aún lo permita: no es un `touch-action: none`.
   No hereda, pero el touch-action que vale es la intersección desde el elemento
   tocado hacia arriba, así que ponerlo en la raíz alcanza a toda la página; y
   los `touch-action: none` de dentro (el velo del calendario, arrastrar en una
   lista ordenable) siguen mandando por ser más restrictivos. */
html[data-modo="app"]{touch-action:manipulation;}

/* ===== Sin barras de desplazamiento en táctil =====
   La del DOCUMENTO, que es la que se ve en la PWA pegada al borde derecho.
   Las de los contenedores propios del panel se ocultan en gestion.css, cada
   una con su motivo; esta va aquí porque el scroller de la página es el mismo
   en todas las pantallas y no vive en ninguna hoja concreta.

   Se declara en los dos elementos a propósito: el scroller del documento es
   `html` en unos motores y `body` en otros (iOS ha usado los dos), y acertar
   solo en uno deja la barra puesta justo donde se quería quitar.

   `pointer: coarse` y no un ancho: lo que decide es que se maneje con el dedo,
   no que la pantalla sea estrecha. Con ratón la barra se queda, que ahí sí es
   el asidero para arrastrar. */
@media (pointer: coarse) {
  html, body { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
}