/* ===========================================================================
dashboard-fix.css — alinea las tarjetas de gráficos con las tarjetas KPI
===========================================================================
OJO AL ORDEN: en el layout, `@stack('styles')` (y con él panel.css) se
carga DESPUÉS de panel-shell.css, así que panel.css gana. Por eso estos
ajustes viven en un archivo aparte que la vista empuja DESPUÉS de panel.css;
si se pusieran en panel-shell.css no tendrían efecto.
Qué desalineaba a las tarjetas de gráficos respecto de los KPI:
radio 8px vs 16px · tenían sombra vs solo borde · el número en 32px/800
vs 30px/600 · el icono 42px con FontAwesome vs 40px con SVG outline ·
el subtítulo en peso 600 vs normal.
=========================================================================== */
/* --- la tarjeta: mismo lenguaje que los KPI (borde, sin sombra) --- */
.jc-panel-card {
border-radius: 16px;
border: 1px solid var(--border-color);
box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.jc-panel-card:hover {
border-color: var(--accent-1);
box-shadow: var(--shadow-sm);
}
.jc-panel-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border-color);
}
.jc-panel-body { padding: 1.25rem; }
/* --- el icono del encabezado: 40x40 y tinte igual que los KPI --- */
.jc-title-icon {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 12px;
}
.jc-title-icon svg { width: 20px; height: 20px; }
.jc-title-icon.jc-blue { background-color: rgba(79, 70, 229, .10); color: #4f46e5; }
.jc-title-icon.jc-green { background-color: rgba(22, 163, 74, .10); color: #15803d; }
/* --- títulos: misma jerarquía que las tarjetas KPI --- */
.jc-panel-header .card-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -.2px;
}
.jc-card-subtitle {
font-size: 11.5px;
font-weight: 500; /* venía en 600, competía con el título */
letter-spacing: .3px;
color: var(--text-tertiary);
}
/* --- el número grande: igual que .pj-kpi-value --- */
.jc-metric-value {
font-size: 30px;
font-weight: 600; /* venía en 800 */
letter-spacing: -.5px;
color: var(--text-primary);
}
.jc-metric-label {
font-size: 12.5px;
color: var(--text-secondary);
}
/* --- controles del encabezado (mes / año / recargar) --- */
.jc-select,
.jc-btn-reload {
height: 32px;
border: 1px solid var(--border-color-strong);
border-radius: 10px;
background-color: var(--bg-surface);
color: var(--text-primary);
font-size: 12.5px;
font-weight: 500;
transition: border-color .15s, background-color .15s, color .15s;
}
.jc-select:hover,
.jc-btn-reload:hover {
border-color: var(--accent-1);
background-color: var(--bg-surface-hover);
color: var(--text-primary);
}
.jc-select:focus,
.jc-btn-reload:focus-visible {
outline: 2px solid var(--accent-soft);
outline-offset: 1px;
border-color: var(--accent-1);
}
.jc-btn-reload { width: 32px; color: var(--text-secondary); }
.jc-btn-reload svg { width: 15px; height: 15px; }
/* --- leyenda de servicios --- */
.jc-legend-item {
font-size: 12px;
color: var(--text-secondary);
}
.jc-legend-dot {
width: 8px;
height: 8px;
border-radius: 999px;
}
.jc-legend-nav {
border: 1px solid var(--border-color-strong);
border-radius: 8px;
background-color: var(--bg-surface);
color: var(--text-secondary);
}
.jc-legend-nav:hover {
border-color: var(--accent-1);
color: var(--text-primary);
}
.jc-legend-nav svg { width: 12px; height: 12px; }
/* --- estados del gráfico --- */
.jc-chart-empty,
.jc-chart-loading {
font-size: 12.5px;
color: var(--text-tertiary);
}
/* --- el / N offline va en rojo: es una alerta, no un dato neutro --- */
.pj-kpi-extra.pj-e-rojo { color: #dc2626; font-weight: 600; }
[data-bs-theme="dark"] .pj-kpi-extra.pj-e-rojo { color: #fca5a5; }
/* --- los SVG de los encabezados y controles heredan el tamano del contenedor --- */
.jc-title-icon svg { width: 20px; height: 20px; }
.jc-select svg, .jc-btn-reload svg { width: 15px; height: 15px; }
.jc-legend-nav svg { width: 12px; height: 12px; }
/* lupa y avion dentro de botones/inputs del inicio */
.jc-panel-body button svg, .jc-panel-body .btn svg { width: 15px; height: 15px; }
/* ---------------------------------------------------------------------------
12. Densidad de las tablas
---------------------------------------------------------------------------
Las filas quedaban altas: la mayoría lleva dos líneas (nombre + plan
debajo), y con padding 12px arriba/abajo más el interlineado por defecto
(~1.5) cada fila pasaba de 60px.
Se baja el padding a 8px y el interlineado a 1.35: la fila cae a ~50px sin
que el texto se toque.
--------------------------------------------------------------------------- */
.table-modern tbody td {
padding: 5px 14px;
line-height: 1.25;
}
.table-modern thead th {
padding: 7px 14px;
}
/* la segunda línea de la celda (tipo de servicio, periodicidad) */
.table-modern tbody td small {
display: block;
line-height: 1.2;
}
/* el entre las dos líneas sumaba un salto completo: con el small en
block ya no hace falta y se gana otro par de píxeles */
.table-modern tbody td strong + br { display: none; }
/* que el botón de acciones no imponga alto propio */
.table-modern tbody td .btnx-actions {
line-height: 1;
padding: 4px 8px;
}
/* ---------------------------------------------------------------------------
13. Estado con punto de color (el estilo de Servicios, ahora compartido)
---------------------------------------------------------------------------
Estas clases vivían en servicios.css, que solo carga esa vista. Recibos
usaba en cambio píldoras rellenas (badge-success / badge-danger), y por eso
las dos pantallas no se veían igual. Al mudarlas acá quedan disponibles para
las 4 vistas del panel.
--------------------------------------------------------------------------- */
.jc-status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
}
.jc-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.jc-status-dot.is-green { background: #10b981; }
.jc-status-dot.is-gray { background: #94a3b8; }
.jc-status-dot.is-red { background: #ef4444; }
.jc-status-dot.is-amber { background: #f59e0b; }
/* ---------------------------------------------------------------------------
14. Los dos reportes del inicio (Últimas Consultas / Últimos Envíos)
---------------------------------------------------------------------------
Son tablas densas de 5 y 7 columnas metidas en media pantalla cada una, y
eso las descuadraba:
· Plan Básico partía en dos líneas
· la columna Descripción del de WhatsApp traía textos largos que se
apilaban en 4-5 líneas, y la fila quedaba altísima
Solución: nada de envolver texto (la tabla ya scrollea en horizontal dentro
de .jc-table-body) y la Descripción se recorta con puntos suspensivos. Es lo
normal en una tabla de datos: mejor scroll que filas de cinco renglones.
--------------------------------------------------------------------------- */
#tablaMovimientos thead th,
#tablaMovimientos tbody td,
#tablaMovimientosWhatsApp thead th,
#tablaMovimientosWhatsApp tbody td {
white-space: nowrap;
}
/* Descripción (5a columna del reporte de WhatsApp): se recorta.
El texto completo queda en el title, para verlo al pasar el mouse. */
#tablaMovimientosWhatsApp tbody td:nth-child(5) {
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
}
/* los badges de tipo, un punto más compactos para acompañar la densidad */
#tablaMovimientos .badge,
#tablaMovimientosWhatsApp .badge {
padding: 3px 8px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .2px;
}
/* ---------------------------------------------------------------------------
15. Tarjetas de la misma fila, del mismo alto
---------------------------------------------------------------------------
Los 4 bloques del inicio (2 gráficos + 2 reportes) viven en un solo
.row.dashboard-grid. La fila de Bootstrap ya es flex y estira las COLUMNAS,
pero la .card de adentro conservaba su alto natural: el reporte de WhatsApp
con 10 filas quedaba mucho más alto que el de Consultas con 5, y se veían
disparejos.
Se hace que la columna sea flex y la tarjeta la llene: así las dos de cada
línea terminan del mismo alto.
--------------------------------------------------------------------------- */
.dashboard-grid > [class*=col-] {
display: flex;
}
.dashboard-grid > [class*=col-] > .jc-panel-card {
width: 100%;
}
/* el cuerpo crece para ocupar el sobrante, así el borde inferior de las dos
tarjetas queda alineado aunque una tenga menos filas */
.dashboard-grid .jc-panel-card > .jc-panel-body,
.dashboard-grid .jc-panel-card > .card-body {
flex: 1 1 auto;
}
/* Tope de alto para las tablas de los reportes: si algún día traen muchas
filas, la fila entera no se dispara; scrollean por dentro (con el scroll
sutil, que ya se ve fino). */
#tablaMovimientos,
#tablaMovimientosWhatsApp {
margin-bottom: 0;
}
/* Se apunta por .jc-table-body y no con :has(): las tarjetas de graficos usan
.jc-panel-body, asi que dentro de .dashboard-grid esto solo alcanza a los dos
reportes. Ademas :has() pide navegadores nuevos y esto funciona en todos. */
.dashboard-grid .jc-table-body {
max-height: 420px;
overflow-y: auto;
}
/* ---------------------------------------------------------------------------
16. Icono de los 3 puntos (columna Acción)
---------------------------------------------------------------------------
Al pasar de FontAwesome a SVG se perdió: el