/* ============================================================
   El sistema de Licet — pergamino de día, noche de Hogwarts de noche
   ============================================================

   Dos reglas gobiernan este archivo y no se negocian, porque vienen de lo
   aprendido en el sistema de Paul:

   1. NINGÚN color de texto es un valor fijo. Todos salen de una variable que
      cambia con el tema. Un color escrito a mano funciona en claro y, tarde o
      temprano, queda ilegible en oscuro.
   2. Los contrastes están medidos, no calculados a ojo, y van anotados al lado
      de cada color. El mínimo es 4.5 para texto normal y 3 para texto grande.
      En tema oscuro se apunta a un contraste holgado pero NO al máximo: la
      letra clara y gruesa sobre fondo oscuro irradia y cansa más que en blanco,
      así que los textos largos van en peso 500 y el blanco no es blanco puro.

   La temática de Harry Potter vive en los adornos —el pergamino, las letras
   romanas de los títulos, los nombres de las pantallas, el color de la casa— y
   nunca a costa de la legibilidad. El dorado sobre pergamino y el granate sobre
   negro son justamente las combinaciones que no llegan al mínimo, así que los
   colores de casa aparecen aquí ya oscurecidos o aclarados lo necesario.
   ============================================================ */

:root {
  /* ---------- pergamino (tema claro) ---------- */
  --fondo: #f3efe4;
  --superficie: #fbf8f1;
  --superficie-2: #f0ebdd;
  --campo: #fffdf8;
  --borde-campo: #d8d0bc;
  --linea: #e2dac8;
  --linea-fuerte: #cec3ab;

  /* Texto principal: 15.1 sobre la superficie. */
  --texto: #22201b;
  /* Texto secundario: 6.9 sobre la superficie y 6.4 sobre el fondo. */
  --gris: #5b554a;
  /* Un escalón más claro, todavía por encima del mínimo: 5.1 sobre superficie. */
  --gris-claro: #6d665a;

  /* Los números y avisos. */
  --verde: #0d6b3d;        /* 6.6 sobre superficie */
  --verde-suave: #e6f2e9;
  /* El naranja de los montos negativos sueltos: 5.0 sobre superficie.
     El rojo se reserva al total general, como en el sistema de Paul. */
  --ambar: #96610e;
  --ambar-suave: #fbf0da;
  --ambar-tinta: #6d4708;  /* 8.0: la letra de los avisos, sobre --ambar-suave */
  --rojo: #b3261e;         /* 6.2 sobre superficie */
  --rojo-suave: #fbe9e7;
  --rojo-tinta: #8c1c15;

  --blanco: #fff;
  --texto-boton: #fff;
  --sombra: 0 1px 2px rgba(60,48,28,.07), 0 6px 18px rgba(60,48,28,.06);
  --radio: 14px;

  --menu-fondo: #fbf8f1;
  --menu-linea: #e2dac8;
  --menu-hover: #f0ebdd;

  /* El pergamino no es un color plano: son dos velos muy suaves cruzados.
     La textura es decorativa y no lleva texto encima, así que no afecta a
     ningún contraste. */
  --textura:
    radial-gradient(circle at 20% 15%, rgba(158,131,79,.055), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(158,131,79,.045), transparent 40%);
}

:root[data-tema="oscuro"] {
  /* ---------- noche de Hogwarts (tema oscuro) ---------- */
  --fondo: #141821;
  --superficie: #1b2130;
  --superficie-2: #212939;
  --campo: #232b3c;
  --borde-campo: #3b4558;
  --linea: #2b3444;
  --linea-fuerte: #3b4558;

  /* No es blanco puro a propósito: da 12.4 sobre la superficie, holgado pero
     sin irradiar. El blanco puro daba más de 15 y cansaba. */
  --texto: #dfe3ea;
  --gris: #a3acbd;         /* 7.1 sobre la superficie */
  --gris-claro: #949eb0;   /* 5.9 sobre la superficie */

  --verde: #62c98e;        /* 7.9 */
  --verde-suave: #16301f;
  --ambar: #e0b264;        /* 8.5 */
  --ambar-suave: #2e2413;
  --ambar-tinta: #e8c68a;  /* 10.0 sobre --ambar-suave */
  --rojo: #f08d84;         /* 7.4 */
  --rojo-suave: #34201e;
  --rojo-tinta: #f3a49c;

  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);

  --menu-fondo: #171c27;
  --menu-linea: #2b3444;
  --menu-hover: #212939;

  --textura:
    radial-gradient(circle at 20% 15%, rgba(120,150,210,.05), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(120,150,210,.04), transparent 40%);
}

