:root {
  --azul-oscuro: #1f3b57;
  --azul: #2f5d8a;
  --azul-claro: #eaf1f8;
  --azul-hover: #d7e6f5;
  --verde: #2e7d4f;
  --verde-claro: #e6f5ec;
  --amarillo: #fff6d6;
  --amarillo-borde: #e8d98a;
  --gris-texto: #2b2f36;
  --gris-suave: #6b7280;
  --borde: #dbe2ea;
  --rojo: #b3261e;
  --blanco: #ffffff;
  --radio: 8px;
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  background: #f4f6f9;
  color: var(--gris-texto);
  font-size: 14px;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: var(--azul-oscuro);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar .marca {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .2px;
  color: #fff;
}
.topbar nav { display: flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }
.topbar nav a, .topbar nav .dropdown > summary {
  color: #cfe0f2;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radio);
  font-size: 0.88rem;
  cursor: pointer;
  list-style: none;
}
.topbar nav a:hover, .topbar nav .dropdown > summary:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration:none; }
.topbar nav a.activo { background: rgba(255,255,255,.18); color: #fff; }
.topbar .usuario { color: #b9cbdd; font-size: 0.82rem; margin-left: 0.5rem; }
.topbar .usuario b { color: #fff; }

.dropdown { position: relative; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown[open] > summary { background: rgba(255,255,255,.12); color:#fff; }
.dropdown .menu {
  position: absolute; top: 110%; left: 0; background: #fff; color: var(--gris-texto);
  border: 1px solid var(--borde); border-radius: var(--radio); min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 0.35rem; z-index: 60;
}
.dropdown .menu a { display: block; padding: 0.5rem 0.6rem; border-radius: 6px; color: var(--gris-texto); font-size: 0.9rem;}
.dropdown .menu a:hover { background: var(--azul-claro); text-decoration: none; }

.contenedor { max-width: 1400px; margin: 0 auto; padding: 1.25rem; }
.contenedor.ancho { max-width: 100%; }

h1 { font-size: 1.35rem; margin: 0 0 0.25rem; color: var(--azul-oscuro); }
h2 { font-size: 1.05rem; color: var(--azul-oscuro); }
.subtitulo { color: var(--gris-suave); margin: 0 0 1.25rem; font-size: 0.88rem; }

.tarjeta {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}

.grid-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; margin-bottom: 1.25rem; }
.kpi { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem; }
.kpi .etiqueta { color: var(--gris-suave); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi .valor { font-size: 1.5rem; font-weight: 700; color: var(--azul-oscuro); margin-top: 0.2rem; }
.kpi .valor.alerta { color: var(--rojo); }
.kpi .detalle { font-size: 0.8rem; color: var(--gris-suave); margin-top: 0.15rem; }

.badge { display:inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight:600; }
.badge.ok { background: var(--verde-claro); color: var(--verde); }
.badge.alerta { background: #fbe7e6; color: var(--rojo); }

.tabla-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }

table.flujo { border-collapse: collapse; width: 100%; min-width: 1200px; font-size: 0.82rem; }
table.flujo th, table.flujo td {
  border-bottom: 1px solid var(--borde); border-right: 1px solid #eef1f5;
  padding: 0.4rem 0.55rem; text-align: right; white-space: nowrap;
}
table.flujo th.izq, table.flujo td.izq { text-align: left; white-space: normal; }
table.flujo thead th {
  background: var(--azul); color: #fff; position: sticky; top: 0; z-index: 5;
}
table.flujo thead tr.fechas th { background: var(--azul-oscuro); font-weight: 400; font-size: 0.72rem; }
table.flujo td.col-fija, table.flujo th.col-fija {
  position: sticky; left: 0; background: #fff; z-index: 4; min-width: 230px; max-width: 260px;
}
table.flujo thead th.col-fija { background: var(--azul); z-index: 6; }
table.flujo tr.seccion td { background: var(--azul-oscuro); color: #fff; font-weight: 700; text-align: left; }
table.flujo tr.subtotal td { background: var(--azul-claro); font-weight: 700; }
table.flujo tr.resultado td { background: var(--verde-claro); font-weight: 700; }
table.flujo tr.real td.valor-real { background: var(--amarillo); }
table.flujo tr:hover td { background-color: var(--azul-hover); }
table.flujo tr.seccion:hover td, table.flujo tr.subtotal:hover td, table.flujo tr.resultado:hover td { background-color: inherit; }
table.flujo td.auto { color: var(--gris-suave); font-style: italic; }
table.flujo td.negativo { color: var(--rojo); }
table.flujo td.nota { font-size: 0.72rem; color: var(--gris-suave); font-weight: 400; }

form.captura .fila-concepto {
  display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr 0.5fr; gap: 0.6rem; align-items: center;
  padding: 0.4rem 0; border-bottom: 1px solid var(--borde);
}
form.captura .fila-concepto input[type=checkbox] { width: auto; justify-self: center; }
form.captura .fila-concepto.encabezado { font-weight: 700; color: var(--gris-suave); font-size: 0.78rem; text-transform: uppercase; border-bottom: 2px solid var(--borde);}
form.captura input[type=number] {
  width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--borde); border-radius: 6px; text-align: right; font-size: 0.9rem;
}
form.captura .real-input { background: var(--amarillo); border-color: var(--amarillo-borde); }
form.captura .grupo-titulo { margin-top: 1rem; margin-bottom: 0.25rem; color: var(--azul-oscuro); font-weight: 700; font-size: 0.95rem; }

label { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; color: var(--gris-suave); }
input, select { font-family: var(--fuente); }
input[type=text], input[type=email], input[type=password], input[type=number], select {
  padding: 0.55rem 0.65rem; border: 1px solid var(--borde); border-radius: 6px; font-size: 0.92rem; width: 100%;
}

.btn {
  display: inline-block; background: var(--azul); color: #fff; border: none; padding: 0.6rem 1.1rem;
  border-radius: 6px; font-size: 0.9rem; cursor: pointer; font-weight: 600;
}
.btn:hover { background: var(--azul-oscuro); text-decoration: none; }
.btn.secundario { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
.btn.secundario:hover { background: var(--azul-claro); }
.btn.peligro { background: var(--rojo); }

.alerta-mensaje { padding: 0.7rem 1rem; border-radius: var(--radio); margin-bottom: 1rem; font-size: 0.88rem; }
.alerta-mensaje.exito { background: var(--verde-claro); color: var(--verde); border: 1px solid #b7e0c6; }
.alerta-mensaje.error { background: #fbe7e6; color: var(--rojo); border: 1px solid #f2c3c0; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--azul-oscuro), var(--azul)); }
.login-caja { background: #fff; padding: 2.2rem 2rem; border-radius: 12px; width: 100%; max-width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-caja h1 { text-align: center; margin-bottom: 1.5rem; }
.login-caja .campo { margin-bottom: 1rem; }

.selector-semana { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.selector-semana select { width: auto; }

.pestañas { display: flex; gap: 0.3rem; margin-bottom: 1rem; border-bottom: 2px solid var(--borde); }
.pestañas a { padding: 0.5rem 0.9rem; border-radius: 6px 6px 0 0; color: var(--gris-suave); font-size: 0.88rem; font-weight: 600; }
.pestañas a.activo { color: var(--azul); background: var(--azul-claro); border-bottom: 2px solid var(--azul); margin-bottom: -2px; }

.muted { color: var(--gris-suave); font-size: 0.82rem; }
.nota { font-size: 0.72rem; color: var(--gris-suave); font-weight: 400; }
.negativo { color: var(--rojo); }
.kpi .detalle.negativo { color: var(--rojo); font-weight: 600; }

footer.app-footer { text-align: center; color: var(--gris-suave); font-size: 0.78rem; padding: 1.5rem; }

@media (max-width: 720px) {
  .topbar nav { display: none; }
  form.captura .fila-concepto {
    grid-template-columns: 1fr 1fr; row-gap: 0.3rem;
  }
  form.captura .fila-concepto > span:first-child { grid-column: 1 / -1; font-weight: 600; }
  form.captura .fila-concepto.encabezado { display: none; }
}