=========================================================================== */
.premium-modal-dialog--danger{ border-top-color: #a33b3b; }
.premium-modal-header--danger{
background: linear-gradient(180deg, #3a2323, #2a1c1c);
color: #f0c9c9;
}
/* ===========================================================================
TABLA
Columna Monto
Fila 1.250,00
Total 1.250,00
Modificadores: .premium-table--striped (cebra) · td/th.num (alineado a la
derecha, para montos) · tr.is-highlighted (fila resaltada, ej. alerta).
=========================================================================== */
.premium-table{
width: 100%;
border-collapse: collapse;
background: var(--premium-paper);
border: 1px solid var(--premium-line);
font-size: 0.86rem;
}
.premium-table thead th{
background: linear-gradient(180deg, #262b34, #1b1e25);
color: var(--premium-gold-soft);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.68rem;
font-weight: 700;
text-align: left;
padding: 0.65rem 0.85rem;
border-bottom: 2px solid var(--premium-gold);
white-space: nowrap;
}
.premium-table tbody td{
padding: 0.6rem 0.85rem;
color: var(--premium-ink);
border-bottom: 1px solid var(--premium-line);
}
.premium-table tbody tr:last-child td{ border-bottom: 0; }
.premium-table tbody tr:hover td{
background: rgba(185, 151, 74, 0.06);
}
.premium-table tbody tr.is-highlighted td{
background: rgba(185, 151, 74, 0.1);
}
.premium-table--striped tbody tr:nth-child(even) td{
background: var(--premium-ivory);
}
.premium-table--striped tbody tr:nth-child(even):hover td{
background: rgba(185, 151, 74, 0.08);
}
.premium-table th.num,
.premium-table td.num{
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.premium-table tfoot td{
padding: 0.65rem 0.85rem;
font-weight: 700;
color: var(--premium-ink);
background: var(--premium-ivory);
border-top: 2px solid var(--premium-gold);
}
/* Contenedor semántico de tabla: las reglas viven junto a .premium-scroll-x
(arriba). Uso:
Usar SIEMPRE que una tabla pueda superar el ancho del viewport. */
/* ===========================================================================
TARJETA KPI / INDICADOR
Modificadores de delta: --up · --down · --neutral
Modificador de layout mobile:
.premium-stat-grid--rail → franja horizontal con scroll (opt-in).
Sin --rail, el grid sigue el comportamiento normal (auto-fit / apilado).
Un único indicador (p. ej. total del día) NO debe usar --rail.
=========================================================================== */
.premium-stat-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1px;
background: var(--premium-line);
border: 1px solid var(--premium-line);
min-width: 0;
max-width: 100%;
}
/* 5–7 indicadores (dashboard): columnas fijas para no dejar celda vacía */
@media (min-width: 1100px){
.premium-stat-grid--5{
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.premium-stat-grid--6{
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.premium-stat-grid--7{
grid-template-columns: repeat(7, minmax(0, 1fr));
}
}
@media (min-width: 641px) and (max-width: 1099px){
.premium-stat-grid--5,
.premium-stat-grid--6,
.premium-stat-grid--7{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.premium-stat{
background: var(--premium-paper);
padding: 1.1rem 1.2rem;
border-top: 2px solid var(--premium-gold);
min-width: 0;
}
@media (max-width: 640px){
.premium-stat-grid--rail{
display: flex;
grid-template-columns: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.premium-stat-grid--rail::-webkit-scrollbar{
display: none;
}
.premium-stat-grid--rail > .premium-stat{
flex: 0 0 auto;
width: 78%;
max-width: 240px;
scroll-snap-align: start;
}
}
.premium-stat-label{
text-transform: uppercase;
letter-spacing: 0.07em;
font-size: 0.68rem;
font-weight: 700;
color: var(--premium-muted);
margin-bottom: 0.5rem;
}
.premium-stat-value{
font-size: 1.6rem;
font-weight: 700;
color: var(--premium-ink);
line-height: 1.15;
/* Evita "Bs" en una línea y el monto en otra cuando la celda es angosta. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
}
/* 7 KPIs: montos grandes (millones) caben en una sola línea */
.premium-stat-grid--7 .premium-stat-value{
font-size: 1.15rem;
}
@media (min-width: 1400px){
.premium-stat-grid--7 .premium-stat-value{
font-size: 1.35rem;
}
}
.premium-stat-delta{
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.5rem;
font-size: 0.76rem;
font-weight: 700;
}
.premium-stat-delta::before{ content: "▲"; font-size: 0.62rem; }
.premium-stat-delta--up{ color: #0e7c66; }
.premium-stat-delta--down{ color: #a33b3b; }
.premium-stat-delta--down::before{ content: "▼"; }
.premium-stat-delta--neutral{ color: var(--premium-muted); }
.premium-stat-delta--neutral::before{ content: "–"; }
/* ===========================================================================
ALERTA / BANNER DE ACCIÓN
Éxito. Los permisos se actualizaron correctamente.
Variantes: --success · --danger · --warning · --info
Diferencia con .premium-note: la nota es informativa y estática; la alerta
es feedback de una acción (guardar, error de validación, advertencia).
=========================================================================== */
.premium-alert{
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.85rem 1.05rem;
border: 1px solid var(--premium-line);
border-left: 3px solid var(--premium-muted);
background: var(--premium-ivory);
color: var(--premium-ink);
font-size: 0.88rem;
line-height: 1.6;
}
.premium-alert-icon{
flex: 0 0 auto;
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
margin-top: 0.1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
color: #fff;
background: var(--premium-muted);
}
.premium-alert-body strong{ color: inherit; }
.premium-alert--success{ border-left-color: #0e7c66; background: #f2f9f6; }
.premium-alert--success .premium-alert-icon{ background: #0e7c66; }
.premium-alert--success .premium-alert-icon::before{ content: "✓"; }
.premium-alert--danger{ border-left-color: #a33b3b; background: #fbf2f2; }
.premium-alert--danger .premium-alert-icon{ background: #a33b3b; }
.premium-alert--danger .premium-alert-icon::before{ content: "!"; }
.premium-alert--warning{ border-left-color: #b4881f; background: #fdf8ec; }
.premium-alert--warning .premium-alert-icon{ background: #b4881f; }
.premium-alert--warning .premium-alert-icon::before{ content: "!"; }
.premium-alert--info{ border-left-color: var(--premium-gold); background: var(--premium-ivory); }
.premium-alert--info .premium-alert-icon{ background: var(--premium-gold); }
.premium-alert--info .premium-alert-icon::before{ content: "i"; }
/* Lista de alertas accionables (Centro de alertas del panel Premium) */
.premium-alert-list{
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.premium-alert-metric{
margin-top: 0.35rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--premium-ink);
}
.premium-actions--alert{
margin-top: 0.65rem;
justify-content: flex-start;
flex-wrap: wrap;
gap: 0.45rem;
}
/* ===========================================================================
TABS
General
Parámetros
...
...
JS mínimo (idéntico en espíritu al patrón del modal, sin dependencias):
function premiumTab(btn){
var group = btn.closest('.premium-tabs');
group.querySelectorAll('.premium-tab').forEach(function(b){ b.classList.remove('is-active'); });
btn.classList.add('is-active');
var panels = group.nextElementSibling ? group.parentNode.querySelectorAll('.premium-tab-panel') : [];
panels.forEach(function(p){ p.classList.toggle('is-active', p.id === btn.dataset.tabTarget); });
}
=========================================================================== */
.premium-tabs{
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
border-bottom: 1px solid var(--premium-line);
}
.premium-tab{
background: none;
border: 0;
border-bottom: 2px solid transparent;
padding: 0.65rem 0.9rem;
margin-bottom: -1px;
color: var(--premium-ink-soft);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.74rem;
font-weight: 700;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.premium-tab:hover{ color: var(--premium-ink); }
.premium-tab.is-active{
color: var(--premium-ink);
border-bottom-color: var(--premium-gold);
}
.premium-tab-panel{ display: none; padding-top: 1.1rem; }
.premium-tab-panel.is-active{ display: block; }
/* ===========================================================================
CAMPO DE ARCHIVO (usar SIEMPRE esto; no ponga type=file en .premium-input)
Archivo
Seleccionar
Ningún archivo seleccionado
Altura alineada con .premium-input / .premium-select / .premium-btn (2.45rem).
=========================================================================== */
.premium-file{
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
box-sizing: border-box;
width: 100%;
min-height: 2.45rem;
height: 2.45rem;
padding: 0 0.7rem;
border: 1px dashed var(--premium-line);
background: var(--premium-paper);
cursor: pointer;
overflow: hidden;
transition: border-color 0.15s ease, background 0.15s ease;
}
.premium-file:hover{
border-color: var(--premium-gold);
background: var(--premium-ivory);
}
.premium-file-input{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
font-size: 0;
}
.premium-file-cta{
flex: 0 0 auto;
padding: 0.3rem 0.9rem;
background: var(--premium-ink);
color: var(--premium-gold-soft);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.68rem;
font-weight: 700;
pointer-events: none;
}
.premium-file-name{
flex: 1 1 auto;
min-width: 0;
color: var(--premium-muted);
font-size: 0.84rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
/* Botón de acción dentro de una grilla de campos: reserva el mismo alto de label */
.premium-field--action{
display: flex;
flex-direction: column;
justify-content: flex-start;
min-width: 0;
}
.premium-field--action .premium-btn,
.premium-field--action .premium-actions{
width: 100%;
}
.premium-field--action .premium-btn{
width: 100%;
}
/* ===========================================================================
TOOLTIP (CSS puro, sin JS)
?
=========================================================================== */
.premium-tooltip{
position: relative;
display: inline-flex;
vertical-align: middle;
}
.premium-tooltip-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.05rem;
height: 1.05rem;
border-radius: 50%;
border: 1px solid var(--premium-muted);
color: var(--premium-muted);
font-size: 0.65rem;
font-weight: 700;
cursor: help;
}
.premium-tooltip::after{
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: max-content;
max-width: 220px;
padding: 0.45rem 0.65rem;
background: var(--premium-ink);
color: #fff;
font-size: 0.72rem;
line-height: 1.4;
text-transform: none;
letter-spacing: normal;
font-weight: 400;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 10;
}
.premium-tooltip:hover::after,
.premium-tooltip:focus-within::after{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.premium-tooltip--wide::after{
max-width: 300px;
text-align: left;
}
/* KPI suelto: todo el bloque activa el tooltip (sin ícono ?) */
.premium-stat--tip{
position: relative;
cursor: help;
}
.premium-stat--tip::after{
content: none; /* no generar caja hasta hover: evita ensanchar el scroll de página */
}
.premium-stat--tip:hover::after,
.premium-stat--tip:focus-within::after{
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(0);
box-sizing: border-box;
width: 18rem;
max-width: min(300px, 70vw);
padding: 0.45rem 0.65rem;
background: var(--premium-ink);
color: #fff;
font-size: 0.72rem;
line-height: 1.4;
text-transform: none;
letter-spacing: normal;
font-weight: 400;
text-align: left;
white-space: normal;
opacity: 1;
pointer-events: none;
z-index: 20;
}
/* ===========================================================================
ESTADO VACÍO
Sin datos para mostrar
No hay registros para el periodo seleccionado.
=========================================================================== */
.premium-empty{
text-align: center;
padding: 2.6rem 1.5rem;
color: var(--premium-ink-soft);
}
.premium-empty-icon{
width: 46px;
height: 46px;
margin: 0 auto 1rem auto;
border: 1px solid var(--premium-line);
display: flex;
align-items: center;
justify-content: center;
color: var(--premium-gold);
font-size: 1.3rem;
}
.premium-empty-icon::before{ content: "—"; }
.premium-empty-title{
font-size: 0.95rem;
font-weight: 700;
color: var(--premium-ink);
margin-bottom: 0.35rem;
}
.premium-empty-text{
margin: 0 auto;
max-width: 360px;
font-size: 0.85rem;
line-height: 1.6;
color: var(--premium-muted);
}
.premium-empty a{
color: var(--premium-gold);
font-weight: 700;
text-decoration: none;
letter-spacing: 0.04em;
}
.premium-empty a:hover{
color: var(--premium-gold-2);
text-decoration: underline;
}
/* ===========================================================================
PAGINACIÓN
=========================================================================== */
.premium-pagination{
display: flex;
gap: 0.3rem;
}
.premium-page-btn{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0 0.4rem;
border: 1px solid var(--premium-line);
background: var(--premium-paper);
color: var(--premium-ink-soft);
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
border-radius: 0;
appearance: none;
-webkit-appearance: none;
line-height: 1;
}
.premium-page-btn:hover{
border-color: var(--premium-gold);
color: var(--premium-ink);
text-decoration: none;
}
.premium-page-btn.is-active{
background: var(--premium-ink);
border-color: var(--premium-ink);
color: var(--premium-gold-soft);
}
.premium-page-btn--disabled{
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* ===========================================================================
MENÚ DESPLEGABLE
Acciones ▾
Se cierra quitando la clase .is-open (ej. clic afuera con JS mínimo, igual
que el patrón del modal).
=========================================================================== */
.premium-dropdown{
position: relative;
display: inline-block;
}
.premium-dropdown-menu{
display: none;
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 170px;
background: var(--premium-paper);
border: 1px solid var(--premium-line);
border-top: 2px solid var(--premium-gold);
box-shadow: 0 14px 30px rgba(27, 30, 37, 0.14);
z-index: 20;
}
.premium-dropdown.is-open .premium-dropdown-menu{ display: block; }
.premium-dropdown-item{
display: block;
padding: 0.55rem 0.9rem;
color: var(--premium-ink);
font-size: 0.84rem;
text-decoration: none;
border-bottom: 1px solid var(--premium-line);
}
.premium-dropdown-item:last-child{ border-bottom: 0; }
.premium-dropdown-item:hover{
background: var(--premium-ivory);
color: var(--premium-ink);
text-decoration: none;
}
.premium-dropdown-item--danger{ color: #a33b3b; }
.premium-dropdown-item--danger:hover{ background: #fbf2f2; color: #a33b3b; }
/* ===========================================================================
SPINNER Y SKELETON (estados de carga)
=========================================================================== */
.premium-spinner{
display: inline-block;
width: 1.15rem;
height: 1.15rem;
border: 2px solid var(--premium-line);
border-top-color: var(--premium-gold);
border-radius: 50%;
animation: premium-spin 0.7s linear infinite;
vertical-align: middle;
}
@keyframes premium-spin{
to{ transform: rotate(360deg); }
}
.premium-skeleton{
display: block;
background: linear-gradient(90deg, var(--premium-ivory) 25%, #f2efe4 37%, var(--premium-ivory) 63%);
background-size: 400% 100%;
animation: premium-skeleton-shimmer 1.4s ease infinite;
}
@keyframes premium-skeleton-shimmer{
0%{ background-position: 100% 50%; }
100%{ background-position: 0 50%; }
}
/* ===========================================================================
BREADCRUMB
Reportes
/
Salud Financiera
=========================================================================== */
.premium-breadcrumb{
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
color: var(--premium-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.premium-breadcrumb a{
color: var(--premium-ink-soft);
text-decoration: none;
}
.premium-breadcrumb a:hover{
color: var(--premium-gold);
text-decoration: none;
}
.premium-breadcrumb-sep{ color: var(--premium-line); }
.premium-breadcrumb-current{
color: var(--premium-ink);
font-weight: 700;
}
/* ===========================================================================
TOOLBAR DE TARJETA (título + control a la derecha, ej. buscar)
=========================================================================== */
.premium-card-header--toolbar{
/* No space-between: el ::before (rombo) debe quedar pegado al título. */
flex-wrap: wrap;
gap: 0.75rem;
}
.premium-card-header--toolbar > .premium-actions,
.premium-card-header--toolbar > .premium-input,
.premium-card-header--toolbar > .premium-btn{
margin-left: auto;
}
.premium-card-header--toolbar .premium-input{
width: 16rem;
max-width: 100%;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
font-size: 0.85rem;
color: var(--premium-ink);
background: var(--premium-paper);
}
/* Título + subtítulo en el header (el input del toolbar queda a la derecha) */
.premium-card-header-stack{
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.premium-card-header-stack .premium-muted-text{
margin: 0;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
font-size: 0.78rem;
}
/* ===========================================================================
GRILLA DE FILTROS / CAMPOS
... .premium-field ...
=========================================================================== */
.premium-field-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem 1rem;
/* start: mantiene inputs alineados cuando algunos campos tienen hint */
align-items: start;
}
.premium-field-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.premium-field-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.premium-field-grid .premium-field{ margin-bottom: 0; min-width: 0; }
@media (max-width: 900px){
.premium-field-grid,
.premium-field-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
.premium-field-grid,
.premium-field-grid--2,
.premium-field-grid--4{ grid-template-columns: 1fr; }
}
/* ===========================================================================
INPUT CON SUFIJO (%, Bs, etc.)
%
=========================================================================== */
.premium-input-affix{
display: flex;
align-items: stretch;
width: 100%;
min-width: 0;
}
.premium-input-affix .premium-input{
flex: 1;
min-width: 0;
border-right: 0;
}
.premium-input-affix-addon{
display: inline-flex;
align-items: center;
padding: 0 0.7rem;
background: var(--premium-ivory);
border: 1px solid var(--premium-line);
border-left: 0;
color: var(--premium-muted);
font-size: 0.82rem;
font-weight: 600;
}
/* ===========================================================================
GRUPO DE CHECKBOXES / HINT
=========================================================================== */
.premium-check-group{
display: flex;
flex-wrap: wrap;
gap: 0.55rem 1.1rem;
margin-top: 0.75rem;
}
.premium-hint{
margin: 0.65rem 0 0 0;
font-size: 0.76rem;
line-height: 1.5;
color: var(--premium-muted);
}
/* ===========================================================================
BARRA DE RESULTADOS DESTACADOS (spotlight)
=========================================================================== */
.premium-spotlight{
display: flex;
flex-wrap: wrap;
gap: 1.4rem 2rem;
margin-top: 1.1rem;
padding: 1.1rem 1.25rem;
background: var(--premium-ink);
color: #ffffff;
}
/* Reparto uniforme a lo ancho (p. ej. Pulso del mes con 4 KPIs) */
.premium-spotlight--spread{
justify-content: space-between;
align-items: flex-start;
gap: 1rem 1.25rem;
}
.premium-spotlight--spread .premium-spotlight-item{
flex: 1 1 0;
min-width: 8.5rem;
}
/*
* Una sola fila con scroll horizontal invisible (p. ej. bandas "Hoy").
* En pantallas anchas los ítems crecen; si no caben, se desliza sin barra visible.
*
* Nota: no usar scroll-snap aquí. Con overflow-x + padding, el snap alinea el
* primer ítem al borde del scrollport y “se come” el padding izquierdo (texto cortado).
* Tampoco mezclar con justify-content: space-between del --spread al desbordar.
*/
.premium-spotlight--rail{
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.premium-spotlight--rail::-webkit-scrollbar{
display: none;
}
.premium-spotlight--rail .premium-spotlight-item{
flex: 1 0 10.5rem;
min-width: 10.5rem;
}
.premium-spotlight-item{
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.premium-spotlight-label{
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(255, 255, 255, 0.65);
}
.premium-spotlight-value{
font-size: 1.45rem;
font-weight: 700;
line-height: 1.15;
color: var(--premium-gold-soft);
}
.premium-spotlight-value.is-negative{
color: #f0a8a8;
}
.premium-spotlight-sub{
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.7);
}
.premium-spotlight-sub.is-negative{
color: #f0a8a8;
}
/* ===========================================================================
TABLA ORDENABLE (comportamiento genérico; el JS solo pone is-sort-*)
Nombre
=========================================================================== */
.premium-table thead th[data-sort]{
cursor: pointer;
user-select: none;
}
.premium-table thead th[data-sort]:hover{
color: #ffffff;
}
.premium-table thead th.is-sort-asc::after,
.premium-table thead th.is-sort-desc::after{
font-size: 0.6rem;
color: var(--premium-gold);
margin-left: 0.25rem;
}
.premium-table thead th.is-sort-asc::after{ content: "▲"; }
.premium-table thead th.is-sort-desc::after{ content: "▼"; }
/* ===========================================================================
FILA DE FILTROS POR COLUMNA (PremiumTable / public/js/premium/table.js)
=========================================================================== */
.premium-table thead tr.premium-table-filters th{
background: var(--premium-ivory);
color: var(--premium-ink);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
padding: 0.45rem 0.55rem;
border-bottom: 1px solid var(--premium-line);
vertical-align: middle;
cursor: default;
white-space: nowrap;
}
.premium-table thead tr.premium-table-filters th::after{
content: none !important;
}
.premium-table thead tr.premium-table-filters .premium-input{
width: 100%;
min-width: 4.5rem;
max-width: 12rem;
margin: 0;
padding: 0.35rem 0.5rem;
font-size: 0.78rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--premium-ink);
background: var(--premium-paper);
}
.premium-table thead tr.premium-table-filters th.num .premium-input{
text-align: right;
max-width: 7.5rem;
margin-left: auto;
}
.premium-pagination--center{
justify-content: center;
margin-top: 1rem;
}
.premium-page-btn:disabled,
.premium-page-btn[disabled]{
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* ===========================================================================
DATATABLES DENTRO DE PREMIUM (misma apariencia que tablas nativas)
Uso:
+ dataTable({...})
Luego envolver la tabla en .premium-table-scroll (ver init en la vista)
para que el scroll horizontal NO arrastre el filtro "Buscar".
=========================================================================== */
.premium-scope .dataTables_wrapper{
max-width: 100%;
min-width: 0;
/* El overflow vive en .premium-table-scroll alrededor de la ,
no aquí: si overflow-x está en el wrapper, Buscar se desplaza con la tabla. */
overflow: visible;
}
.premium-scope .dataTables_wrapper .dataTables_filter{
float: none;
clear: both;
display: block;
width: 100%;
box-sizing: border-box;
text-align: right;
margin: 0;
padding: 0.75rem 1.1rem;
background: var(--premium-ivory);
border-bottom: 1px solid var(--premium-line);
}
.premium-scope .dataTables_wrapper .dataTables_filter label{
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin: 0;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--premium-ink-soft);
}
.premium-scope .dataTables_wrapper .dataTables_filter input{
width: 16rem;
max-width: 100%;
margin-left: 0;
padding: 0.45rem 0.7rem;
border: 1px solid var(--premium-line);
border-radius: 0;
box-shadow: none;
background: var(--premium-paper);
color: var(--premium-ink);
font-size: 0.85rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.premium-scope .dataTables_wrapper .dataTables_filter input:hover{
border-color: var(--premium-gold);
}
.premium-scope .dataTables_wrapper .dataTables_filter input:focus{
outline: none !important;
border-color: var(--premium-gold) !important;
box-shadow: 0 0 0 0.18rem rgba(185, 151, 74, 0.16) !important;
}
.premium-scope .dataTables_wrapper table.premium-table{
width: 100% !important;
margin: 0;
}
.premium-scope .dataTables_wrapper .dataTables_info,
.premium-scope .dataTables_wrapper .dataTables_paginate,
.premium-scope .dataTables_wrapper .dataTables_length{
display: none;
}
.premium-muted-text{
margin: 0 0 1rem 0;
color: var(--premium-muted);
font-size: 0.85rem;
}
.premium-pager{
display: flex;
justify-content: center;
margin: 1.1rem 0 0 0;
}
/* ===========================================================================
CABECERA DE PÁGINA (kicker + título)
=========================================================================== */
.premium-page-kicker{
display: inline-flex;
align-items: center;
gap: 0.4rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.8125rem; /* ~13px: legible sin pelear con el título */
font-weight: 700;
line-height: 1.35;
color: #7a5c10;
margin: 0 0 0.85rem 0;
padding: 0.28rem 0.7rem;
background: linear-gradient(180deg, rgba(245, 215, 137, 0.28) 0%, rgba(212, 175, 55, 0.14) 100%);
border: 1px solid rgba(166, 124, 0, 0.45);
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
vertical-align: middle;
}
.premium-page-heading{
margin: 0 0 1.4rem 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem 1rem;
color: var(--premium-ink);
}
.premium-page-heading .help-icon-button{
font-size: 20px;
color: var(--premium-gold);
cursor: pointer;
text-decoration: none;
line-height: 1;
}
.premium-page-heading .help-icon-button:hover,
.premium-page-heading .help-icon-button:focus{
color: var(--premium-gold-2);
text-decoration: none;
}
/* ===========================================================================
TOOLBAR DE ENTIDAD (avatar + título + chip + acciones)
=========================================================================== */
.premium-toolbar{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.premium-toolbar-identity{
display: flex;
align-items: center;
gap: 0.9rem;
min-width: 0;
}
.premium-avatar{
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--premium-ink);
color: var(--premium-gold-soft);
font-size: 1.35rem;
}
.premium-toolbar-title{
font-size: 1.25rem;
font-weight: 700;
color: var(--premium-ink);
line-height: 1.2;
}
.premium-actions{
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
/* ===========================================================================
TABLA CLAVE / VALOR (fichas, settings, detalle)
=========================================================================== */
.premium-kv{
width: 100%;
font-size: 0.9rem;
}
.premium-kv th,
.premium-kv td{
padding: 0.4rem 0.25rem;
vertical-align: top;
border: 0;
}
.premium-kv th{
width: 42%;
font-size: 0.78rem;
font-weight: 600;
color: var(--premium-muted);
text-align: left;
}
.premium-kv td{
color: var(--premium-ink);
}
/* ===========================================================================
MAPA EMPOTRADO / MEDIDOR DE BARRA / TEXTO ÉNFASIS
=========================================================================== */
.premium-map{
width: 100%;
height: 260px;
border: 1px solid var(--premium-line);
z-index: 1;
}
.premium-meter{
height: 0.75rem;
min-width: 2px;
background: var(--premium-gold);
}
.premium-text--danger{ color: #a33b3b; font-weight: 700; }
.premium-text--ok{ color: #0e7c66; font-weight: 700; }
.premium-stat-value.is-warn,
.premium-stat-value.is-negative{
color: #a33b3b;
}
.premium-stat-value small,
.premium-stat-sub{
display: block;
margin-top: 0.25rem;
font-size: 0.72rem;
font-weight: 500;
color: var(--premium-muted);
line-height: 1.3;
}
/* ===========================================================================
SUBTÍTULO EN HEADER DE TARJETA
=========================================================================== */
.premium-card-header > div{
min-width: 0;
}
.premium-card-header p{
margin: 0.15rem 0 0 0;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
color: var(--premium-muted);
}
/* ===========================================================================
ACCIONES / CHECKS CENTRADOS (shells de reporte, footers de filtros)
=========================================================================== */
.premium-actions--center{
justify-content: center;
margin-top: 0.35rem;
}
.premium-actions .help-icon-button,
.premium-actions .info_button,
.premium-scope .info_button{
font-size: 1.25rem;
color: var(--premium-gold);
cursor: pointer;
text-decoration: none;
line-height: 1;
}
.premium-actions .help-icon-button:hover,
.premium-actions .info_button:hover,
.premium-scope .info_button:hover{
color: var(--premium-gold-2);
text-decoration: none;
}
.premium-check-group--center{
justify-content: center;
}
.premium-check-group--divided{
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid var(--premium-line);
}
/* ===========================================================================
ÁREA DE RESULTADO (AJAX / reportes) + ESTADO DE CARGA
=========================================================================== */
.premium-result{
margin-top: 1.25rem;
min-height: 0;
min-width: 0;
max-width: 100%;
border-top: 1px solid var(--premium-line);
padding-top: 1rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.premium-result:empty{
display: none;
border-top: 0;
padding-top: 0;
}
.premium-loading{
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
text-align: center;
padding: 1.5rem 1rem;
color: var(--premium-muted);
font-size: 0.85rem;
}
/* Nunca poner .premium-loading en el contenedor AJAX (#…_container):
ajax_load solo reemplaza el HTML interno y la clase quedaría activa
(display:flex) rompiendo el layout del contenido cargado. */
.premium-section-title--spaced{
margin-top: 2rem;
}
/* Contenedor de canvas Chart.js */
.premium-chart-wrap{
position: relative;
width: 100%;
min-height: 220px;
max-width: 100%;
}
/* ===========================================================================
DISABLED + FOCUS ACCESIBLE (checks, radios, tabs, page-btn, file)
Neon (custom.css) mata box-shadow en *:focus; los inputs ya usan !important.
=========================================================================== */
.premium-input:disabled,
.premium-select:disabled,
.premium-input[disabled],
.premium-select[disabled]{
opacity: 0.55;
cursor: not-allowed;
background: var(--premium-ivory);
color: var(--premium-muted);
}
.premium-check:focus-visible,
.premium-radio input[type="radio"]:focus-visible,
.premium-tab:focus-visible,
.premium-page-btn:focus-visible,
.premium-btn:focus-visible{
outline: 2px solid var(--premium-gold);
outline-offset: 2px;
}
.premium-file:focus-within{
border-color: var(--premium-gold);
box-shadow: 0 0 0 0.18rem rgba(185, 151, 74, 0.16);
}
/* Combobox / selector con búsqueda (categorías, etc.) */
.premium-combobox{
position: relative;
}
.premium-combobox-panel{
display: none;
margin-top: 0.35rem;
max-height: 16rem;
overflow: auto;
background: #fff;
border: 1px solid var(--premium-line, #e5e1d6);
border-radius: 10px;
box-shadow: 0 12px 28px rgba(31, 38, 49, 0.12);
}
.premium-combobox-panel.is-open,
#premium_category_panel{
display: block;
}
.premium-combobox-list{
list-style: none;
margin: 0;
padding: 0.35rem 0;
}
.premium-combobox-option{
padding: 0.55rem 0.85rem;
cursor: pointer;
font-size: 0.9rem;
color: #252d39;
line-height: 1.35;
}
.premium-combobox-option:hover,
.premium-combobox-option:focus{
background: rgba(185, 151, 74, 0.10);
outline: none;
}
.premium-combobox-option.is-selected{
background: rgba(185, 151, 74, 0.16);
font-weight: 600;
}
.premium-combobox-empty{
padding: 0.75rem 0.85rem;
color: #8b8f98;
font-size: 0.85rem;
}
/* Árbol de categorías Premium (colapsable + búsqueda) */
.premium-tree-panel{
margin-top: 0.35rem;
max-height: 18rem;
overflow: auto;
background: #fff;
border: 1px solid var(--premium-line, #e5e1d6);
border-radius: 10px;
padding: 0.35rem 0.25rem;
}
.premium-tree,
.premium-tree-children{
list-style: none;
margin: 0;
padding: 0;
}
.premium-tree-children{
padding-left: 1.1rem;
}
.premium-tree-node{
margin: 0;
}
.premium-tree-row{
display: flex;
align-items: center;
gap: 0.15rem;
min-height: 2rem;
}
.premium-tree-toggle{
flex: 0 0 1.5rem;
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
position: relative;
}
.premium-tree-toggle::before{
content: "";
display: block;
width: 0;
height: 0;
margin: 0 auto;
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #6b7280;
transform: rotate(0deg);
transition: transform 0.12s ease;
}
.premium-tree-node.is-expanded > .premium-tree-row > .premium-tree-toggle::before{
transform: rotate(90deg);
}
.premium-tree-toggle--leaf{
cursor: default;
}
.premium-tree-toggle--leaf::before{
border: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: #c5c8ce;
margin-top: 5px;
}
.premium-tree-label{
flex: 1;
text-align: left;
border: 0;
background: transparent;
padding: 0.35rem 0.5rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
color: #252d39;
line-height: 1.3;
}
.premium-tree-label:hover{
background: rgba(185, 151, 74, 0.10);
}
.premium-tree-node.is-selected > .premium-tree-row > .premium-tree-label{
background: rgba(185, 151, 74, 0.16);
font-weight: 600;
}
.premium-tree-node.is-match > .premium-tree-row > .premium-tree-label{
box-shadow: inset 3px 0 0 var(--premium-gold, #b9974a);
}
.premium-input-affix:focus-within .premium-input{
border-color: var(--premium-gold) !important;
box-shadow: none !important;
}
.premium-input-affix:focus-within .premium-input-affix-addon{
border-color: var(--premium-gold);
}
.premium-input-affix:focus-within{
box-shadow: 0 0 0 0.18rem rgba(185, 151, 74, 0.16);
}
/* BS3 .row dentro de filtros premium (sin márgenes negativos) */
.premium-scope .premium-card-body > .row{
margin-left: 0;
margin-right: 0;
}
/* Labels h5 heredados de reportes clásicos dentro de premium-scope */
.premium-scope h5,
.premium-scope h5 label{
color: var(--premium-ink-soft) !important;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 0.35rem 0;
}
/* Puente residual: si un hijo aún usa .form-control dentro de .premium-scope */
.premium-scope .form-control{
width: 100%;
padding: 0.45rem 0.7rem;
border: 1px solid var(--premium-line);
border-radius: 0;
box-shadow: none;
color: var(--premium-ink);
background: var(--premium-paper);
height: auto;
min-height: 36px;
font-size: 0.9rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.premium-scope .form-control:hover{
border-color: var(--premium-gold);
}
.premium-scope .form-control:focus{
outline: none !important;
border-color: var(--premium-gold) !important;
box-shadow: 0 0 0 0.18rem rgba(185, 151, 74, 0.16) !important;
}
.premium-scope .breadcrumb{
background: transparent;
padding-left: 0;
margin-bottom: 1.4rem;
}
.premium-scope h2{
margin: 0 0 0.35rem 0;
color: var(--premium-ink);
}
/* ---------- Centro de Inteligencia Empresarial ---------- */
.premium-chip--muted{
color: var(--premium-muted);
border-color: var(--premium-line);
}
.premium-bi-hero-top{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
margin-bottom: 1rem;
}
.premium-bi-score-row{
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
align-items: center;
margin-bottom: 1.25rem;
}
.premium-bi-score{
width: 6.5rem;
height: 6.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
font-weight: 800;
letter-spacing: -0.03em;
border: 3px solid var(--premium-line);
background: var(--premium-ivory);
color: var(--premium-ink);
flex-shrink: 0;
}
.premium-bi-score--danger{ border-color: #a33b3b; color: #a33b3b; background: #fbf2f2; }
.premium-bi-score--warn{ border-color: #b4881f; color: #8a6814; background: #fdf8ec; }
.premium-bi-score--stable{ border-color: #b9974a; color: #6e5a2a; background: #fbf7ee; }
.premium-bi-score--ok{ border-color: #0e7c66; color: #0e7c66; background: #f2f9f6; }
.premium-bi-score--excellent{ border-color: #0e7c66; color: #0a5c4c; background: #eef8f4; box-shadow: 0 0 0 4px rgba(14,124,102,0.08); }
.premium-bi-score--muted{ border-color: var(--premium-line); color: var(--premium-muted); }
.premium-bi-score-meta{ flex: 1; min-width: 16rem; }
.premium-bi-verdict{
margin: 0.55rem 0 0 0;
color: var(--premium-ink-soft, #565b66);
font-size: 1rem;
line-height: 1.45;
max-width: 40rem;
}
.premium-bi-pillars{
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.65rem;
}
@media (max-width: 991px){
.premium-bi-pillars{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
.premium-bi-pillars{ grid-template-columns: 1fr; }
}
.premium-bi-pillar{
display: block;
text-decoration: none !important;
color: inherit;
border: 1px solid var(--premium-line);
background: var(--premium-paper);
padding: 0.65rem 0.7rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.premium-bi-pillar:hover,
.premium-bi-pillar:focus{
border-color: var(--premium-gold);
box-shadow: 0 0 0 0.12rem rgba(185, 151, 74, 0.14);
}
.premium-bi-pillar-head{
display: flex;
justify-content: space-between;
gap: 0.35rem;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--premium-muted);
margin-bottom: 0.4rem;
}
.premium-bi-pillar-head strong{
color: var(--premium-ink);
font-size: 0.95rem;
letter-spacing: 0;
}
.premium-bi-pillar-track{
height: 6px;
background: #efece3;
overflow: hidden;
}
.premium-bi-pillar-fill{ height: 100%; background: var(--premium-gold); }
.premium-bi-pillar--danger .premium-bi-pillar-fill{ background: #a33b3b; }
.premium-bi-pillar--warn .premium-bi-pillar-fill{ background: #b4881f; }
.premium-bi-pillar--stable .premium-bi-pillar-fill{ background: #b9974a; }
.premium-bi-pillar--ok .premium-bi-pillar-fill,
.premium-bi-pillar--excellent .premium-bi-pillar-fill{ background: #0e7c66; }
.premium-bi-recs{ display: flex; flex-direction: column; gap: 0.85rem; }
.premium-bi-rec{
display: flex;
gap: 0.85rem;
align-items: flex-start;
border-top: 1px solid var(--premium-line);
padding-top: 0.85rem;
}
.premium-bi-rec:first-child{ border-top: 0; padding-top: 0; }
.premium-bi-rec-num{
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: var(--premium-ink);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
flex-shrink: 0;
}
.premium-bi-rec-body strong{ display: block; margin-bottom: 0.25rem; }
.premium-bi-rec-body p{
margin: 0 0 0.55rem 0;
color: var(--premium-ink-soft, #565b66);
font-size: 0.92rem;
}
/* Tendencia + Riesgos: misma altura (Bootstrap 3 no estira columnas) */
.premium-bi-split{
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 1rem;
margin-bottom: 1.1rem;
}
.premium-bi-split__trend{
flex: 1 1 58%;
min-width: 280px;
display: flex;
}
.premium-bi-split__risks{
flex: 1 1 36%;
min-width: 260px;
display: flex;
}
.premium-bi-split .premium-card{
width: 100%;
display: flex;
flex-direction: column;
min-height: 320px;
}
.premium-bi-split .premium-card-body{
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
.premium-bi-chart{
flex: 1 1 auto;
min-height: 220px;
position: relative;
}
.premium-bi-chart canvas{
width: 100% !important;
height: 100% !important;
}
.premium-bi-split__hint{
margin-top: 0.65rem;
margin-bottom: 0;
flex: 0 0 auto;
}
.premium-bi-risks-scroll{
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding-right: 0.15rem;
}
@media (max-width: 991px){
.premium-bi-split__trend,
.premium-bi-split__risks{
flex: 1 1 100%;
}
.premium-bi-split .premium-card{
min-height: 0;
}
.premium-bi-risks-scroll{
max-height: 320px;
}
}
/* ===========================================================================
MATRIX WIZARD (alta día-1)
Ritmo de espaciado fijo: solo gap del stack, sin margin-bottom de .premium-field
ni gutters Bootstrap. Todas las filas usan .premium-field-grid.
=========================================================================== */
.matrix-wizard{
--matrix-wizard-gap: 0.85rem;
--matrix-wizard-control-h: 2.45rem;
--matrix-wizard-hint-h: 1.35rem;
}
#matrix_create_company_modal .modal-body{
padding: 1.25rem 1.35rem;
}
#matrix_create_company_modal .modal-footer{
padding: 0.85rem 1.35rem;
}
.matrix-wizard-step{
display: none;
flex-direction: column;
gap: var(--matrix-wizard-gap);
min-height: 22.5rem;
}
.matrix-wizard-step.is-active{
display: flex;
}
.matrix-wizard-step .premium-field{
margin: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.matrix-wizard-step .premium-label{
margin: 0;
min-height: 1.15rem;
}
.matrix-wizard-step .premium-field-grid{
gap: var(--matrix-wizard-gap);
margin: 0;
width: 100%;
}
.matrix-wizard-step .premium-field-grid .premium-label{
display: flex;
align-items: flex-end;
min-height: 2.35em;
margin: 0;
}
.matrix-wizard-step .premium-input,
.matrix-wizard-step .premium-select{
margin: 0;
min-height: var(--matrix-wizard-control-h);
height: var(--matrix-wizard-control-h);
}
.matrix-wizard-hint{
margin: 0 !important;
min-height: var(--matrix-wizard-hint-h);
line-height: var(--matrix-wizard-hint-h);
font-size: 0.76rem;
color: var(--premium-muted);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.matrix-wizard-toolbar{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin: 0;
min-height: var(--matrix-wizard-control-h);
}
.matrix-wizard-toolbar .premium-muted-text{
margin: 0;
line-height: var(--matrix-wizard-control-h);
}
.matrix-wizard-check{
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
min-height: var(--matrix-wizard-control-h);
padding: 0;
}
.matrix-wizard-check .form-check-input,
.matrix-wizard-check .premium-check{
margin: 0;
float: none;
position: static;
}
.matrix-wizard-check .form-check-label,
.matrix-wizard-check .matrix-wizard-check-label{
margin: 0;
line-height: 1.25;
}
.matrix-wizard-summary.premium-note{
margin: 0;
}
#matrix_credentials_modal .modal-body{
padding: 1.25rem 1.35rem;
display: flex;
flex-direction: column;
gap: var(--matrix-wizard-gap, 0.85rem);
}
#matrix_credentials_modal .modal-body .premium-field{
margin: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
#matrix_credentials_modal .modal-body .premium-label{
margin: 0;
}