/* ============================================================
   Los colores de la casa. Pintan los acentos: enlaces, botones, rótulos y
   la raya de los títulos. Cada uno va con su contraste medido.
   ============================================================ */

body[data-casa="ravenclaw"] {
  --acento: #22406f;
  --acento-fuerte: #22406f;   /* 9.8 sobre la superficie clara */
  --acento-boton: #1b3459;    /* 12.5 con letra blanca encima */
  --acento-suave: #e7ecf5;
  --acento-borde: #c8d4e6;
  --decor-tinta: #7d5a23;     /* el bronce, ya oscurecido: 5.9 (el original daba 4.4) */
  --decor-linea: #a8823c;     /* decorativo, no lleva texto */
}
:root[data-tema="oscuro"] body[data-casa="ravenclaw"] {
  --acento: #8fb4e8;
  --acento-fuerte: #8fb4e8;   /* 7.6 sobre la superficie oscura */
  --acento-boton: #2d4d7d;    /* 8.5 con letra blanca */
  --acento-suave: #1e2a3d;
  --acento-borde: #35455e;
  --decor-tinta: #d9b26a;     /* 8.1 */
  --decor-linea: #8a6a33;
}

body[data-casa="gryffindor"] {
  --acento: #8a1c1c;
  --acento-fuerte: #8a1c1c;   /* 8.7 */
  --acento-boton: #7a1818;    /* 10.3 con letra blanca */
  --acento-suave: #f7e8e6;
  --acento-borde: #e6cbc7;
  --decor-tinta: #8a6410;     /* el dorado, oscurecido: 5.1 */
  --decor-linea: #b9902f;
}
:root[data-tema="oscuro"] body[data-casa="gryffindor"] {
  --acento: #eda9a2;
  --acento-fuerte: #eda9a2;   /* 8.3 */
  --acento-boton: #8f2222;    /* 8.7 con letra blanca */
  --acento-suave: #2f1c1b;
  --acento-borde: #4a2c2a;
  --decor-tinta: #e8c56a;     /* 9.3 */
  --decor-linea: #8f7130;
}

body[data-casa="slytherin"] {
  --acento: #0f5132;
  --acento-fuerte: #0f5132;   /* 8.7 */
  --acento-boton: #0d4629;    /* 10.1 con letra blanca */
  --acento-suave: #e4f0e9;
  --acento-borde: #c6ddd0;
  --decor-tinta: #5c6670;     /* la plata, oscurecida: 5.4 */
  --decor-linea: #8d98a3;
}
:root[data-tema="oscuro"] body[data-casa="slytherin"] {
  --acento: #7ed1a3;
  --acento-fuerte: #7ed1a3;   /* 8.8 */
  --acento-boton: #1f6d45;    /* 7.6 con letra blanca */
  --acento-suave: #172b22;
  --acento-borde: #2c4638;
  --decor-tinta: #c0c8d0;     /* 9.5 */
  --decor-linea: #6d7884;
}

body[data-casa="hufflepuff"] {
  --acento: #6f5405;
  --acento-fuerte: #6f5405;   /* 6.7. El amarillo de la casa NO puede llevar
                                 letra blanca (2.1), así que el acento es este
                                 dorado oscuro y el amarillo queda de fondo. */
  --acento-boton: #4a3a08;    /* 11.4 con letra blanca */
  --acento-suave: #fbf1d6;
  --acento-borde: #e6d5a8;
  --decor-tinta: #5a4a20;
  --decor-linea: #c8a83c;
}
:root[data-tema="oscuro"] body[data-casa="hufflepuff"] {
  --acento: #ddbc5e;
  --acento-fuerte: #ddbc5e;   /* 8.6 */
  --acento-boton: #6b5410;    /* 7.2 con letra blanca */
  --acento-suave: #2b2413;
  --acento-borde: #473c1c;
  --decor-tinta: #d8cba6;
  --decor-linea: #7d6a2c;
}

*, *::before, *::after { box-sizing: border-box; }

