/*
  Los cimientos: colores, tipografía y las piezas que aparecen en todas las páginas.
  Crema, cereza y petróleo, igual que la app.

  **Los nombres son por papel, no por color** — `--acento` y no `--rojo`. Suena a formalidad
  hasta que hay que cambiar algo: cuando el rojo pasó de significar "debes" a ser el color
  de la marca, con nombres por papel el cambio fue de una línea.

  Acá va lo que comparten todas las páginas y nada más. El layout de cada una vive en su
  propio archivo: `paginas.css` para las de apoyo, `invitado.css` para el enlace de una
  cuenta. Si algo se usa en un solo lugar, no pertenece a este archivo.
*/

: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;
}

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

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

/* Los montos van en DM Mono porque sus dígitos miden todos lo mismo. En DM Sans el 1 es la
   mitad de ancho que el 0, así que una columna de precios se ve chueca y los totales bailan
   al actualizarse. */
.monto { font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; }

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

/* ---------- Tipografía ---------- */
h1 { font-size: 24px; line-height: 1.25; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
h2 {
  font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--texto-tenue); margin: 26px 0 10px;
}
p { margin: 0 0 12px; }
.suave { color: var(--texto-suave); font-size: 14px; }
.tenue { color: var(--texto-tenue); font-size: 13px; }
.error { color: var(--acento); }
.bien  { color: var(--a-favor); }

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

.boton {
  display: block; width: 100%; border: none; cursor: pointer;
  background: var(--acento); color: var(--sobre-acento);
  font-family: inherit; font-size: 16px; font-weight: 700;
  padding: 16px; border-radius: var(--radio); text-align: center;
  transition: background .12s ease;
}
.boton:active { background: var(--acento-hundido); }
.boton:disabled { background: var(--borde); color: var(--texto-tenue); cursor: default; }

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

.enlace {
  background: none; border: none; padding: 10px; width: 100%;
  font-family: inherit; font-size: 14px; color: var(--acento); cursor: pointer;
}

.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); }