:root {
  --fondo: #f4f6f5;
  --panel: #ffffff;
  --texto: #1c2622;
  --suave: #5d6b65;
  --borde: #dde3e0;
  --marca: #0f6b4f;
  --marca-oscura: #0a4d39;
  --marca-clara: #e3f2ec;
  --mal: #b3261e;
  --alerta-fondo: #fff4d6;
  --alerta-texto: #6b4e00;
}

* { box-sizing: border-box; }
html { font-family: "Segoe UI", system-ui, sans-serif; font-size: 15px; color: var(--texto); background: var(--fondo); }
body { margin: 0; display: flex; min-height: 100vh; }
a { color: var(--marca); }
h1 { font-size: 1.7rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
small { color: var(--suave); }
code { background: var(--fondo); padding: 0 .3em; border-radius: 4px; font-size: .85em; }
li { margin-bottom: .4rem; }

#menu { width: 220px; flex-shrink: 0; background: var(--marca-oscura); padding: 1rem .75rem; display: flex; flex-direction: column; gap: .15rem; position: sticky; top: 0; height: 100vh; }
#menu[hidden] { display: none; }
#menu .marca { color: #fff; font-weight: 700; font-size: 1.2rem; padding: .5rem .75rem 1rem; }
#menu a { color: #d5e8e0; text-decoration: none; padding: .6rem .75rem; border-radius: 8px; }
#menu a:hover { background: rgba(255, 255, 255, .08); }
#menu a.activa { background: #fff; color: var(--marca-oscura); font-weight: 600; }

#menu .cuenta { margin-top: auto; padding: .75rem; display: flex; flex-direction: column; gap: .4rem; }
#menu .cuenta small { color: #a9c9bc; overflow-wrap: anywhere; }
#menu .cuenta button { font: inherit; background: none; color: #fff; border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; padding: .4rem; cursor: pointer; }

.login { max-width: 380px; margin: 8vh auto 0; display: flex; flex-direction: column; gap: 1rem; }
.login p { margin: 0; }

main { flex: 1; min-width: 0; padding: 1.5rem 2rem 4rem; max-width: 1150px; }
.titulo { margin-bottom: 1.25rem; }
.titulo p { margin: .25rem 0 0; color: var(--suave); }

.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; align-items: center; }
.boton { display: inline-block; background: var(--marca); color: #fff; border: 1px solid var(--marca); border-radius: 8px; padding: .6rem 1rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.boton:hover { background: var(--marca-oscura); }
.boton.secundario { background: #fff; color: var(--marca); }
.boton.secundario:hover { background: var(--marca-clara); }
.boton.peligro { background: #fff; color: var(--mal); border-color: var(--mal); }
.boton.chico { padding: .3rem .6rem; font-size: .85rem; white-space: nowrap; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.tarjeta span { color: var(--suave); font-size: .9rem; }
.tarjeta strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tarjeta.bien strong { color: var(--marca); }
.tarjeta.mal strong { color: var(--mal); }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: .5rem .6rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla th { font-size: .82rem; color: var(--suave); font-weight: 600; }
.tabla .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tfoot td, .tabla tr.total td { font-weight: 700; border-top: 2px solid var(--borde); }
.tabla tr.final td { background: var(--marca-clara); }
.tabla tr.grupo td { font-weight: 700; color: var(--marca-oscura); padding-top: 1rem; border-bottom: 2px solid var(--marca); }
.tabla tr.pasado { opacity: .45; }
.tabla.asiento { font-size: .9rem; }
.tabla.informe { max-width: 720px; }
.nowrap { white-space: nowrap; }
.scroll { overflow-x: auto; }

.formulario .columnas, .filtros .columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
form.formulario:not(.panel form) { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 1.25rem; }
form[data-form="config"].formulario { background: none; border: 0; padding: 0; }
.panel form.formulario { border: 0; padding: 0; margin-top: 1.25rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo > span { font-weight: 600; font-size: .9rem; }
input, select { font: inherit; padding: .55rem .6rem; border: 1px solid #b9c4bf; border-radius: 8px; background: #fff; color: inherit; width: 100%; }
input:focus, select:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
input[type="checkbox"] { width: auto; margin-top: .25rem; }
.filtros { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.filtros .campo { min-width: 170px; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .6rem; margin: 1rem 0; }
.check { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--borde); border-radius: 8px; cursor: pointer; }
.check small { display: block; }
.avanzado { margin-bottom: 1rem; }
.avanzado summary { cursor: pointer; color: var(--marca); font-weight: 600; }

.previa { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; background: var(--fondo); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }

.mov { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; margin-bottom: .5rem; }
.mov summary { display: flex; gap: .75rem; align-items: center; padding: .7rem 1rem; cursor: pointer; list-style: none; }
.mov summary::-webkit-details-marker { display: none; }
.mov .fecha { color: var(--suave); font-variant-numeric: tabular-nums; }
.mov .desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov .detalle { padding: 0 1rem 1rem; }
.mov .detalle .boton { margin-top: .75rem; }
.chip { font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 99px; background: #e8ecea; white-space: nowrap; }
.chip.venta, .chip.cobro { background: var(--marca-clara); color: var(--marca-oscura); }
.chip.gasto, .chip.pago, .chip.nomina { background: #fde8e6; color: #7d1c16; }

.aviso { background: #e8f0fb; color: #173a66; border-radius: 8px; padding: .7rem .9rem; margin: .75rem 0; }
.aviso.alerta { background: var(--alerta-fondo); color: var(--alerta-texto); }
.aviso.ok { background: var(--marca-clara); color: var(--marca-oscura); }
.vacio, .explica, .periodo { color: var(--suave); }
.comprobante { margin: 1rem 0; break-inside: avoid; }

.pestanas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.pestanas button { font: inherit; padding: .5rem .9rem; border: 1px solid var(--borde); border-radius: 99px; background: #fff; cursor: pointer; }
.pestanas button.activa { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }

.glosario dt { font-weight: 700; margin-top: .8rem; }
.glosario dd { margin: .15rem 0 0; color: var(--suave); }

#mensaje { position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 1rem); background: var(--texto); color: #fff; padding: .6rem 1.1rem; border-radius: 99px; opacity: 0; transition: .2s; pointer-events: none; }
#mensaje.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  body { flex-direction: column; }
  #menu { width: 100%; height: auto; position: static; flex-direction: row; overflow-x: auto; padding: .5rem; }
  #menu .marca { display: none; }
  #menu a { white-space: nowrap; }
  main { padding: 1rem 1rem 4rem; }
  .mov summary { flex-wrap: wrap; }
}

@media print {
  #menu, .noimprimir, .acciones, .aviso, #mensaje { display: none !important; }
  html { background: #fff; font-size: 12px; }
  main { padding: 0; max-width: none; }
  .panel { border: 0; padding: 0; }
}