/* ============================================================
THEME PART 05 — Finanzas (contabilidad.js) e Informes (informes.js)
Los módulos inyectan su CSS en al arrancar (después de esta
hoja), así que todas las reglas van ancladas al id del contenedor
(#contabilidadRoot / #informesView / #crmInformesRoot) para ganar
por especificidad sin recurrir a !important.
============================================================ */
/* =================== CONTABILIDAD =================== */
#contabilidadRoot .cont-wrap { padding: 22px 24px 90px; max-width: 1320px; }
/* Cabecera de vista */
#contabilidadRoot .cont-top { margin-bottom: 20px; align-items: center; }
#contabilidadRoot .cont-head { gap: 12px; }
#contabilidadRoot .cont-head-icon {
width: 38px; height: 38px; border-radius: var(--r-md);
background: var(--primary-soft); color: var(--primary);
}
#contabilidadRoot .cont-head-icon svg { width: 19px; height: 19px; }
#contabilidadRoot .cont-title { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
#contabilidadRoot .cont-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
/* Segmented control Anual / Mensual / Deudas */
#contabilidadRoot .cont-nav {
background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 3px; gap: 2px; height: var(--h-ctl);
}
#contabilidadRoot .cont-nav-btn {
padding: 0 12px; height: 28px; border-radius: 5px; font-size: 12.5px; font-weight: 600;
color: var(--text-muted); transition: background .12s, color .12s, box-shadow .12s;
}
#contabilidadRoot .cont-nav-btn:hover { color: var(--text); background: rgba(255, 255, 255, .6); }
#contabilidadRoot .cont-nav-btn.active { background: var(--card); color: var(--primary); font-weight: 700; box-shadow: var(--shadow-xs); }
#contabilidadRoot .cont-nav-btn.active svg { color: var(--primary); }
#contabilidadRoot .cont-month {
height: var(--h-ctl); padding: 0 32px 0 12px; border-radius: var(--r-md); font-size: 13px; font-weight: 600;
border: 1px solid var(--line); background: var(--card); appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
transition: border-color .12s, box-shadow .12s;
}
#contabilidadRoot .cont-month:hover { border-color: var(--line-strong); }
#contabilidadRoot .cont-month:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
/* Tarjetas de estadística (KPIs con baldosa de icono) */
#contabilidadRoot .cont-stats { gap: 16px; margin-bottom: 16px; }
#contabilidadRoot .cont-stat {
border-radius: var(--r-lg); padding: 18px 20px 16px;
border: 1px solid var(--line); box-shadow: var(--shadow-card);
transition: box-shadow .15s, border-color .15s;
}
#contabilidadRoot .cont-stat:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
#contabilidadRoot .cont-stat-h { gap: 10px; margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; }
#contabilidadRoot .cont-stat-ic {
width: 36px; height: 36px; border-radius: var(--r-md);
background: var(--gray-soft); color: var(--gray);
}
#contabilidadRoot .cont-stat-ic svg { width: 17px; height: 17px; }
#contabilidadRoot .cont-stat-ic.red { background: var(--bad-soft); color: var(--bad); }
#contabilidadRoot .cont-stat-ic.teal { background: var(--primary-soft); color: var(--primary); }
#contabilidadRoot .cont-stat-lbl {
font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
text-transform: uppercase; color: var(--text-muted);
}
#contabilidadRoot .cont-stat-val {
font-size: var(--fs-big); font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px;
}
#contabilidadRoot .cont-stat-val.neg { color: var(--bad); }
#contabilidadRoot .cont-stat-val.pos { color: var(--ok); }
#contabilidadRoot .cont-stat-foot { font-size: 12px; color: var(--text-muted); gap: 8px; }
#contabilidadRoot .cont-badge { padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; }
#contabilidadRoot .cont-badge.up { background: var(--ok-soft); color: var(--ok); }
#contabilidadRoot .cont-badge.down { background: var(--bad-soft); color: var(--bad); }
#contabilidadRoot .cont-badge.flat { background: var(--gray-soft); color: var(--gray); }
#contabilidadRoot .cont-pcting { background: var(--warn-soft); color: var(--warn); font-size: 10.5px; }
/* La ÚNICA tarjeta destacada (Ingresos cobrados): teal de marca, elegante */
#contabilidadRoot .cont-stat.dark {
background: #0a141c;
border-color: #0a141c; box-shadow: 0 6px 18px rgba(10, 20, 28, .22);
}
#contabilidadRoot .cont-stat.dark:hover { box-shadow: 0 8px 22px rgba(10, 20, 28, .28); }
#contabilidadRoot .cont-stat.dark .cont-stat-ic { background: rgba(255, 255, 255, .14); color: var(--accent); }
#contabilidadRoot .cont-stat.dark .cont-stat-lbl { color: rgba(255, 255, 255, .78); }
#contabilidadRoot .cont-stat.dark .cont-stat-val { color: #fff; }
#contabilidadRoot .cont-stat.dark .cont-stat-foot { color: rgba(255, 255, 255, .72); }
#contabilidadRoot .cont-stat.dark .cont-badge.up { background: rgba(60, 193, 160, .18); color: var(--accent); }
#contabilidadRoot .cont-stat.dark .cont-badge.down { background: rgba(255, 255, 255, .14); color: #fecaca; }
#contabilidadRoot .cont-stat.dark .cont-badge.flat { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }
#contabilidadRoot .cont-stat.dark .cont-pcting { background: rgba(255, 255, 255, .14); color: #fde68a; }
#contabilidadRoot .cont-stat.soft { background: var(--card); }
#contabilidadRoot .cont-stat.soft .cont-stat-ic { background: var(--gray-soft); }
/* KPIs compactos (vista anual / deudas) */
#contabilidadRoot .cont-kpis { gap: 14px; margin-bottom: 18px; }
#contabilidadRoot .cont-kpi { border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-card); border: 1px solid var(--line); }
#contabilidadRoot .cont-kpi-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); }
#contabilidadRoot .cont-kpi-val { font-size: 22px; margin-top: 8px; letter-spacing: -.02em; }
#contabilidadRoot .cont-kpi-sub { font-size: 12px; margin-top: 5px; }
#contabilidadRoot .cont-kpi-val.pos { color: var(--ok); }
#contabilidadRoot .cont-kpi-val.neg { color: var(--bad); }
#contabilidadRoot .cont-kpi.dark { background: #0a141c; border-color: #0a141c; box-shadow: 0 6px 18px rgba(10, 20, 28, .22); }
#contabilidadRoot .cont-kpi-tot { font-size: 13px; font-weight: 600; }
/* Tiras de progreso y leyendas */
#contabilidadRoot .cont-strip { height: 10px; border-radius: var(--r-pill); background: var(--line-soft); margin-top: 10px; }
#contabilidadRoot .cont-strip.cmp { height: 16px; border-radius: var(--r-pill); }
#contabilidadRoot .cont-strip.mini { height: 8px; }
#contabilidadRoot .cont-leg { font-size: 11.5px; margin-top: 8px; gap: 14px; }
#contabilidadRoot .cont-leg .dot { width: 8px; height: 8px; border-radius: 50%; }
#contabilidadRoot .cont-progress { height: 7px; border-radius: var(--r-pill); background: var(--line-soft); }
#contabilidadRoot .cont-progress > i { background: var(--ok); border-radius: var(--r-pill); }
/* Ingresos vs Gastos */
#contabilidadRoot .cont-io-row { padding: 7px 0; }
#contabilidadRoot .cont-io-row .lbl { font-size: 12.5px; font-weight: 700; }
#contabilidadRoot .cont-io-row .lbl .dot { width: 8px; height: 8px; border-radius: 50%; }
#contabilidadRoot .cont-io-row .val { font-size: 13.5px; font-weight: 700; }
#contabilidadRoot .cont-io-res { border-top: 1px solid var(--line-soft); font-size: 12.5px; gap: 22px; padding-top: 12px; margin-top: 10px; }
#contabilidadRoot .cont-io-res b { font-size: 14px; }
#contabilidadRoot .cont-io-res b.pos { color: var(--ok); }
#contabilidadRoot .cont-io-res b.neg { color: var(--bad); }
/* Tarjetas / acordeones */
#contabilidadRoot .cont-card {
border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 16px;
border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
#contabilidadRoot .cont-card-h { margin-bottom: 14px; gap: 12px; }
#contabilidadRoot .cont-card-h.plegable { margin: -6px -8px; padding: 6px 8px; border-radius: var(--r-sm); transition: background .12s; }
#contabilidadRoot .cont-card-h.plegable:hover { background: var(--bg-subtle); }
#contabilidadRoot .cont-card-t { font-size: 14.5px; font-weight: 700; gap: 9px; }
#contabilidadRoot .cont-card-st { font-size: 12px; color: var(--text-muted); }
#contabilidadRoot .cont-pleg-chev { width: 20px; height: 20px; border-radius: 5px; color: var(--text-faint); }
#contabilidadRoot .cont-pleg-chev svg { width: 14px; height: 14px; }
#contabilidadRoot .cont-flowicon { width: 26px; height: 26px; border-radius: 5px; }
#contabilidadRoot .cont-flowicon.in { background: var(--ok-soft); color: var(--ok); }
#contabilidadRoot .cont-flowicon.out { background: var(--bad-soft); color: var(--bad); }
#contabilidadRoot .cont-pleg-res .chipres { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); }
#contabilidadRoot .chipres.verde { background: var(--ok-soft); color: var(--ok); }
#contabilidadRoot .chipres.ambar { background: var(--warn-soft); color: var(--warn); }
#contabilidadRoot .chipres.rojo { background: var(--bad-soft); color: var(--bad); }
#contabilidadRoot .cont-sub-card { border-radius: var(--r-md); background: var(--card-soft); border: 1px solid var(--line-soft); padding: 14px; }
#contabilidadRoot .cont-row-kv { font-size: 13px; padding: 4px 0; }
#contabilidadRoot .cont-row-kv .k { color: var(--text-muted); }
#contabilidadRoot .cont-row-kv .v.pos { color: var(--ok); }
#contabilidadRoot .cont-row-kv .v.neg { color: var(--bad); }
#contabilidadRoot .cont-sec-label { font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--text-faint); margin: 6px 0 12px; }
#contabilidadRoot .cont-sec-label::after { background: var(--line-soft); }
#contabilidadRoot .cont-sec-h { margin: 18px 0 10px; }
#contabilidadRoot .cont-sec-t { font-size: 13.5px; font-weight: 700; }
/* Tablas de asientos */
#contabilidadRoot .cont-tbl { font-size: 13px; }
#contabilidadRoot .cont-tbl th {
font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--text-muted);
background: var(--card-soft); border-bottom: 1px solid var(--line); padding: 9px 12px;
}
#contabilidadRoot .cont-tbl th:first-child { border-top-left-radius: var(--r-sm); }
#contabilidadRoot .cont-tbl th:last-child { border-top-right-radius: var(--r-sm); }
#contabilidadRoot .cont-tbl td { padding: 7px 12px; border-bottom: 1px solid var(--line-soft); height: 42px; }
#contabilidadRoot .cont-tbl tr:hover td { background: var(--bg-subtle); }
#contabilidadRoot .cont-tbl tr.total td { background: var(--primary-soft); border-top: 1px solid var(--primary-light); color: var(--primary); }
#contabilidadRoot .cont-tbl tr.deuda td { background: var(--violet-soft); }
#contabilidadRoot .cont-tbl tr.traspasado td { background: rgba(198, 40, 40, .04); }
#contabilidadRoot .cont-inp { border-radius: var(--r-xs); padding: 5px 8px; transition: border-color .12s, box-shadow .12s, background .12s; }
#contabilidadRoot .cont-inp:hover { border-color: var(--line); background: var(--card); }
#contabilidadRoot .cont-inp:focus { border-color: var(--primary); box-shadow: var(--ring); background: var(--card); }
#contabilidadRoot .cont-sel {
border-radius: var(--r-sm); padding: 5px 26px 5px 8px; font-size: 12.5px; height: var(--h-ctl-sm);
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center;
}
#contabilidadRoot .cont-sel:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
#contabilidadRoot .cont-datebtn { border-radius: var(--r-sm); padding: 5px 9px; height: var(--h-ctl-sm); font-size: 12px; transition: border-color .12s, color .12s, background .12s; }
#contabilidadRoot .cont-datebtn:hover { background: var(--bg-subtle); border-color: var(--line-strong); color: var(--text); }
#contabilidadRoot .cont-datebtn.empty { border-color: var(--line-strong); }
#contabilidadRoot .cont-iconbtn { border-radius: var(--r-xs); padding: 5px; }
#contabilidadRoot .cont-iconbtn:hover { background: var(--bad-soft); color: var(--bad); }
/* Píldoras de estado (con punto, como el resto de la app) */
#contabilidadRoot .cont-pill { padding: 2px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; gap: 6px; line-height: 1.6; }
#contabilidadRoot .cont-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
#contabilidadRoot .cont-pill.green { background: var(--ok-soft); color: var(--ok); }
#contabilidadRoot .cont-pill.amber { background: var(--warn-soft); color: var(--warn); }
#contabilidadRoot .cont-pill.red { background: var(--bad-soft); color: var(--bad); }
#contabilidadRoot .cont-pill.blue { background: var(--info-soft); color: var(--info); }
#contabilidadRoot .cont-pill.purple { background: var(--violet-soft); color: var(--violet); }
#contabilidadRoot .cont-pill.gray { background: var(--gray-soft); color: var(--gray); }
/* Avisos */
#contabilidadRoot .cont-banner { border-radius: var(--r-md); padding: 9px 13px; font-size: 12.5px; font-weight: 500; }
#contabilidadRoot .cont-banner.amber { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }
#contabilidadRoot .cont-alert { border-radius: var(--r-md); padding: 12px 14px; border: 1px solid transparent; }
#contabilidadRoot .cont-alert.amber { background: var(--warn-soft); color: #92400e; border-color: var(--warn-line); }
#contabilidadRoot .cont-alert.red { background: var(--bad-soft); color: #991b1b; border-color: var(--bad-line); }
#contabilidadRoot .cont-alert.blue { background: var(--info-soft); color: #1e40af; border-color: var(--info-line); }
#contabilidadRoot .cont-alert.purple { background: var(--violet-soft); color: #5b21b6; }
/* Deudas */
#contabilidadRoot .cont-deuda { border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-card); }
#contabilidadRoot .cont-mini-field label { font-size: 10.5px; letter-spacing: var(--ls-label); font-weight: 700; }
#contabilidadRoot .cont-mini-field input { border-radius: var(--r-sm); height: 34px; padding: 0 10px; transition: border-color .12s, box-shadow .12s; }
#contabilidadRoot .cont-mini-field input:focus { border-color: var(--primary); box-shadow: var(--ring); }
/* Vista anual: filtros de periodo y tabla mensual */
#contabilidadRoot .cont-period-btn { border-radius: var(--r-pill); padding: 5px 13px; font-size: 12px; font-weight: 600; height: 30px; }
#contabilidadRoot .cont-period-btn:hover { background: var(--bg-subtle); border-color: var(--line-strong); color: var(--text); }
#contabilidadRoot .cont-period-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
#contabilidadRoot .cont-period-sep { background: var(--line); }
#contabilidadRoot .cont-hm th { font-size: 10.5px; letter-spacing: var(--ls-label); color: var(--text-muted); border-bottom: 1px solid var(--line); background: var(--card-soft); }
#contabilidadRoot .cont-hm th, #contabilidadRoot .cont-hm td { border-bottom: 1px solid var(--line-soft); padding: 9px 12px; }
#contabilidadRoot .cont-hm .lblcol { background: var(--card); }
#contabilidadRoot .cont-hm th.lblcol { background: var(--card-soft); }
#contabilidadRoot .cont-hm .qcol { background: var(--card-soft); }
#contabilidadRoot .cont-hm .actual { background: rgba(60, 193, 160, .16); }
#contabilidadRoot .cont-hm td.pos { color: var(--ok); }
#contabilidadRoot .cont-hm td.neg { color: var(--bad); }
#contabilidadRoot .cont-hm tr.hm-total td { background: var(--card-soft); }
#contabilidadRoot .cont-hm tr.hm-total td.lblcol { background: var(--card-soft); }
#contabilidadRoot .cont-hm .spacer { background: transparent; }
/* Gráfico de barras mensual */
#contabilidadRoot .cont-bar { width: 10px; border-radius: 4px 4px 0 0; }
#contabilidadRoot .cont-bar.ing { background: var(--ok); }
#contabilidadRoot .cont-bar.gas { background: #f28b82; }
#contabilidadRoot .cont-bar-lbl { font-size: 10.5px; }
/* Botón añadir y pastilla de guardado */
#contabilidadRoot .cont-addbtn { border-radius: var(--r-sm); height: 32px; padding: 0 12px; font-size: 12.5px; }
#contabilidadRoot .cont-addbtn:hover { background: var(--primary-soft); border-color: var(--primary-light); color: var(--primary); }
.cont-savingpill { background: #142b2f; border-radius: var(--r-pill); font-size: 12px; box-shadow: var(--shadow-lg); }
#contabilidadRoot .cont-empty { color: var(--text-muted); font-size: 13px; }
/* ---------- CONTABILIDAD · pasada "simple" (09-09-2026) ----------
Tres cosas: (1) la vista ocupa TODO el ancho de la pantalla, (2) no queda
ningún desplegable (eso se quitó en contabilidad.js) y (3) la paleta se
reduce a tinta + grises con UN solo acento (el lima de marca). El rojo se
reserva para lo que de verdad es un aviso. Los datos y los gráficos son
exactamente los mismos. */
#contabilidadRoot { --ink: var(--primary); }
/* 1 · Ancho completo */
#contabilidadRoot .cont-wrap { max-width: none; padding: 28px 32px 90px; }
/* 3 · Todo plano: manda el borde fino, no la sombra */
#contabilidadRoot .cont-card,
#contabilidadRoot .cont-stat,
#contabilidadRoot .cont-kpi,
#contabilidadRoot .cont-deuda,
#contabilidadRoot .cont-stat:hover { box-shadow: none; }
#contabilidadRoot .cont-stat:hover { border-color: var(--line-strong); }
/* Baldosas de icono: un único gris para todas (adiós al rojo de los gastos) */
#contabilidadRoot .cont-stat-ic,
#contabilidadRoot .cont-stat-ic.red,
#contabilidadRoot .cont-stat-ic.teal {
background: var(--card-soft); color: var(--text-muted); border: 1px solid var(--line-soft);
}
/* Cifras: lo bueno en tinta (no verde); el rojo solo para lo negativo */
#contabilidadRoot .cont-stat-val.pos { color: var(--ink); }
#contabilidadRoot .cont-kpi-val.pos { color: var(--ink); }
#contabilidadRoot .cont-io-res b.pos { color: var(--ink); }
#contabilidadRoot .cont-row-kv .v.pos { color: var(--ink); }
#contabilidadRoot .cont-hm td.pos { color: var(--ink); }
/* La ÚNICA tarjeta destacada: tinta plana, sin degradado ni halo de color */
#contabilidadRoot .cont-stat.dark,
#contabilidadRoot .cont-kpi.dark { background: var(--ink); border-color: var(--ink); box-shadow: none; }
#contabilidadRoot .cont-stat.dark:hover { box-shadow: none; border-color: var(--ink); }
#contabilidadRoot .cont-stat.dark .cont-stat-ic { background: rgba(255, 255, 255, .10); color: var(--accent); border-color: transparent; }
#contabilidadRoot .cont-stat.dark .cont-pcting { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); border-color: transparent; }
#contabilidadRoot .cont-stat.dark .cont-badge.up { background: rgba(60, 193, 160, .16); color: var(--accent); }
#contabilidadRoot .cont-stat.dark .cont-badge.down,
#contabilidadRoot .cont-stat.dark .cont-badge.flat { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); }
/* Píldoras de variación: marcan dirección, no humor */
#contabilidadRoot .cont-badge.up { background: var(--card-soft); color: var(--ink); }
#contabilidadRoot .cont-badge.down { background: var(--card-soft); color: var(--bad); }
#contabilidadRoot .cont-badge.flat { background: var(--card-soft); color: var(--text-muted); }
#contabilidadRoot .cont-pcting { background: var(--card-soft); color: var(--text-muted); border: 1px solid var(--line-soft); }
/* Iconos de flujo y chips de resumen: entra = tinta, sale = gris */
#contabilidadRoot .cont-flowicon.in { background: var(--ink); color: #fff; }
#contabilidadRoot .cont-flowicon.out { background: var(--card-soft); color: var(--text-muted); border: 1px solid var(--line); }
#contabilidadRoot .chipres.verde { background: var(--ink); color: #fff; }
#contabilidadRoot .chipres.rojo { background: var(--gray-soft); color: var(--text); }
#contabilidadRoot .chipres.ambar { background: transparent; color: var(--text-muted); border: 1px solid var(--line-strong); }
/* Píldoras de estado: hecho = tinta · pendiente = contorno · resto = gris */
#contabilidadRoot .cont-pill.green { background: var(--ink); color: #fff; }
#contabilidadRoot .cont-pill.amber { background: transparent; color: var(--text-muted); border: 1px solid var(--line-strong); }
#contabilidadRoot .cont-pill.blue,
#contabilidadRoot .cont-pill.purple,
#contabilidadRoot .cont-pill.gray { background: var(--gray-soft); color: var(--text-secondary); }
#contabilidadRoot .cont-pill.red { background: transparent; color: var(--bad); border: 1px solid var(--bad-line); }
/* Tablas: sin filas teñidas de morado / rojo / teal */
#contabilidadRoot .cont-tbl tr.total td { background: var(--card-soft); color: var(--text); border-top: 1px solid var(--line-strong); }
#contabilidadRoot .cont-tbl tr.deuda td { background: transparent; }
#contabilidadRoot .cont-tbl tr.traspasado td { background: var(--card-soft); }
#contabilidadRoot .cont-tbl tr.traspasado td:first-child { box-shadow: inset 2px 0 0 var(--line-strong); }
/* Avisos: un solo estilo neutro; el rojo solo cuando hay que actuar */
#contabilidadRoot .cont-alert,
#contabilidadRoot .cont-alert.amber,
#contabilidadRoot .cont-alert.purple,
#contabilidadRoot .cont-alert.blue { background: var(--card-soft); color: var(--text); border: 1px solid var(--line); }
#contabilidadRoot .cont-alert .as { color: var(--text-muted); opacity: 1; }
#contabilidadRoot .cont-alert.red { background: transparent; color: var(--bad); border-color: var(--bad-line); }
#contabilidadRoot .cont-banner,
#contabilidadRoot .cont-banner.amber { background: var(--card-soft); color: var(--text-secondary); border: 1px solid var(--line); }
#contabilidadRoot .cont-banner.alerta { background: transparent; color: var(--bad); border-color: var(--bad-line); }
/* Deudas: la barra de progreso también en tinta */
#contabilidadRoot .cont-progress > i { background: var(--ink); }
#contabilidadRoot .cont-mini-field input[disabled] { color: var(--text) !important; }
/* Cabeceras de sección (antes eran botones de plegar) */
#contabilidadRoot .cont-sec-h { margin: 22px 0 10px; align-items: center; }
#contabilidadRoot .cont-pleg-res { gap: 8px; }
/* Gráfico de barras del Anual: mismo criterio tinta / gris */
#contabilidadRoot .cont-bar.ing { background: var(--ink); }
#contabilidadRoot .cont-bar.gas { background: #dfe5e3; }
/* =================== INFORMES =================== */
:is(#informesView, #crmInformesRoot) .informes-wrap { padding: 22px 24px 90px; max-width: 1320px; }
:is(#informesView, #crmInformesRoot) .informes-head { margin-bottom: 20px; align-items: center; }
:is(#informesView, #crmInformesRoot) .informes-title { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
:is(#informesView, #crmInformesRoot) .informes-subtitle { font-size: 13px; margin-top: 3px; }
/* Selector de rango (botón + desplegable) */
:is(#informesView, #crmInformesRoot) .range-selector-btn {
height: var(--h-ctl); padding: 0 12px; border-radius: var(--r-md); font-size: 13px; font-weight: 600;
box-shadow: var(--shadow-xs); transition: border-color .12s, background .12s;
}
:is(#informesView, #crmInformesRoot) .range-selector-btn:hover { border-color: var(--line-strong); background: var(--bg-subtle); }
:is(#informesView, #crmInformesRoot) .range-selector-btn svg { width: 15px; height: 15px; color: var(--text-muted); }
:is(#informesView, #crmInformesRoot) .range-dropdown { border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 12px; }
:is(#informesView, #crmInformesRoot) .range-mode-tabs { background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; }
:is(#informesView, #crmInformesRoot) .range-mode-tab { border-radius: 5px; font-weight: 600; }
:is(#informesView, #crmInformesRoot) .range-mode-tab.active { background: var(--card); color: var(--primary); font-weight: 700; box-shadow: var(--shadow-xs); }
:is(#informesView, #crmInformesRoot) .range-year-btn { border-radius: var(--r-xs); }
:is(#informesView, #crmInformesRoot) .range-year-btn:hover { background: var(--bg-subtle); border-color: var(--line-strong); color: var(--text); }
:is(#informesView, #crmInformesRoot) .range-month-cell, :is(#informesView, #crmInformesRoot) .range-week-cell { border-radius: var(--r-sm); font-weight: 500; }
:is(#informesView, #crmInformesRoot) .range-month-cell:hover, :is(#informesView, #crmInformesRoot) .range-week-cell:hover { border-color: var(--line-strong); background: var(--bg-subtle); }
:is(#informesView, #crmInformesRoot) .range-month-cell.selected, :is(#informesView, #crmInformesRoot) .range-week-cell.selected { background: var(--primary-soft); border-color: var(--primary-light); color: var(--primary); }
:is(#informesView, #crmInformesRoot) .range-month-check, :is(#informesView, #crmInformesRoot) .range-week-check { border-radius: 4px; border-color: var(--line-strong); }
:is(#informesView, #crmInformesRoot) .range-dropdown-actions { border-top: 1px solid var(--line-soft); }
:is(#informesView, #crmInformesRoot) .range-dropdown-btn { height: 32px; padding: 0 12px; border-radius: var(--r-sm); font-weight: 600; }
:is(#informesView, #crmInformesRoot) .range-dropdown-btn:hover:not(:disabled) { opacity: 1; background: var(--bg-subtle); border-color: var(--line-strong); }
:is(#informesView, #crmInformesRoot) .range-dropdown-btn.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
/* Pestañas Captación / Ventas / Clientes y Proyectos */
:is(#informesView, #crmInformesRoot) .inf-tabs { gap: 2px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
:is(#informesView, #crmInformesRoot) .inf-tab { padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; transition: color .12s, border-color .15s; }
:is(#informesView, #crmInformesRoot) .inf-tab:hover { color: var(--text); border-bottom-color: var(--line-strong); }
:is(#informesView, #crmInformesRoot) .inf-tab.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
/* Bloques por fuente */
:is(#informesView, #crmInformesRoot) .inf-block {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-card);
}
:is(#informesView, #crmInformesRoot) .inf-block-head { margin-bottom: 14px; }
:is(#informesView, #crmInformesRoot) .inf-block-t { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
:is(#informesView, #crmInformesRoot) .inf-block-sub { font-size: 12px; color: var(--text-muted); }
:is(#informesView, #crmInformesRoot) .inf-av { width: 28px; height: 28px; font-size: 11px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); }
/* Mini KPIs dentro del bloque */
:is(#informesView, #crmInformesRoot) .inf-mini { gap: 12px; }
:is(#informesView, #crmInformesRoot) .inf-mc { background: var(--card-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 13px 14px; }
:is(#informesView, #crmInformesRoot) .inf-mc-l { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); margin-bottom: 8px; }
:is(#informesView, #crmInformesRoot) .inf-mc-v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:is(#informesView, #crmInformesRoot) .inf-mc-s { font-size: 11.5px; margin-top: 4px; }
:is(#informesView, #crmInformesRoot) .inf-mc.acc .inf-mc-v { color: var(--primary); }
:is(#informesView, #crmInformesRoot) .inf-mc.win { background: var(--ok-soft); border-color: var(--ok-line); }
:is(#informesView, #crmInformesRoot) .inf-mc.win .inf-mc-v { color: var(--ok); }
:is(#informesView, #crmInformesRoot) .inf-mc.warn { background: var(--warn-soft); border-color: var(--warn-line); }
:is(#informesView, #crmInformesRoot) .inf-mc.warn .inf-mc-v { color: var(--warn); }
:is(#informesView, #crmInformesRoot) .inf-empty { font-size: 13px; }
/* Bloque total: la única tarjeta destacada en teal (sin negro) */
:is(#informesView, #crmInformesRoot) .inf-total { background: #0a141c; border: 1px solid #0a141c; box-shadow: 0 6px 18px rgba(10, 20, 28, .22); }
:is(#informesView, #crmInformesRoot) .inf-total .inf-block-sub { color: rgba(255, 255, 255, .72); }
:is(#informesView, #crmInformesRoot) .inf-total .inf-mc { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .12); }
:is(#informesView, #crmInformesRoot) .inf-total .inf-mc-l { color: rgba(255, 255, 255, .72); }
:is(#informesView, #crmInformesRoot) .inf-total .inf-mc-s { color: rgba(255, 255, 255, .62); }
:is(#informesView, #crmInformesRoot) .inf-total .inf-mc.win, :is(#informesView, #crmInformesRoot) .inf-total .inf-mc.warn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .12); }
/* KPI cards (fila clara): baldosa 36px + etiqueta mayúscula + cifra grande */
:is(#informesView, #crmInformesRoot) .kpi-row { gap: 16px; margin-bottom: 16px; }
:is(#informesView, #crmInformesRoot) .kpi-card {
border-radius: var(--r-lg); padding: 18px 20px 16px; border: 1px solid var(--line);
box-shadow: var(--shadow-card); transition: box-shadow .15s, border-color .15s;
}
:is(#informesView, #crmInformesRoot) .kpi-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
:is(#informesView, #crmInformesRoot) .kpi-card-head { gap: 10px; margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; }
:is(#informesView, #crmInformesRoot) .kpi-card-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary); }
:is(#informesView, #crmInformesRoot) .kpi-card-icon svg { width: 17px; height: 17px; }
:is(#informesView, #crmInformesRoot) .kpi-card-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
:is(#informesView, #crmInformesRoot) .kpi-card-value { font-size: var(--fs-big); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
:is(#informesView, #crmInformesRoot) .kpi-delta { font-size: 12px; }
:is(#informesView, #crmInformesRoot) .kpi-delta-pct { padding: 1px 7px; border-radius: var(--r-pill); font-weight: 700; }
:is(#informesView, #crmInformesRoot) .kpi-delta-pct.up { color: var(--ok); background: var(--ok-soft); }
:is(#informesView, #crmInformesRoot) .kpi-delta-pct.down { color: var(--bad); background: var(--bad-soft); }
:is(#informesView, #crmInformesRoot) .kpi-delta-pct.flat { color: var(--gray); background: var(--gray-soft); }
:is(#informesView, #crmInformesRoot) .kpi-delta-cmp { color: var(--text-muted); }
/* Embudo de Meta: de 4 tarjetas grises/negras a tarjetas blancas; solo la
última (Contactos captados, el resultado) va destacada en teal */
:is(#informesView, #crmInformesRoot) .kpi-funnel { gap: 16px; margin-bottom: 16px; }
:is(#informesView, #crmInformesRoot) .kpi-fcard {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 18px 20px 16px; box-shadow: var(--shadow-card); transition: box-shadow .15s, border-color .15s;
}
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(1),
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(2),
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(3) { background: var(--card); }
:is(#informesView, #crmInformesRoot) .kpi-fcard:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
:is(#informesView, #crmInformesRoot) .kpi-fcard-head { gap: 10px; margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; }
:is(#informesView, #crmInformesRoot) .kpi-fcard-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary); }
:is(#informesView, #crmInformesRoot) .kpi-fcard-icon svg { width: 17px; height: 17px; }
:is(#informesView, #crmInformesRoot) .kpi-fcard-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
:is(#informesView, #crmInformesRoot) .kpi-fcard-value { font-size: var(--fs-big); font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
:is(#informesView, #crmInformesRoot) .kpi-fcard .kpi-delta-pct.up { color: var(--ok); background: var(--ok-soft); }
:is(#informesView, #crmInformesRoot) .kpi-fcard .kpi-delta-pct.down { color: var(--bad); background: var(--bad-soft); }
:is(#informesView, #crmInformesRoot) .kpi-fcard .kpi-delta-pct.flat { color: var(--gray); background: var(--gray-soft); }
:is(#informesView, #crmInformesRoot) .kpi-fcard .kpi-delta-cmp { color: var(--text-muted); }
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(4) {
background: #0a141c; border-color: #0a141c;
box-shadow: 0 6px 18px rgba(10, 20, 28, .22);
}
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(4):hover { box-shadow: 0 8px 22px rgba(10, 20, 28, .28); }
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(4) .kpi-fcard-icon { background: rgba(255, 255, 255, .14); color: var(--accent); }
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(4) .kpi-fcard-label { color: rgba(255, 255, 255, .78); }
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(4) .kpi-fcard-value { color: #fff; }
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(4) .kpi-delta-pct.up { color: var(--accent); background: rgba(60, 193, 160, .18); }
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(4) .kpi-delta-pct.down { color: #fecaca; background: rgba(255, 255, 255, .14); }
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(4) .kpi-delta-pct.flat { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .14); }
:is(#informesView, #crmInformesRoot) .kpi-fcard:nth-child(4) .kpi-delta-cmp { color: rgba(255, 255, 255, .62); }
/* Tarjetas resumen y gráfico */
:is(#informesView, #crmInformesRoot) .summary-row, :is(#informesView, #crmInformesRoot) .bottom-row { gap: 16px; margin-bottom: 16px; }
:is(#informesView, #crmInformesRoot) .summary-card { border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-card); }
:is(#informesView, #crmInformesRoot) .summary-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); color: var(--text-muted); margin-bottom: 14px; }
:is(#informesView, #crmInformesRoot) .summary-stat-num { font-size: var(--fs-big); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:is(#informesView, #crmInformesRoot) .summary-stat-lbl { font-size: 12px; }
:is(#informesView, #crmInformesRoot) .chart-card { border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-card); }
:is(#informesView, #crmInformesRoot) .chart-title { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); }
:is(#informesView, #crmInformesRoot) .chart-nav-btn { border-radius: var(--r-xs); }
:is(#informesView, #crmInformesRoot) .chart-nav-btn:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--line-strong); color: var(--text); }
:is(#informesView, #crmInformesRoot) .chart-nav-label { font-size: 12.5px; font-weight: 600; }
:is(#informesView, #crmInformesRoot) .chart-tooltip { background: #142b2f; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
:is(#informesView, #crmInformesRoot) .chart-empty { font-size: 13px; }
/* Pipeline del CRM dentro de Informes (clases .crm-* propias del módulo) */
:is(#informesView, #crmInformesRoot) .informes-wrap .crm-card { border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-card); }
:is(#informesView, #crmInformesRoot) .informes-wrap .crm-stage { border-radius: var(--r-md); background: var(--card-soft); border-color: var(--line-soft); padding: 12px 14px; }
:is(#informesView, #crmInformesRoot) .informes-wrap .crm-stage-name { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
:is(#informesView, #crmInformesRoot) .informes-wrap .crm-stage-count { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:is(#informesView, #crmInformesRoot) .informes-wrap .crm-stage-sub { font-size: 11.5px; }
/* Cadena de conversión y embudo del kanban */
:is(#informesView, #crmInformesRoot) .inf-chain-step { background: var(--card-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 13px 14px; }
:is(#informesView, #crmInformesRoot) .inf-chain-l { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); margin-bottom: 8px; }
:is(#informesView, #crmInformesRoot) .inf-chain-v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:is(#informesView, #crmInformesRoot) .inf-chain-s { font-size: 11.5px; }
:is(#informesView, #crmInformesRoot) .inf-chain-pct { font-size: 12px; }
:is(#informesView, #crmInformesRoot) .inf-chain-arrow.win .inf-chain-pct { color: var(--ok); }
:is(#informesView, #crmInformesRoot) .inf-chain-arrow.bad .inf-chain-pct { color: var(--warn); }
:is(#informesView, #crmInformesRoot) .inf-chain-line { border-top: 2px dashed var(--line-strong); }
:is(#informesView, #crmInformesRoot) .inf-chain-line:after { border-left-color: var(--line-strong); }
:is(#informesView, #crmInformesRoot) .inf-kb-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow-xs); }
:is(#informesView, #crmInformesRoot) .inf-kb-card.salida { background: var(--warn-soft); border-color: var(--warn-line); }
:is(#informesView, #crmInformesRoot) .inf-kb-t { font-size: var(--fs-label); letter-spacing: var(--ls-label); }
:is(#informesView, #crmInformesRoot) .inf-kb-n { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:is(#informesView, #crmInformesRoot) .inf-kb-money { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
:is(#informesView, #crmInformesRoot) .inf-kb-money span { font-size: 10px; letter-spacing: var(--ls-label); }
:is(#informesView, #crmInformesRoot) .inf-kb-serv-d i { color: var(--primary); }
/* Retribución / comisiones (com-*) y editor de métricas */
:is(#informesView, #crmInformesRoot) .com-grid { border-bottom: 1px solid var(--line-soft); padding: 12px 0; }
:is(#informesView, #crmInformesRoot) .com-l { font-size: 10.5px; font-weight: 700; letter-spacing: var(--ls-label); }
:is(#informesView, #crmInformesRoot) .com-in { height: 34px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line); transition: border-color .12s, box-shadow .12s; }
:is(#informesView, #crmInformesRoot) .com-in:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
:is(#informesView, #crmInformesRoot) .com-prod { border-left: 2px solid var(--line); }
:is(#informesView, #crmInformesRoot) .edit-metrics-btn { height: var(--h-ctl); padding: 0 12px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-xs); }
:is(#informesView, #crmInformesRoot) .edit-metrics-btn:hover { background: var(--bg-subtle); border-color: var(--line-strong); color: var(--text); }
:is(#informesView, #crmInformesRoot) .metrics-editor { border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-card); }
:is(#informesView, #crmInformesRoot) .metrics-editor-header { border-bottom: 1px solid var(--line-soft); }
:is(#informesView, #crmInformesRoot) .metrics-editor-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
:is(#informesView, #crmInformesRoot) .metrics-editor-close { border-radius: var(--r-xs); }
:is(#informesView, #crmInformesRoot) .metrics-week-block { border-radius: var(--r-md); background: var(--card-soft); border-color: var(--line-soft); padding: 14px; }
:is(#informesView, #crmInformesRoot) .metrics-week-label { font-size: 12.5px; font-weight: 700; }
:is(#informesView, #crmInformesRoot) .metrics-field-label { font-size: 10.5px; font-weight: 700; letter-spacing: var(--ls-label); }
:is(#informesView, #crmInformesRoot) .metrics-field-input { height: 34px; padding: 0 10px; border-radius: var(--r-sm); transition: border-color .12s, box-shadow .12s; }
:is(#informesView, #crmInformesRoot) .metrics-field-input:focus { border-color: var(--primary); box-shadow: var(--ring); }
:is(#informesView, #crmInformesRoot) .metrics-save-btn { height: 32px; padding: 0 14px; border-radius: var(--r-sm); font-weight: 600; }
:is(#informesView, #crmInformesRoot) .metrics-save-btn:hover { opacity: 1; background: var(--primary-hover); border-color: var(--primary-hover); }
:is(#informesView, #crmInformesRoot) .metrics-save-status.saved { color: var(--ok); }
:is(#informesView, #crmInformesRoot) .metrics-save-status.error { color: var(--bad); }
/* Tablas de ventas por vendedor (pintadas con estilos inline en las celdas:
aquí solo se afina lo que las clases permiten; ver bloqueos en el informe) */
:is(#informesView, #crmInformesRoot) .informes-wrap table th { background: var(--card-soft); }
:is(#informesView, #crmInformesRoot) .informes-wrap table tbody tr:hover td { background: var(--bg-subtle); }