con un input search + el JS de
autosubmit inyecta automaticamente spinner y boton X.
============================================================================ */
.ls-search-wrap { position: relative; display: block; }
.ls-search-wrap input[type="search"] {
/* Reservamos espacio a la derecha para spinner + X */
padding-right: 64px;
}
/* Si el wrap también tiene un SVG de búsqueda a la izquierda (lupa) */
.ls-search-wrap > svg.ls-ic:first-child {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--ls-gray-400);
pointer-events: none;
}
.ls-search-spinner {
position: absolute;
right: 40px;
top: 50%;
width: 14px; height: 14px;
margin-top: -7px;
border: 2px solid var(--ls-gray-200);
border-top-color: var(--ls-orange-500);
border-radius: 50%;
opacity: 0;
pointer-events: none;
transition: opacity 120ms;
}
.ls-search-wrap.is-busy .ls-search-spinner {
opacity: 1;
animation: ls-spin 700ms linear infinite;
}
@keyframes ls-spin { to { transform: rotate(360deg); } }
.ls-search-clear {
position: absolute;
right: 10px;
top: 50%;
width: 22px; height: 22px;
margin-top: -11px;
border: 0; padding: 0;
background: var(--ls-gray-100);
border-radius: 50%;
color: var(--ls-gray-600);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 120ms, background 120ms, color 120ms;
display: inline-flex; align-items: center; justify-content: center;
}
.ls-search-wrap.has-value .ls-search-clear {
opacity: 1;
pointer-events: auto;
}
.ls-search-clear:hover {
background: var(--ls-gray-300);
color: var(--ls-gray-900);
}
.ls-search-clear svg { width: 12px; height: 12px; }
/* ============================================================================
SIDEBAR FOOTER BRAND — bloque al pie del sidebar (desktop)
Patrón geométrico CSS puro (líneas diagonales art-déco) + frase de marca.
En móvil/drawer queda al final del scroll natural del aside.
============================================================================ */
.ls-sidebar { display: flex; flex-direction: column; }
.ls-sidebar > nav { flex: 1; }
.ls-sidebar__footer-brand {
margin: 20px -12px -24px;
padding: 0;
position: relative;
overflow: hidden;
border-top: 1px solid var(--ls-navy-700);
background:
linear-gradient(180deg, rgba(10,31,68,0) 0%, rgba(5,14,34,0.55) 60%, rgba(5,14,34,0.92) 100%),
url('/assets/sidebar-skyline.png') center bottom / cover no-repeat,
var(--ls-navy-900);
min-height: 140px;
display: flex;
align-items: flex-end;
}
.ls-sidebar__footer-brand-text {
position: relative;
width: 100%;
margin: 0;
padding: 14px 16px calc(14px + var(--ls-safe-bottom));
font-family: var(--ls-font-sans);
font-size: 11px;
font-weight: 700;
line-height: 1.35;
color: var(--ls-white);
letter-spacing: 0.04em;
text-transform: uppercase;
background: linear-gradient(180deg, transparent 0%, rgba(5,14,34,0.7) 60%, rgba(5,14,34,0.95) 100%);
}
/* ============================================================================
KPI CARD — variante con ÍCONO EN CÍRCULO (estilo admin moderno)
Mantenemos el Refined Ledger (Fraunces tabular) pero agregamos al lado
izquierdo un círculo de color con un ícono de Lucide.
Markup:
============================================================================ */
.ls-card--kpi-icon {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px;
text-align: left;
}
@media (min-width: 768px) { .ls-card--kpi-icon { padding: 16px; gap: 14px; } }
@media (min-width: 1280px) { .ls-card--kpi-icon { padding: 18px; gap: 14px; } }
.ls-card--kpi-icon .ls-kpi {
flex: 1; min-width: 0; gap: 4px;
align-items: flex-start;
text-align: left;
}
.ls-card--kpi-icon .ls-kpi__label {
letter-spacing: .06em;
font-size: 10px;
line-height: 1.25;
text-wrap: balance;
margin: 0;
}
.ls-card--kpi-icon .ls-kpi__value {
font-size: 26px; margin-top: 2px; line-height: 1;
}
@media (min-width: 768px) { .ls-card--kpi-icon .ls-kpi__value { font-size: 30px; } }
@media (min-width: 1024px) { .ls-card--kpi-icon .ls-kpi__value { font-size: 28px; } }
@media (min-width: 1280px) { .ls-card--kpi-icon .ls-kpi__value { font-size: 32px; } }
.ls-kpi-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: var(--ls-radius-md);
display: grid; place-items: center;
color: var(--ls-white);
background: var(--ls-info);
box-shadow: 0 3px 8px -3px currentColor;
}
.ls-kpi-icon .ls-ic { width: 18px; height: 18px; stroke-width: 2; }
@media (min-width: 1280px) {
.ls-kpi-icon { width: 40px; height: 40px; }
.ls-kpi-icon .ls-ic { width: 20px; height: 20px; }
}
.ls-kpi-icon[data-tone="blue"] { background: var(--ls-info); color: #fff; }
.ls-kpi-icon[data-tone="green"] { background: var(--ls-success); color: #fff; }
.ls-kpi-icon[data-tone="orange"] { background: var(--ls-orange-500); color: #fff; }
.ls-kpi-icon[data-tone="navy"] { background: var(--ls-navy-700); color: #fff; }
.ls-kpi-icon[data-tone="amber"] { background: var(--ls-warning); color: #fff; }
.ls-kpi-icon[data-tone="danger"] { background: var(--ls-danger); color: #fff; }
/* ============================================================================
DONUT CHART — SVG puro (sin dependencias). Anillo + leyenda al costado.
Usa stroke-dasharray para los segmentos. Render server-side desde PHP.
============================================================================ */
.ls-donut-card {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: center;
justify-items: center;
}
@media (min-width: 480px) {
.ls-donut-card {
grid-template-columns: auto 1fr;
gap: 20px;
justify-items: start;
}
}
.ls-donut {
position: relative;
width: 160px; height: 160px;
flex-shrink: 0;
max-width: 100%;
justify-self: center;
}
.ls-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ls-donut__center {
position: absolute; inset: 0;
display: grid; place-items: center; text-align: center;
}
.ls-donut__total {
font-family: var(--ls-font-display);
font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
color: var(--ls-gray-900); line-height: 1;
font-feature-settings: 'tnum' 1;
}
.ls-donut__total-label {
font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
color: var(--ls-gray-500); font-weight: 700; margin-top: 4px;
}
.ls-donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ls-donut-legend li {
display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center;
font-size: 13px;
}
.ls-donut-legend .dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--c, var(--ls-gray-400));
}
.ls-donut-legend .label { color: var(--ls-gray-700); font-weight: 500; }
.ls-donut-legend .num {
font-variant-numeric: tabular-nums; font-weight: 600;
color: var(--ls-gray-900);
}
/* Focus visible accesible */
:focus-visible {
outline: 2px solid var(--ls-orange-500);
outline-offset: 2px;
border-radius: var(--ls-radius-sm);
}
/* ============================================================================
PRINT STYLESHEET — toda la app imprime limpia con Ctrl+P
Reglas: ocultar navegación, ampliar contenido, contraste BN, page breaks.
============================================================================ */
@media print {
@page { margin: 1.5cm; size: A4 portrait; }
body {
background: white !important;
color: black !important;
font-size: 11pt;
}
/* Ocultar todo lo no-imprimible */
.ls-sidebar, .ls-backdrop, .ls-bottomnav, .ls-header,
.ls-modal, #btn-menu, .ls-currency-toggle,
.no-print, [data-no-print] {
display: none !important;
}
/* Contenido a ancho completo */
.ls-app, .ls-main { display: block !important; }
.ls-content {
padding: 0 !important;
padding-bottom: 0 !important;
max-width: none;
}
/* Cards limpias para papel: sin sombra, borde sutil, evitar split */
.ls-card, .ls-card--kpi {
box-shadow: none !important;
border: 1px solid #d0d0d0 !important;
break-inside: avoid;
page-break-inside: avoid;
padding: 12px !important;
}
.ls-card--kpi::before { display: none; } /* sin línea de color en BN */
/* Tablas pre-impresión: bordes sutiles, fuente más chica */
.ls-table {
box-shadow: none !important;
border: 1px solid #ccc;
font-size: 10pt;
}
.ls-table thead { display: table-header-group !important; background: #f5f5f5 !important; }
.ls-table thead th {
color: black !important;
border-bottom: 1px solid #999 !important;
padding: 8px !important;
}
.ls-table tbody tr {
display: table-row !important;
page-break-inside: avoid;
padding: 0 !important;
border-bottom: 1px solid #eee !important;
}
.ls-table td {
display: table-cell !important;
padding: 6px 8px !important;
border-bottom: 1px solid #eee !important;
color: black !important;
}
.ls-table td::before { display: none !important; }
/* Tipografía: el serif aporta peso editorial impreso */
.ls-h1 { font-size: 18pt; margin-bottom: 4pt; }
.ls-h2 { font-size: 14pt; }
.ls-h3 { font-size: 12pt; }
.ls-display { font-size: 22pt; }
.ls-kpi__value { font-size: 18pt; }
/* Links sin subrayado para no ensuciar */
a { color: black !important; text-decoration: none !important; }
a[href]::after { content: ""; } /* desactiva los URLs entre paréntesis típicos */
/* Alertas en BN */
.ls-alert { border: 1px solid #999 !important; background: white !important; color: black !important; }
.ls-badge { border: 1px solid #999; color: black !important; background: white !important; }
/* Header impreso del informe (si la página lo define) */
.print-header { display: block !important; margin-bottom: 16pt; padding-bottom: 8pt; border-bottom: 2pt solid black; }
.print-footer { margin-top: 16pt; padding-top: 8pt; border-top: 1pt solid #999; font-size: 9pt; color: #555 !important; }
}
/* Helper: contenido visible solo al imprimir */
.print-only { display: none; }
@media print { .print-only { display: block; } }