/* Cuentas Claras: tokens compartidos, estructura y adaptaciones móviles. */
:root {
  --papel: oklch(0.965 0.016 85);
  --tinta: oklch(0.24 0.035 165);
  --superficie: oklch(0.985 0.01 85);
  --verde: oklch(0.36 0.065 160);
  --terracota: oklch(0.6 0.14 42);
  --suave: oklch(0.925 0.022 85);
  --borde: oklch(0.87 0.022 85);
  --texto-secundario: oklch(0.48 0.03 150);
  --error: oklch(0.55 0.19 27);
  --cat-1: oklch(0.42 0.07 160);
  --cat-2: oklch(0.62 0.14 42);
  --cat-3: oklch(0.55 0.08 235);
  --cat-4: oklch(0.72 0.12 85);
  --cat-5: oklch(0.58 0.13 15);
  --cat-6: oklch(0.5 0.08 290);
  --cat-7: oklch(0.65 0.1 135);
  --cat-8: oklch(0.55 0.02 80);
  --sombra: 0 8px 24px -12px oklch(0.3 0.03 80 / 18%);
  --velo: oklch(0.24 0.035 165 / 50%);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: "Work Sans", system-ui, sans-serif; line-height: 1.5; }
h1,h2,h3,.marca,.dia { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: 0; }
h1 { font-size: 48px; line-height: 1.08; margin: 12px 0 20px; overflow-wrap: anywhere; }
h2 { font-size: 28px; margin: 0 0 12px; }
em { color: var(--verde); }
a { color: var(--verde); text-underline-offset: 4px; }
button,input,select { font: inherit; }
button,a,input,select { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.cabecera { max-width: 1152px; margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 28px; }
.marca { font-size: 27px; text-decoration: none; }
nav,.acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.contenedor { max-width: 1152px; margin: auto; padding: 0 28px 60px; }
.portada { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; padding: 48px 0 70px; }
.portada h1 { font-size: 64px; }
.portada img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 8px; box-shadow: var(--sombra); }
.etiqueta { color: var(--terracota); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.introduccion { font-size: 18px; max-width: 450px; color: var(--texto-secundario); }
.secundario { font-size: 14px; color: var(--texto-secundario); }
.boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid var(--verde); border-radius: 6px; background: var(--verde); color: var(--papel); padding: 12px 20px; font-weight: 600; min-height: 44px; }
.acento { background: var(--terracota); border-color: var(--terracota); }
.secundario-boton { background: var(--superficie); color: var(--tinta); border-color: var(--borde); }
.ventajas { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; border-top: 1px solid var(--borde); padding-top: 38px; }
footer { text-align: center; padding: 28px; border-top: 1px solid var(--borde); color: var(--texto-secundario); }
.acceso { max-width: 460px; margin: 40px auto; padding: 0 20px; text-align: center; }
.hoja-formulario { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 32px; text-align: left; box-shadow: var(--sombra); }
.hoja-formulario h1 { font-size: 44px; }
form { display: grid; gap: 18px; margin-top: 24px; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; min-width: 0; }
input,select { width: 100%; min-width: 0; padding: 10px 12px; background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde); border-radius: 5px; min-height: 44px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mensaje { margin: 0; color: var(--error); font-size: 14px; overflow-wrap: anywhere; }
.aviso { padding: 12px 0; border-block: 1px solid var(--borde); color: var(--texto-secundario); font-size: 14px; }
.encabezado-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; flex-wrap: wrap; }
.encabezado-panel h1 { margin: 0; font-size: 42px; text-transform: capitalize; }
.icono { display: inline-grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: 5px; background: transparent; color: var(--tinta); font-size: 22px; }
.icono:hover { background: var(--suave); }
.resumen { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.tarjeta { padding: 24px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; }
.tarjeta p { margin: 0 0 12px; }
.total { background: var(--verde); color: var(--papel); }
.importe { font-family: "JetBrains Mono", monospace; font-size: 30px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fijo,.fijo strong { color: var(--verde); }
.variable { color: var(--terracota); }
.detalle { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 36px; border-top: 1px solid var(--borde); margin-top: 32px; padding-top: 28px; }
.encabezado-lista { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.encabezado-lista h2 { margin-right: auto; }
.movimientos { list-style: none; padding: 0; margin: 0; }
.movimiento { display: flex; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--borde); }
.concepto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.concepto p { margin: 4px 0 0; }
.dia { font-size: 28px; min-width: 32px; }
.pequeno { font-size: 16px; }
.vacio { padding: 48px 0; text-align: center; color: var(--texto-secundario); }
.fila-categoria { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--borde); color: var(--tinta); padding: 14px 0; }
progress { width: 100%; height: 6px; display: block; margin-top: 8px; accent-color: var(--categoria); }
.cat-1 { --categoria: var(--cat-1); }.cat-2 { --categoria: var(--cat-2); }.cat-3 { --categoria: var(--cat-3); }.cat-4 { --categoria: var(--cat-4); }.cat-5 { --categoria: var(--cat-5); }.cat-6 { --categoria: var(--cat-6); }.cat-7 { --categoria: var(--cat-7); }.cat-8 { --categoria: var(--cat-8); }
dialog { width: min(520px, calc(100% - 32px)); max-height: 90vh; overflow: auto; border: 1px solid var(--borde); border-radius: 8px; padding: 28px; background: var(--superficie); color: var(--tinta); }
dialog::backdrop { background: var(--velo); }
.entre { justify-content: space-between; }
.notificacion { text-align: center; font-size: 14px; padding: 12px; }
@media (max-width: 760px) {
  .cabecera { padding: 20px; flex-wrap: wrap; }.marca { font-size: 25px; }nav { gap: 12px; }
  .contenedor { padding-inline: 20px; }.portada { grid-template-columns: 1fr; gap: 28px; padding-top: 16px; }.portada h1 { font-size: 48px; }
  .ventajas,.resumen,.detalle { grid-template-columns: 1fr; }.detalle { gap: 28px; }.encabezado-panel h1 { font-size: 28px; }.encabezado-panel > div:first-child { width: 100%; }.encabezado-panel > div:first-child .acciones { display: grid; grid-template-columns: 32px minmax(0,1fr) 32px; gap: 8px; }.encabezado-panel .icono { width: 32px; }.encabezado-panel h1 { text-align: center; }
  .movimiento { gap: 8px; flex-wrap: wrap; }.movimiento .concepto { flex-basis: calc(100% - 48px); }.movimiento .pequeno { margin-left: 40px; margin-right: auto; }
  .hoja-formulario { padding: 24px; }.hoja-formulario h1 { font-size: 38px; }.dos-columnas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) { .boton { transition: opacity .15s; }.boton:hover { opacity: .9; } }