/* ==========================================================
   Gestión Económica · hoja de estilo única
   Paleta de campo: verde cultivo, tierra arada, ámbar de espera
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --tinta:#16201a; --tinta2:#53645a; --tinta3:#8b998f;
  --papel:#f1f3ee; --tarjeta:#ffffff; --linea:#dde3d8; --linea2:#eef1ea;
  --verde:#2c6e49; --verde-osc:#1d4a30; --verde-luz:#e6f0e7;
  --barro:#b4571f; --barro-luz:#fbeade;
  --ambar:#c8922a; --ambar-luz:#fbf1dc;
  --azul:#33617f; --rojo:#a8322a;
  --r:14px; --r-s:9px;
  --sombra:0 1px 2px rgba(22,32,26,.06), 0 8px 24px -18px rgba(22,32,26,.35);
  --fuente:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--fuente); color:var(--tinta); background:var(--papel);
  font-size:15.5px; line-height:1.5; -webkit-text-size-adjust:100%;
}
a{color:var(--verde-osc)}
h1,h2,h3{margin:0 0 .4em; line-height:1.2; letter-spacing:-.02em}
h1{font-size:1.55rem;font-weight:700}
h2{font-size:1.12rem;font-weight:600}
h3{font-size:.95rem;font-weight:600}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.silencio{color:var(--tinta2)}
.mini{font-size:.8rem}
@media (prefers-reduced-motion:no-preference){
  .tarjeta,.kpi{transition:box-shadow .18s ease, transform .18s ease}
}

/* ---------- Estructura ---------- */
.app{display:flex; min-height:100vh}
.lateral{
  width:236px; flex:0 0 236px; background:var(--verde-osc); color:#dbe7dd;
  padding:20px 14px; position:sticky; top:0; height:100vh; overflow:auto;
}
.marca{display:flex; align-items:baseline; gap:8px; padding:0 8px 18px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:14px}
.marca b{color:#fff; font-size:1.05rem; letter-spacing:-.02em}
.marca span{font-size:.72rem; color:#9ec0a6; text-transform:uppercase; letter-spacing:.09em}
.nav a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-s);
  color:#cfe0d3; text-decoration:none; font-size:.94rem; font-weight:500;
}
.nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.nav a.on{background:#fff; color:var(--verde-osc); font-weight:600}
.nav .ico{width:18px; text-align:center; font-size:1rem}
.lateral-pie{margin-top:22px; padding:12px 8px 0; border-top:1px solid rgba(255,255,255,.12); font-size:.82rem; color:#9ec0a6}
.lateral-pie a{color:#cfe0d3}

.principal{flex:1; min-width:0; padding:22px 26px 90px}
.cabecera{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:18px}
.cabecera .sub{color:var(--tinta2); font-size:.9rem; margin:0}

.movil-top,.movil-nav{display:none}

/* ---------- Tarjetas y rejillas ---------- */
.tarjeta{background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra); padding:18px}
.tarjeta + .tarjeta{margin-top:16px}
.tarjeta h2{display:flex; align-items:center; justify-content:space-between; gap:10px}
.rejilla{display:grid; gap:14px}
.rejilla.k4{grid-template-columns:repeat(4,1fr)}
.rejilla.k3{grid-template-columns:repeat(3,1fr)}
.rejilla.k2{grid-template-columns:repeat(2,1fr)}

.kpi{background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--r); padding:15px 16px; box-shadow:var(--sombra)}
.kpi .et{font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--tinta2); font-weight:600}
.kpi .val{font-family:var(--mono); font-size:1.5rem; font-weight:600; letter-spacing:-.03em; margin-top:6px}
.kpi .pie{font-size:.8rem; color:var(--tinta2); margin-top:4px}
.kpi.ingreso{border-left:4px solid var(--verde)}
.kpi.gasto{border-left:4px solid var(--barro)}
.kpi.balance{border-left:4px solid var(--tinta)}
.kpi.prevision{border-left:4px solid var(--ambar)}
.pos{color:var(--verde)} .neg{color:var(--barro)}

