/* =====================================================================
   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 (shared/tokens.css).
   ===================================================================== */

/* ===== Tipografías (una sola copia en shared/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". Cargadas por el navegador SOLO cuando se
   referencian (al activar el rollout via --font-*), así que ahora no pesan. */
@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;
  --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;}
/* 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;}

/* ===== 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;
}