/* ════════════════════════════════════════════════════════════════════════
SIGRE Design System v1.0
Tokens globales + utilidades + componentes base.
Diseñado para ser:
• Override-friendly por tenant (--brand-* configurable)
• Override-friendly por modo (sala-de-crisis, dark, alto-contraste)
• Compatible con Bootstrap 5 sin pelearse
════════════════════════════════════════════════════════════════════════ */
:root {
/* ──────────────── COLOR PRIMITIVES ──────────────── */
/* Neutros — Slate de Tailwind, escala 12 pasos legible */
--ds-neutral-0: #ffffff;
--ds-neutral-50: #f8fafc;
--ds-neutral-100: #f1f5f9;
--ds-neutral-200: #e2e8f0;
--ds-neutral-300: #cbd5e1;
--ds-neutral-400: #94a3b8;
--ds-neutral-500: #64748b;
--ds-neutral-600: #475569;
--ds-neutral-700: #334155;
--ds-neutral-800: #1e293b;
--ds-neutral-900: #0f172a;
/* Semánticos — verde/ámbar/rojo/azul calibrados para gobierno (AA contraste) */
--ds-success-50: #f0fdf4;
--ds-success-100: #dcfce7;
--ds-success-200: #bbf7d0;
--ds-success-500: #16a34a;
--ds-success-600: #15803d;
--ds-success-700: #166534;
--ds-warning-50: #fffbeb;
--ds-warning-100: #fef3c7;
--ds-warning-200: #fde68a;
--ds-warning-500: #f59e0b;
--ds-warning-600: #d97706;
--ds-warning-700: #92400e;
--ds-danger-50: #fef2f2;
--ds-danger-100: #fee2e2;
--ds-danger-200: #fecaca;
--ds-danger-500: #dc2626;
--ds-danger-600: #b91c1c;
--ds-danger-700: #991b1b;
--ds-info-50: #eff6ff;
--ds-info-100: #dbeafe;
--ds-info-200: #bfdbfe;
--ds-info-500: #2563eb;
--ds-info-600: #1d4ed8;
--ds-info-700: #1e40af;
/* ──────────────── ROL SEMÁNTICO (usar estos en componentes) ──────────────── */
--ds-bg: var(--ds-neutral-50);
--ds-bg-surface: var(--ds-neutral-0);
--ds-bg-subtle: var(--ds-neutral-100);
--ds-bg-soft: #fafbfc;
--ds-border: var(--ds-neutral-200);
--ds-border-strong:var(--ds-neutral-300);
--ds-border-soft: var(--ds-neutral-100);
--ds-text: var(--ds-neutral-800);
--ds-text-strong: var(--ds-neutral-900);
--ds-text-soft: var(--ds-neutral-600);
--ds-text-muted: var(--ds-neutral-500);
--ds-text-inverse: var(--ds-neutral-0);
--ds-link: var(--ds-info-600);
--ds-link-hover: var(--ds-info-700);
/* ──────────────── BRAND (override por tenant) ──────────────── */
/* El branding por tenant (sprint #216) sobrescribe estos en runtime
inyectando :root { --ds-brand-primary: #xxx; } al final del .
Default = azul institucional SIGRE. */
--ds-brand-primary: #0d3b66;
--ds-brand-primary-hover: #0a2e52;
--ds-brand-primary-soft: #e6eef7;
--ds-brand-accent: #d4a574;
--ds-brand-text-on: #ffffff;
/* ──────────────── ESPACIADO (escala 4-base) ──────────────── */
--ds-space-0: 0;
--ds-space-1: 4px;
--ds-space-2: 8px;
--ds-space-3: 12px;
--ds-space-4: 16px;
--ds-space-5: 20px;
--ds-space-6: 24px;
--ds-space-8: 32px;
--ds-space-10: 40px;
--ds-space-12: 48px;
--ds-space-16: 64px;
/* ──────────────── TIPOGRAFÍA ──────────────── */
--ds-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--ds-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
--ds-text-xs: 0.72rem; /* 11.5px */
--ds-text-sm: 0.82rem; /* 13px */
--ds-text-base: 0.95rem; /* 15.2px */
--ds-text-md: 1.05rem; /* 16.8px */
--ds-text-lg: 1.25rem; /* 20px */
--ds-text-xl: 1.5rem; /* 24px */
--ds-text-2xl: 1.875rem; /* 30px */
--ds-text-3xl: 2.5rem; /* 40px — solo hero / KPI gigantes */
--ds-leading-tight: 1.2;
--ds-leading-normal: 1.45;
--ds-leading-relaxed: 1.6;
--ds-weight-regular: 400;
--ds-weight-medium: 500;
--ds-weight-semibold: 600;
--ds-weight-bold: 700;
--ds-weight-black: 800;
/* ──────────────── RADIO ──────────────── */
--ds-radius-sm: 4px;
--ds-radius-md: 6px;
--ds-radius-lg: 10px;
--ds-radius-xl: 14px;
--ds-radius-pill: 999px;
/* ──────────────── SOMBRA ──────────────── */
--ds-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
--ds-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
--ds-shadow-md: 0 4px 8px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
--ds-shadow-lg: 0 10px 20px rgba(15,23,42,.08), 0 4px 8px rgba(15,23,42,.04);
--ds-shadow-xl: 0 20px 40px rgba(15,23,42,.10), 0 8px 16px rgba(15,23,42,.06);
--ds-shadow-focus: 0 0 0 3px rgba(13,59,102,.25);
/* ──────────────── ANIMACIÓN ──────────────── */
--ds-ease: cubic-bezier(.4, 0, .2, 1);
--ds-duration-fast: 120ms;
--ds-duration-base: 200ms;
--ds-duration-slow: 320ms;
/* ──────────────── Z-INDEX ──────────────── */
--ds-z-sticky: 100;
--ds-z-dropdown: 1000;
--ds-z-modal: 1050;
--ds-z-toast: 1100;
--ds-z-tooltip: 1200;
/* ──────────────── ANCHOS DE LAYOUT ──────────────── */
--ds-sidebar-width: 260px;
--ds-content-max: 1400px;
}
/* ────────────────────────────────────────────────────────────────────────
COMPONENTES BASE — útiles para que cualquier template los reuse.
Prefijo .ds- para evitar colisión con Bootstrap.
──────────────────────────────────────────────────────────────────────── */
/* Tarjeta universal */
.ds-card {
background: var(--ds-bg-surface);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-lg);
box-shadow: var(--ds-shadow-xs);
overflow: hidden;
}
.ds-card-padded { padding: var(--ds-space-5); }
.ds-card-hover { transition: transform var(--ds-duration-base) var(--ds-ease), box-shadow var(--ds-duration-base) var(--ds-ease); }
.ds-card-hover:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-md); }
/* KPI tile — patrón unificado */
.ds-kpi {
background: var(--ds-bg-surface);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-lg);
padding: var(--ds-space-4) var(--ds-space-5);
position: relative;
}
.ds-kpi-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg); }
.ds-kpi-bar-success { background: var(--ds-success-500); }
.ds-kpi-bar-warning { background: var(--ds-warning-500); }
.ds-kpi-bar-danger { background: var(--ds-danger-500); }
.ds-kpi-bar-info { background: var(--ds-info-500); }
.ds-kpi-value { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-black); color: var(--ds-text-strong); line-height: 1; }
.ds-kpi-label { font-size: var(--ds-text-xs); color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--ds-space-2); }
.ds-kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ds-text-xs); padding: 2px 8px; border-radius: var(--ds-radius-pill); margin-top: var(--ds-space-2); }
.ds-kpi-trend-up { background: var(--ds-danger-100); color: var(--ds-danger-700); }
.ds-kpi-trend-down { background: var(--ds-success-100); color: var(--ds-success-700); }
.ds-kpi-trend-flat { background: var(--ds-neutral-100); color: var(--ds-neutral-700); }
/* Pill / badge unificado */
.ds-pill {
display: inline-block;
padding: 2px 10px;
border-radius: var(--ds-radius-pill);
font-size: var(--ds-text-xs);
font-weight: var(--ds-weight-semibold);
line-height: 1.4;
white-space: nowrap;
}
.ds-pill-success { background: var(--ds-success-100); color: var(--ds-success-700); }
.ds-pill-warning { background: var(--ds-warning-100); color: var(--ds-warning-700); }
.ds-pill-danger { background: var(--ds-danger-100); color: var(--ds-danger-700); }
.ds-pill-info { background: var(--ds-info-100); color: var(--ds-info-700); }
.ds-pill-neutral { background: var(--ds-neutral-100); color: var(--ds-neutral-700); }
.ds-pill-soft { background: var(--ds-neutral-50); color: var(--ds-neutral-600); border: 1px solid var(--ds-border); }
/* Botón consistente — para acciones rápidas dentro de pantallas custom */
.ds-btn {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold);
padding: 6px 14px; border-radius: var(--ds-radius-md);
text-decoration: none; border: 1px solid transparent;
cursor: pointer; transition: background var(--ds-duration-fast), border-color var(--ds-duration-fast), transform var(--ds-duration-fast);
line-height: 1.4; white-space: nowrap;
}
.ds-btn:active { transform: scale(.97); }
.ds-btn-primary { background: var(--ds-brand-primary); color: var(--ds-brand-text-on); }
.ds-btn-primary:hover { background: var(--ds-brand-primary-hover); }
.ds-btn-ghost { background: transparent; color: var(--ds-text); border-color: var(--ds-border); }
.ds-btn-ghost:hover { background: var(--ds-bg-subtle); border-color: var(--ds-border-strong); }
.ds-btn-danger { background: var(--ds-danger-500); color: #fff; }
.ds-btn-danger:hover { background: var(--ds-danger-600); }
.ds-btn-success { background: var(--ds-success-500); color: #fff; }
.ds-btn-success:hover { background: var(--ds-success-600); }
/* Hero / Section header — patrón para cabeceras de pantalla */
.ds-section-header {
display: flex; justify-content: space-between; align-items: flex-end;
gap: var(--ds-space-4); flex-wrap: wrap;
margin-bottom: var(--ds-space-4);
}
.ds-section-header h1 {
font-size: var(--ds-text-xl); font-weight: var(--ds-weight-bold);
color: var(--ds-text-strong); margin: 0 0 var(--ds-space-1) 0;
}
.ds-section-header .ds-lead { font-size: var(--ds-text-sm); color: var(--ds-text-muted); margin: 0; }
/* Grid responsive de KPIs — auto-fit que respira en mobile */
.ds-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--ds-space-3);
}
@media (max-width: 600px) {
.ds-kpi-grid {
grid-auto-flow: column;
grid-template-columns: none;
grid-auto-columns: 75%;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: var(--ds-space-2);
}
.ds-kpi-grid > * { scroll-snap-align: start; }
}
/* Lista universal de items con detalle expandible (usado en hotspots, tareas, emergencias) */
.ds-stack { display: flex; flex-direction: column; }
.ds-stack > * + * { border-top: 1px solid var(--ds-border-soft); }
.ds-stack-item {
padding: var(--ds-space-3) var(--ds-space-4);
transition: background var(--ds-duration-fast);
}
.ds-stack-item:hover { background: var(--ds-bg-soft); }
/* Empty state consistente */
.ds-empty {
text-align: center; padding: var(--ds-space-12) var(--ds-space-4);
color: var(--ds-text-muted);
}
.ds-empty-icon { font-size: 2.5rem; opacity: .4; display: block; margin-bottom: var(--ds-space-3); }
.ds-empty-title { font-size: var(--ds-text-base); font-weight: var(--ds-weight-semibold); color: var(--ds-text); margin-bottom: var(--ds-space-2); }
.ds-empty-help { font-size: var(--ds-text-sm); max-width: 420px; margin: 0 auto var(--ds-space-4); }
/* FAB — botón flotante para acción primaria en mobile */
.ds-fab {
position: fixed; bottom: var(--ds-space-6); right: var(--ds-space-6);
z-index: var(--ds-z-sticky);
width: 56px; height: 56px; border-radius: 50%;
background: var(--ds-brand-primary); color: var(--ds-brand-text-on);
border: none; box-shadow: var(--ds-shadow-lg);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.5rem; cursor: pointer;
transition: transform var(--ds-duration-base) var(--ds-ease), box-shadow var(--ds-duration-base) var(--ds-ease);
}
.ds-fab:hover { transform: scale(1.08); box-shadow: var(--ds-shadow-xl); }
@media (min-width: 992px) { .ds-fab.ds-fab-mobile-only { display: none; } }
/* Tabla → Cards en mobile (toggle automático con .ds-responsive-table) */
.ds-responsive-table { width: 100%; }
@media (max-width: 768px) {
.ds-responsive-table thead { display: none; }
.ds-responsive-table tbody tr {
display: block;
background: var(--ds-bg-surface);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-md);
margin-bottom: var(--ds-space-3);
padding: var(--ds-space-3);
box-shadow: var(--ds-shadow-xs);
}
.ds-responsive-table tbody td {
display: flex; justify-content: space-between; align-items: baseline;
padding: var(--ds-space-1) 0;
border: none;
gap: var(--ds-space-3);
}
.ds-responsive-table tbody td::before {
content: attr(data-label);
font-size: var(--ds-text-xs);
color: var(--ds-text-muted);
text-transform: uppercase;
letter-spacing: .04em;
font-weight: var(--ds-weight-semibold);
flex-shrink: 0;
}
.ds-responsive-table tbody td:not([data-label])::before { content: ''; }
}
/* ────────────────────────────────────────────────────────────────────────
TEMAS — accionables desde el theme-picker del header.
El usuario elige y el modo persiste en localStorage 'sigre.ui.theme'.
──────────────────────────────────────────────────────────────────────── */
/* Modo claro = default (sin clase) */
/* Modo oscuro — sala oscura, turno de noche, sala de crisis */
body.ds-theme-dark {
--ds-bg: #0f172a;
--ds-bg-surface: #1e293b;
--ds-bg-subtle: #334155;
--ds-bg-soft: #16223a;
--ds-text: #e2e8f0;
--ds-text-strong: #f8fafc;
--ds-text-soft: #cbd5e1;
--ds-text-muted: #94a3b8;
--ds-border: #334155;
--ds-border-strong: #475569;
--ds-border-soft: #1e293b;
background-color: var(--ds-bg);
color: var(--ds-text);
}
body.ds-theme-dark .card, body.ds-theme-dark .ds-card { background: var(--ds-bg-surface); color: var(--ds-text); border-color: var(--ds-border); }
body.ds-theme-dark .table { color: var(--ds-text); }
body.ds-theme-dark .table-light { --bs-table-bg: var(--ds-bg-subtle); --bs-table-color: var(--ds-text-strong); }
/* Modo alto contraste — accesibilidad, baja visión, ambientes con sol fuerte */
body.ds-theme-contrast {
--ds-bg: #ffffff;
--ds-bg-surface: #ffffff;
--ds-bg-subtle: #f0f0f0;
--ds-bg-soft: #f8f8f8;
--ds-text: #000000;
--ds-text-strong: #000000;
--ds-text-soft: #1a1a1a;
--ds-text-muted: #333333;
--ds-border: #000000;
--ds-border-strong: #000000;
--ds-border-soft: #555555;
--ds-shadow-xs: 0 0 0 1px #000;
--ds-shadow-sm: 0 0 0 2px #000;
--ds-shadow-focus: 0 0 0 4px #ff0; /* amarillo focus para máxima visibilidad */
--ds-success-500: #008000;
--ds-warning-500: #cc6600;
--ds-danger-500: #cc0000;
--ds-info-500: #003399;
background-color: white; color: black;
font-weight: 500; /* todo más grueso */
}
body.ds-theme-contrast :where(a, button) { text-decoration: underline; }
/* Sala de crisis: hereda dark + agrega contraste extra */
body.ds-mode-crisis {
--ds-text: #0a1929;
--ds-bg: #f0f4f8;
}
/* Auto-dark legado (prefers-color-scheme) — mantenemos por compat */
@media (prefers-color-scheme: dark) {
body.ds-dark-auto {
--ds-bg: #0f172a;
--ds-bg-surface: #1e293b;
--ds-bg-subtle: #334155;
--ds-text: #e2e8f0;
--ds-text-strong: #f8fafc;
--ds-text-soft: #cbd5e1;
--ds-border: #334155;
}
}
/* Reduce motion respect — apaga animaciones para usuarios que lo piden */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* Focus visible global — accesibilidad WCAG */
:where(a, button, [tabindex], input, select, textarea):focus-visible {
outline: none;
box-shadow: var(--ds-shadow-focus);
border-radius: var(--ds-radius-sm);
}
/* ────────────────────────────────────────────────────────────────────────
TOAST SYSTEM
Notificaciones in-app no-bloqueantes.
Uso desde JS: dsToast('Mensaje', 'success' | 'warning' | 'danger' | 'info', { duration: 5000 })
Las flash de Symfony se convierten automáticamente — ver base.html.twig.
──────────────────────────────────────────────────────────────────────── */
.ds-toast-container {
position: fixed;
bottom: var(--ds-space-6);
left: 50%;
transform: translateX(-50%);
z-index: var(--ds-z-toast);
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
align-items: center;
pointer-events: none;
max-width: 90vw;
}
.ds-toast {
pointer-events: auto;
display: flex; align-items: flex-start; gap: var(--ds-space-3);
min-width: 280px; max-width: 480px;
padding: var(--ds-space-3) var(--ds-space-4);
background: var(--ds-bg-surface);
border-radius: var(--ds-radius-lg);
box-shadow: var(--ds-shadow-xl);
border: 1px solid var(--ds-border);
border-left-width: 4px;
font-size: var(--ds-text-sm);
line-height: var(--ds-leading-normal);
color: var(--ds-text);
opacity: 0;
transform: translateY(20px);
transition: opacity var(--ds-duration-base) var(--ds-ease), transform var(--ds-duration-base) var(--ds-ease);
}
.ds-toast.ds-toast-in { opacity: 1; transform: translateY(0); }
.ds-toast.ds-toast-out { opacity: 0; transform: translateY(-12px); }
.ds-toast-success { border-left-color: var(--ds-success-500); background: var(--ds-success-50); color: var(--ds-success-700); }
.ds-toast-warning { border-left-color: var(--ds-warning-500); background: var(--ds-warning-50); color: var(--ds-warning-700); }
.ds-toast-danger { border-left-color: var(--ds-danger-500); background: var(--ds-danger-50); color: var(--ds-danger-700); }
.ds-toast-info { border-left-color: var(--ds-info-500); background: var(--ds-info-50); color: var(--ds-info-700); }
.ds-toast-icon {
flex-shrink: 0;
font-size: 1.1rem;
line-height: var(--ds-leading-normal);
}
.ds-toast-body { flex-grow: 1; min-width: 0; }
.ds-toast-title {
font-weight: var(--ds-weight-semibold);
color: inherit;
margin-bottom: 2px;
}
.ds-toast-close {
flex-shrink: 0;
background: transparent;
border: none;
color: inherit;
opacity: .5;
cursor: pointer;
padding: 0 4px;
font-size: 1.2rem;
line-height: 1;
}
.ds-toast-close:hover { opacity: 1; }
/* ────────────────────────────────────────────────────────────────────────
SKELETON LOADERS
Placeholder animado para contenido async — mucho mejor UX que "Cargando…".
Uso:
──────────────────────────────────────────────────────────────────────── */
.ds-skeleton {
background: linear-gradient(90deg, var(--ds-neutral-100) 0%, var(--ds-neutral-200) 50%, var(--ds-neutral-100) 100%);
background-size: 200% 100%;
animation: ds-skel-shimmer 1.4s ease-in-out infinite;
border-radius: var(--ds-radius-md);
display: block;
}
@keyframes ds-skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ds-skel-line { height: 14px; margin-bottom: 8px; }
.ds-skel-line-sm{ height: 10px; width: 40%; margin-bottom: 6px; }
.ds-skel-line-lg{ height: 22px; width: 60%; margin-bottom: 10px; }
.ds-skel-card { height: 80px; }
.ds-skel-kpi { height: 100px; }
.ds-skel-circle { width: 40px; height: 40px; border-radius: 50%; }
/* En tema oscuro las bandas también */
body.ds-theme-dark .ds-skeleton {
background: linear-gradient(90deg, var(--ds-neutral-700) 0%, var(--ds-neutral-600) 50%, var(--ds-neutral-700) 100%);
background-size: 200% 100%;
}
/* ────────────────────────────────────────────────────────────────────────
PRINT STYLESHEET GLOBAL
Cualquier pantalla se puede imprimir limpio: oculta nav/sidebar/asistente
y deja solo contenido. Para forzar visibilidad: .ds-print-only.
Para forzar ocultar: .ds-print-hide.
──────────────────────────────────────────────────────────────────────── */
@media print {
/* Ocultos por default — chrome de la app */
.sigre-sidebar, .sigre-topbar, .sigre-backdrop,
#sigre-asistente-fab, #sigre-asistente-panel,
.municipal-status-banner, .ds-toast-container,
nav, .navbar, .btn, button,
.alert-dismissible, [data-bs-dismiss],
.ds-print-hide,
#sigre-offline-badge,
.dropdown-toggle, .dropdown-menu {
display: none !important;
}
/* Contenido al 100% del ancho de página */
.sigre-content, .container, .container-fluid {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
body {
background: white !important;
color: black !important;
font-size: 11pt;
line-height: 1.4;
}
/* Forzar tipografías legibles para print */
h1 { font-size: 18pt; page-break-after: avoid; }
h2 { font-size: 14pt; page-break-after: avoid; }
h3 { font-size: 12pt; page-break-after: avoid; }
/* Evita cortar tablas y figuras en medio */
table, figure, .ds-card, .card { page-break-inside: avoid; }
/* Mostrar URL después de cada link (estándar pro) */
a[href]:not([href^="#"]):not([href^="javascript:"]):after {
content: " (" attr(href) ")";
font-size: 9pt; color: #555; word-break: break-all;
}
/* Encabezado de impresión visible solo en print */
.ds-print-only { display: block !important; }
/* Footer con número de página vía @page */
@page {
margin: 1.5cm;
size: A4;
}
/* Mapas Leaflet: snapshot — sin tiles externas obvias */
.leaflet-control-container, .leaflet-tile-pane img { opacity: .85; }
}