/* ---------- Banda de meses (selector + gráfico) ---------- */
.banda{background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--r); padding:14px 16px 10px; box-shadow:var(--sombra); margin-bottom:16px}
.banda-cab{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:10px}
.atajos{display:flex; flex-wrap:wrap; gap:6px}
.atajos a{
  font-size:.8rem; padding:5px 11px; border-radius:99px; text-decoration:none;
  border:1px solid var(--linea); color:var(--tinta2); background:var(--papel); white-space:nowrap;
}
.atajos a:hover{border-color:var(--verde); color:var(--verde)}
.atajos a.on{background:var(--verde); border-color:var(--verde); color:#fff; font-weight:600}
.meses{display:flex; gap:5px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin}
.mes{
  flex:1 0 62px; min-width:62px; border:0; background:none; cursor:pointer; padding:4px 2px 6px;
  border-radius:var(--r-s); text-align:center; font-family:inherit;
  display:block; text-decoration:none; color:inherit;
}
.mes:hover{background:var(--linea2)}
.mes.sel{background:var(--verde-luz); outline:1px solid var(--verde)}
.mes .barras{display:flex; align-items:flex-end; justify-content:center; gap:3px; height:52px}
.mes .b{width:11px; border-radius:3px 3px 0 0; min-height:2px}
.mes .b.i{background:var(--verde)}
.mes .b.g{background:var(--barro)}
.mes .et{display:block; font-size:.68rem; margin-top:5px; color:var(--tinta2); text-transform:uppercase; letter-spacing:.04em}
.mes.sel .et{color:var(--verde-osc); font-weight:600}
.leyenda{display:flex; gap:14px; font-size:.76rem; color:var(--tinta2); margin-top:2px}
.punto{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:var(--r-s); border:1px solid var(--linea);
  background:var(--tarjeta); color:var(--tinta); font:inherit; font-size:.9rem; font-weight:600;
  text-decoration:none; cursor:pointer;
}
.btn:hover{border-color:var(--tinta3)}
.btn-primario{background:var(--verde); border-color:var(--verde); color:#fff}
.btn-primario:hover{background:var(--verde-osc); border-color:var(--verde-osc)}
.btn-gasto{background:var(--barro); border-color:var(--barro); color:#fff}
.btn-gasto:hover{filter:brightness(.92)}
.btn-peligro{color:var(--rojo); border-color:#e8cfcc}
.btn-peligro:hover{background:#fdf0ee}
.btn-s{padding:6px 11px; font-size:.82rem}
.ancho{width:100%}
.acciones{display:flex; flex-wrap:wrap; gap:9px}

/* ---------- Formularios ---------- */
.campos{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.campo{display:flex; flex-direction:column; gap:5px; min-width:0}
.campo.ancho2{grid-column:1/-1}
label{font-size:.83rem; font-weight:600; color:var(--tinta2)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{
  font:inherit; padding:10px 12px; border:1px solid var(--linea); border-radius:var(--r-s);
  background:#fff; color:var(--tinta); width:100%; min-width:0;
}
input[type=number]{font-family:var(--mono)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verde); outline-offset:1px; border-color:var(--verde)}
textarea{min-height:80px; resize:vertical}
.pista{font-size:.78rem; color:var(--tinta3)}
.selector-tipo{display:flex; gap:8px}
.selector-tipo label{
  flex:1; text-align:center; padding:11px; border:1px solid var(--linea); border-radius:var(--r-s);
  cursor:pointer; font-weight:600; color:var(--tinta2); background:#fff;
}
.selector-tipo input{position:absolute; opacity:0; pointer-events:none}
.selector-tipo input:checked + span{color:#fff}
.selector-tipo label:has(input[value=ingreso]:checked){background:var(--verde); border-color:var(--verde); color:#fff}
.selector-tipo label:has(input[value=gasto]:checked){background:var(--barro); border-color:var(--barro); color:#fff}
.selector-tipo label:has(input:focus-visible){outline:2px solid var(--tinta); outline-offset:2px}

.resumen-calculo{background:var(--verde-luz); border:1px solid #cfe3d3; border-radius:var(--r-s); padding:14px}
.resumen-calculo .fila{display:flex; justify-content:space-between; padding:4px 0; font-size:.92rem}
.resumen-calculo .fila.total{border-top:1px solid #c2dbc8; margin-top:6px; padding-top:9px; font-size:1.1rem; font-weight:700}
.resumen-calculo .num{font-family:var(--mono)}

/* ---------- Tablas ---------- */
.tabla-envoltura{overflow-x:auto; margin:0 -4px}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th{
  text-align:left; font-size:.73rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tinta2); padding:9px 10px; border-bottom:2px solid var(--linea); white-space:nowrap;
}
td{padding:11px 10px; border-bottom:1px solid var(--linea2); vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--papel)}
td.der,th.der{text-align:right}
td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
tfoot td{font-weight:700; border-top:2px solid var(--linea); background:var(--papel)}
.linea-titulo{font-weight:600}
.linea-sub{font-size:.79rem; color:var(--tinta2)}

/* ---------- Etiquetas ---------- */
.tag{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:.76rem; font-weight:600; white-space:nowrap}
.tag.verde{background:var(--verde-luz); color:var(--verde-osc)}
.tag.barro{background:var(--barro-luz); color:var(--barro)}
.tag.ambar{background:var(--ambar-luz); color:#8a6416}
.tag.gris{background:var(--linea2); color:var(--tinta2)}
.tag.azul{background:#e5eef4; color:var(--azul)}
.tag.punto-cat{background:var(--linea2); color:var(--tinta)}

/* ---------- Adjuntos ---------- */
.adjuntos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.adj{border:1px solid var(--linea); border-radius:var(--r-s); overflow:hidden; background:#fff; display:flex; flex-direction:column}
.adj .vista{height:96px; background:var(--papel); display:flex; align-items:center; justify-content:center; overflow:hidden}
.adj .vista img{width:100%; height:100%; object-fit:cover}
.adj .vista .pdf{font-family:var(--mono); font-weight:600; color:var(--barro); font-size:.9rem}
.adj .pie{padding:8px 9px; font-size:.76rem; display:flex; justify-content:space-between; align-items:center; gap:6px}
.adj .pie a{text-decoration:none; font-weight:600}
.soltar{
  border:2px dashed var(--linea); border-radius:var(--r-s); padding:18px; text-align:center;
  color:var(--tinta2); background:var(--papel); cursor:pointer;
}
.soltar.activo{border-color:var(--verde); background:var(--verde-luz); color:var(--verde-osc)}

/* ---------- Avisos ---------- */
.aviso{padding:11px 14px; border-radius:var(--r-s); margin-bottom:14px; font-size:.9rem; border:1px solid}
.aviso.ok{background:var(--verde-luz); border-color:#c2dbc8; color:var(--verde-osc)}
.aviso.error{background:#fdeeec; border-color:#f0cdc8; color:var(--rojo)}
.aviso.info{background:#eef2f6; border-color:#d5e0e8; color:var(--azul)}
.vacio{text-align:center; padding:34px 18px; color:var(--tinta2)}
.vacio .grande{font-size:1.9rem; display:block; margin-bottom:8px}
.aviso-fuerte{background:var(--ambar-luz); border:1px solid #ecd9a8; border-radius:var(--r-s); padding:11px 13px; font-size:.88rem}

/* ---------- Filtros ---------- */
.filtros{display:flex; flex-wrap:wrap; gap:9px; align-items:flex-end; margin-bottom:14px}
.filtros .campo{flex:1 1 150px}

/* ---------- Pantalla de acceso / instalación ---------- */
.pantalla-simple{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:22px;
  background:linear-gradient(160deg,#1d4a30 0%,#2c6e49 45%,#4d7c3a 100%);
}
.tarjeta-auth{background:#fff; border-radius:18px; padding:30px 28px; width:100%; max-width:410px; box-shadow:0 24px 60px -20px rgba(0,0,0,.45)}
.titulo-marca{font-size:1.5rem; letter-spacing:-.03em}
.lista-log{list-style:none; padding:0; margin:0 0 16px; font-size:.87rem}
.lista-log li{padding:6px 0; border-bottom:1px solid var(--linea2)}
.lista-log li.bueno::before{content:"✓ "; color:var(--verde); font-weight:700}
.lista-log li.malo{color:var(--rojo)}
.lista-log li.malo::before{content:"✕ "; font-weight:700}

/* ---------- Previsión ---------- */
.mes-bloque{border:1px solid var(--linea); border-radius:var(--r); margin-bottom:14px; overflow:hidden; background:#fff}
.mes-bloque > summary{
  padding:14px 16px; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:12px; font-weight:600; background:var(--papel); list-style:none;
}
.mes-bloque > summary::-webkit-details-marker{display:none}
.mes-bloque > summary::before{content:"▸"; color:var(--tinta2); margin-right:6px}
.mes-bloque[open] > summary::before{content:"▾"}
.barra-accion{
  position:sticky; bottom:0; background:#fff; border-top:1px solid var(--linea);
  padding:12px 16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  box-shadow:0 -8px 20px -14px rgba(0,0,0,.4); border-radius:var(--r) var(--r) 0 0; z-index:20;
}
input[type=checkbox]{width:18px; height:18px; accent-color:var(--verde)}

/* ---------- Impresión ---------- */
@media print{
  .lateral,.movil-top,.movil-nav,.acciones,.atajos,.banda-cab,.barra-accion{display:none!important}
  body{background:#fff}
  .principal{padding:0}
  .tarjeta,.kpi{box-shadow:none; border-color:#ccc; break-inside:avoid}
}

/* ---------- Móvil ---------- */
@media (max-width:1000px){ .rejilla.k4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){
  body{font-size:15px}
  .app{flex-direction:column}
  .lateral{display:none}
  .principal{padding:12px 13px 84px}
  .movil-top{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--verde-osc); color:#fff; padding:12px 15px; position:sticky; top:0; z-index:30;
  }
  .movil-top b{font-size:1rem}
  .movil-top .sal{color:#cfe0d3; text-decoration:none; font-size:.85rem}
  .movil-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; background:#fff;
    border-top:1px solid var(--linea); z-index:40; padding:4px 2px calc(4px + env(safe-area-inset-bottom));
  }
  .movil-nav a{
    flex:1; text-align:center; padding:7px 2px; font-size:.66rem; color:var(--tinta2);
    text-decoration:none; display:flex; flex-direction:column; gap:2px; font-weight:600;
  }
  .movil-nav a .ico{font-size:1.15rem}
  .movil-nav a.on{color:var(--verde)}
  .rejilla.k4,.rejilla.k3,.rejilla.k2{grid-template-columns:repeat(2,1fr)}
  .campos{grid-template-columns:1fr}
  .kpi .val{font-size:1.28rem}
  h1{font-size:1.3rem}
  table{font-size:.85rem}
  th,td{padding:9px 8px}
  .mes{flex:0 0 54px; min-width:54px}
}
@media (max-width:430px){
  .rejilla.k4,.rejilla.k3,.rejilla.k2{grid-template-columns:1fr}
}