* { box-sizing: border-box; margin: 0; }
:root {
  --fuente-titulos: Georgia, 'Playfair Display', 'Times New Roman', serif;
  --oro: #d4af37;
  --oro-claro: #e8cf7a;
  --fondo: #0c0f14;
  --panel: #171d27;
  --panel-borde: #2c3543;
}
body {
  font-family: -apple-system, system-ui, sans-serif;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(212, 175, 55, .10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(212, 175, 55, .06), transparent 55%),
    var(--fondo);
  background-attachment: fixed;
  color: #e8e6e3;
  max-width: 1360px; margin: 0 auto; padding: 16px;
}
h1 { font-family: var(--fuente-titulos); font-size: 1.3rem; margin: 12px 0; color: var(--oro); }
h2 { font-family: var(--fuente-titulos); font-size: 1.05rem; margin: 16px 0 8px; color: #c8ccd4; letter-spacing: .01em; }
form, .tarjeta {
  background: linear-gradient(155deg, var(--panel), #131922);
  border: 1px solid rgba(212, 175, 55, .12);
  border-radius: 14px; padding: 16px; margin-bottom: 12px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .02);
}

/* --- F8: rejilla adaptable de tarjetas --- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}
.rejilla > form, .rejilla > .tarjeta { margin-bottom: 0; }

/* --- F8: cabecera de identidad --- */
.cabecera-ac {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.cabecera-ac img.logo-ac {
  width: 40px; height: 40px; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, .35));
}
.cabecera-ac .titulo-marca {
  font-family: var(--fuente-titulos);
  font-size: 1.35rem; font-weight: 700; letter-spacing: .02em;
  background: linear-gradient(120deg, var(--oro-claro), var(--oro) 60%, #a9812a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- F8: chip fijo "Para gastar" --- */
.chip-vivir {
  position: sticky; top: 8px; z-index: 10;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #241c08, #171003);
  border: 1px solid rgba(212, 175, 55, .45);
  color: var(--oro-claro);
  border-radius: 999px; padding: 8px 16px; margin: 4px 0 14px;
  font-weight: 700; font-size: .9rem;
  box-shadow: 0 6px 18px -8px rgba(212, 175, 55, .35);
  width: fit-content;
}
.chip-vivir .valor { font-variant-numeric: tabular-nums; color: #fff3d6; }
label { display: block; font-size: .85rem; color: #9aa4b2; margin: 10px 0 4px; }
input, select, button {
  width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #2c3543;
  background: #10141a; color: #e8e6e3; font-size: 1rem;
}
button {
  background: linear-gradient(135deg, var(--oro-claro), var(--oro));
  color: #1a1404; font-weight: 700; border: 0; margin-top: 14px;
  box-shadow: 0 4px 14px -4px rgba(212, 175, 55, .5);
}
.cubeta {
  display: flex; justify-content: space-between; padding: 10px 4px;
  border-bottom: 1px solid #2c3543;
}
.cubeta:last-child { border-bottom: 0; }
.cubeta .saldo { font-variant-numeric: tabular-nums; font-weight: 700; }
.riqueza .saldo { color: #d4af37; }
.error { color: #ff6b6b; margin-top: 8px; font-size: .9rem; }
.exito { color: #7bd88f; margin-top: 8px; font-size: .9rem; }

/* Menú desplegable profesional (botón ☰ a la derecha de la cabecera) */
.menu { position: relative; margin-left: auto; }
.menu-boton {
  width: auto; padding: 9px 16px; font-size: .9rem; font-weight: 700;
  color: var(--oro-claro); background: rgba(212, 175, 55, .1);
  border: 1px solid rgba(212, 175, 55, .45); border-radius: 10px;
  cursor: pointer; margin: 0;
}
.menu-boton:hover, .menu-boton[aria-expanded="true"] {
  background: rgba(212, 175, 55, .22);
  box-shadow: 0 0 12px rgba(212, 175, 55, .25);
}
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 230px; padding: 8px; display: flex; flex-direction: column; gap: 4px;
  background: #161c26; border: 1px solid #2c3543; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
/* El atributo `hidden` DEBE ganar al display:flex de arriba: sin esta regla el
   panel se queda visible tapando el formulario aunque el JS lo "cierre". */
.menu-panel[hidden] { display: none; }
.menu-item {
  display: block; padding: 11px 14px; border-radius: 8px;
  color: #e8e6e3; text-decoration: none; font-size: .95rem;
  border: 1px solid transparent;
}
.menu-item:hover {
  background: rgba(212, 175, 55, .12); color: var(--oro-claro);
  border-color: rgba(212, 175, 55, .3);
}
.menu-item[aria-current="page"] {
  background: rgba(212, 175, 55, .16); color: var(--oro-claro);
  border-color: rgba(212, 175, 55, .45); font-weight: 700;
}

/* --- F8: responsive — nunca scroll horizontal, todo colapsa en móvil --- */
@media (max-width: 480px) {
  body { padding: 12px; }
  .rejilla { grid-template-columns: 1fr; }
  .cabecera-ac .titulo-marca { font-size: 1.1rem; }
}
.banner-alerta {
  background: #3a1f1f; border: 1px solid #ff6b6b; color: #ffb3b3;
  border-radius: 12px; padding: 12px; margin-bottom: 12px; font-size: .9rem;
}
.fila-toggle { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #9aa4b2; }
.fila-toggle input { width: auto; }
.aviso { color: #e0b84c; margin-top: 6px; font-size: .8rem; }
.boton-linea {
  width: auto; margin: 0 0 0 8px; padding: 6px 10px; font-size: .8rem;
  background: #2c3543; color: #e8e6e3;
}
.inactivo { opacity: .5; }
button:disabled { opacity: .6; }

/* --- F3: deudas --- */
.detalle { color: #9aa4b2; font-size: .85rem; display: block; margin-top: 2px; }
.insignia {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
}
.insignia.mala { background: #4a1d1d; color: #ff6b6b; }
.insignia.buena { background: #1d3a2a; color: #7bd88f; }
.progreso { height: 14px; background: #2c3543; border-radius: 7px; overflow: hidden; }
.progreso .relleno {
  height: 100%; width: 0; transition: width .4s;
  background: linear-gradient(90deg, #d4af37, #7bd88f);
}
.pestanas { display: flex; gap: 8px; }
.pestanas button { margin-top: 0; background: #2c3543; color: #9aa4b2; font-weight: 600; }
.pestanas button.activa { background: #d4af37; color: #10141a; }
.linea { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #9aa4b2; }
.linea input[type="checkbox"] { width: auto; }
ol { padding-left: 20px; margin-top: 8px; }
ol li { padding: 6px 0; color: #e8e6e3; }

/* --- F4: detalle de cubeta --- */
a.cubeta { text-decoration: none; color: inherit; }
.volver { display: inline-block; margin-bottom: 8px; color: #9aa4b2; }
.marcador { font-size: 1.1rem; text-align: center; padding: 8px 0; }
.mov {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  padding: 10px 4px; border-bottom: 1px solid #2c3543;
}
.mov:last-child { border-bottom: 0; }
.mov .detalle { flex: 1; }
.mov .fecha { color: #9aa4b2; font-size: .8rem; }
.mov .importe { font-variant-numeric: tabular-nums; font-weight: 700; }
.mov .importe.positivo { color: #7bd88f; }
.mov .importe.negativo { color: #ff6b6b; }
.mov.anulado { opacity: .45; text-decoration: line-through; }
.boton-anular {
  width: auto; padding: 6px 10px; margin: 0;
  background: #2c3543; color: #e8e6e3; font-size: .8rem;
}
table.tesoro { width: 100%; border-collapse: collapse; }
table.tesoro th, table.tesoro td {
  padding: 8px 4px; text-align: left; border-bottom: 1px solid #2c3543; font-size: .9rem;
}
table.tesoro .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- F5: patrimonio e indicadores --- */
.neto { font-size: 1.6rem; font-weight: 700; text-align: center; margin: 8px 0; }
.neto.positivo { color: #d4af37; }
.neto.negativo { color: #ff6b6b; }
.lema { color: #9aa4b2; font-size: .85rem; text-align: center; font-style: italic; }
.indicador-grande { font-size: 2rem; font-weight: 700; color: #d4af37; text-align: center; }
.grafico { display: flex; gap: 8px; align-items: flex-end; height: 160px; margin-top: 12px; }
.grafico .mes { flex: 1; display: flex; flex-direction: column; height: 100%; }
.grafico .barras { display: flex; gap: 2px; align-items: flex-end; flex: 1; }
.grafico .barra { flex: 1; border-radius: 2px 2px 0 0; min-height: 1px; }
.barra.ingresos { background: #7bd88f; }
.barra.apartado { background: #d4af37; }
.barra.gastos { background: #ff6b6b; }
.barra.deuda { background: #6bb3ff; }
.grafico .etiqueta { text-align: center; font-size: .7rem; color: #9aa4b2; margin-top: 4px; }
.leyenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: .75rem; color: #9aa4b2; margin-top: 8px; }
.leyenda .cuadro { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* --- F6: Realidad Paralela y Configuración --- */
.mandamientos li { margin-bottom: 14px; line-height: 1.45; }
.mandamientos strong { color: #d4af37; display: block; }
.decreto { color: #d4af37; font-style: italic; text-align: center; margin: 4px 0 12px; }
.banner {
  background: #5b3a00; color: #ffd57a; padding: 10px 12px;
  border-radius: 8px; margin-bottom: 12px; font-size: .9rem;
}
.fila {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 8px 0; border-bottom: 1px solid #2c3543;
}
.fila:last-child { border-bottom: 0; }
.fila label.check { display: flex; align-items: center; gap: 8px; margin: 0; color: #e8e6e3; }
.fila input[type="checkbox"] { width: auto; }
.fila button, .fila .pill { width: auto; margin: 0; padding: 6px 10px; font-size: .8rem; }
.peligro { background: #7a2b2b; color: #ffd7d7; }
.pill {
  background: #2c3543; color: #9aa4b2; border-radius: 999px;
  padding: 4px 10px; font-size: .75rem;
}
.barra-meta { background: #2c3543; border-radius: 6px; height: 10px; margin: 6px 0 2px; }
.barra-meta-relleno { background: #d4af37; height: 10px; border-radius: 6px; max-width: 100%; }
.suma-ok { color: #7bd88f; }
.suma-mal { color: #ff6b6b; }

/* --- Ingresos rápidos: plantillas (atajos que solo prefijan el formulario) --- */
.plantillas-fila {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.plantillas-fila:empty { margin-bottom: 0; }
.boton-plantilla {
  width: auto; margin: 0; padding: 8px 14px; font-size: .85rem;
  background: #2c3543; color: #e8e6e3; font-weight: 600;
}

/* --- F8: frascos de la Distribución --- */
.frascos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px; margin-top: 8px;
}
.frasco {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: transparent; border: 0; padding: 6px; margin: 0;
  color: inherit; cursor: pointer; width: 100%;
  transition: transform .15s;
}
.frasco:hover, .frasco:focus-visible { transform: translateY(-2px); }
.frasco svg { display: block; }
.frasco-nombre { font-size: .72rem; color: #c8ccd4; text-align: center; line-height: 1.2; min-height: 2.2em; }
.frasco-valor { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--oro-claro); font-size: .85rem; }
.frasco-pct { font-size: .7rem; color: #9aa4b2; }
.frasco-relleno { transition: height .5s, y .5s; }