justo bajo el h2,
lo ocultamos también de forma bastante robusta */
#forecastCard h2 + p,
#forecastCard h2 + .muted,
#forecastCard h2 + .subtitle,
#forecastCard h2 + .sub,
#forecastCard h2 + .desc,
#forecastCard h2 + .description{
display: none !important;
}
/* 4) PREVISIÓN: ocultar el texto largo del pie (YTD… ) */
#forecastFoot,
#forecastCard #forecastFoot{
display: none !important;
}
/* === Ajuste Previsión: mover Pagas extra bajo el título + ocultar Extrapolación/Base/YTD === */
/* Título de Previsión igual que un h2 de card */
.forecast-title{
font-size: 16px;
font-weight: 800;
margin: 0;
}
/* Oculta la línea “Extrapolación…” */
.forecast-sub{
display: none !important;
}
/* Oculta la línea de Base/Meses/Factor/Pagas */
.forecast-meta{
display: none !important;
}
/* Oculta el pie largo YTD… */
.forecast-foot{
display: none !important;
}
/* Recoloca el selector de Pagas extra debajo del título */
.forecast-head{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.forecast-controls{
width: 100%;
justify-content: flex-start;
}
/* Asegura que el “pill” no se quede pegado a la derecha */
.forecast-controls .filter{
margin-left: 0;
}
/* Evita cualquier solape: el Resumen visual siempre arranca debajo del grid de KPIs */
:root{ --kpi-viz-gap: 34px; }
.kpi-grid + .viz{
margin-top: var(--kpi-viz-gap) !important;
clear: both;
}
/* Si en algún panel hay elementos intermedios, aun así mantenemos separación */
.kpi-grid ~ .viz{
margin-top: var(--kpi-viz-gap) !important;
clear: both;
}
@media (min-width: 1200px){
.two-col .kpi-grid + .viz,
.two-col .kpi-grid ~ .viz{
margin-top: 44px !important;
}
}
/* =========================================================
Previsión: eliminar "caja interna" (título + KPIs)
========================================================= */
/* Caso típico: existe un contenedor interno tipo .forecast dentro de la card de la columna derecha.
Lo neutralizamos para que no parezca una card dentro de otra. */
.two-col .col #forecastCard .forecast,
.two-col .col #forecastCard .forecast.card,
.two-col .col #forecastCard .forecast-panel,
.two-col .col #forecastCard .forecast-inner{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* Por si el contenedor interno es un .card dentro de #forecastCard (patrón frecuente) */
.two-col .col #forecastCard .card{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* Mantén un poco de aire entre el head (título + selector) y la rejilla de KPIs */
.two-col .col #forecastCard .forecast-head,
.two-col .col #forecastCard .head-row{
margin-bottom: 12px !important;
}
/* Asegura que los KPIs no se queden pegados al borde superior tras quitar padding */
.two-col .col #forecastCard .forecast-grid,
.two-col .col #forecastCard .kpi-grid{
margin-top: 10px !important;
}
/* =========================================================
Previsión: quitar "caja interna" (.forecast) y alinear header
========================================================= */
/* 1) Quitar visualmente la caja interna: sin fondo/borde/sombra/padding */
.forecast{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 0 16px 0 !important; /* deja aire antes del Resumen visual */
}
/* Si tu CSS anterior ponía borde/fondo a TODOS los hijos, esto lo neutraliza */
.forecast *{
box-shadow: none;
}
/* 2) Header: que quede como PE (título + debajo el selector) */
.forecast-head{
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 10px !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
}
/* Título igual de “serio” que el de PE */
.forecast-title{
font-weight: 800;
font-size: 16px;
margin: 0;
}
/* Control “Pagas extra” debajo del título (alineación tipo PE) */
.forecast-controls{
order: 3;
width: 100%;
display: flex;
justify-content: flex-start;
}
/* 3) Ocultar textos que NO quieres ver (por si siguen en el HTML) */
.forecast-sub,
.forecast-meta,
.forecast-foot{
display: none !important;
}
/* 4) Evitar que se pisen KPIs y Resumen visual en ambas columnas */
.two-col .viz{
margin-top: 18px;
}
/* =========================================================
Panel toggles (flecha roja) — Carga CSV / Diagnóstico / Tabla comprobación
========================================================= */
.panel-toggle{
margin-left: auto;
display:inline-flex;
align-items:center;
justify-content:center;
width: 30px;
height: 30px;
border-radius: 10px;
border: 1px solid rgba(239,68,68,.25);
background: rgba(239,68,68,.08);
color: #ef4444;
cursor: pointer;
user-select: none;
line-height: 1;
font-weight: 900;
transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.panel-toggle:hover{
filter: brightness(1.05);
background: rgba(239,68,68,.12);
}
.panel-toggle .chev{
display:inline-block;
transform: rotate(90deg); /* abierto por defecto */
transition: transform .16s ease;
font-size: 16px;
}
/* cuando está cerrado, giramos la flecha */
.is-collapsed .panel-toggle .chev{
transform: rotate(0deg);
}
/* --- Colapsado: Carga CSV (card completa con body envuelto por JS) --- */
.collapsible-card.is-collapsed .panel-body{
display:none !important;
}
/* --- Colapsado: Diagnóstico --- */
.diag.is-collapsed .diag-grid{
display:none !important;
}
/* --- Colapsado: Tabla comprobación --- */
.check.is-collapsed .table-wrap,
.check.is-collapsed .check-foot{
display:none !important;
}
/* Si el toggle va dentro de un h2, que h2 se comporte bien */
.card h2.has-toggle{
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
}
/* Diagnóstico: si está colapsado, ocultar también la caja Ratio MC */
.diag.is-collapsed .diag-ratio{
display: none !important;
}
/* (Opcional) cuando esté colapsado, compactar un poco el header */
.diag.is-collapsed .diag-head{
margin-bottom: 0 !important;
}
/* ================================
Collapsed panels: look compact
(Diagnóstico + Comprobación)
================================ */
/* 1) Si Diagnóstico está colapsado: ocultar TODO lo extra */
.diag.is-collapsed .diag-sub,
.diag.is-collapsed .diag-ratio,
.diag.is-collapsed .diag-grid{
display: none !important;
}
/* 2) Si Tabla de comprobación está colapsada: ocultar TODO lo extra */
.check.is-collapsed .check-sub,
.check.is-collapsed .table-wrap,
.check.is-collapsed .check-foot{
display: none !important;
}
/* 3) Que el header colapsado quede finito y alineado */
.diag.is-collapsed,
.check.is-collapsed{
padding: 12px 14px !important;
}
.diag.is-collapsed .diag-head,
.check.is-collapsed .check-head{
margin-bottom: 0 !important;
}
/* 4) Por si te queda algún texto suelto dentro al colapsar (robusto) */
.diag.is-collapsed > :not(.diag-head),
.check.is-collapsed > :not(.check-head){
display: none !important;
}
/* ================================
Limpieza: textos sueltos al final
================================ */
/* Oculta la línea "Fórmulas PE: ..." */
.footnote{
display: none !important;
}
/* Oculta la línea "v7 · Feature 7..." (si está en un
/
suelto con clase muted/small) */
.footer .muted,
.footer .small{
display: none !important;
}
/* =========================
HERO (titulo principal)
========================= */
/* Altura reservada del banner fijo */
:root{ --hero-h: 86px; }
/* Solo deja UN padding-top global (ya existe arriba en tu body).
Si en tu archivo aparece otro body{padding-top:...} al final, NO lo añadas aquí. */
.hero{
position: fixed;
top: calc(var(--hero-top) + env(safe-area-inset-top, 0px));
z-index: 60;
/* EXACTAMENTE igual que .wrap */
left: 50%;
transform: translateX(-50%);
width: calc(min(100vw, var(--wrap-max)) - (var(--wrap-pad) * 2));
max-width: calc(var(--wrap-max) - (var(--wrap-pad) * 2));
display: flex;
align-items: center;
justify-content: center;
height: var(--hero-h);
padding: 14px 18px;
border-radius: 18px;
background: linear-gradient(90deg, #3949ab, #303f9f);
overflow: hidden;
box-shadow: 0 10px 24px rgba(15,23,42,.18);
border: 1px solid rgba(255,255,255,.18);
}
.hero-center{
text-align: center;
line-height: 1.15;
}
.hero-title{
color: #fff;
font-weight: 900;
letter-spacing: .6px;
font-size: clamp(18px, 2.1vw, 28px);
text-transform: uppercase;
}
.hero-sub{
margin-top: 4px;
color: rgba(255,255,255,.92);
font-size: clamp(12px, 1.1vw, 14px);
font-weight: 600;
}
@media (max-width: 520px){
:root{ --hero-h: 78px; }
.hero{ top: calc(var(--hero-top) + env(safe-area-inset-top, 0px)); }
}
/* ==========================================================
Selects: fondo rojo claro cuando están activos (no disabled)
========================================================== */
/* Activo: select habilitado */
select:not(:disabled){
background-color: #fde7e7; /* rojo claro */
}
/* Disabled: aspecto apagado (sin rojo) */
select:disabled{
background-color: #f2f4f7;
color: #8a94a6;
opacity: 1; /* Safari: evita que lo “apague” de más */
}
/* Por si alguna regla previa pisa el background */
.filter select:not(:disabled),
.forecast-controls select:not(:disabled),
.report-meta select:not(:disabled){
background-color: #fde7e7;
}
/* ===== Fix anti-bleed (zoom/scrollbar): el hero tapa todo lo de detrás ===== */
.hero{
background-clip: padding-box;
isolation: isolate;
}
/* En algunos navegadores, el 100vw incluye scrollbar. Esto ayuda a mantener el ancho estable. */
@supports (width: 100dvw){
.hero{
width: calc(min(100dvw, var(--wrap-max)) - (var(--wrap-pad) * 2));
}
}
/* =========================================================
Tablas: encabezado rojo (th) con texto blanco (sticky)
========================================================= */
/* Tablas genéricas */
.table th{
background: #3949ab !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(255,255,255,.28) !important;
}
/* Mantener sticky header en rojo (por si alguna regla lo pisa) */
.table th{
position: sticky;
top: 0;
}
/* Informe */
.report-table th{
background: #3949ab !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(255,255,255,.28) !important;
}
/* CF por Categoría (por si usa otra tabla sin clase) */
.cfcat th,
.cfcat .table th{
background: #3949ab !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(255,255,255,.28) !important;
}
/* Ajuste visual del “sticky” (sombra inferior suave sobre rojo) */
.table thead th,
.report-table thead th,
.cfcat thead th{
box-shadow: inset 0 -1px 0 rgba(255,255,255,.28) !important;
}
/* ================================
Resumen Informe (Ventas / CV / CF / Saldo)
- visual tipo "KPIs" en pills
================================ */
.report-summary{
display: grid;
grid-template-columns: repeat(4, minmax(180px, 1fr));
gap: 12px;
margin-top: 12px;
align-items: stretch;
}
@media (max-width: 1100px){
.report-summary{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 700px){
.report-summary{ grid-template-columns: 1fr; }
}
.sum-pill{
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-height: 66px;
border: 1px solid var(--border);
border-radius: 14px;
padding: 10px 12px;
background: rgba(255,255,255,.92);
box-shadow: var(--shadow-soft);
}
.sum-label{
font-size: 12px;
color: var(--muted);
font-weight: 800;
letter-spacing: .1px;
}
.sum-value{
font-variant-numeric: tabular-nums;
margin-top: 2px;
font-size: 18px;
font-weight: 950;
line-height: 1.1;
}
/* Colores por tipo */
.sum-sales{ border-left: 6px solid rgba(37,99,235,.55); background: rgba(37,99,235,.06); }
.sum-sales .sum-value{ color:#1d4ed8; }
.sum-cv{ border-left: 6px solid rgba(249,115,22,.55); background: rgba(249,115,22,.08); }
.sum-cv .sum-value{ color:#9a3412; }
.sum-cf{ border-left: 6px solid rgba(251,113,133,.55); background: rgba(251,113,133,.08); }
.sum-cf .sum-value{ color:#9f1239; }
/* SALDO FINAL: más protagonista */
.sum-balance{
border-left: 6px solid rgba(57,73,171,.55);
background: rgba(57,73,171,.08);
}
.sum-balance .sum-value{ color: #3949ab; }
/* Si el saldo final puede ser negativo y JS le pone .neg, lo enfatizamos */
.sum-balance.neg{ border-left-color: rgba(239,68,68,.55); background: rgba(239,68,68,.08); }
.sum-balance.neg .sum-value{ color:#b91c1c; }
/* En caso de que el resumen se haya renderizado dentro de una tabla por error
(p.ej. en una fila "TOTAL"), evitamos que herede estilos de celdas */
.report-summary *{
text-align: left !important;
}
/* =========================================================
Informe: Resumen final (SALDO + Ventas/CV/CF)
Objetivo: que cada importe quede pegado a su etiqueta
(sin tocar HTML/JS)
========================================================= */
/* 1) Fila SALDO FINAL: etiqueta a la izquierda + importe a la derecha (sin tocar) */
.report-table tfoot tr:first-child{
display: table-row;
}
.report-table tfoot tr:first-child td{
padding-top: 10px;
padding-bottom: 10px;
}
.report-table tfoot tr:first-child td:last-child{
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 950;
}
/* 2) Fila Totales (Ventas / CV / CF): convertir SOLO esa fila en una línea compacta */
/* Asumimos que la fila de totales es la ÚLTIMA del tfoot (después del SALDO FINAL). */
.report-table tfoot tr:last-child{
/* En vez de “tabla por columnas”, lo hacemos una tira compacta */
display: flex !important;
flex-wrap: wrap;
align-items: baseline;
gap: 10px 18px;
width: 100%;
box-sizing: border-box;
/* Mantener el look del pie */
border-top: 1px solid rgba(15,23,42,.08);
padding: 10px 10px;
}
.report-table tfoot tr:last-child td{
/* Cada celda se comporta como “chip” de texto */
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 0 !important;
border-bottom: 0 !important;
background: transparent !important;
text-align: left !important;
white-space: nowrap;
font-weight: 900;
}
/* Evita que los importes se vayan “a la derecha del todo” por clases previas */
.report-table tfoot tr:last-child td.right,
.report-table tfoot tr:last-child td .right{
text-align: left !important;
}
/* Etiquetas (impares): un poco más suaves */
.report-table tfoot tr:last-child td:nth-child(odd){
color: #0f172a;
}
/* Importes (pares): tabulares + un pelín más énfasis */
.report-table tfoot tr:last-child td:nth-child(even){
color: #0f172a;
font-variant-numeric: tabular-nums;
}
/* Si en móvil se aprieta, que haga wrap sin romper */
@media (max-width: 520px){
.report-table tfoot tr:last-child{
gap: 8px 14px;
}
}
/* ======================================
Botón Volver (hero-left) — ajuste final
====================================== */
.hero-left{
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
}
.hero-left a{
color: #ffffff !important;
text-decoration: none !important;
font-weight: 700;
font-size: 14px;
background: transparent;
border: 0;
}
.hero-left a:hover{
opacity: .85;
}
/* --- Ajuste layout título + filtros PE --- */
.head-row{
display:block;
margin-bottom:8px;
}
.filters-below{
display:flex;
gap:16px;
flex-wrap:wrap;
margin-bottom:20px;
}
.filters-below .filter{
min-width:180px;
}
/* --- Alinear altura columnas PE --- */
.two-col{
display:flex;
gap:24px;
align-items:stretch;
}
.two-col .col{
flex:1;
display:flex;
}
.two-col .col > .card{
flex:1;
display:flex;
flex-direction:column;
}