/*
  Colores, tipografía y piezas comunes. Mismo sistema que la app y que tablas-web
  (`tablas-web/css/marca.css`): se copia en vez de importarse porque son dominios distintos y
  un CSS cruzado sería un viaje de red extra en la primera pintada. Si cambia un token allá,
  cambia acá.

  Los nombres son por papel y no por color — `--acento`, no `--rojo`.
*/

/*
  ---------- Tipografías propias ----------

  **No las devuelvas a un <link> de fonts.googleapis.com.** Esa hoja de estilos entrega la IP
  de cada visitante a Google antes de que la persona pueda aceptar o rechazar el aviso de
  cookies, lo que vuelve el aviso un trámite sin efecto — y obliga a declararlo en la política.

  Son las mismas de `Tablas App/assets/fuentes/`, recortadas a latin + latin-ext (~110 KB las
  seis). `font-display: swap`: con mala señal, texto con la letra equivocada es mejor que nada.
*/

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fuentes/DMSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fuentes/DMSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold es el corte más pesado que hay. Se declara para el rango 600-700 para que un
   `font-weight: 700` lo use tal cual en vez de engordarlo sintéticamente. */
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fuentes/DMSans-SemiBold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("/assets/fuentes/DMMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("/assets/fuentes/DMMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yellowtail";
  src: url("/assets/fuentes/Yellowtail-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Superficies --- */
  --fondo: #FDFAF5;
  --superficie: #FFFFFF;
  --borde: #E8DCC8;

  /* --- Texto --- */
  --texto: #0F2D3D;
  --texto-suave: #5A6B72;
  --texto-tenue: #8A9199;

  /* --- Marca y acción --- */
  --acento: #C8102E;
  --acento-hundido: #A50D26;
  --sobre-acento: #FFF5E5;

  /* --- Dinero --- */
  --a-favor: #1B5E3F;

  /* Petróleo al 35%, no negro: sobre la crema el negro puro se ve sucio. */
  --velo: rgba(15, 45, 61, 0.35);

  /* --- Medidas --- */
  --margen: 20px;
  --radio: 14px;
  --radio-grande: 20px;
  --ancho: 720px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Foco visible para navegación con teclado. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* DM Mono en los montos: dígitos de ancho fijo, para que una columna de precios no baile. */
.monto { font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; }

.marca { font-family: "Yellowtail", cursive; color: var(--acento); }

/* ---------- Piezas ---------- */

.boton {
  display: inline-block;
  border: none;
  cursor: pointer;
  background: var(--acento);
  color: var(--sobre-acento);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  padding: 15px 26px;
  border-radius: var(--radio);
  text-align: center;
  text-decoration: none;
  transition: background .12s ease;
}

.boton:hover,
.boton:active { background: var(--acento-hundido); }

.boton.fantasma {
  background: transparent;
  color: var(--acento);
  border: 1px solid var(--borde);
  font-weight: 500;
}

.boton.fantasma:hover,
.boton.fantasma:active { background: var(--superficie); }

.campo {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 15px;
  outline: none;
}

.campo:focus { border-color: var(--acento); }
.campo::placeholder { color: var(--texto-tenue); }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
}

/* Salta al contenido: primer tabulador de la página, invisible hasta que se enfoca. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acento);
  color: var(--sobre-acento);
  padding: 12px 18px;
  border-radius: 0 0 var(--radio) 0;
  z-index: 100;
}

.saltar:focus { left: 0; }

/* Visible solo para lectores de pantalla. A diferencia de `.saltar`, nunca se muestra. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Imágenes ---------- */

img { max-width: 100%; height: auto; }

figure { margin: 30px 0; }

figcaption { margin-top: 10px; font-size: 14px; color: var(--texto-tenue); }

/* ---------- Grupos de botones ---------- */

.acciones { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }