/* styles.css — Fibra Caja v11: tema CLARO con la paleta del logo FIBRA.
   Colores del logo: verde manzana #8cc63f · verde azulado #00a99d · celeste #29abe2
   · morado #93278f · frambuesa #d4145a · naranjo #f7941e. Fondo blanco. */

:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f3f6f9;
  --borde: #e2e8f0;
  --texto: #22303e;
  --muted: #64748b;
  --acento: #29abe2;        /* celeste (la B del logo) — color principal */
  --verde: #00a99d;         /* verde azulado — pagado / positivo */
  --verde-manzana: #8cc63f;
  --ambar: #f7941e;         /* naranjo — PPTO / proyectado */
  --rojo: #d4145a;          /* frambuesa — negativo / alertas */
  --morado: #93278f;
  --radio: 10px;
}

* { box-sizing: border-box; }

/* El atributo hidden manda sobre cualquier display de clase */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 650; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .92rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
code { background: var(--panel-2); border: 1px solid var(--borde); border-radius: 4px; padding: 1px 5px; font-size: .9em; }

.muted { color: var(--muted); }
.chico { font-size: .82rem; }
.acento { color: var(--acento); }
.error { color: var(--rojo); font-size: .9rem; }
.exito-txt { color: var(--verde); }

/* Barra multicolor de marca (los 6 colores del logo) */
.brand-strip {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    #8cc63f 0 16.6%, #00a99d 16.6% 33.3%, #29abe2 33.3% 50%,
    #93278f 50% 66.6%, #d4145a 66.6% 83.3%, #f7941e 83.3% 100%);
}

/* ---------- pantallas centradas (login / setup) ---------- */

.pantalla-centrada {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.tarjeta-login {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 8px 28px rgba(34, 48, 62, .08);
  padding: 32px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tarjeta-login h1 { font-size: 1.6rem; text-align: center; margin: 0; }
.tarjeta-login h1::after {
  content: "";
  display: block;
  height: 4px;
  border-radius: 2px;
  margin: 10px auto 0;
  width: 72%;
  background: linear-gradient(90deg, #8cc63f, #00a99d, #29abe2, #93278f, #d4145a, #f7941e);
}
.tarjeta-login p { margin: 0; }

/* ---------- layout app ---------- */

#app { display: flex; min-height: 100vh; }

#sidebar {
  width: 215px;
  flex: 0 0 215px;
  background: #fbfcfe;
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}
#sidebar .logo { font-size: 1.25rem; font-weight: 700; padding: 0 8px; }
#sidebar .logo::after {
  content: "";
  display: block;
  height: 4px;
  border-radius: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, #8cc63f, #00a99d, #29abe2, #93278f, #d4145a, #f7941e);
}
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav a {
  color: var(--texto);
  padding: 9px 10px;
  border-radius: 8px;
  font-size: .95rem;
}
#nav a:hover { background: var(--panel-2); text-decoration: none; }
#nav a.activo { background: rgba(41, 171, 226, .13); color: #0f7fb3; font-weight: 600; }
#sidebar .usuario {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px;
  word-break: break-all;
  font-size: .82rem;
}

#view { flex: 1; padding: 26px 30px 60px; max-width: 1440px; }