/* Sin esto, las cajas que deben estar cerradas aparecen abiertas: una regla de
   display en la propia caja se come al atributo hidden. Le pasó al sistema de
   Paul y salieron todos los formularios de pago abiertos a la vez. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--textura), var(--fondo);
  background-attachment: fixed;
  color: var(--texto);
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento-fuerte); }
.iconos-ocultos { display: none; }

.ico {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-chico { width: 15px; height: 15px; }
.ico-grande { width: 26px; height: 26px; }

/* ---------------- la puerta ---------------- */

body.acceso {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.tarjeta-acceso {
  background: var(--superficie); border-radius: 20px;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
  padding: 36px 30px; max-width: 380px; width: 100%; text-align: center;
  position: relative;
}
/* El filo dorado del pergamino. Decorativo, sin texto encima. */
.tarjeta-acceso::before {
  content: ""; position: absolute; inset: 7px; border-radius: 15px;
  border: 1px solid var(--decor-linea); opacity: .45; pointer-events: none;
}
.tarjeta-acceso .escudo { width: 54px; height: 54px; color: var(--acento-fuerte); }
.tarjeta-acceso h1 {
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  font-size: 23px; margin: 12px 0 4px; letter-spacing: .3px;
}
.tarjeta-acceso p { color: var(--gris); font-size: 14.5px; margin: 0 0 22px; line-height: 1.5; }
.tarjeta-acceso form { display: flex; flex-direction: column; gap: 13px; }

/* ---------------- estructura ---------------- */

.armazon { display: flex; min-height: 100vh; }

.menu {
  width: 232px; flex: 0 0 232px;
  background: var(--menu-fondo);
  border-right: 1px solid var(--menu-linea);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.perfil-menu {
  padding: 20px 16px 15px; text-align: center;
  border-bottom: 1px solid var(--menu-linea);
}
.foto {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--decor-linea); margin: 0 auto 9px; display: block;
  background: var(--menu-hover);
}
.foto-vacia {
  display: flex; align-items: center; justify-content: center;
  font-family: "Cinzel", Georgia, serif; font-size: 25px; font-weight: 600;
  color: var(--acento-fuerte);
}
.perfil-nombre {
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  font-size: 18px; line-height: 1.3; word-break: break-word;
}
.perfil-casa {
  display: inline-flex; align-items: center; gap: 5px; justify-content: center;
  margin-top: 4px; font-size: 13px; color: var(--decor-tinta); font-weight: 600;
  letter-spacing: .3px;
}

#navegacion { padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
/* En la columna de escritorio manda el nombre largo; el corto solo existe para
   la barra de abajo del celular. */
.texto-corto { display: none; }
#navegacion a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--texto); text-decoration: none;
  font-size: 15.5px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent;
}
#navegacion a:hover { background: var(--menu-hover); }
#navegacion a.activo {
  background: var(--acento-suave);
  border-color: var(--acento-borde);
  color: var(--acento-fuerte);
  font-weight: 600;
}
#navegacion .ico { color: var(--acento-fuerte); }

.pie-menu {
  padding: 14px 16px 18px; border-top: 1px solid var(--menu-linea);
}
.lema {
  margin: 0 0 12px; font-size: 13px; line-height: 1.45;
  color: var(--decor-tinta); font-style: italic;
  display: flex; gap: 6px; align-items: flex-start;
}
.lema .ico { margin-top: 2px; }
.pie-menu a { font-size: 14px; font-weight: 600; text-decoration: none; }
.pie-menu a:hover { text-decoration: underline; }

.principal { flex: 1; min-width: 0; }
.contenido { padding: 22px 26px 40px; max-width: 1180px; }

/* ---------------- la cabecera de cada pantalla ---------------- */

.portada { margin-bottom: 20px; }
/* El rótulo chico de arriba, el que lleva el nombre de Hogwarts. No baja de
   11.5px: en mayúsculas y con Barlow, que es estrecha, más chico no se lee. */
.rotulo {
  font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase;
  font-weight: 700; color: var(--decor-tinta); margin: 0 0 3px;
  display: flex; align-items: center; gap: 6px;
}
.portada h1 {
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  font-size: 27px; line-height: 1.25; margin: 0 0 4px; letter-spacing: .2px;
}
.portada .fecha { margin: 0; color: var(--gris); font-size: 15px; line-height: 1.45; }
.portada .fecha strong { color: var(--texto); }

