/* estilos.css — Sinergic Control Financiero */
:root{
  --verde:#0f7a4d; --verde-osc:#0b5c3a; --verde-claro:#e6f4ec;
  --gris:#5b6470; --gris-claro:#f4f6f8; --linea:#e3e8ee;
  --rojo:#c0392b; --texto:#1f2733; --tarjeta:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--gris-claro);color:var(--texto);font-size:15px;line-height:1.45}
a{color:var(--verde);text-decoration:none}

/* Barra superior */
.barra{display:flex;align-items:center;gap:24px;background:var(--verde-osc);
  color:#fff;padding:0 22px;height:58px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.barra .marca{font-weight:700;letter-spacing:.3px}
.barra nav{display:flex;gap:4px;flex:1}
.barra nav a{color:#cfe6da;padding:8px 14px;border-radius:7px;font-weight:500}
.barra nav a:hover{background:rgba(255,255,255,.10);color:#fff}
.barra nav a.on{background:var(--verde);color:#fff}
.barra .usuario{display:flex;align-items:center;gap:12px;font-size:14px;color:#cfe6da}
.barra .salir{color:#fff;border:1px solid rgba(255,255,255,.35);padding:5px 12px;border-radius:7px}
.barra .salir:hover{background:rgba(255,255,255,.12)}

.contenido{max-width:1140px;margin:26px auto;padding:0 18px}
h1{font-size:22px;margin:0 0 18px}
h2{font-size:17px;margin:26px 0 12px}

/* Tarjetas de resumen */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:8px}
.kpi{background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;padding:16px 18px}
.kpi .et{color:var(--gris);font-size:13px;margin-bottom:6px}
.kpi .num{font-size:24px;font-weight:700}
.kpi.ing .num{color:var(--verde)}
.kpi.egr .num{color:var(--rojo)}
.kpi.bal .num{color:var(--texto)}

/* Tarjeta genérica */
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;padding:20px;margin-top:18px}

/* Tablas */
table{width:100%;border-collapse:collapse;background:var(--tarjeta);
  border:1px solid var(--linea);border-radius:12px;overflow:hidden}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--linea);font-size:14px}
th{background:var(--verde-claro);color:var(--verde-osc);font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafcfd}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ingreso{color:var(--verde);font-weight:600}
.egreso{color:var(--rojo);font-weight:600}
.etq{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;background:var(--verde-claro);color:var(--verde-osc)}
.etq.gris{background:#eef1f4;color:var(--gris)}

/* Formularios */
form .campo{margin-bottom:15px}
label{display:block;font-size:13px;color:var(--gris);margin-bottom:5px;font-weight:500}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--linea);
  border-radius:8px;font-size:15px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde);
  box-shadow:0 0 0 3px var(--verde-claro)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.btn{display:inline-block;background:var(--verde);color:#fff;border:none;padding:11px 22px;
  border-radius:8px;font-size:15px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--verde-osc)}
.btn.sec{background:#fff;color:var(--verde);border:1px solid var(--verde)}
.btn.peq{padding:6px 12px;font-size:13px}
.btn.rojo{background:var(--rojo)}
.aviso{background:var(--verde-claro);color:var(--verde-osc);padding:12px 16px;
  border-radius:8px;margin-bottom:16px;border:1px solid #bfe3cf}

/* Filtros */
.filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:16px}
.filtros .campo{margin:0}
.filtros .campo.chico{width:150px}

/* Barra de progreso de presupuesto */
.barra-prog{background:#eef1f4;border-radius:20px;height:9px;overflow:hidden;margin-top:6px}
.barra-prog span{display:block;height:100%;background:var(--verde)}
.barra-prog span.alto{background:#e67e22}
.barra-prog span.exceso{background:var(--rojo)}

/* Login */
.login-caja{max-width:360px;margin:8vh auto;background:#fff;border:1px solid var(--linea);
  border-radius:14px;padding:32px;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.login-caja h1{text-align:center;color:var(--verde-osc)}
.error{background:#fdecea;color:var(--rojo);padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:14px}

.pie{text-align:center;color:var(--gris);font-size:13px;padding:24px;margin-top:30px}
.muted{color:var(--gris);font-size:13px}

@media(max-width:780px){
  .kpis{grid-template-columns:1fr 1fr}
  .fila{grid-template-columns:1fr}
  .barra{flex-wrap:wrap;height:auto;padding:10px 14px;gap:12px}
  .barra nav{order:3;width:100%;overflow-x:auto}
}