/* ---------- cabeceras y paneles ---------- */

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.cabecera p { margin: .2em 0 0; max-width: 640px; }
.cabecera-seccion { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cabecera-seccion h3 { margin: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 1px 3px rgba(34, 48, 62, .05);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.leyenda { margin: 0 0 12px; color: var(--muted); font-size: .85rem; }

/* ---------- KPIs ---------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.kpi {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio);
  box-shadow: 0 1px 3px rgba(34, 48, 62, .05);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kpis .kpi:nth-child(6n+1) { border-left-color: #29abe2; }
.kpis .kpi:nth-child(6n+2) { border-left-color: #00a99d; }
.kpis .kpi:nth-child(6n+3) { border-left-color: #8cc63f; }
.kpis .kpi:nth-child(6n+4) { border-left-color: #93278f; }
.kpis .kpi:nth-child(6n+5) { border-left-color: #f7941e; }
.kpis .kpi:nth-child(6n+6) { border-left-color: #d4145a; }
.kpi-titulo { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.kpi-valor { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.kpi-nota { color: var(--muted); font-size: .8rem; }

/* ---------- tablas ---------- */

.tabla-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
tbody tr:hover { background: rgba(41, 171, 226, .05); }

.num { text-align: right; white-space: nowrap; }
.neg { color: var(--rojo); }
.proy { color: #c66d00; font-size: .78rem; }

tr.clickable { cursor: pointer; }
tr.fila-cerrada { opacity: .55; }
tr.fila-futura td:first-child { color: var(--muted); }
tr.fila-alerta { background: rgba(212, 20, 90, .05); }
tr.fila-grupo td {
  background: var(--panel-2);
  font-weight: 650;
  font-size: .85rem;
  border-bottom: 1px solid var(--borde);
}

table.mini { max-width: 480px; }
table.mini td { padding: 6px 8px; font-size: .92rem; }

.grid-detalle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.acciones-td { white-space: nowrap; text-align: right; }
.acciones-td .btn { margin-left: 4px; }

/* ---------- badges ---------- */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: middle;
}
.badge.pagado { background: rgba(0, 169, 157, .12); color: #00786f; border: 1px solid rgba(0, 169, 157, .45); }
.badge.ppto { background: rgba(247, 148, 30, .1); color: #b36b00; border: 1px solid #f7941e; }
.badge.rojo { background: rgba(212, 20, 90, .1); color: var(--rojo); border: 1px solid rgba(212, 20, 90, .45); }
.badge.gris { background: var(--panel-2); color: var(--muted); border: 1px solid var(--borde); }
.badge.chico { font-size: .68rem; padding: 1px 7px; }

/* ---------- botones ---------- */

.btn {
  background: var(--panel);
  color: var(--texto);
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: .9rem;
  cursor: pointer;
}
.btn:hover { border-color: var(--acento); color: #0f7fb3; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #ffffff; font-weight: 650; }
.btn.primario:hover { filter: brightness(.94); color: #ffffff; }
.btn.exito { border-color: var(--verde); color: #00786f; }
.btn.peligro { border-color: rgba(212, 20, 90, .5); color: var(--rojo); }
.btn.chico { padding: 4px 9px; font-size: .8rem; border-radius: 6px; }
.btn:disabled { opacity: .55; cursor: default; }

/* ---------- formularios ---------- */

label { display: flex; flex-direction: column; gap: 5px; font-size: .86rem; color: var(--muted); }
input, select, textarea {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: var(--texto);
  padding: 9px 10px;
  font-size: .95rem;
  font-family: inherit;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(41, 171, 226, .15); }
input[type="checkbox"] { width: auto; accent-color: var(--acento); }

.form { display: flex; flex-direction: column; gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.grid2 .span2 { grid-column: span 2; }
label.chk { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); grid-column: span 2; }
.hint { margin: 0; color: #b36b00; font-size: .85rem; min-height: 1.2em; }
.acciones { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }

/* ---------- modal ---------- */

dialog.modal {
  background: var(--panel);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 20px 50px rgba(34, 48, 62, .2);
  padding: 22px 24px;
  width: min(560px, calc(100vw - 32px));
}
dialog.modal::backdrop { background: rgba(34, 48, 62, .45); }

/* ---------- pestañas del detalle de programa (v7) ---------- */

.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--borde);
  padding-bottom: 0;
}
.tab {
  background: transparent;
  color: var(--muted);
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  padding: 9px 16px;
  font-size: .92rem;
  font-family: inherit;
  cursor: pointer;
}
.tab:hover { color: var(--texto); background: var(--panel-2); }
.tab.activo {
  color: #0f7fb3;
  font-weight: 650;
  border-bottom-color: var(--acento);
  margin-bottom: -2px;
}

/* ---------- flujo de caja pivoteado (v7): meses en columnas ---------- */
/* v8: compacta y auto-ajustada al ancho (zoom vía ajustarFlujo) para verse completa sin scroll interno. */

.tabla-flujo th, .tabla-flujo td {
  white-space: nowrap;
  padding: 6px 8px;
  font-size: .84rem;
}
.tabla-flujo th.concepto, .tabla-flujo td.concepto {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 1;
  min-width: 150px;
  font-weight: 600;
}
.tabla-flujo th.col-actual { color: #0f7fb3; border-bottom: 2px solid var(--acento); }
.tabla-flujo th.col-futura { opacity: .65; }
.tabla-flujo tr.fila-saldo td { border-top: 1px solid var(--borde); font-weight: 700; }
.tabla-flujo tbody tr:hover td.concepto { background: var(--panel); }

/* Punto indicador real / PPTO */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: baseline;
}
.dot-real { background: var(--verde); }
.dot-proy { background: var(--ambar); }

/* ---------- "Más opciones" plegable del formulario de línea (v7) ---------- */

details.mas-opciones {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
}
details.mas-opciones summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .86rem;
}
details.mas-opciones[open] summary { margin-bottom: 10px; }

/* ---------- listas ---------- */

.alertas, .lista { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lista li { padding-left: 16px; position: relative; }
.lista li::before { content: "•"; color: var(--acento); position: absolute; left: 0; }

/* ---------- responsive básico ---------- */

@media (max-width: 780px) {
  #app { flex-direction: column; }
  #sidebar {
    width: 100%;
    flex: none;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  #nav { flex-direction: row; flex-wrap: wrap; }
  #sidebar .usuario { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  #view { padding: 18px 14px 50px; }
  .grid2 { grid-template-columns: 1fr; }
  .grid2 .span2, label.chk { grid-column: span 1; }
}