/* La raya con el rombo al medio: el adorno que separa la cabecera. */
.filigrana {
  display: flex; align-items: center; gap: 9px; margin: 14px 0 0;
  color: var(--decor-linea);
}
.filigrana::before, .filigrana::after {
  content: ""; height: 1px; flex: 1; background: currentColor; opacity: .55;
}
.filigrana span {
  width: 7px; height: 7px; background: currentColor; transform: rotate(45deg);
  flex: 0 0 auto;
}

/* ---------------- los cajones de dinero ---------------- */
/* Esta fila es SOLO dinero. Lo que no sean soles va en los bloques de abajo. */

.cajones {
  display: grid; gap: 13px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
}
.cajon {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 15px 16px; box-shadow: var(--sombra);
  position: relative; overflow: hidden;
}
.cajon::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acento-fuerte);
}
.cajon.entra::after { background: var(--verde); }
.cajon.sale::after { background: var(--ambar); }
.cajon.queda::after { background: var(--acento-fuerte); }
.cajon .etiqueta {
  font-size: 11.5px; letter-spacing: 1.1px; text-transform: uppercase;
  font-weight: 700; color: var(--gris); margin: 0 0 5px;
}
.cajon .numero {
  font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.cajon .pie { font-size: 13.5px; color: var(--gris); line-height: 1.45; margin: 3px 0 0; }
.numero.verde { color: var(--verde); }
.numero.ambar { color: var(--ambar); }
.numero.rojo  { color: var(--rojo); }

/* ---------------- bloques ---------------- */

.bloque {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 18px 20px; margin-bottom: 18px;
  box-shadow: var(--sombra);
}
/* Ojo con el `>`: estaba escrito `.bloque > h2` y solo alcanzaba a los títulos
   que cuelgan directo del recuadro. Los que van dentro de una cabecera con un
   botón al lado —"Lo que viene", "Fin de mes", "Dónde trabajas" y cinco más—
   quedaban fuera y salían con la letra corriente, así que el sistema tenía dos
   clases de título sin querer. */
.bloque h2 {
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  font-size: 19px; margin: 0 0 4px; display: flex; align-items: center; gap: 9px;
  line-height: 1.3;
}
.bloque h2 .ico { color: var(--acento-fuerte); }
.bloque .nota { color: var(--gris); font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; }
.bloque .nota:last-child { margin-bottom: 0; }

.paneles { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; }
.paneles-3 { display: grid; gap: 18px; grid-template-columns: 1.3fr 1fr; align-items: start; }

.encabezado-bloque {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.encabezado-bloque > div { min-width: 0; }
.encabezado-bloque h2 { margin-bottom: 2px; }

/* ---------------- listas ---------------- */

.lista { display: flex; flex-direction: column; gap: 2px; }
.fila {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  border: 1px solid transparent;
}
.fila:nth-child(odd) { background: var(--superficie-2); }
.fila.pagada { border-color: var(--acento-borde); background: var(--acento-suave); }
.fila.vencida { border-color: var(--ambar); background: var(--ambar-suave); }
.fila-cuerpo { flex: 1; min-width: 0; }
.fila-titulo {
  font-weight: 600; font-size: 15.5px; line-height: 1.4;
  word-break: break-word;
}
.fila-pie { font-size: 13.5px; color: var(--gris); line-height: 1.45; margin-top: 1px; }
.fila-monto {
  font-weight: 700; font-size: 17px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fila-acciones { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }

/* El día del mes, en su cuadrito. */
.dia {
  flex: 0 0 auto; width: 42px; text-align: center;
  background: var(--acento-suave); border: 1px solid var(--acento-borde);
  border-radius: 9px; padding: 4px 0;
}
.dia .numero-dia {
  display: block;
  font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--acento-fuerte);
}
.dia .texto-dia {
  display: block;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
  font-weight: 700; color: var(--gris); line-height: 1.2;
}

/* El dibujo de la categoría, en su círculo. */
.marca-categoria {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--acento-suave); border: 1px solid var(--acento-borde);
  color: var(--acento-fuerte);
}

.chapita {
  display: inline-flex; align-items: center; gap: 5px;
  /* 13px es el piso del proyecto para texto en minúscula. Estaba en 12.5 y el
     medidor de contraste lo marcó: el rótulo en mayúsculas puede bajar a 11.5
     porque las mayúsculas se leen más grandes, pero esto dice "automático". */
  font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--superficie-2); border: 1px solid var(--linea-fuerte);
  color: var(--gris); white-space: nowrap;
}
.chapita.acento { background: var(--acento-suave); border-color: var(--acento-borde); color: var(--acento-fuerte); }
.chapita.verde { background: var(--verde-suave); border-color: var(--verde); color: var(--verde); }
.chapita.ambar { background: var(--ambar-suave); border-color: var(--ambar); color: var(--ambar-tinta); }

.dia-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 16px 0 6px; padding-bottom: 5px;
  border-bottom: 1px solid var(--linea);
}
.dia-cabecera:first-child { margin-top: 0; }
.dia-cabecera .titulo {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--gris);
}
.dia-cabecera .suma { font-size: 14.5px; font-weight: 700; color: var(--texto); }

/* La línea del total, al pie de una lista. */
.total-fila {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 12px; padding-top: 12px;
  border-top: 2px solid var(--linea-fuerte);
}
.total-fila .rotulo-total {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gris);
}
.total-fila .valor { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* El rojo se reserva para el total general, no para cualquier número negativo. */
.total-fila .valor.negativo { color: var(--rojo); }
.total-fila .valor.positivo { color: var(--verde); }

/* ---------------- el reparto del mes (las barras) ---------------- */

.reparto { display: flex; flex-direction: column; gap: 11px; }
.reparto-fila { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; }
.reparto-datos { min-width: 0; }
.reparto-nombre {
  font-size: 15px; font-weight: 600; line-height: 1.4; margin-bottom: 4px;
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.reparto-nombre .parte { font-size: 13.5px; font-weight: 600; color: var(--gris); }
.barra {
  height: 9px; border-radius: 999px; background: var(--superficie-2);
  border: 1px solid var(--linea); overflow: hidden;
}
.barra > span {
  display: block; height: 100%; background: var(--acento-fuerte); border-radius: 999px;
}
.reparto-monto {
  font-size: 16px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: right;
}

/* La comparación con el mes anterior. */
.tabla-comparar { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla-comparar th {
  text-align: right; font-size: 11.5px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--gris); font-weight: 700; padding: 0 8px 7px; border-bottom: 1px solid var(--linea);
}
.tabla-comparar th:first-child { text-align: left; }
.tabla-comparar td {
  padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--linea);
  font-variant-numeric: tabular-nums;
}
.tabla-comparar td:first-child { text-align: left; font-weight: 600; }
.tabla-comparar tr:last-child td { border-bottom: none; }
.celda-nombre { display: flex; align-items: center; gap: 9px; }
.celda-nombre .ico { color: var(--acento-fuerte); }
/* Subió / bajó. El naranja para lo que creció, el verde para lo que bajó: es
   un gasto, así que crecer es la mala noticia. */
.subio { color: var(--ambar); font-weight: 700; }
.bajo  { color: var(--verde); font-weight: 700; }
.igual { color: var(--gris); }

/* La historia de los ingresos, mes a mes. */
.historia { display: flex; flex-direction: column; gap: 8px; }
.historia-fila { display: grid; grid-template-columns: 96px 1fr auto; gap: 11px; align-items: center; }
.historia-mes { font-size: 13.5px; color: var(--gris); font-weight: 600; }
.historia-monto { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.historia .barra > span { background: var(--verde); }

/* ---------------- formularios ---------------- */

label { display: block; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo > .etiqueta-campo, .etiqueta-campo {
  font-size: 12.5px; font-weight: 700; color: var(--gris);
  text-transform: uppercase; letter-spacing: .7px;
}
/* El "(si quieres)" de los campos opcionales. Va en minúscula, así que no puede
   heredar los 12.5px del rótulo: el piso para minúsculas es 13px. */
.opcional {
  font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
input[type=text], input[type=number], input[type=date], input[type=month],
input[type=password], select, textarea {
  width: 100%; font-family: inherit; font-size: 16px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--borde-campo); background: var(--campo); color: var(--texto);
  line-height: 1.4;
}
textarea { min-height: 70px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento-fuerte); outline-offset: 2px;
}
::placeholder { color: var(--gris-claro); opacity: 1; }

.campos {
  display: grid; gap: 12px; margin-bottom: 13px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.campos.dos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.campo-monto { display: grid; grid-template-columns: 1fr 86px; gap: 7px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15.5px; font-weight: 600;
  padding: 11px 17px; border-radius: 10px; cursor: pointer;
  background: var(--acento-boton); color: var(--texto-boton);
  border: 1px solid transparent; text-decoration: none; line-height: 1.2;
}
.boton:hover { filter: brightness(1.12); }
.boton-claro {
  background: var(--superficie); color: var(--acento-fuerte);
  border-color: var(--acento-borde);
}
.boton-claro:hover { background: var(--acento-suave); filter: none; }
.boton-chico { font-size: 14px; padding: 7px 12px; }
/* El botón de quitar: no es rojo de fondo, para que no pese más que el resto. */
.boton-quitar {
  background: none; border: 1px solid var(--linea-fuerte); color: var(--gris);
  font-size: 14px; padding: 7px 12px; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-weight: 600;
}
.boton-quitar:hover { border-color: var(--rojo); color: var(--rojo); }
.boton-grande { font-size: 17px; padding: 14px 22px; width: 100%; }

.caja-plegable {
  margin-top: 12px; padding: 15px; border-radius: 12px;
  background: var(--superficie-2); border: 1px solid var(--linea-fuerte);
}
.caja-plegable h3 {
  font-size: 15px; margin: 0 0 11px; font-weight: 700;
}
.fila-botones { display: flex; gap: 9px; flex-wrap: wrap; }

/* Elegir la categoría: botones de verdad, no una lista desplegable.
   En el celular una lista obliga a abrir, buscar y confirmar; estos se tocan
   una vez. Son radios de HTML con la casilla escondida, así que funcionan sin
   una línea de javascript y el teclado los recorre igual. */
.elegir-categoria { display: flex; flex-wrap: wrap; gap: 8px; }
.elegir-categoria input[type=radio] {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.elegir-categoria label {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 14.5px; font-weight: 600; line-height: 1.3;
  padding: 9px 13px; border-radius: 999px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--linea-fuerte);
}
.elegir-categoria label .ico { width: 17px; height: 17px; color: var(--gris); }
.elegir-categoria label:hover { border-color: var(--acento-borde); }
.elegir-categoria input:checked + label {
  background: var(--acento-suave); border-color: var(--acento-fuerte);
  color: var(--acento-fuerte);
}
.elegir-categoria input:checked + label .ico { color: var(--acento-fuerte); }
/* El aro del teclado: sin esto, quien navegue con tabulador no ve dónde está. */
.elegir-categoria input:focus-visible + label {
  outline: 2px solid var(--acento-fuerte); outline-offset: 2px;
}

/* El adjuntar comprobante, que es opcional en este sistema. */
.adjuntar {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--acento-fuerte);
  border: 1px dashed var(--acento-borde); border-radius: 10px;
  padding: 9px 13px; background: var(--superficie);
}
.adjuntar input[type=file] { display: none; }
.adjuntar.con-archivo { border-style: solid; background: var(--acento-suave); }

.aviso {
  margin: 0 0 16px; padding: 12px 15px; border-radius: 11px;
  background: var(--ambar-suave); border: 1px solid var(--ambar);
  color: var(--ambar-tinta); font-size: 15px; font-weight: 600; line-height: 1.45;
}

.vacio {
  text-align: center; padding: 26px 18px; color: var(--gris);
  font-size: 15px; line-height: 1.5;
}
.vacio .ico-grande { color: var(--decor-linea); margin-bottom: 8px; }

/* El paso de un mes a otro. */
.meses {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.meses .nombre-mes {
  font-family: "Cinzel", Georgia, serif; font-size: 19px; font-weight: 600;
  min-width: 170px; text-align: center;
}

/* Los botones del tema. */
.tema-opciones { display: flex; gap: 9px; flex-wrap: wrap; }
.tema-opcion {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 10px 15px; border-radius: 10px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--linea-fuerte);
}
.tema-opcion.elegida {
  background: var(--acento-suave); border-color: var(--acento-fuerte);
  color: var(--acento-fuerte);
}

/* Las casas, en Ajustes. */
.casas { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.casa-opcion {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 14px; border-radius: 11px;
  background: var(--superficie); border: 1px solid var(--linea-fuerte);
  font-size: 15.5px; font-weight: 600; font-family: inherit; text-align: left;
  color: var(--texto); width: 100%;
}
.casa-opcion.elegida { border-color: var(--acento-fuerte); background: var(--acento-suave); color: var(--acento-fuerte); }
.casa-opcion .ico { color: var(--acento-fuerte); }
.casa-opcion .escudo-casa {
  width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
}
/* Los cuadritos de color de cada casa son decoración: no llevan texto encima,
   así que acá sí pueden ir los colores vivos de verdad. */
.color-ravenclaw  { background: linear-gradient(135deg, #0e1a40 50%, #946b2d 50%); }
.color-gryffindor { background: linear-gradient(135deg, #7f0909 50%, #d3a625 50%); }
.color-slytherin  { background: linear-gradient(135deg, #1a472a 50%, #aaaaaa 50%); }
.color-hufflepuff { background: linear-gradient(135deg, #ecb939 50%, #372e29 50%); }

/* ---------------- pantallas angostas ---------------- */

@media (max-width: 900px) {
  .paneles, .paneles-3 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* El menú deja de ser una columna y se va abajo, como una barra de botones:
     en el celular la columna se comía media pantalla. */
  .armazon { flex-direction: column; }
  .menu {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    width: auto; flex: none; height: auto;
    border-right: none; border-top: 1px solid var(--menu-linea);
    z-index: 20;
  }
  .perfil-menu, .pie-menu { display: none; }
  #navegacion {
    flex-direction: row; padding: 6px 4px; gap: 0;
    justify-content: space-between;
  }
  #navegacion a {
    flex-direction: column; gap: 3px; padding: 7px 4px; flex: 1;
    font-size: 11.5px; text-align: center; border-radius: 9px; min-width: 0;
  }
  /* En la barra de abajo se cambia el nombre largo por el corto. Recortarlo con
     puntos suspensivos dejaba "Gastos d…" y "Gastos fi…", que no se distinguen. */
  #navegacion a .texto { display: none; }
  #navegacion a .texto-corto {
    display: block; white-space: nowrap; letter-spacing: -.1px;
  }
  .contenido { padding: 18px 16px 96px; }
  /* Los botones de cada fila se van a su propio renglón. Con tres botones
     ("Pagué esto", "Editar", "Quitar") la fila medía 416px en una pantalla de
     390 y la pantalla entera se podía arrastrar de lado. */
  .fila { flex-wrap: wrap; }
  .fila-cuerpo { flex: 1 1 55%; }
  .fila-acciones { flex-wrap: wrap; }
  .portada h1 { font-size: 23px; }
  .cajones { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cajon { padding: 13px 14px; }
  .cajon .numero { font-size: 22px; }
  .bloque { padding: 15px 15px; }
  .campos, .campos.dos { grid-template-columns: 1fr; }
  .reparto-fila { grid-template-columns: 32px 1fr auto; gap: 9px; }
  .marca-categoria { width: 32px; height: 32px; }
  .marca-categoria .ico { width: 17px; height: 17px; }
  .meses .nombre-mes { min-width: 0; flex: 1; font-size: 17px; }
  .tabla-comparar { font-size: 14.5px; }
  .tabla-comparar th, .tabla-comparar td { padding-left: 5px; padding-right: 5px; }
  /* En el celular la columna del mes anterior se esconde: con cuatro columnas
     en 390px los montos se partían en dos renglones y la tabla se volvía un
     acordeón. No se pierde nada, porque la diferencia ya dice la comparación,
     y el mes anterior se puede ver entero pasando de mes. */
  .tabla-comparar th:nth-child(2), .tabla-comparar td:nth-child(2) { display: none; }
  .historia-fila { grid-template-columns: 78px 1fr auto; }
}

@media (max-width: 430px) {
  .cajones { grid-template-columns: 1fr 1fr; gap: 9px; }
  .cajon { padding: 12px 12px; }
  .cajon .numero { font-size: 20px; }
  .cajon .pie { font-size: 13px; }
  .fila { gap: 9px; padding: 10px; }
  .fila-monto { font-size: 16px; }
}

/* ============================================================
   El adorno del tablero
   ============================================================

   Todo lo de aquí abajo es decoración, y por eso vive bajo `.ornado`: se
   aplica al tablero y a nada más, para poder probarlo en una pantalla sin
   tocar el resto del sistema.

   La regla que ordena todo esto: **el adorno va donde no hay que leer**. Los
   colores vivos, los dorados y el fondo de estrellas están en bordes, marcos,
   barras y rincones vacíos; ninguno pasa por detrás de un texto. Así el
   sistema se puede ver más vestido sin perder un punto de contraste, que es
   lo que de verdad cansa la vista.

   Los escudos de las películas no están ni van a estar: son marca registrada
   y este sistema vive en internet. El blasón es dibujo propio.
   ============================================================ */

/* ---- el blasón ---- */
.blason-borde { fill: none; stroke: var(--decor-linea); stroke-width: 2.4; }
.blason-ave { fill: var(--acento-fuerte); stroke: none; }
.blason-estrella { fill: var(--decor-tinta); stroke: none; }

/* ---- la cabecera con escudo ---- */
.portada-blason {
  display: flex; align-items: center; gap: 18px;
}
.portada-blason .escudo-grande { width: 62px; height: 70px; flex: 0 0 auto; }
.portada-blason .textos { min-width: 0; }

/* La filigrana de volutas que cierra la cabecera. Reemplaza al rombo suelto. */
.voluta {
  display: block; width: 100%; max-width: 340px; height: 12px;
  margin: 14px 0 0; color: var(--decor-linea);
  fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-linecap: round; opacity: .8;
}

/* ---- los rincones de pergamino ----
   Cuatro esquinas dibujadas con ocho rayas de fondo. Van en un elemento
   aparte, por encima del recuadro y sin capturar el ratón, así que no
   estorban a ningún botón. */
.ornado .bloque, .ornado .cajon { position: relative; }
.ornado .bloque::before, .ornado .cajon::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  background:
    linear-gradient(var(--decor-linea), var(--decor-linea)) left  top    / 15px 1px no-repeat,
    linear-gradient(var(--decor-linea), var(--decor-linea)) left  top    / 1px 15px no-repeat,
    linear-gradient(var(--decor-linea), var(--decor-linea)) right top    / 15px 1px no-repeat,
    linear-gradient(var(--decor-linea), var(--decor-linea)) right top    / 1px 15px no-repeat,
    linear-gradient(var(--decor-linea), var(--decor-linea)) left  bottom / 15px 1px no-repeat,
    linear-gradient(var(--decor-linea), var(--decor-linea)) left  bottom / 1px 15px no-repeat,
    linear-gradient(var(--decor-linea), var(--decor-linea)) right bottom / 15px 1px no-repeat,
    linear-gradient(var(--decor-linea), var(--decor-linea)) right bottom / 1px 15px no-repeat;
  opacity: .55;
  border-radius: 4px;
}
/* El cajón lleva su raya de color a la izquierda: ahí las esquinas estorban. */
.ornado .cajon::before { left: 10px; }

/* ---- el cielo del tema oscuro ----
   Ravenclaw es la casa del ingenio y el cielo; en oscuro el tablero lleva un
   campo de estrellas muy tenue. Va sobre el fondo, no sobre los recuadros, así
   que ningún texto se lee encima de una estrella. */
:root[data-tema="oscuro"] .ornado {
  background-image:
    radial-gradient(circle at 12% 8%,  rgba(217,178,106,.30) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 78% 14%, rgba(217,178,106,.22) 0 1px,   transparent 1.5px),
    radial-gradient(circle at 34% 30%, rgba(180,205,240,.22) 0 1px,   transparent 1.5px),
    radial-gradient(circle at 91% 44%, rgba(217,178,106,.26) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 5%  62%, rgba(180,205,240,.20) 0 1px,   transparent 1.5px),
    radial-gradient(circle at 60% 74%, rgba(217,178,106,.22) 0 1px,   transparent 1.5px),
    radial-gradient(circle at 24% 88%, rgba(180,205,240,.22) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 85% 95%, rgba(217,178,106,.20) 0 1px,   transparent 1.5px);
  background-size: 620px 520px;
  background-repeat: repeat;
}

/* ---- las barras del reparto, con los dos colores de la casa ----
   Aquí el color puede ser todo lo vivo que quiera: no lleva texto encima. */
.ornado .barra > span {
  background: linear-gradient(90deg, var(--acento-fuerte) 0%, var(--decor-linea) 100%);
}

/* ---- el rótulo de cada cajón, con su raya ---- */
.ornado .cajon .etiqueta { display: flex; align-items: center; gap: 8px; }
.ornado .cajon .etiqueta::after {
  content: ""; height: 1px; flex: 1; background: var(--decor-linea); opacity: .5;
}

/* ---- los títulos de los recuadros, con la inicial adornada ---- */
.ornado .bloque h2 .ico {
  color: var(--decor-tinta);
}

@media (max-width: 720px) {
  .portada-blason { gap: 13px; }
  .portada-blason .escudo-grande { width: 46px; height: 52px; }
  .ornado .bloque::before, .ornado .cajon::before { inset: 5px; }
}