/* ====================================
Sistema de Gestión - Cuartel de Bomberos
CSS Mobile First + Responsive
Sistema de 3 Temas
==================================== */
/* ============================================
TEMA OSCURO (Por defecto) - Madera Antigua
============================================ */
:root, [data-theme="dark"] {
/* Colores principales - Tema Bomberos */
--color-primary: #e53935;
--color-primary-dark: #c62828;
--color-primary-light: #ff6f60;
/* Estados - SIEMPRE los mismos colores */
--color-qrv: #4caf50;
--color-qrv-dark: #388e3c;
--color-qrv-bg: rgba(76, 175, 80, 0.2);
--color-qrv-text: #81c784;
--color-qap: #ffc107;
--color-qap-dark: #ffa000;
--color-qap-bg: rgba(255, 193, 7, 0.2);
--color-qap-text: #ffd54f;
--color-qrt: #f44336;
--color-qrt-dark: #d32f2f;
--color-qrt-bg: rgba(244, 67, 54, 0.2);
--color-qrt-text: #e88282; /* AA: #e57373 daba 4,25:1 sobre su propio tinte */
/* Fondo y superficies - MADERA OSCURA VIEJA */
--color-bg: #1a0f0a;
--color-bg-elevated: #241510;
--color-surface: #2d1c14;
--color-surface-hover: #3a2518;
--color-surface-light: #4a3020;
/* Texto */
--color-text: #e8dcc8;
--color-text-primary: #f5efe6;
--color-text-secondary: #b8a68e;
--color-text-muted: #b99971; /* AA: #8b7355 daba 2,7:1 sobre las superficies oscuras */
/* Bordes - Tonos madera */
--color-border: #4a3525;
--color-border-light: #5c4230;
/* Shadows */
--shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
/* Theme indicator */
--theme-bg-pattern: repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 6px),
repeating-linear-gradient(90deg, transparent 0px, transparent 20px, rgba(0,0,0,0.02) 20px, rgba(0,0,0,0.02) 40px),
linear-gradient(180deg, #1a0f0a 0%, #120a06 100%);
/* Colores pasteles por sección - Tema Oscuro */
--color-seccion-jefe: #5c6bc0;
--color-seccion-jefe-bg: rgba(92, 107, 192, 0.15);
--color-seccion-jefe-text: #9fa8da;
--color-seccion-segundo: #e53935;
--color-seccion-segundo-bg: rgba(229, 57, 53, 0.15);
--color-seccion-segundo-text: #ef9a9a;
--color-seccion-ayudantia-on: #2a1900;
--color-seccion-vhf-on: #00141f;
--color-seccion-intendencia-on: #001b2e;
--color-seccion-capacitacion: #26a69a;
--color-seccion-capacitacion-bg: rgba(38, 166, 154, 0.15);
--color-seccion-capacitacion-text: #80cbc4;
--color-seccion-movilidad: #ef5350;
--color-seccion-movilidad-bg: rgba(239, 83, 80, 0.15);
--color-seccion-movilidad-text: #ef9a9a;
--color-seccion-ayudantia: #ffb74d;
--color-seccion-ayudantia-bg: rgba(255, 183, 77, 0.15);
--color-seccion-ayudantia-text: #ffe082;
--color-seccion-intendencia: #42a5f5;
--color-seccion-intendencia-bg: rgba(66, 165, 245, 0.15);
--color-seccion-intendencia-text: #90caf9;
--color-seccion-drones: #ab47bc;
--color-seccion-drones-bg: rgba(171, 71, 188, 0.15);
--color-seccion-drones-text: #ce93d8;
--color-seccion-vhf: #29b6f6;
--color-seccion-vhf-bg: rgba(41, 182, 246, 0.15);
--color-seccion-vhf-text: #81d4fa;
--color-seccion-o2: #ef5350;
--color-seccion-o2-bg: rgba(239, 83, 80, 0.15);
--color-seccion-o2-text: #ef9a9a;
/* Departamentos - colores de header/acento */
--color-depto-cuerdas: #9c27b0;
--color-depto-cuerdas-dark: #7b1fa2;
--color-depto-cuerdas-bg: rgba(156, 39, 176, 0.12);
--color-depto-cuerdas-text: #ce93d8;
--color-depto-equipos: #607d8b;
--color-depto-equipos-dark: #455a64;
--color-depto-equipos-bg: rgba(96, 125, 139, 0.15);
--color-depto-equipos-text: #90a4ae;
--color-depto-ra: #0288d1;
--color-depto-ra-dark: #01579b;
--color-depto-ra-bg: rgba(2, 136, 209, 0.15);
--color-depto-ra-text: #4fc3f7;
--color-depto-era: #00897b;
--color-depto-era-dark: #00695c;
--color-depto-era-bg: rgba(0, 137, 123, 0.15);
--color-depto-era-text: #80cbc4;
--color-depto-bolsos: #0277bd;
--color-depto-bolsos-dark: #01579b;
--color-depto-bolsos-bg: rgba(2, 119, 189, 0.15);
--color-depto-bolsos-text: #4fc3f7;
--color-depto-roperia: #ec407a;
--color-depto-roperia-dark: #c2185b;
--color-depto-roperia-bg: rgba(236, 64, 122, 0.15);
--color-depto-roperia-text: #f48fb1;
/* Badges especiales */
--color-badge-chofer: #64b5f6;
--color-badge-chofer-bg: rgba(33, 150, 243, 0.2);
--color-badge-dept: #ce93d8;
--color-badge-dept-bg: rgba(156, 39, 176, 0.2);
--color-badge-licencia: #512da8;
--color-badge-licencia-ext: #e65100;
/* Grupos del Reglamento N 7: salud y especiales */
--color-badge-licencia-salud: #c62828;
--color-badge-licencia-esp: #00695c;
--color-badge-suspension: #b71c1c;
--color-badge-lic-tag: #64b5f6;
--color-badge-lic-tag-bg: rgba(21, 101, 192, 0.15);
--color-badge-reserva: #64b5f6;
--color-badge-reserva-bg: rgba(33, 150, 243, 0.2);
--color-badge-auxiliar: #ce93d8;
--color-badge-auxiliar-bg: rgba(156, 39, 176, 0.2);
--color-badge-cadete: #ffb74d;
--color-badge-cadete-bg: rgba(255, 152, 0, 0.2);
/* Estados genericos (para badges de estado fuera de QRV/QAP/QRT) */
--color-status-ok: #4caf50;
--color-status-ok-bg: rgba(76, 175, 80, 0.12);
--color-status-warn: #ff9800;
--color-status-warn-bg: rgba(255, 152, 0, 0.12);
--color-status-danger: #e53935;
--color-status-danger-bg: rgba(229, 57, 53, 0.12);
--color-status-info: #2196f3;
--color-status-info-bg: rgba(33, 150, 243, 0.12);
--color-status-purple: #7c3aed;
--color-status-purple-bg: rgba(124, 58, 237, 0.12);
--color-status-inactive: #9e9e9e;
--color-status-inactive-bg: rgba(158, 158, 158, 0.12);
/* Banners PWA/Push */
--color-banner-bg: linear-gradient(135deg, #1a1a2e, #16213e);
--color-banner-accent: #e94560;
--color-banner-push: #1565c0;
/* Planilla */
--color-planilla: #2196f3;
--color-planilla-bg: rgba(33, 150, 243, 0.15);
/* Stat cards especiales */
--color-stat-licencia: #512da8;
--color-stat-tareas: #e65100;
--color-stat-capacitacion: #0097a7;
--color-stat-compras: #c2185b;
/* Permission card accent */
--color-accent-permission: #0097a7;
}
/* ============================================
TEMA CLARO - Profesional Limpio
============================================ */
[data-theme="light"] {
/* Colores principales */
--color-primary: #c62828;
--color-primary-dark: #b71c1c;
--color-primary-light: #d32f2f;
/* Estados - Colores más intensos para fondo claro */
--color-qrv: #2e7d32;
--color-qrv-dark: #1b5e20;
--color-qrv-bg: rgba(46, 125, 50, 0.15);
--color-qrv-text: #1b5e20;
--color-qap: #f9a825;
--color-qap-dark: #f57f17;
--color-qap-bg: rgba(249, 168, 37, 0.2);
--color-qap-text: #e65100;
--color-qrt: #c62828;
--color-qrt-dark: #b71c1c;
--color-qrt-bg: rgba(198, 40, 40, 0.15);
--color-qrt-text: #b71c1c;
/* Fondo y superficies */
--color-bg: #f5f5f5;
--color-bg-elevated: #ffffff;
--color-surface: #ffffff;
--color-surface-hover: #eeeeee;
--color-surface-light: #fafafa;
/* Texto - NEGRO para máximo contraste */
--color-text: #111111;
--color-text-primary: #000000;
--color-text-secondary: #333333;
--color-text-muted: #555555;
/* Bordes más visibles */
--color-border: #aaaaaa;
--color-border-light: #cccccc;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.15);
--shadow-md: 0 4px 12px rgba(0,0,0,0.18);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.22);
/* Theme pattern */
--theme-bg-pattern: #f5f5f5;
/* Colores pasteles por sección - Tema Claro */
--color-seccion-jefe: #1a237e;
--color-seccion-jefe-bg: rgba(26, 35, 126, 0.18);
--color-seccion-jefe-text: #1a237e;
--color-seccion-segundo: #c62828;
--color-seccion-segundo-bg: rgba(198, 40, 40, 0.14);
--color-seccion-segundo-text: #8e1616;
--color-seccion-ayudantia-on: #2a1900;
--color-seccion-vhf-on: #00141f;
--color-seccion-intendencia-on: #001b2e;
--color-seccion-capacitacion: #00897b;
--color-seccion-capacitacion-bg: rgba(0, 137, 123, 0.12);
--color-seccion-capacitacion-text: #00695c;
--color-seccion-movilidad: #e53935;
--color-seccion-movilidad-bg: rgba(229, 57, 53, 0.12);
--color-seccion-movilidad-text: #be2626;
--color-seccion-ayudantia: #fb8c00;
--color-seccion-ayudantia-bg: rgba(251, 140, 0, 0.12);
--color-seccion-ayudantia-text: #a74c00;
--color-seccion-intendencia: #1e88e5;
--color-seccion-intendencia-bg: rgba(30, 136, 229, 0.12);
--color-seccion-intendencia-text: #1565c0;
--color-seccion-drones: #8e24aa;
--color-seccion-drones-bg: rgba(142, 36, 170, 0.12);
--color-seccion-drones-text: #7b1fa2;
--color-seccion-vhf: #0288d1;
--color-seccion-vhf-bg: rgba(2, 136, 209, 0.12);
--color-seccion-vhf-text: #01579b;
--color-seccion-o2: #e53935;
--color-seccion-o2-bg: rgba(229, 57, 53, 0.12);
--color-seccion-o2-text: #be2626;
/* Departamentos - light */
--color-depto-cuerdas: #7b1fa2;
--color-depto-cuerdas-dark: #6a1b9a;
--color-depto-cuerdas-bg: rgba(123, 31, 162, 0.1);
--color-depto-cuerdas-text: #6a1b9a;
--color-depto-equipos: #455a64;
--color-depto-equipos-dark: #37474f;
--color-depto-equipos-bg: rgba(69, 90, 100, 0.1);
--color-depto-equipos-text: #37474f;
--color-depto-ra: #01579b;
--color-depto-ra-dark: #01446e;
--color-depto-ra-bg: rgba(1, 87, 155, 0.1);
--color-depto-ra-text: #01579b;
--color-depto-era: #00695c;
--color-depto-era-dark: #004d40;
--color-depto-era-bg: rgba(0, 105, 92, 0.1);
--color-depto-era-text: #00695c;
--color-depto-bolsos: #01579b;
--color-depto-bolsos-dark: #01446e;
--color-depto-bolsos-bg: rgba(1, 87, 155, 0.1);
--color-depto-bolsos-text: #01579b;
--color-depto-roperia: #d81b60;
--color-depto-roperia-dark: #ad1457;
--color-depto-roperia-bg: rgba(216, 27, 96, 0.1);
--color-depto-roperia-text: #ad1457;
/* Badges - light */
--color-badge-chofer: #1565c0;
--color-badge-chofer-bg: rgba(21, 101, 192, 0.15);
--color-badge-dept: #7b1fa2;
--color-badge-dept-bg: rgba(123, 31, 162, 0.15);
--color-badge-lic-tag: #1565c0;
--color-badge-lic-tag-bg: rgba(21, 101, 192, 0.12);
--color-badge-reserva: #1565c0;
--color-badge-reserva-bg: rgba(21, 101, 192, 0.15);
--color-badge-auxiliar: #7b1fa2;
--color-badge-auxiliar-bg: rgba(123, 31, 162, 0.15);
--color-badge-cadete: #e65100;
--color-badge-cadete-bg: rgba(230, 81, 0, 0.15);
/* Estados genericos - light */
--color-status-ok: #2e7d32;
--color-status-ok-bg: rgba(46, 125, 50, 0.1);
--color-status-warn: #e65100;
--color-status-warn-bg: rgba(230, 81, 0, 0.1);
--color-status-danger: #c62828;
--color-status-danger-bg: rgba(198, 40, 40, 0.1);
--color-status-info: #1565c0;
--color-status-info-bg: rgba(21, 101, 192, 0.1);
--color-status-purple: #5b21b6;
--color-status-purple-bg: rgba(91, 33, 182, 0.1);
--color-status-inactive: #757575;
--color-status-inactive-bg: rgba(117, 117, 117, 0.1);
/* Planilla - light */
--color-planilla: #1565c0;
--color-planilla-bg: rgba(21, 101, 192, 0.12);
/* Stat cards - light */
--color-stat-licencia: #4527a0;
--color-stat-tareas: #bf360c;
--color-stat-capacitacion: #00838f;
--color-stat-compras: #ad1457;
--color-accent-permission: #00838f;
}
/* ============================================
TEMA INTERMEDIO - Cálido Elegante
============================================ */
[data-theme="medium"] {
/* Colores principales */
--color-primary: #c62828;
--color-primary-dark: #b71c1c;
--color-primary-light: #d32f2f;
/* Estados - Colores intensos */
--color-qrv: #2e7d32;
--color-qrv-dark: #1b5e20;
--color-qrv-bg: rgba(46, 125, 50, 0.18);
--color-qrv-text: #1b5e20;
--color-qap: #f9a825;
--color-qap-dark: #f57f17;
--color-qap-bg: rgba(249, 168, 37, 0.22);
--color-qap-text: #e65100;
--color-qrt: #c62828;
--color-qrt-dark: #b71c1c;
--color-qrt-bg: rgba(198, 40, 40, 0.18);
--color-qrt-text: #b71c1c;
/* Fondo y superficies - Beige/Arena cálido */
--color-bg: #efe8dc;
--color-bg-elevated: #f8f5f0;
--color-surface: #ffffff;
--color-surface-hover: #e8e0d0;
--color-surface-light: #faf8f5;
/* Texto - MUY OSCURO para contraste */
--color-text: #1a1510;
--color-text-primary: #0d0a05;
--color-text-secondary: #3d3530;
--color-text-muted: #5a5045;
/* Bordes - Más visibles */
--color-border: #c0b5a5;
--color-border-light: #d5ccc0;
/* Shadows */
--shadow-sm: 0 2px 4px rgba(50, 40, 30, 0.15);
--shadow-md: 0 4px 12px rgba(50, 40, 30, 0.18);
--shadow-lg: 0 8px 24px rgba(50, 40, 30, 0.22);
/* Theme pattern */
--theme-bg-pattern: linear-gradient(180deg, #efe8dc 0%, #e5ddd0 100%);
/* Colores pasteles por sección - Tema Medium */
--color-seccion-jefe: #3f51b5;
--color-seccion-jefe-bg: rgba(63, 81, 181, 0.14);
--color-seccion-jefe-text: #303f9f;
--color-seccion-segundo: #c62828;
--color-seccion-segundo-bg: rgba(198, 40, 40, 0.14);
--color-seccion-segundo-text: #8e1616;
--color-seccion-ayudantia-on: #2a1900;
--color-seccion-vhf-on: #00141f;
--color-seccion-intendencia-on: #001b2e;
--color-seccion-capacitacion: #009688;
--color-seccion-capacitacion-bg: rgba(0, 150, 136, 0.14);
--color-seccion-capacitacion-text: #00685c;
--color-seccion-movilidad: #e53935;
--color-seccion-movilidad-bg: rgba(229, 57, 53, 0.14);
--color-seccion-movilidad-text: #ae2323;
--color-seccion-ayudantia: #ff9800;
--color-seccion-ayudantia-bg: rgba(255, 152, 0, 0.14);
--color-seccion-ayudantia-text: #aa3c00;
--color-seccion-intendencia: #2196f3;
--color-seccion-intendencia-bg: rgba(33, 150, 243, 0.14);
--color-seccion-intendencia-text: #145ea8;
--color-seccion-drones: #9c27b0;
--color-seccion-drones-bg: rgba(156, 39, 176, 0.14);
--color-seccion-drones-text: #7b1fa2;
--color-seccion-vhf: #039be5;
--color-seccion-vhf-bg: rgba(3, 155, 229, 0.14);
--color-seccion-vhf-text: #02629b;
--color-seccion-o2: #e53935;
--color-seccion-o2-bg: rgba(229, 57, 53, 0.14);
--color-seccion-o2-text: #ae2323;
/* Departamentos - medium */
--color-depto-cuerdas: #8e24aa;
--color-depto-cuerdas-dark: #7b1fa2;
--color-depto-cuerdas-bg: rgba(142, 36, 170, 0.12);
--color-depto-cuerdas-text: #7b1fa2;
--color-depto-equipos: #546e7a;
--color-depto-equipos-dark: #455a64;
--color-depto-equipos-bg: rgba(84, 110, 122, 0.12);
--color-depto-equipos-text: #37474f;
--color-depto-ra: #0277bd;
--color-depto-ra-dark: #01579b;
--color-depto-ra-bg: rgba(2, 119, 189, 0.12);
--color-depto-ra-text: #01579b;
--color-depto-era: #00796b;
--color-depto-era-dark: #00695c;
--color-depto-era-bg: rgba(0, 121, 107, 0.12);
--color-depto-era-text: #00695c;
--color-depto-bolsos: #0277bd;
--color-depto-bolsos-dark: #01579b;
--color-depto-bolsos-bg: rgba(2, 119, 189, 0.12);
--color-depto-bolsos-text: #01579b;
--color-depto-roperia: #d81b60;
--color-depto-roperia-dark: #ad1457;
--color-depto-roperia-bg: rgba(216, 27, 96, 0.12);
--color-depto-roperia-text: #ad1457;
/* Badges - medium */
--color-badge-chofer: #1565c0;
--color-badge-chofer-bg: rgba(21, 101, 192, 0.15);
--color-badge-dept: #7b1fa2;
--color-badge-dept-bg: rgba(123, 31, 162, 0.15);
--color-badge-lic-tag: #1565c0;
--color-badge-lic-tag-bg: rgba(21, 101, 192, 0.12);
--color-badge-reserva: #1565c0;
--color-badge-reserva-bg: rgba(21, 101, 192, 0.15);
--color-badge-auxiliar: #7b1fa2;
--color-badge-auxiliar-bg: rgba(123, 31, 162, 0.15);
--color-badge-cadete: #e65100;
--color-badge-cadete-bg: rgba(230, 81, 0, 0.15);
/* Estados genericos - medium */
--color-status-ok: #2e7d32;
--color-status-ok-bg: rgba(46, 125, 50, 0.1);
--color-status-warn: #e65100;
--color-status-warn-bg: rgba(230, 81, 0, 0.1);
--color-status-danger: #c62828;
--color-status-danger-bg: rgba(198, 40, 40, 0.1);
--color-status-info: #1565c0;
--color-status-info-bg: rgba(21, 101, 192, 0.1);
--color-status-purple: #6d28d9;
--color-status-purple-bg: rgba(109, 40, 217, 0.1);
--color-status-inactive: #757575;
--color-status-inactive-bg: rgba(117, 117, 117, 0.1);
/* Planilla - medium */
--color-planilla: #1565c0;
--color-planilla-bg: rgba(21, 101, 192, 0.12);
/* Stat cards - medium */
--color-stat-licencia: #4527a0;
--color-stat-tareas: #bf360c;
--color-stat-capacitacion: #00838f;
--color-stat-compras: #ad1457;
--color-accent-permission: #00838f;
}
/* ── Alias de nombres viejos ──────────────────────────────────────────────
Varios templates sueltos usan nombres de variable que NUNCA se definieron
(--color-bg-card, --card-bg, --border-color...). Sin estos alias caen al
literal del fallback —casi siempre blanco— y rompen el tema oscuro: la card
queda blanca con el texto claro encima, ilegible (pasaba en Compras, Bajas,
Activos y Extintores). Como apuntan a las variables canonicas, siguen el tema
solo. No agregar usos nuevos de estos nombres: usar los canonicos. */
:root {
--color-bg-card: var(--color-surface);
--card-bg: var(--color-surface);
--color-card-bg: var(--color-surface);
--color-bg-alt: var(--color-bg-elevated);
--color-bg-secondary: var(--color-surface-light);
--color-background: var(--color-bg);
--color-bg-hover: var(--color-surface-hover);
--border-color: var(--color-border);
--color-link: var(--color-primary);
--color-danger: var(--color-status-danger);
--color-success: var(--color-status-ok);
--color-status-success: var(--color-status-ok);
--color-status-warning: var(--color-status-warn);
--color-status-error: var(--color-status-danger);
--border-radius: var(--radius-md);
--border-radius-sm: var(--radius-sm);
--border-radius-lg: var(--radius-lg);
}
/* Variables compartidas entre todos los temas */
:root {
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
/* Border radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-full: 9999px;
}
/* Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: var(--theme-bg-pattern);
/* NO usar background-attachment: fixed: con un patron (repeating-linear-gradient)
fuerza re-rasterizar el fondo a pantalla completa en cada scroll/repaint (incluido
al escribir), sacando al navegador del scroll compositado. Es la causa principal
del lag global "en camara lenta" en mobile. Con scroll (default) el fondo se cachea
como tile; el patron es sutil (2-3% opacidad) asi que el aspecto es casi identico. */
color: var(--color-text);
line-height: 1.6;
min-height: 100vh;
transition: background 0.3s ease, color 0.3s ease;
display: flex;
flex-direction: column;
}
/* ====================================
Typography
==================================== */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3;
margin-bottom: var(--spacing-md);
color: var(--color-text-primary);
}
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
@media (min-width: 768px) {
h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
}
a {
color: var(--color-primary-light);
text-decoration: none;
}
a:hover {
color: var(--color-primary);
}
/* ====================================
Navbar - Estilo Madera Oscura
==================================== */
.navbar {
background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-elevated) 100%);
color: var(--color-text);
padding: var(--spacing-sm) var(--spacing-lg);
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
border-bottom: 1px solid var(--color-border);
}
.navbar-container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
margin: 0 auto;
width: 100%;
gap: var(--spacing-md);
}
/* Sección izquierda: Logo y nombre */
.navbar-left {
display: flex;
align-items: center;
flex: 0 0 auto;
}
/* Sección central: Fecha y hora */
.navbar-center {
display: none;
flex: 1 1 auto;
justify-content: center;
pointer-events: none;
}
/* Sección derecha: Menú y usuario */
.navbar-right {
display: flex;
align-items: center;
flex: 0 0 auto;
gap: var(--spacing-xs);
}
@media (min-width: 992px) {
.navbar-center {
display: flex;
}
}
.navbar-brand {
display: flex;
align-items: center;
gap: var(--spacing-sm);
color: var(--color-text-primary);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
}
.navbar-brand:hover {
color: var(--color-primary);
}
.brand-text {
letter-spacing: 0.3px;
max-width: 180px;
line-height: 1.2;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.brand-text {
max-width: 250px;
font-size: 1rem;
}
}
@media (min-width: 1200px) {
.brand-text {
max-width: none;
font-size: 1.1rem;
}
}
.fire-icon {
font-size: 1.5rem;
}
.navbar-logo {
height: 50px;
width: auto;
border-radius: var(--radius-sm);
object-fit: contain;
border: 1px solid var(--color-border);
transition: all 0.2s ease;
background: var(--color-bg);
padding: 2px;
}
@media (min-width: 768px) {
.navbar-logo {
height: 55px;
}
}
@media (min-width: 1200px) {
.navbar-logo {
height: 60px;
}
}
.navbar-logo:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Fecha y Hora en Navbar */
.navbar-datetime {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: 6px 12px;
background: var(--color-bg);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
}
.datetime-date {
font-size: 0.75rem;
color: var(--color-text-secondary);
font-weight: 500;
}
.datetime-time {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-primary);
font-family: 'Courier New', monospace;
letter-spacing: 1px;
}
.navbar-toggle {
display: block;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
padding: 8px;
z-index: 1001;
position: relative;
}
/* La caja visible del boton de menu mide 38x20: muy chica para el dedo (la guia
son 44px). Se agranda SOLO la zona tactil con un pseudo-elemento invisible,
sin cambiar el diseño. No pisa nada: no tiene vecinos clicables cerca. */
.navbar-toggle::after {
content: '';
position: absolute;
inset: -12px -8px;
}
.hamburger {
display: block;
width: 20px;
height: 2px;
background: var(--color-text);
position: relative;
border-radius: 1px;
transition: all 0.3s;
}
.hamburger::before,
.hamburger::after {
content: '';
position: absolute;
width: 20px;
height: 2px;
background: var(--color-text);
left: 0;
border-radius: 1px;
transition: all 0.3s;
}
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }
/* Animación hamburger cuando está activo */
.navbar-toggle.active .hamburger {
background: transparent;
}
.navbar-toggle.active .hamburger::before {
top: 0;
transform: rotate(45deg);
}
.navbar-toggle.active .hamburger::after {
top: 0;
transform: rotate(-45deg);
}
.navbar-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
background: var(--color-surface);
flex-direction: column;
gap: 6px;
padding: var(--spacing-sm);
border-top: 1px solid var(--color-border);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1001;
}
.navbar-menu.active {
display: flex;
}
/* Nav Links - Estilo J-NAV con colores pasteles */
.nav-link {
color: var(--color-text-secondary);
text-decoration: none;
padding: 6px 14px;
border-radius: 9999px;
transition: all 0.2s ease;
font-weight: 500;
font-size: 0.85rem;
border: 1px solid transparent;
background: var(--color-bg);
}
.nav-link:hover {
background: var(--color-surface-hover);
color: var(--color-text);
border-color: var(--color-border);
transform: translateY(-1px);
}
.nav-link.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* ─── Banner nombre cuartel — solo mobile ─── */
.mobile-station-header {
display: none;
}
@media (max-width: 768px) {
.mobile-station-header {
display: block;
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-elevated) 100%);
border-bottom: 1px solid var(--color-border);
padding: 12px 16px;
text-align: center;
}
.mobile-station-content {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.mobile-station-logo {
height: 36px;
width: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-primary);
box-shadow: 0 0 8px rgba(67, 97, 238, 0.3);
}
.mobile-station-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text-primary);
letter-spacing: 0.5px;
line-height: 1.2;
}
}
/* Colores pasteles por sección en navbar */
.nav-link[href*="dashboard"]:not(.active) {
background: var(--color-qrv-bg);
color: var(--color-qrv-dark);
border-color: var(--color-qrv-dark);
}
.nav-link[href*="dashboard"]:hover,
.nav-link[href*="dashboard"].active {
background: var(--color-qrv);
color: white;
border-color: var(--color-qrv);
}
.nav-link[href*="profile"]:not(.active) {
background: var(--color-status-info-bg);
color: var(--color-status-info);
border-color: var(--color-status-info);
}
.nav-link[href*="profile"]:hover,
.nav-link[href*="profile"].active {
background: var(--color-status-info);
color: white;
border-color: var(--color-status-info);
}
.nav-link[href*="admin"]:not(.active) {
background: var(--color-qrt-bg);
color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
.nav-link[href*="admin"]:hover,
.nav-link[href*="admin"].active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.nav-user {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding-top: var(--spacing-sm);
border-top: 1px solid var(--color-border);
margin-top: var(--spacing-xs);
flex-wrap: wrap;
}
.user-name {
font-weight: 500;
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.user-status {
font-size: 0.7rem;
padding: 2px 6px;
border-radius: var(--radius-full);
font-weight: 600;
}
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
.navbar-right {
position: relative;
z-index: 2;
}
.navbar-menu {
display: flex;
position: static;
flex-direction: row;
width: auto;
padding: 0;
background: none;
box-shadow: none;
border-top: none;
align-items: center;
gap: 4px;
}
.nav-user {
padding-top: 0;
border-top: none;
margin-top: 0;
margin-left: var(--spacing-sm);
padding-left: var(--spacing-sm);
border-left: 1px solid var(--color-border);
flex-wrap: nowrap;
}
}
/* ====================================
Alert Bar (Baja dotación)
==================================== */
.alert-bar {
background: linear-gradient(135deg, #ff6b35, #f7931e);
color: #000;
padding: var(--spacing-sm) var(--spacing-md);
text-align: center;
font-weight: 600;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
.alert-icon {
margin-right: var(--spacing-sm);
}
/* ====================================
Container & Layout
==================================== */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.main-content {
flex: 1;
padding: var(--spacing-xl) 0;
}
/* ====================================
Cards - Estilo Madera
==================================== */
.card {
background:
repeating-linear-gradient(
87deg,
transparent 0px,
transparent 1px,
rgba(255,255,255,0.01) 1px,
rgba(255,255,255,0.01) 2px
),
linear-gradient(175deg, #3a2518 0%, #2d1c14 50%, #241510 100%);
border-radius: var(--radius-lg);
box-shadow:
0 4px 20px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.05),
inset 0 -1px 0 rgba(0,0,0,0.2);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
border: 2px solid #4a3525;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-border);
}
.card-title {
margin: 0;
font-size: 1.2rem;
color: var(--color-text-primary);
}
/* ====================================
Status Badges & Buttons
==================================== */
.status-badge,
.user-status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-qrv,
.status-badge-qrv {
background: var(--color-qrv);
color: #000;
}
.status-qap,
.status-badge-qap {
background: var(--color-qap);
color: #000;
}
.status-qrt,
.status-badge-qrt {
background: var(--color-qrt);
color: #fff;
}
/* Status Buttons (grandes para dashboard) */
.status-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
margin: var(--spacing-lg) 0;
}
.status-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-xl) var(--spacing-lg);
border: 3px solid transparent;
border-radius: var(--radius-lg);
font-size: 1.75rem;
font-weight: 700;
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none;
}
.status-btn span {
font-size: 0.85rem;
font-weight: 500;
margin-top: var(--spacing-sm);
opacity: 0.9;
}
.status-btn-qrv {
background: var(--color-qrv-bg);
color: var(--color-qrv);
border-color: var(--color-qrv-dark);
}
.status-btn-qrv:hover,
.status-btn-qrv.active {
background: var(--color-qrv);
color: #000;
transform: scale(1.02);
box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
}
.status-btn-qap {
background: var(--color-qap-bg);
color: var(--color-qap);
border-color: var(--color-qap-dark);
}
.status-btn-qap:hover,
.status-btn-qap.active {
background: var(--color-qap);
color: #000;
transform: scale(1.02);
box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
}
.status-btn-qrt {
background: var(--color-qrt-bg);
color: var(--color-qrt-text);
border-color: var(--color-qrt-dark);
}
.status-btn-qrt:hover,
.status-btn-qrt.active {
background: var(--color-qrt);
color: #fff;
transform: scale(1.02);
box-shadow: 0 0 20px rgba(244, 67, 54, 0.4);
}
/* Indicador de estado activo en móvil */
.status-btn {
position: relative;
}
.status-btn.active::after {
content: '✓';
position: absolute;
top: 6px;
right: 8px;
font-size: 0.85rem;
font-weight: 700;
opacity: 0.9;
}
.status-btn-qrv.active::after {
color: #000;
}
.status-btn-qap.active::after {
color: #000;
}
.status-btn-qrt.active::after {
color: #fff;
}
/* En móvil: indicador más visible */
@media (max-width: 768px) {
.status-btn.active {
border-width: 3px;
border-style: solid;
}
.status-btn-qrv.active {
border-color: #1b5e20;
}
.status-btn-qap.active {
border-color: #e65100;
}
.status-btn-qrt.active {
border-color: #b71c1c;
}
.status-btn.active::after {
font-size: 1rem;
top: 8px;
right: 12px;
}
}
/* Botones deshabilitados por licencia */
.status-btn.disabled {
opacity: 0.25;
pointer-events: none;
cursor: not-allowed;
filter: grayscale(0.8);
}
/* Boton QRT con estado de licencia */
.status-btn-licencia {
pointer-events: none;
cursor: default;
animation: licenciaPulse 3s ease-in-out infinite;
font-size: 1.1rem !important;
letter-spacing: 1px;
}
.status-btn-licencia .licencia-icon {
font-size: 1.3rem;
vertical-align: middle;
}
.status-btn-licencia span {
font-size: 0.72rem !important;
opacity: 0.8;
}
@keyframes licenciaPulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
/* ====================================
Stats Counters
==================================== */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.stat-card {
text-align: center;
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
background:
repeating-linear-gradient(
90deg,
transparent 0px,
transparent 1px,
rgba(255,255,255,0.01) 1px,
rgba(255,255,255,0.01) 2px
),
linear-gradient(175deg, #3a2518 0%, #2d1c14 100%);
box-shadow:
0 4px 15px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.05);
border: 2px solid #4a3525;
}
.stat-number {
font-size: 3rem;
font-weight: 700;
line-height: 1;
}
.stat-label {
font-size: 0.9rem;
color: var(--color-text-secondary);
margin-top: var(--spacing-sm);
font-weight: 500;
}
.stat-card.qrv {
border-left: 4px solid var(--color-qrv);
}
.stat-card.qrv .stat-number { color: var(--color-qrv); }
.stat-card.qap {
border-left: 4px solid var(--color-qap);
}
.stat-card.qap .stat-number { color: var(--color-qap); }
.stat-card.qrt {
border-left: 4px solid var(--color-qrt);
}
.stat-card.qrt .stat-number { color: var(--color-qrt); }
.stat-card.licencia {
border-left: 4px solid var(--color-stat-licencia);
}
.stat-card.licencia .stat-number { color: var(--color-stat-licencia); }
.stat-card.tareas {
border-left: 4px solid var(--color-stat-tareas);
}
.stat-card.tareas .stat-number { color: var(--color-stat-tareas); }
.stat-card.capacitacion {
border-left: 4px solid var(--color-stat-capacitacion);
}
.stat-card.capacitacion .stat-number { color: var(--color-stat-capacitacion); }
.stat-card.compras {
border-left: 4px solid var(--color-stat-compras);
}
.stat-card.compras .stat-number { color: var(--color-stat-compras); }
/* ====================================
Jefatura del Cuerpo
==================================== */
.jefatura-section {
margin-bottom: var(--spacing-lg);
}
.jefatura-section .card-header {
border-bottom: 2px solid var(--color-primary);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-sm);
}
.jefatura-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
@media (max-width: 768px) {
.jefatura-grid {
grid-template-columns: 1fr;
}
}
.jefatura-card {
display: flex;
align-items: center;
gap: var(--spacing-md);
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-elevated) 100%);
border: 2px solid var(--color-primary);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
transition: all 0.3s ease;
}
.jefatura-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.jefatura-card.principal {
border-left: 5px solid var(--color-primary);
}
.jefatura-icon {
font-size: 2.5rem;
line-height: 1;
}
.jefatura-info {
flex: 1;
}
.jefatura-cargo {
font-size: 0.75rem;
color: var(--color-primary);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--spacing-xs);
}
.jefatura-nombre {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: var(--spacing-sm);
}
/* ====================================
Jefes de Sección
==================================== */
.jefes-section {
margin-bottom: var(--spacing-xl);
}
.jefes-section .card-header {
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-sm);
}
.jefes-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-md);
}
@media (max-width: 992px) {
.jefes-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.jefes-grid {
grid-template-columns: 1fr;
}
}
.jefe-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-md);
text-align: center;
transition: all 0.2s ease;
}
.jefe-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
.jefe-icon {
font-size: 1.8rem;
margin-bottom: var(--spacing-xs);
}
.jefe-cargo {
font-size: 0.75rem;
color: var(--color-text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--spacing-sm);
}
.jefe-nombre {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: var(--spacing-sm);
}
.jefe-status {
font-size: 0.7rem;
padding: 2px 8px;
}
/* ====================================
User List (Dashboard)
==================================== */
.user-list-section {
margin-bottom: var(--spacing-xl);
}
.user-list-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
padding: var(--spacing-md);
border-radius: var(--radius-md);
font-weight: 600;
}
.user-list-header.qrv {
background: linear-gradient(135deg, var(--color-qrv-bg) 0%, transparent 100%);
border-left: 4px solid var(--color-qrv);
}
.user-list-header.qap {
background: linear-gradient(135deg, var(--color-qap-bg) 0%, transparent 100%);
border-left: 4px solid var(--color-qap);
}
.user-list-header.qrt {
background: linear-gradient(135deg, var(--color-qrt-bg) 0%, transparent 100%);
border-left: 4px solid var(--color-qrt);
}
.user-list-header.licencia {
background: rgba(81, 45, 168, 0.15);
border-left: 4px solid #512da8;
}
.status-badge-licencia {
background: #512da8;
color: #fff;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
}
/* Licencia tabla desktop */
.licencia-table-wrapper {
overflow-x: auto;
}
.licencia-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.licencia-table thead th {
background: rgba(81, 45, 168, 0.12);
color: var(--color-text-secondary);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 8px 12px;
text-align: left;
border-bottom: 2px solid rgba(81, 45, 168, 0.25);
}
.licencia-table tbody tr {
border-bottom: 1px solid var(--color-border);
transition: background 0.15s;
}
.licencia-table tbody tr:hover {
background: rgba(81, 45, 168, 0.06);
}
.licencia-table td {
padding: 10px 12px;
vertical-align: middle;
color: var(--color-text);
}
.licencia-table-personal {
display: flex;
align-items: center;
gap: 8px;
}
.licencia-table-nombre {
font-weight: 700;
white-space: nowrap;
color: var(--color-text-primary);
}
.licencia-tipo-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.licencia-tipo-badge.ord {
background: #512da8;
color: #fff;
}
.licencia-tipo-badge.ext {
background: #e65100;
color: #fff;
}
.licencia-tipo-badge.salud {
background: var(--color-badge-licencia-salud);
color: #fff;
}
.licencia-tipo-badge.especial {
background: var(--color-badge-licencia-esp);
color: #fff;
}
.lic-estado-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.lic-estado-activa {
background: #2e7d32;
color: #fff;
}
.lic-estado-finalizada {
background: #757575;
color: #fff;
}
.lic-estado-programada {
background: #1565c0;
color: #fff;
}
.licencia-table-dias {
font-weight: 800;
color: var(--color-text-secondary);
text-align: center;
font-size: 1rem;
}
/* Licencia mobile cards - ocultas en desktop */
.licencia-mobile-list {
display: none;
}
.licencia-mobile-card {
padding: 12px 14px;
border-left: 4px solid #512da8;
background: var(--color-surface);
border-radius: var(--radius-sm);
margin-bottom: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.licencia-mobile-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.licencia-mobile-nombre {
font-weight: 700;
font-size: 0.88rem;
color: var(--color-text-primary);
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.licencia-mobile-dates {
display: flex;
gap: 10px;
padding: 8px 10px;
background: var(--color-bg-elevated);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
}
.licencia-mobile-date {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.licencia-mobile-date.dias {
flex: 0 0 auto;
min-width: 44px;
}
.licencia-mobile-label {
font-size: 0.65rem;
text-transform: uppercase;
color: var(--color-text-secondary);
font-weight: 600;
letter-spacing: 0.03em;
}
.licencia-mobile-date strong {
font-size: 0.85rem;
color: var(--color-text);
}
.licencia-mobile-date.dias strong {
color: var(--color-text-secondary);
font-size: 1rem;
}
.user-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.user-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: var(--color-surface);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border);
transition: all 0.2s;
}
.user-card:hover {
background: var(--color-surface-hover);
border-color: var(--color-border-light);
}
.user-card.qrv { border-left: 4px solid var(--color-qrv); }
.user-card.qap { border-left: 4px solid var(--color-qap); }
.user-card.qrt { border-left: 4px solid var(--color-qrt); }
.user-info {
flex: 1;
}
/* Layout horizontal con Grid para alineación perfecta */
.user-info-horizontal {
flex: 1;
display: grid;
grid-template-columns: 200px 1fr 150px 180px;
align-items: center;
gap: 12px;
}
.user-col {
display: flex;
align-items: center;
gap: 6px;
}
/* Columna 1: Jerarquía */
.user-col-jerarquia {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.jerarquia-label {
display: inline-block;
background: var(--color-surface-light);
color: var(--color-text-secondary);
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
border: 1px solid var(--color-border);
}
.cuerdas-badge { background: var(--color-depto-cuerdas-bg); color: var(--color-depto-cuerdas-text); border: 1px solid var(--color-depto-cuerdas); }
.ra-badge { background: rgba(2, 136, 209, 0.25); color: var(--color-depto-ra-text); border: 1px solid var(--color-depto-ra); }
.cat-reserva-badge { background: var(--color-badge-reserva-bg); color: var(--color-badge-reserva); border: 1px solid var(--color-badge-reserva); }
.cat-auxiliar-badge { background: var(--color-badge-auxiliar-bg); color: var(--color-badge-auxiliar); border: 1px solid var(--color-badge-auxiliar); }
.cat-cadete-badge { background: var(--color-badge-cadete-bg); color: var(--color-badge-cadete); border: 1px solid var(--color-badge-cadete); }
/* Columna 2: Username + Nombre */
.user-col-nombre {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.user-username {
font-size: 0.6rem;
color: var(--color-text-muted);
font-family: monospace;
}
.user-name-display {
font-weight: 700;
color: var(--color-text-primary);
font-size: 0.85rem;
}
/* Columna 3: Badges */
.user-col-badges {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
/* Columna 4: Quién cambió */
.user-col-cambio {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
font-size: 0.65rem;
color: var(--color-text-secondary);
}
.cambio-label {
color: var(--color-text-muted);
}
.cambio-nombre {
color: var(--color-text-secondary);
font-weight: 500;
}
.cambio-hora {
color: var(--color-text-muted);
font-size: 0.6rem;
}
/* Info cambio para móvil - oculta por defecto */
.cambio-mobile {
display: none;
}
/* ====================================
Leyenda de Badges
==================================== */
.badges-legend {
margin-top: var(--spacing-lg);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-surface-light);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.badges-legend-title {
font-size: 0.7rem;
font-weight: 600;
color: var(--color-text-muted);
margin-right: var(--spacing-sm);
}
.badges-legend-items {
display: inline-flex;
flex-wrap: wrap;
gap: 8px 16px;
align-items: center;
}
.legend-item {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.65rem;
color: var(--color-text-secondary);
}
.legend-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: var(--radius-full);
font-size: 0.6rem;
}
/* Responsive - más compacto en móvil */
@media (max-width: 768px) {
.badges-legend {
padding: var(--spacing-xs) var(--spacing-sm);
}
.badges-legend-title {
display: block;
margin-bottom: 4px;
}
.badges-legend-items {
gap: 6px 12px;
}
.legend-item {
font-size: 0.6rem;
}
.legend-icon {
width: 16px;
height: 16px;
font-size: 0.55rem;
}
}
.user-actions {
display: flex;
gap: 4px;
}
/* Mini status buttons para cambiar estado de otro */
.mini-status-btn {
width: 32px;
height: 32px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: 0.6rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.mini-status-btn.qrv {
background: var(--color-qrv-bg);
/* la variante -text existe para esto: el color pleno sobre su propio
tinte daba 4,3:1 en tema oscuro */
color: var(--color-qrv-text);
border-color: var(--color-qrv-dark);
}
.mini-status-btn.qrv:hover {
background: var(--color-qrv);
color: #000;
}
.mini-status-btn.qap {
background: var(--color-qap-bg);
/* la variante -text existe para esto: el color pleno sobre su propio
tinte daba 4,3:1 en tema oscuro */
color: var(--color-qap-text);
border-color: var(--color-qap-dark);
}
.mini-status-btn.qap:hover {
background: var(--color-qap);
color: #000;
}
.mini-status-btn.qrt {
background: var(--color-qrt-bg);
color: var(--color-qrt-text);
border-color: var(--color-qrt-dark);
}
.mini-status-btn.qrt:hover {
background: var(--color-qrt);
color: #fff;
}
/* ====================================
GPS Coords Bar (Dashboard)
==================================== */
.gps-coords-bar {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: 8px 12px;
background: #1a2332;
border-radius: var(--radius-md);
font-size: 0.82rem;
color: #b0bec5;
border: 1px solid #2a3a4a;
margin-bottom: var(--spacing-sm);
font-family: 'Courier New', monospace;
}
.gps-coords-bar.active {
border-color: #4caf50;
background: #162216;
}
.gps-coords-icon {
font-size: 0.9rem;
}
.gps-coords-label {
font-weight: 700;
font-family: var(--font-family, inherit);
color: #4caf50;
}
.gps-coords-value {
letter-spacing: 0.3px;
color: #cfd8dc;
}
.gps-coords-bar.active .gps-coords-value {
color: #e8f5e9;
}
.gps-coords-accuracy {
color: #78909c;
font-size: 0.72rem;
}
/* GPS bar siempre oscura en todos los temas */
[data-theme="light"] .gps-coords-bar,
[data-theme="medium"] .gps-coords-bar {
background: #1b2838;
border-color: #2c3e50;
color: #b0bec5;
}
[data-theme="light"] .gps-coords-bar.active,
[data-theme="medium"] .gps-coords-bar.active {
background: #162216;
border-color: #4caf50;
}
[data-theme="light"] .gps-coords-label,
[data-theme="medium"] .gps-coords-label { color: #4caf50; }
[data-theme="light"] .gps-coords-value,
[data-theme="medium"] .gps-coords-value { color: #cfd8dc; }
[data-theme="light"] .gps-coords-bar.active .gps-coords-value,
[data-theme="medium"] .gps-coords-bar.active .gps-coords-value { color: #e8f5e9; }
[data-theme="light"] .gps-coords-accuracy,
[data-theme="medium"] .gps-coords-accuracy { color: #78909c; }
.gps-copy-btn {
background: none;
border: none;
color: #78909c;
font-size: 0.82rem;
cursor: pointer;
padding: 2px 4px;
margin-left: 4px;
opacity: 0.5;
transition: opacity 0.2s;
}
.gps-copy-btn:hover { opacity: 1; }
/* ====================================
Stats Bar (Sutil)
==================================== */
.stats-subtle {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
padding: var(--spacing-md);
background: var(--color-bg-elevated);
border-radius: var(--radius-md);
font-size: 0.85rem;
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
}
.stats-subtle-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.stats-bar {
display: flex;
height: 8px;
border-radius: var(--radius-full);
overflow: hidden;
background: var(--color-border);
width: 80px;
}
.stats-bar-segment {
height: 100%;
}
.stats-bar-segment.qrv { background: var(--color-qrv); }
.stats-bar-segment.qap { background: var(--color-qap); }
.stats-bar-segment.qrt { background: var(--color-qrt); }
/* ====================================
Buttons - Estilo Unificado Relajante
==================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
border: none;
border-radius: 10px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 1px 3px rgba(0,0,0,0.08),
0 4px 6px rgba(0,0,0,0.04);
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
pointer-events: none;
}
.btn:hover {
transform: translateY(-2px);
box-shadow:
0 4px 8px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.08),
0 12px 24px rgba(0,0,0,0.04);
}
.btn:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0,0,0,0.1),
inset 0 1px 3px rgba(0,0,0,0.1);
}
/* Primary Button - Azul Acero Elegante */
.btn-primary {
background: linear-gradient(145deg, #5c7a99 0%, #3d5a73 100%);
color: white;
border: none;
box-shadow:
0 2px 4px rgba(61, 90, 115, 0.2),
0 4px 8px rgba(61, 90, 115, 0.15),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-primary:hover {
background: linear-gradient(145deg, #6b8bab 0%, #4a6d8a 100%);
color: white;
box-shadow:
0 4px 8px rgba(61, 90, 115, 0.25),
0 8px 16px rgba(61, 90, 115, 0.2),
0 12px 24px rgba(61, 90, 115, 0.1);
}
/* Secondary Button - Adaptable al tema */
.btn-secondary {
background: linear-gradient(145deg, var(--color-surface-light) 0%, var(--color-surface) 100%);
color: var(--color-text);
border: 1px solid var(--color-border);
box-shadow:
0 1px 3px rgba(0,0,0,0.08),
0 2px 6px rgba(0,0,0,0.05),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-secondary:hover {
background: linear-gradient(145deg, var(--color-surface-hover) 0%, var(--color-surface-light) 100%);
color: var(--color-text-primary);
border-color: var(--color-border-light);
box-shadow:
0 2px 6px rgba(0,0,0,0.1),
0 4px 12px rgba(0,0,0,0.08);
}
/* Outline Button - Azul Acero Elegante */
.btn-outline {
background: transparent;
border: 2px solid #5c7a99;
color: #5c7a99;
box-shadow: none;
}
.btn-outline:hover {
background: rgba(92, 122, 153, 0.12);
border-color: #6b8bab;
color: #6b8bab;
box-shadow: 0 2px 8px rgba(92, 122, 153, 0.2);
}
/* Botón Link - Sin fondo */
.btn-link {
background: transparent;
color: #5c7a99;
border: none;
box-shadow: none;
padding: 8px 12px;
}
.btn-link:hover {
background: rgba(92, 122, 153, 0.08);
color: #4a6d8a;
text-decoration: underline;
transform: none;
box-shadow: none;
}
/* Tamaños de botones */
.btn-sm {
padding: 6px 14px;
font-size: 0.8rem;
border-radius: 8px;
}
.btn-lg {
padding: 14px 28px;
font-size: 1rem;
border-radius: 12px;
}
.btn-block {
width: 100%;
}
/* Botones de colores suaves */
.btn-success {
background: linear-gradient(145deg, #66bb6a 0%, #43a047 100%);
color: white;
box-shadow:
0 2px 4px rgba(67, 160, 71, 0.2),
0 4px 8px rgba(67, 160, 71, 0.15);
}
.btn-success:hover {
background: linear-gradient(145deg, #81c784 0%, #66bb6a 100%);
color: white;
box-shadow:
0 4px 8px rgba(67, 160, 71, 0.25),
0 8px 16px rgba(67, 160, 71, 0.15);
}
.btn-warning {
background: linear-gradient(145deg, #ffb74d 0%, #ffa726 100%);
color: #5d4037;
box-shadow:
0 2px 4px rgba(255, 167, 38, 0.2),
0 4px 8px rgba(255, 167, 38, 0.15);
}
.btn-warning:hover {
background: linear-gradient(145deg, #ffcc80 0%, #ffb74d 100%);
color: #4e342e;
box-shadow:
0 4px 8px rgba(255, 167, 38, 0.25),
0 8px 16px rgba(255, 167, 38, 0.15);
}
.btn-danger {
background: linear-gradient(145deg, #ef5350 0%, #e53935 100%);
color: white;
box-shadow:
0 2px 4px rgba(229, 57, 53, 0.2),
0 4px 8px rgba(229, 57, 53, 0.15);
}
.btn-danger:hover {
background: linear-gradient(145deg, #e57373 0%, #ef5350 100%);
color: white;
box-shadow:
0 4px 8px rgba(229, 57, 53, 0.25),
0 8px 16px rgba(229, 57, 53, 0.15);
}
.btn-info {
background: linear-gradient(145deg, #4fc3f7 0%, #29b6f6 100%);
color: #01579b;
box-shadow:
0 2px 4px rgba(41, 182, 246, 0.2),
0 4px 8px rgba(41, 182, 246, 0.15);
}
.btn-info:hover {
background: linear-gradient(145deg, #4fc3f7 0%, #0288d1 100%);
color: #01579b;
}
/* Botón con icono */
.btn-icon {
padding: 10px;
min-width: 42px;
}
/* Botones deshabilitados */
.btn:disabled,
.btn.disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* ====================================
Botones de ESTADO (QRV, QAP, QRT)
Estos mantienen su estilo especial
==================================== */
.btn-status-qrv,
.status-btn.qrv {
background: var(--color-qrv) !important;
color: white !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-status-qrv:hover,
.status-btn.qrv:hover {
background: var(--color-qrv-dark) !important;
}
.btn-status-qap,
.status-btn.qap {
background: var(--color-qap) !important;
color: #000 !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-status-qap:hover,
.status-btn.qap:hover {
background: var(--color-qap-dark) !important;
}
.btn-status-qrt,
.status-btn.qrt {
background: var(--color-qrt) !important;
color: white !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-status-qrt:hover,
.status-btn.qrt:hover {
background: var(--color-qrt-dark) !important;
}
/* ====================================
Forms
==================================== */
.form-group {
margin-bottom: var(--spacing-lg);
}
.form-label {
display: block;
margin-bottom: var(--spacing-sm);
font-weight: 500;
font-size: 0.9rem;
color: var(--color-text);
}
.form-control {
width: 100%;
padding: var(--spacing-md);
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 1rem;
background: var(--color-bg-elevated);
color: var(--color-text);
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2);
}
.form-control::placeholder {
color: var(--color-text-muted);
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239e9e9e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
padding-right: 2.5rem;
}
.form-check {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.form-check-input {
width: 1.25rem;
height: 1.25rem;
accent-color: var(--color-primary);
}
.form-text {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin-top: var(--spacing-xs);
}
.form-error {
color: var(--color-qrt);
font-size: 0.85rem;
margin-top: var(--spacing-xs);
}
textarea.form-control {
min-height: 120px;
resize: vertical;
}
/* ====================================
Permisos de Sección (Admin User Form)
==================================== */
.permissions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-md);
}
.permission-card {
background: var(--color-surface);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
transition: all 0.2s ease;
overflow: hidden;
}
.permission-card:hover {
border-color: var(--color-accent-permission);
box-shadow: 0 4px 12px rgba(0, 151, 167, 0.15);
}
.permission-card:has(.permission-checkbox:checked) {
border-color: var(--color-accent-permission);
background: linear-gradient(145deg, rgba(0, 151, 167, 0.08) 0%, transparent 100%);
}
.permission-label {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
padding: var(--spacing-md);
cursor: pointer;
margin: 0;
}
.permission-checkbox {
width: 1.5rem;
height: 1.5rem;
accent-color: var(--color-accent-permission);
margin-top: 4px;
flex-shrink: 0;
}
.permission-content {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
flex: 1;
}
.permission-icon {
font-size: 2rem;
line-height: 1;
}
.permission-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.permission-info strong {
font-size: 1rem;
color: var(--color-text-primary);
}
.permission-info small {
font-size: 0.8rem;
color: var(--color-text-secondary);
line-height: 1.3;
}
/* ====================================
Flash Messages
==================================== */
.flash-container {
padding: var(--spacing-md);
}
.flash {
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-sm);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
}
.flash-success {
background: var(--color-qrv-bg);
color: var(--color-qrv);
border: 1px solid var(--color-qrv-dark);
}
.flash-danger, .flash-error {
background: var(--color-qrt-bg);
color: var(--color-qrt-text);
border: 1px solid var(--color-qrt-dark);
}
.flash-warning {
background: var(--color-qap-bg);
color: var(--color-qap);
border: 1px solid var(--color-qap-dark);
}
.flash-info {
background: rgba(33, 150, 243, 0.15);
color: #1565c0;
border: 1px solid #1976d2;
}
[data-theme="dark"] .flash-info {
color: #64b5f6;
}
.flash-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
opacity: 0.7;
color: inherit;
}
.flash-close:hover {
opacity: 1;
}
/* ====================================
Tables
==================================== */
.table-responsive {
overflow-x: auto;
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.table th,
.table td {
padding: var(--spacing-md);
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.table th {
background: var(--color-bg-elevated);
font-weight: 600;
color: var(--color-text-primary);
}
.table tbody tr:hover {
background: var(--color-surface-hover);
}
.table td {
color: var(--color-text);
}
/* ====================================
Pagination
==================================== */
.pagination {
display: flex;
justify-content: center;
gap: var(--spacing-xs);
margin-top: var(--spacing-xl);
}
.pagination a,
.pagination span {
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--color-text);
background: var(--color-surface);
}
.pagination a:hover {
background: var(--color-surface-hover);
border-color: var(--color-border-light);
}
.pagination .active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.pagination .disabled {
opacity: 0.4;
pointer-events: none;
}
/* ====================================
History Cards (mobile view for historiales)
==================================== */
/* Desktop: mostrar tabla, ocultar cards */
.history-desktop { display: block; }
.history-mobile { display: none; }
@media (max-width: 768px) {
/* Mobile: ocultar tabla, mostrar cards */
.history-desktop { display: none !important; }
.history-mobile { display: block; }
.history-card {
padding: var(--spacing-sm) var(--spacing-md);
border-bottom: 1px solid var(--color-border);
}
.history-card:last-child {
border-bottom: none;
}
.history-card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.history-card-date {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.history-card-change {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.8rem;
}
.history-card-body {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.history-card-body strong {
font-size: 0.9rem;
}
.history-card-body small {
font-size: 0.75rem;
}
.history-card-footer {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-top: 2px;
}
}
/* ====================================
Login Page
==================================== */
.auth-container {
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-lg);
}
.auth-card {
width: 100%;
max-width: 420px;
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--spacing-xl);
border: 1px solid var(--color-border);
}
.auth-header {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.auth-logo {
font-size: 4rem;
margin-bottom: var(--spacing-md);
}
.auth-title {
color: var(--color-primary-light);
margin: 0;
font-size: 1.75rem;
}
.auth-subtitle {
color: var(--color-text-secondary);
font-size: 0.95rem;
margin-top: var(--spacing-xs);
}
/* Ayuda al pie de un campo y nota final de las pantallas de acceso */
.form-hint {
margin: 6px 0 0;
font-size: 0.82rem;
line-height: 1.5;
color: var(--color-text-secondary);
}
.auth-nota {
margin: 14px 0 0;
padding-top: 14px;
border-top: 1px solid var(--color-border);
font-size: 0.82rem;
line-height: 1.55;
color: var(--color-text-secondary);
text-align: center;
}
.auth-links {
text-align: center;
margin-top: var(--spacing-xl);
font-size: 0.9rem;
}
.auth-links a {
color: var(--color-primary-light);
}
.auth-links a:hover {
text-decoration: underline;
}
/* ====================================
Footer - Estilo Madera
==================================== */
.footer {
background:
repeating-linear-gradient(
90deg,
transparent 0px,
transparent 2px,
rgba(0,0,0,0.05) 2px,
rgba(0,0,0,0.05) 4px
),
linear-gradient(180deg, #2d1c14 0%, #1a0f0a 100%);
border-top: 3px solid #4a3525;
padding: var(--spacing-lg);
text-align: center;
font-size: 0.85rem;
color: var(--color-text-secondary);
}
/* ====================================
Utilities
==================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-secondary); }
.text-success { color: var(--color-qrv); }
.text-warning { color: var(--color-qap); }
.text-danger { color: var(--color-qrt); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--spacing-sm); }
.gap-2 { gap: var(--spacing-md); }
.hidden { display: none; }
/* Grid */
.row {
display: flex;
flex-wrap: wrap;
margin: 0 calc(var(--spacing-md) * -1);
}
.col {
flex: 1;
padding: 0 var(--spacing-md);
}
/* El grid estaba al reves de mobile-first: con solo `flex: 1` (o sea base 0%)
las columnas se repartian el ancho en cualquier pantalla y NUNCA apilaban, asi
que en el celular un formulario de 3 columnas quedaba en tres tiras de ~100px.
Base: ancho completo. Recien a 768px se abren a su fraccion. */
.col-md-4,
.col-md-6,
.col-md-8 {
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 768px) {
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}
/* ====================================
User Badges - Estilo Unificado
==================================== */
/* Base común para todos los badges */
.user-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--radius-full);
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
line-height: 1;
min-height: 22px;
}
.badge-icon {
font-size: 0.75rem;
line-height: 1;
}
.badge-text {
display: inline;
font-size: 0.6rem;
}
/* Chofer Badge */
.chofer-badge {
background: var(--color-badge-chofer-bg);
color: var(--color-badge-chofer);
border: 1px solid var(--color-badge-chofer);
}
.dept-badge {
background: var(--color-badge-dept-bg);
color: var(--color-badge-dept);
border: 1px solid var(--color-badge-dept);
}
/* License Tag (read-only display in profile, legajo, etc.) */
.lic-tag {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.6rem;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 500;
background: var(--color-badge-lic-tag-bg);
color: var(--color-badge-lic-tag);
border: 1px solid var(--color-badge-lic-tag);
}
/* License Badges */
.licencia-ord-badge {
background: var(--color-badge-licencia);
color: #fff;
border: 1px solid var(--color-badge-licencia);
}
.licencia-ext-badge {
background: var(--color-badge-licencia-ext);
color: #fff;
border: 1px solid var(--color-badge-licencia-ext);
}
.licencia-salud-badge {
background: var(--color-badge-licencia-salud);
color: #fff;
border: 1px solid var(--color-badge-licencia-salud);
}
.licencia-especial-badge {
background: var(--color-badge-licencia-esp);
color: #fff;
border: 1px solid var(--color-badge-licencia-esp);
}
.suspension-badge {
background: var(--color-badge-suspension);
color: #fff;
border: 1px solid var(--color-badge-suspension);
}
.status-btn-suspension {
pointer-events: none;
cursor: default;
animation: licenciaPulse 3s ease-in-out infinite;
font-size: 1.1rem !important;
letter-spacing: 1px;
}
.status-btn-suspension .licencia-icon {
font-size: 1.3rem;
vertical-align: middle;
}
.status-btn-suspension span {
font-size: 0.72rem !important;
opacity: 0.8;
}
.status-btn-blocked {
pointer-events: none;
cursor: default;
opacity: 0.3;
filter: grayscale(0.8);
}
/* Medical Badges */
.enfermero-badge {
background: linear-gradient(135deg, #00bcd4, #0097a7);
color: #fff;
}
.doctor-badge {
background: linear-gradient(135deg, #e91e63, #c2185b);
color: #fff;
}
/* Registro de conducir vencido — visible para todo el cuerpo */
.registro-vencido-badge {
background: linear-gradient(135deg, #d32f2f, #8e1b1b);
color: #fff;
border: 1px solid #ff6659;
animation: guard-pulse 2s infinite;
}
/* Guard Badge */
.guard-badge {
background: linear-gradient(135deg, #ff6b35, #f7931e);
color: #000;
animation: guard-pulse 2s infinite;
}
@keyframes guard-pulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
/* Guardia apagado cuando está QRT */
.user-card.qrt .guard-badge {
background: linear-gradient(135deg, #9e9e9e, #757575);
color: #444;
opacity: 0.6;
animation: none;
box-shadow: none;
}
.user-card.qrt .guard-badge .badge-text {
text-decoration: line-through;
opacity: 0.7;
}
.mini-guard-btn {
width: 32px;
height: 32px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s;
background: var(--color-surface-light);
}
.mini-guard-btn:hover {
background: rgba(255, 107, 53, 0.2);
border-color: #ff6b35;
}
.mini-guard-btn.active {
background: linear-gradient(135deg, #ff6b35, #f7931e);
border-color: #ff6b35;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
}
/* Jefe Badges */
.jefe-badge {
background: linear-gradient(135deg, var(--color-seccion-jefe), color-mix(in srgb, var(--color-seccion-jefe), #000 20%));
color: #fff;
animation: jefe-glow 2s infinite;
}
.segundo-jefe-badge {
background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
color: #000;
}
.seccion-badge {
background: linear-gradient(135deg, #5c6bc0, #3f51b5);
color: #fff;
}
@keyframes jefe-glow {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
/* ====================================
Admin specific
==================================== */
.admin-nav {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-border);
}
.admin-nav a {
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--color-text);
font-size: 0.9rem;
border: 1px solid var(--color-border);
transition: all 0.2s;
}
.admin-nav a:hover {
background: var(--color-surface-hover);
border-color: var(--color-border-light);
}
.admin-nav a.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* ====================================
Responsive adjustments
==================================== */
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.stat-number {
font-size: 1.5rem;
}
.stat-card {
padding: 8px 4px;
}
.stat-label {
font-size: 0.68rem;
}
.status-buttons {
grid-template-columns: 1fr;
}
.user-card {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.user-info-horizontal {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 100%;
}
.user-col {
width: 100%;
}
.user-col-jerarquia,
.user-col-nombre,
.user-col-badges,
.user-col-cambio {
min-width: auto;
}
.user-actions {
width: 100%;
justify-content: flex-start;
}
.mini-status-btn {
flex: 1;
}
}
@media (min-width: 768px) {
.stats-subtle {
justify-content: flex-end;
}
}
/* ====================================
Scrollbar (Dark Theme)
==================================== */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-border-light);
}
/* ====================================
Sistema de Emergencias - Estilo J-NAV
==================================== */
/* Botón de Emergencia */
.btn-emergency-trigger {
background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
border: 2px solid #ff5252;
color: white;
font-weight: 700;
padding: 8px 18px;
border-radius: 9999px;
animation: emergency-pulse 1.5s infinite;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.85rem;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4), 0 0 20px rgba(244, 67, 54, 0.2);
position: relative;
overflow: hidden;
}
.btn-emergency-trigger::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: emergency-shine 2s infinite;
}
.btn-emergency-trigger:hover {
background: linear-gradient(135deg, #ff5252 0%, #f44336 100%);
color: white;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 15px rgba(244, 67, 54, 0.5), 0 0 30px rgba(244, 67, 54, 0.3);
border-color: #ff8a80;
}
@keyframes emergency-pulse {
0%, 100% { opacity: 0.9; transform: scale(1); }
50% { opacity: 1; transform: scale(1.01); }
}
@keyframes emergency-shine {
0% { left: -100%; }
50%, 100% { left: 100%; }
}
/* Botón Inventario Chequeo */
.btn-inventario-chequeo {
background: rgba(21, 101, 192, 0.12);
border: 1px solid #1565c0;
color: #0d47a1;
font-weight: 500;
padding: 6px 14px;
border-radius: 9999px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.btn-inventario-chequeo:hover {
background: #1565c0;
color: white;
border-color: #1565c0;
transform: translateY(-1px);
}
[data-theme="dark"] .btn-inventario-chequeo {
background: rgba(21, 101, 192, 0.18);
color: #64b5f6;
border-color: #1976d2;
}
[data-theme="dark"] .btn-inventario-chequeo:hover {
background: #1976d2;
color: white;
}
[data-theme="light"] .btn-inventario-chequeo,
[data-theme="medium"] .btn-inventario-chequeo {
color: #0d47a1;
border-color: #1565c0;
background: rgba(21, 101, 192, 0.1);
}
/* Botón Próxima Capacitación */
.btn-proxima-cap {
background: rgba(0, 151, 167, 0.12);
border: 1px solid #0097a7;
color: #006064;
font-weight: 500;
padding: 6px 14px;
border-radius: 9999px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.btn-proxima-cap:hover {
background: #0097a7;
color: white;
border-color: #0097a7;
transform: translateY(-1px);
}
[data-theme="dark"] .btn-proxima-cap {
background: rgba(0, 151, 167, 0.18);
color: #4dd0e1;
border-color: #00acc1;
}
[data-theme="dark"] .btn-proxima-cap:hover {
background: #00acc1;
color: white;
}
[data-theme="light"] .btn-proxima-cap,
[data-theme="medium"] .btn-proxima-cap {
color: #006064;
border-color: #00838f;
background: rgba(0, 131, 143, 0.1);
}
.btn-proxima-cap-urgente {
background: #f9a825 !important;
border-color: #f57f17 !important;
color: #000 !important;
font-weight: 700 !important;
animation: capBtnPulse 1.5s ease-in-out infinite;
}
.btn-proxima-cap-urgente:hover {
background: #f57f17 !important;
}
[data-theme="light"] .btn-proxima-cap-urgente,
[data-theme="medium"] .btn-proxima-cap-urgente {
background: #e65100 !important;
border-color: #bf360c !important;
color: #fff !important;
}
@keyframes capBtnPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.85; transform: scale(1.02); }
}
/* Botón Reportar Fallo */
.btn-report-fallo {
background: rgba(0, 151, 167, 0.12);
border: 1px solid #0097a7;
color: #006064;
font-weight: 500;
padding: 6px 14px;
border-radius: 9999px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.btn-report-fallo:hover {
background: #0097a7;
color: white;
border-color: #0097a7;
transform: translateY(-1px);
}
[data-theme="dark"] .btn-report-fallo {
background: rgba(0, 151, 167, 0.18);
color: #4dd0e1;
border-color: #00acc1;
}
[data-theme="dark"] .btn-report-fallo:hover {
background: #00acc1;
color: white;
}
/* Boton Quemas (sutil, ambar tenue) */
.btn-quemas {
background: rgba(230, 126, 34, 0.10);
border: 1px solid rgba(230, 126, 34, 0.40);
color: #b45309;
font-weight: 500;
padding: 6px 14px;
border-radius: 9999px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.btn-quemas:hover {
background: rgba(230, 126, 34, 0.92);
color: #fff;
border-color: rgba(230, 126, 34, 0.92);
transform: translateY(-1px);
}
[data-theme="dark"] .btn-quemas {
background: rgba(230, 126, 34, 0.14);
color: #f0a868;
border-color: rgba(230, 126, 34, 0.42);
}
[data-theme="dark"] .btn-quemas:hover {
background: #e67e22;
color: #fff;
}
[data-theme="light"] .btn-quemas,
[data-theme="medium"] .btn-quemas {
color: #b45309;
}
/* Boton Combustible (dorado) */
.btn-combustible {
background: rgba(224, 168, 0, 0.12);
border: 1px solid rgba(224, 168, 0, 0.55);
color: #8a6d00;
font-weight: 500;
padding: 6px 14px;
border-radius: 9999px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.btn-combustible:hover {
background: #e0a800;
color: #1a1a1a;
border-color: #e0a800;
transform: translateY(-1px);
}
[data-theme="dark"] .btn-combustible {
background: rgba(224, 168, 0, 0.16);
color: #ffd54f;
border-color: rgba(224, 168, 0, 0.5);
}
[data-theme="dark"] .btn-combustible:hover {
background: #e0a800;
color: #1a1a1a;
}
/* Boton Orden Interno */
.btn-orden-interno {
background: rgba(156, 39, 176, 0.12);
border: 1px solid #9c27b0;
color: #6a1b9a;
font-weight: 500;
padding: 6px 14px;
border-radius: 9999px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.btn-orden-interno:hover {
background: #9c27b0;
color: white;
border-color: #9c27b0;
transform: translateY(-1px);
}
[data-theme="dark"] .btn-orden-interno {
background: rgba(156, 39, 176, 0.18);
color: #ce93d8;
border-color: #ab47bc;
}
[data-theme="dark"] .btn-orden-interno:hover {
background: #ab47bc;
color: white;
}
/* =============================================
MODAL DE EMERGENCIA - Sistema de 2 pasos
Optimizado para móviles
============================================= */
.emergency-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.emergency-modal-content {
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
border-radius: 20px;
max-width: 500px;
width: 100%;
max-height: 95vh;
overflow-y: auto;
padding: 20px;
border: 3px solid #c62828;
box-shadow: 0 0 50px rgba(198, 40, 40, 0.5);
}
.emergency-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(255,255,255,0.1);
}
.emergency-modal-header h2 {
color: #ff4444;
margin: 0;
font-size: 1.3rem;
text-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
}
.emergency-modal-close {
background: rgba(255,255,255,0.1);
border: none;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
padding: 5px 12px;
border-radius: 50%;
line-height: 1;
transition: all 0.2s;
}
.emergency-modal-close:hover {
background: #c62828;
}
/* Pasos del modal */
.emergency-step {
animation: fadeInStep 0.3s ease;
}
@keyframes fadeInStep {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.emergency-step-title {
color: #fff;
text-align: center;
font-size: 1.1rem;
margin-bottom: 20px;
font-weight: 600;
}
/* Botones de Categoría */
.emergency-categories {
display: flex;
flex-direction: column;
gap: 12px;
}
.emergency-category-btn {
display: flex;
align-items: center;
gap: 15px;
width: 100%;
padding: 18px 20px;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
border: 2px solid rgba(255,255,255,0.2);
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease;
text-align: left;
}
.emergency-category-btn:hover {
background: linear-gradient(135deg, rgba(198, 40, 40, 0.3) 0%, rgba(198, 40, 40, 0.1) 100%);
border-color: #c62828;
transform: translateX(5px);
}
.emergency-category-btn:active {
transform: scale(0.98);
}
.category-icon {
font-size: 2.5rem;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.3);
border-radius: 12px;
}
.category-name {
flex: 1;
color: #fff;
font-size: 1.1rem;
font-weight: 600;
}
.category-codes {
color: rgba(255,255,255,0.5);
font-size: 0.85rem;
}
/* Botón volver */
.emergency-back-btn {
background: none;
border: none;
color: rgba(255,255,255,0.7);
font-size: 0.95rem;
cursor: pointer;
padding: 10px 0;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 5px;
transition: color 0.2s;
}
.emergency-back-btn:hover {
color: #fff;
}
/* Lista de Códigos */
.emergency-codes-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 300px;
overflow-y: auto;
padding-right: 5px;
}
.emergency-codes-list::-webkit-scrollbar {
width: 6px;
}
.emergency-codes-list::-webkit-scrollbar-track {
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
.emergency-codes-list::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.3);
border-radius: 3px;
}
.emergency-code-option {
cursor: pointer;
}
.emergency-code-option input[type="radio"] {
display: none;
}
.emergency-code-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: rgba(255,255,255,0.05);
border: 2px solid rgba(255,255,255,0.1);
border-radius: 12px;
transition: all 0.2s ease;
}
.emergency-code-card:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.3);
}
.emergency-code-option input[type="radio"]:checked + .emergency-code-card {
background: linear-gradient(135deg, rgba(198, 40, 40, 0.4) 0%, rgba(198, 40, 40, 0.2) 100%);
border-color: #c62828;
box-shadow: 0 0 20px rgba(198, 40, 40, 0.3);
}
.code-icon {
font-size: 1.8rem;
width: 45px;
text-align: center;
}
.code-info {
flex: 1;
}
.code-number {
display: block;
color: #ff8a80;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 2px;
}
.code-name {
display: block;
color: #fff;
font-size: 0.95rem;
font-weight: 500;
}
.code-check {
width: 24px;
height: 24px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
transition: all 0.2s;
}
.emergency-code-option input[type="radio"]:checked + .emergency-code-card .code-check {
background: #4caf50;
border-color: #4caf50;
color: #fff;
}
/* Sección de detalles */
.emergency-details-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
animation: fadeInStep 0.3s ease;
}
.emergency-details-section .form-label {
color: rgba(255,255,255,0.8);
font-size: 0.9rem;
margin-bottom: 8px;
}
.emergency-details-section .form-control {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
border-radius: 10px;
padding: 12px 15px;
}
.emergency-details-section .form-control::placeholder {
color: rgba(255,255,255,0.4);
}
.emergency-details-section .form-control:focus {
background: rgba(255,255,255,0.15);
border-color: #c62828;
outline: none;
box-shadow: 0 0 10px rgba(198, 40, 40, 0.3);
}
/* Acciones del modal */
.emergency-modal-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.emergency-modal-actions .btn-secondary {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
}
.emergency-modal-actions .btn-secondary:hover {
background: rgba(255,255,255,0.2);
}
.emergency-submit-btn {
background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%);
border: none;
color: #fff;
padding: 15px 25px;
font-size: 1rem;
font-weight: 700;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(198, 40, 40, 0.4);
animation: pulseBtn 2s infinite;
}
@keyframes pulseBtn {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.02); }
}
.emergency-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(198, 40, 40, 0.6);
}
.emergency-submit-btn:active {
transform: translateY(0);
}
/* Responsive para móviles */
@media (max-width: 480px) {
.emergency-modal {
padding: 5px;
}
.emergency-modal-content {
padding: 15px;
max-height: 98vh;
border-radius: 15px;
}
.emergency-modal-header h2 {
font-size: 1.1rem;
}
.emergency-category-btn {
padding: 15px;
}
.category-icon {
font-size: 2rem;
width: 50px;
height: 50px;
}
.category-name {
font-size: 1rem;
}
.emergency-codes-list {
max-height: 250px;
}
.emergency-code-card {
padding: 12px;
}
.code-icon {
font-size: 1.5rem;
width: 40px;
}
.emergency-modal-actions {
flex-direction: column;
}
.emergency-modal-actions .btn {
width: 100%;
justify-content: center;
}
.emergency-submit-btn {
order: -1;
}
}
/* Overlay de Alerta de Emergencia */
.emergency-alert-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(139, 0, 0, 0.95);
z-index: 20000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
animation: emergency-bg-flash 1s infinite;
}
@keyframes emergency-bg-flash {
0%, 100% { background: rgba(139, 0, 0, 0.95); }
50% { background: rgba(180, 0, 0, 0.95); }
}
.emergency-alert-content {
background: var(--color-bg);
border-radius: var(--border-radius-lg);
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: var(--spacing-xl);
text-align: center;
border: 3px solid #ff0000;
box-shadow: 0 0 50px rgba(255, 0, 0, 0.5);
position: relative;
}
/* Botón para minimizar overlay de emergencia - MUY VISIBLE */
.emergency-minimize-btn {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
color: white;
border: 2px solid #64B5F6;
padding: 12px 24px;
border-radius: 30px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
z-index: 10;
box-shadow: 0 4px 15px rgba(33, 150, 243, 0.5), 0 0 30px rgba(33, 150, 243, 0.3);
animation: dashboard-btn-pulse 1.5s infinite;
text-transform: uppercase;
letter-spacing: 1px;
}
.emergency-minimize-btn::before {
content: '🏠 ';
}
@keyframes dashboard-btn-pulse {
0%, 100% {
transform: translateX(-50%) scale(1);
opacity: 0.9;
}
50% {
transform: translateX(-50%) scale(1.05);
opacity: 1;
}
}
.emergency-minimize-btn:hover {
background: linear-gradient(135deg, #42A5F5 0%, #1E88E5 100%);
border-color: #90CAF9;
box-shadow: 0 6px 25px rgba(33, 150, 243, 0.7), 0 0 50px rgba(33, 150, 243, 0.4);
transform: translateX(-50%) scale(1.08);
}
/* Banner minimizado de emergencia */
.emergency-mini-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(90deg, #8b0000, #dc3545, #8b0000);
background-size: 200% 100%;
animation: emergency-banner-gradient 2s ease infinite;
z-index: 19500;
padding: 12px 20px;
box-shadow: 0 4px 20px rgba(220, 53, 69, 0.5);
}
@keyframes emergency-banner-gradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.emergency-mini-content {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.emergency-mini-icon {
font-size: 1.5rem;
animation: emergency-icon-bounce 0.5s infinite alternate;
}
.emergency-mini-text {
color: white;
font-weight: bold;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.emergency-mini-stats {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
background: rgba(0, 0, 0, 0.3);
padding: 4px 12px;
border-radius: 15px;
}
.emergency-mini-expand {
background: white;
color: #dc3545;
border: none;
padding: 6px 16px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: bold;
cursor: pointer;
transition: all 0.2s;
}
.emergency-mini-expand:hover {
background: #fff3cd;
transform: scale(1.05);
}
@media (max-width: 600px) {
.emergency-mini-content {
flex-direction: column;
gap: 8px;
}
.emergency-mini-stats {
font-size: 0.8rem;
}
.emergency-minimize-btn {
top: 10px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
font-size: 0.85rem;
}
@keyframes dashboard-btn-pulse {
0%, 100% {
transform: translateX(-50%) scale(1);
opacity: 0.9;
}
50% {
transform: translateX(-50%) scale(1.03);
opacity: 1;
}
}
.emergency-minimize-btn:hover {
transform: translateX(-50%) scale(1.05);
}
}
.emergency-alert-icon {
font-size: 5rem;
animation: emergency-icon-bounce 0.5s infinite alternate;
}
@keyframes emergency-icon-bounce {
from { transform: scale(1); }
to { transform: scale(1.2); }
}
.emergency-alert-title {
color: #ff0000;
font-size: 2.5rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
margin: var(--spacing-sm) 0;
animation: emergency-text-flash 0.5s infinite;
}
@keyframes emergency-text-flash {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.emergency-alert-type {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: var(--spacing-md);
}
.emergency-alert-details {
background: var(--color-surface);
border-radius: var(--border-radius);
padding: var(--spacing-md);
margin-bottom: var(--spacing-md);
text-align: left;
}
.emergency-alert-details p {
margin: var(--spacing-xs) 0;
}
.emergency-alert-meta {
color: var(--color-text-secondary);
font-size: 0.9rem;
margin-top: var(--spacing-sm) !important;
}
/* Sección de Respuesta */
.emergency-response-section {
margin: var(--spacing-lg) 0;
}
.emergency-response-section p {
margin-bottom: var(--spacing-md);
font-weight: bold;
color: var(--color-text);
}
.emergency-response-buttons {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.emergency-response-btn {
width: 100%;
padding: var(--spacing-md);
font-size: 1.1rem;
font-weight: bold;
}
.emergency-confirmed-section {
padding: var(--spacing-lg);
background: rgba(40, 167, 69, 0.1);
border-radius: var(--border-radius);
margin: var(--spacing-md) 0;
}
.emergency-confirmed-section p {
font-size: 1.2rem;
font-weight: bold;
margin: 0;
}
/* Lista de Confirmaciones */
.emergency-acks-section {
margin-top: var(--spacing-lg);
text-align: left;
}
.emergency-acks-section h4 {
color: var(--color-text-secondary);
font-size: 0.9rem;
margin-bottom: var(--spacing-sm);
}
.emergency-ack-list {
max-height: 150px;
overflow-y: auto;
}
.emergency-ack-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--color-surface);
border-radius: var(--border-radius-sm);
margin-bottom: var(--spacing-xs);
font-size: 0.85rem;
}
.emergency-ack-item.en_camino {
border-left: 3px solid var(--color-qrv);
}
.emergency-ack-item.llegando {
border-left: 3px solid var(--color-qap);
}
.emergency-ack-item.no_disponible {
border-left: 3px solid var(--color-qrt);
}
.emergency-ack-item.alarmed {
border-left: 3px solid #ff9800;
}
.emergency-ack-item.confirmed {
border-left: 3px solid var(--color-qrv);
}
.ack-user {
font-weight: 500;
flex: 1;
}
.ack-response {
color: var(--color-text-secondary);
margin: 0 var(--spacing-sm);
}
.ack-time {
color: var(--color-text-muted);
font-size: 0.8rem;
}
/* Responsive para Emergency */
@media (min-width: 480px) {
.emergency-response-buttons {
flex-direction: row;
flex-wrap: wrap;
}
.emergency-response-btn {
flex: 1;
min-width: 120px;
}
}
/* ====================================
Panel de Emergencia en Dashboard
==================================== */
.emergency-dashboard-panel {
background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(139, 0, 0, 0.2));
border: 2px solid var(--color-primary);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
animation: emergency-panel-pulse 2s infinite;
}
@keyframes emergency-panel-pulse {
0%, 100% { border-color: var(--color-primary); opacity: 0.9; }
50% { border-color: #ff4444; opacity: 1; }
}
.emergency-dashboard-header {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid rgba(220, 53, 69, 0.3);
}
.emergency-dashboard-icon {
font-size: 3rem;
animation: emergency-icon-bounce 0.5s infinite alternate;
}
.emergency-dashboard-info {
flex: 1;
}
.emergency-dashboard-info h3 {
margin: 0;
font-size: 1.3rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.emergency-dashboard-location {
margin: var(--spacing-xs) 0 0 0;
color: var(--color-text-secondary);
}
.emergency-dashboard-time {
background: var(--color-surface);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius);
font-weight: bold;
}
.emergency-dashboard-responders {
margin-bottom: var(--spacing-md);
}
.emergency-dashboard-responders h4 {
font-size: 0.9rem;
color: var(--color-text-secondary);
margin: 0 0 var(--spacing-sm) 0;
}
.emergency-dashboard-responders.no-disponible {
opacity: 0.7;
}
.responders-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
min-height: 30px;
}
.responder-chip {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius);
font-size: 0.85rem;
font-weight: 500;
background: var(--color-surface);
}
.responder-chip.en_camino {
background: rgba(40, 167, 69, 0.2);
border: 1px solid var(--color-qrv);
color: var(--color-qrv-text);
}
.responder-chip.llegando {
background: rgba(255, 193, 7, 0.2);
border: 1px solid var(--color-qap);
color: var(--color-qap-text);
}
.responder-chip.no_disponible {
background: rgba(244, 67, 54, 0.1);
border: 1px solid var(--color-qrt);
color: var(--color-qrt-text);
opacity: 0.7;
}
.responder-chip.pending {
background: rgba(158, 158, 158, 0.2);
border: 1px solid #9e9e9e;
color: var(--color-text-secondary);
opacity: 0.8;
}
.responder-chip.pending small {
opacity: 0.7;
margin-left: 4px;
}
/* Barra de estadísticas de emergencia */
.emergency-stats-bar {
display: flex;
justify-content: space-around;
gap: var(--spacing-sm);
padding: var(--spacing-md);
margin-bottom: var(--spacing-md);
background: rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
}
.emergency-stat {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius);
}
.emergency-stat .stat-icon {
font-size: 1.2rem;
}
.emergency-stat .stat-label {
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.emergency-stat .stat-value {
font-weight: bold;
font-size: 1.1rem;
color: var(--color-text);
}
.emergency-stat.pending .stat-value {
color: #ff9800;
}
/* Sección de pendientes */
.pending-section h4,
.pending-section h5 {
color: #ff9800;
}
/* ====================================
Panel de Múltiples Emergencias
==================================== */
.emergency-dashboard-header-multi {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-md);
border-bottom: 2px solid rgba(220, 53, 69, 0.4);
flex-wrap: wrap;
}
.emergency-header-title {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.emergency-header-icon {
font-size: 2rem;
animation: emergency-icon-bounce 0.5s infinite alternate;
}
.emergency-header-title h3 {
margin: 0;
font-size: 1.2rem;
font-weight: bold;
color: #dc3545;
text-transform: uppercase;
}
.emergency-stats-bar-compact {
display: flex;
gap: var(--spacing-md);
font-size: 0.9rem;
font-weight: 600;
}
.emergency-stats-bar-compact .pending {
color: #ff9800;
}
/* Lista de emergencias individuales */
.emergencies-list {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
max-height: 400px;
overflow-y: auto;
margin-bottom: var(--spacing-md);
padding-right: var(--spacing-sm);
}
.emergency-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid #dc3545;
border-radius: var(--radius-md);
padding: var(--spacing-md);
transition: all 0.2s;
}
.emergency-card:hover {
background: var(--color-surface-hover);
box-shadow: var(--shadow-md);
}
.emergency-card-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.emergency-card-icon {
font-size: 1.5rem;
}
.emergency-card-info {
flex: 1;
}
.emergency-card-type {
font-weight: bold;
font-size: 0.95rem;
margin: 0;
}
.emergency-card-meta {
font-size: 0.75rem;
color: var(--color-text-secondary);
margin: 0;
}
.emergency-card-stats {
display: flex;
gap: var(--spacing-md);
font-size: 0.8rem;
padding: var(--spacing-xs) var(--spacing-sm);
background: rgba(0, 0, 0, 0.1);
border-radius: var(--radius-sm);
}
.emergency-card-actions {
margin-top: var(--spacing-sm);
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
}
.emergency-card-actions .btn {
font-size: 0.75rem;
padding: 4px 12px;
}
/* Resumen global */
.emergency-global-summary {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--spacing-md);
margin-top: var(--spacing-md);
border: 1px solid var(--color-border);
}
.emergency-global-summary h4 {
margin: 0 0 var(--spacing-md);
font-size: 1rem;
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--spacing-sm);
}
.emergency-global-summary h5 {
font-size: 0.85rem;
margin: var(--spacing-sm) 0;
}
/* Responsive para múltiples emergencias */
@media (max-width: 600px) {
.emergency-dashboard-header-multi {
flex-direction: column;
text-align: center;
}
.emergency-stats-bar-compact {
justify-content: center;
}
.emergencies-list {
max-height: 300px;
}
.emergency-card-header {
flex-wrap: wrap;
}
.emergency-card-stats {
width: 100%;
justify-content: center;
}
}
/* ====================================
Indicador de Confirmación de Emergencia
Efecto visual en tarjetas de usuario
==================================== */
/* Tarjeta con confirmación de emergencia - borde derecho destacado */
.user-card.emergency-confirmed {
position: relative;
border-right: 4px solid #4caf50 !important;
}
.user-card.emergency-confirmed.en_camino {
border-right-color: #4caf50 !important;
background: linear-gradient(90deg, transparent 0%, rgba(76, 175, 80, 0.1) 100%);
}
.user-card.emergency-confirmed.llegando {
border-right-color: #ffc107 !important;
background: linear-gradient(90deg, transparent 0%, rgba(255, 193, 7, 0.1) 100%);
}
.user-card.emergency-confirmed.no_disponible {
border-right-color: #f44336 !important;
background: linear-gradient(90deg, transparent 0%, rgba(244, 67, 54, 0.08) 100%);
}
.user-card.emergency-confirmed.pending {
border-right-color: #ff9800 !important;
background: linear-gradient(90deg, transparent 0%, rgba(255, 152, 0, 0.1) 100%);
}
/* Badge de estado de emergencia */
.emergency-response-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
margin-left: auto;
white-space: nowrap;
animation: badge-pulse 2s ease-in-out infinite;
}
.emergency-response-badge.en_camino {
background: rgba(76, 175, 80, 0.2);
color: #2e7d32;
border: 1px solid rgba(76, 175, 80, 0.4);
}
.emergency-response-badge.llegando {
background: rgba(255, 193, 7, 0.2);
color: #f57f17;
border: 1px solid rgba(255, 193, 7, 0.4);
}
.emergency-response-badge.no_disponible {
background: rgba(244, 67, 54, 0.15);
color: #c62828;
border: 1px solid rgba(244, 67, 54, 0.3);
animation: none;
opacity: 0.8;
}
.emergency-response-badge.pending {
background: rgba(255, 152, 0, 0.2);
color: #e65100;
border: 1px solid rgba(255, 152, 0, 0.4);
}
@keyframes badge-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
/* Tema claro - ajustar colores */
[data-theme="light"] .emergency-response-badge.en_camino,
[data-theme="medium"] .emergency-response-badge.en_camino {
background: rgba(76, 175, 80, 0.15);
color: #1b5e20;
}
[data-theme="light"] .emergency-response-badge.llegando,
[data-theme="medium"] .emergency-response-badge.llegando {
background: rgba(255, 193, 7, 0.15);
color: #e65100;
}
[data-theme="light"] .emergency-response-badge.no_disponible,
[data-theme="medium"] .emergency-response-badge.no_disponible {
background: rgba(244, 67, 54, 0.1);
color: #b71c1c;
}
[data-theme="light"] .emergency-response-badge.pending,
[data-theme="medium"] .emergency-response-badge.pending {
background: rgba(255, 152, 0, 0.15);
color: #e65100;
}
@media (max-width: 480px) {
.emergency-stats-bar {
flex-direction: column;
gap: var(--spacing-xs);
}
.emergency-stat {
justify-content: center;
}
}
.emergency-dashboard-actions {
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid rgba(220, 53, 69, 0.3);
text-align: right;
}
/* Responsive */
@media (max-width: 480px) {
.emergency-dashboard-header {
flex-wrap: wrap;
}
.emergency-dashboard-icon {
font-size: 2rem;
}
.emergency-dashboard-info h3 {
font-size: 1.1rem;
}
.emergency-dashboard-time {
width: 100%;
text-align: center;
margin-top: var(--spacing-sm);
}
}
/* ====================================
Alerta de Baja Dotación QRV (Guardias)
==================================== */
.low-qrv-alert-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 152, 0, 0.95);
z-index: 19000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
animation: low-qrv-bg-flash 1.5s infinite;
}
@keyframes low-qrv-bg-flash {
0%, 100% { background: rgba(255, 152, 0, 0.95); }
50% { background: rgba(255, 183, 77, 0.95); }
}
.low-qrv-alert-content {
background: var(--color-bg);
border-radius: var(--border-radius-lg);
max-width: 450px;
width: 100%;
padding: var(--spacing-xl);
text-align: center;
border: 3px solid #ff9800;
box-shadow: 0 0 50px rgba(255, 152, 0, 0.5);
}
.low-qrv-alert-icon {
font-size: 4rem;
animation: low-qrv-icon-pulse 1s infinite;
}
@keyframes low-qrv-icon-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
.low-qrv-alert-title {
color: #ff9800;
font-size: 2rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
margin: var(--spacing-sm) 0;
}
.low-qrv-alert-details {
background: var(--color-surface);
border-radius: var(--border-radius);
padding: var(--spacing-lg);
margin: var(--spacing-md) 0;
}
.low-qrv-count {
font-size: 1.3rem;
margin: 0 0 var(--spacing-sm) 0;
}
.low-qrv-count strong {
color: #f44336;
font-size: 2rem;
}
.low-qrv-threshold {
color: var(--color-text-secondary);
margin: 0;
}
.low-qrv-threshold strong {
color: var(--color-qrv);
}
.low-qrv-message {
background: rgba(255, 152, 0, 0.1);
border: 1px solid rgba(255, 152, 0, 0.3);
border-radius: var(--border-radius);
padding: var(--spacing-md);
margin: var(--spacing-md) 0;
font-weight: 500;
}
.low-qrv-actions {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.low-qrv-actions .btn {
width: 100%;
padding: var(--spacing-md);
font-size: 1.1rem;
}
@media (min-width: 400px) {
.low-qrv-actions {
flex-direction: row;
}
.low-qrv-actions .btn {
flex: 1;
}
}
/* Alerta Sin Choferes */
.no-chofer-alert-details {
background: rgba(233, 30, 99, 0.1);
border: 2px solid #e91e63;
border-radius: var(--border-radius);
padding: var(--spacing-lg);
margin: var(--spacing-md) 0;
text-align: center;
}
.no-chofer-icon {
font-size: 3rem;
margin: 0;
animation: shake 0.5s infinite;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.no-chofer-text {
color: #e91e63;
font-size: 1.2rem;
margin: var(--spacing-sm) 0;
}
.no-chofer-subtext {
color: var(--color-text-secondary);
margin: 0;
}
/* Alerta crítica (ambas condiciones) */
.low-qrv-alert-overlay.critical {
background: rgba(244, 67, 54, 0.95);
}
/* ====================================
Banner de Alerta (siempre visible)
==================================== */
.alert-banner {
background: linear-gradient(135deg, #ff9800, #f57c00);
border-radius: var(--border-radius);
padding: var(--spacing-md);
margin-bottom: var(--spacing-md);
animation: alert-banner-pulse 1.5s infinite;
}
.alert-banner.low-qrv {
background: linear-gradient(135deg, #ff9800, #f57c00);
}
.alert-banner.no-chofer {
background: linear-gradient(135deg, #e91e63, #c2185b);
}
.alert-banner.critical {
background: linear-gradient(135deg, #f44336, #c62828);
animation: alert-banner-critical 0.5s infinite;
}
.alert-banner.firma-pendiente {
background: linear-gradient(135deg, #2196f3, #1565c0);
animation: alert-banner-pulse 2s infinite;
}
@keyframes alert-banner-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}
@keyframes alert-banner-critical {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.01); }
}
.alert-banner-content {
display: flex;
align-items: center;
gap: var(--spacing-md);
color: white;
}
.alert-banner-icon {
font-size: 2rem;
animation: alert-icon-shake 0.5s infinite;
}
@keyframes alert-icon-shake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
75% { transform: rotate(10deg); }
}
.alert-banner-text {
flex: 1;
}
.alert-banner-text strong {
display: block;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.alert-banner-text span {
font-size: 0.9rem;
opacity: 0.95;
}
.alert-banner-sound-btn {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.5);
color: white;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius);
cursor: pointer;
font-weight: bold;
transition: all 0.2s ease;
}
.alert-banner-sound-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.alert-banner-sound-btn.active {
background: rgba(255, 255, 255, 0.4);
border-color: white;
}
.alert-banner-close {
background: rgba(0, 0, 0, 0.2);
border: none;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.alert-banner-close:hover {
background: rgba(0, 0, 0, 0.4);
}
.alert-banner-accept-btn {
background: rgba(255, 255, 255, 0.25);
border: 2px solid white;
color: white;
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--border-radius);
cursor: pointer;
font-weight: bold;
font-size: 0.95rem;
transition: all 0.2s ease;
animation: pulse-accept 1.5s ease-in-out infinite;
}
.alert-banner-accept-btn:hover {
background: rgba(255, 255, 255, 0.4);
}
@keyframes pulse-accept {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Responsive */
@media (max-width: 600px) {
.alert-banner-content {
flex-wrap: wrap;
}
.alert-banner-text {
flex: 1 1 60%;
}
.alert-banner-sound-btn {
order: 3;
flex: 1;
margin-top: var(--spacing-sm);
}
}
/* ====================================
MEJORAS RESPONSIVAS PARA MÓVILES
==================================== */
/* Ajustes generales para móviles */
@media (max-width: 768px) {
html {
font-size: 14px;
}
.container {
padding-left: var(--spacing-sm);
padding-right: var(--spacing-sm);
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.25rem;
}
/* Navbar móvil mejorado */
.navbar {
padding: var(--spacing-sm);
}
.navbar-brand {
flex: 1;
}
/* Ocultar logo y texto en navbar mobile (ya se muestra en banner) */
.navbar-logo,
.navbar-brand .fire-icon,
.brand-text {
display: none !important;
}
.navbar-logo {
height: 50px !important;
margin-bottom: 0 !important;
}
/* Botones más grandes para touch */
.btn {
min-height: 44px;
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.9rem;
}
.btn-sm {
min-height: 36px;
padding: var(--spacing-xs) var(--spacing-sm);
}
/* Cards compactos */
.card {
padding: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.card-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
}
.card-header .btn {
width: 100%;
}
/* Status buttons más grandes */
.status-buttons {
gap: var(--spacing-xs);
}
.status-btn {
padding: var(--spacing-md);
font-size: 1.1rem;
}
.status-btn span {
font-size: 0.75rem;
}
/* Grid de stats — 3 columnas compactas en mobile */
.stats-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.stat-card {
padding: 10px 6px;
}
.stat-number {
font-size: 1.6rem;
}
.stat-label {
font-size: 0.7rem;
}
/* User cards */
.user-card {
padding: var(--spacing-sm);
}
.user-info-horizontal {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
}
.user-col {
width: 100%;
padding: var(--spacing-xs) 0;
}
.user-col-jerarquia {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.jerarquia-label {
font-size: 0.85rem;
}
.user-actions {
width: 100%;
justify-content: space-between;
padding-top: var(--spacing-sm);
border-top: 1px solid var(--color-border);
margin-top: var(--spacing-sm);
}
.mini-status-btn,
.mini-guard-btn {
min-width: 50px;
min-height: 40px;
font-size: 0.85rem;
}
/* Tablas responsivas */
.table-responsive {
margin: 0 calc(-1 * var(--spacing-md));
padding: 0 var(--spacing-md);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table {
font-size: 0.85rem;
}
.table th,
.table td {
padding: var(--spacing-sm);
white-space: nowrap;
}
/* Forms */
.form-control {
font-size: 16px; /* Evita zoom en iOS */
padding: var(--spacing-md);
}
.form-group {
margin-bottom: var(--spacing-md);
}
/* Admin nav scroll horizontal */
.admin-nav {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
padding-bottom: var(--spacing-sm);
}
.admin-nav a {
display: inline-block;
padding: var(--spacing-sm) var(--spacing-md);
}
/* Pagination */
.pagination {
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.pagination a,
.pagination span {
min-width: 36px;
min-height: 36px;
}
}
/* Pantallas muy pequeñas (< 400px) */
@media (max-width: 400px) {
html {
/* Estaba en 13px, pero 390px es el ancho del iPhone mas comun, no un caso
raro. Como las clases ya bajan a 0.75-0.8rem dentro del bloque de 768px,
los tamaños se multiplicaban: el texto del menu quedaba en 9,8px y los
encabezados de tabla en 8,7px. Y como los --spacing-* tambien son rem,
encogian de paso todos los paddings y las areas para el dedo.
Se unifica con la escala que ya usa el resto del celular. */
font-size: 14px;
}
.navbar-container {
padding: 0 var(--spacing-xs);
}
.brand-text {
display: none;
}
.status-buttons {
flex-direction: column;
}
.status-btn {
width: 100%;
}
.btn-emergency-trigger {
font-size: 0.8rem;
padding: var(--spacing-sm);
}
/* btn-report-fallo: tamaño controlado por btn-row2 en @media 500px */
.btn-report-fallo span:first-child {
display: none; /* Ocultar emoji en pantallas muy pequeñas */
}
}
/* Dashboard actions — desktop */
.dashboard-actions {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* Dashboard actions — mobile: 3 niveles. EMERGENCIA full-width arriba,
luego Quemas + Combustible (2 por fila) y el resto (3 por fila).
Grid de 6 columnas para combinar filas de 2 (span 3) y de 3 (span 2). */
@media (max-width: 500px) {
.dashboard-actions {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
width: 100%;
}
.da-desktop-only { display: none !important; }
/* Botones secundarios: compactos y uniformes */
.dashboard-actions > a,
.dashboard-actions > button {
width: 100%;
min-height: 44px;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
text-align: center;
font-size: 0.8rem;
padding: 8px 8px;
line-height: 1.1;
}
/* Nivel 1: EMERGENCIA ocupa toda la fila y resalta */
.dashboard-actions .btn-emergency-trigger {
grid-column: 1 / -1;
order: -10;
min-height: 56px;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.5px;
padding: 14px 12px;
}
/* Nivel 2: Quemas + Combustible (2 por fila) */
.dashboard-actions .btn-quemas { grid-column: span 3; order: -5; }
.dashboard-actions .btn-combustible { grid-column: span 3; order: -4; }
/* Nivel 3: el resto (3 por fila) */
.dashboard-actions .btn-report-fallo { grid-column: span 2; order: -3; }
.dashboard-actions .btn-planilla-servicio { grid-column: span 2; order: -2; }
.dashboard-actions .btn-orden-interno { grid-column: span 2; order: -1; }
.dashboard-actions .btn-inventario-chequeo { grid-column: span 2; order: 0; }
}
/* ====================================
Modal Confirmación Cambio Estado (Móvil)
==================================== */
.status-confirm-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.status-confirm-content {
background: var(--color-surface);
border-radius: 16px;
padding: 24px;
text-align: center;
max-width: 300px;
width: 100%;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
border: 2px solid var(--color-border);
animation: statusModalSlide 0.2s ease-out;
}
@keyframes statusModalSlide {
from {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.status-confirm-icon {
font-size: 3rem;
margin-bottom: 12px;
}
.status-confirm-content h3 {
margin: 0 0 8px 0;
color: var(--color-text);
font-size: 1.2rem;
}
.status-confirm-content p {
margin: 0 0 20px 0;
color: var(--color-text-muted);
font-size: 0.95rem;
}
.status-confirm-content p strong {
color: var(--color-text);
}
.status-confirm-buttons {
display: flex;
gap: 12px;
}
.btn-status-cancel,
.btn-status-confirm {
flex: 1;
padding: 12px 16px;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
text-align: center;
}
.btn-status-cancel {
background: var(--color-bg);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
.btn-status-cancel:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.btn-status-confirm {
background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
border: none;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.btn-status-confirm:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(229, 57, 53, 0.4);
color: #ffffff !important;
background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}
/* ====================================
Modal de Permisos (GPS, Notificaciones, Audio)
==================================== */
.permissions-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 20px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.permissions-content {
background: var(--color-surface);
border-radius: 16px;
padding: 24px;
text-align: center;
max-width: 360px;
width: 100%;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
border: 2px solid var(--color-border);
animation: permissionsSlide 0.3s ease-out;
}
@keyframes permissionsSlide {
from {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.permissions-icon {
font-size: 3rem;
margin-bottom: 12px;
}
.permissions-content h3 {
margin: 0 0 8px 0;
color: var(--color-text);
font-size: 1.3rem;
}
.permissions-content > p {
margin: 0 0 20px 0;
color: var(--color-text-muted);
font-size: 0.9rem;
line-height: 1.4;
}
.permissions-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.permission-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--color-surface-light);
border-radius: 10px;
text-align: left;
border: 1px solid var(--color-border-light);
}
.permission-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.permission-info {
flex: 1;
}
.permission-info strong {
display: block;
color: var(--color-text);
font-size: 0.9rem;
margin-bottom: 2px;
}
.permission-info small {
color: var(--color-text-muted);
font-size: 0.75rem;
}
.permission-status {
font-size: 1.2rem;
flex-shrink: 0;
}
.btn-request-permissions {
width: 100%;
padding: 14px 20px;
background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
border: none;
border-radius: 10px;
color: white;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 10px;
}
.btn-request-permissions:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}
.btn-request-permissions:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.btn-skip-permissions {
width: 100%;
padding: 10px 20px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: 10px;
color: var(--color-text-muted);
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-skip-permissions:hover {
background: var(--color-surface-hover);
}
/* ====================================
Indicadores de Estado (Conexión, GPS, Audio)
==================================== */
.status-indicators {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 8px;
vertical-align: middle;
}
.connection-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
transition: all 0.3s ease;
}
/* Barra de conexión - desktop */
.conn-bar {
display: none;
align-items: center;
gap: 0;
padding: 6px var(--spacing-md);
background: var(--color-bg);
border-top: 1px solid var(--color-border);
font-size: 0.75rem;
}
@media (min-width: 769px) {
.conn-bar { display: flex; }
}
.conn-bar-item {
display: flex;
align-items: center;
gap: 6px;
padding: 0 var(--spacing-md);
}
.conn-bar-label {
color: var(--color-text-muted);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.conn-bar-value {
color: var(--color-text);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.conn-bar-separator {
width: 1px;
height: 20px;
background: var(--color-border);
}
.conn-bar-dotacion {
display: flex;
gap: 6px;
}
.conn-bar-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
}
.conn-bar-chip strong { font-weight: 800; }
.conn-bar-chip.qrv { background: rgba(76, 175, 80, 0.12); color: #4caf50; }
.conn-bar-chip.qap { background: rgba(255, 152, 0, 0.12); color: #ff9800; }
.conn-bar-chip.qrt { background: rgba(244, 67, 54, 0.12); color: #f44336; }
.conn-bar-chip.licencia { background: rgba(81, 45, 168, 0.12); color: var(--color-badge-licencia); }
.conn-bar-chip.total {
background: transparent;
color: var(--color-text-secondary);
padding-left: 4px;
font-weight: 700;
}
.conn-bar .conn-ok { color: #4caf50; }
.conn-bar .conn-warn { color: #ff9800; }
.conn-bar .conn-error { color: #f44336; }
/* Barra de conexión - mobile */
.conn-bar-mobile {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 8px;
font-size: 0.7rem;
border-top: 1px solid var(--color-border);
background: var(--color-bg);
}
.conn-bar-mobile .conn-m-item {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: rgba(255, 255, 255, 0.06);
border-radius: var(--radius-full);
color: var(--color-text-secondary);
white-space: nowrap;
font-weight: 600;
}
.conn-bar-mobile .conn-m-item .conn-bar-label {
font-size: 0.6rem;
}
.conn-bar-mobile .conn-ok { color: #4caf50; }
.conn-bar-mobile .conn-warn { color: #ff9800; }
.conn-bar-mobile .conn-error { color: #f44336; }
@media (min-width: 769px) {
.conn-bar-mobile { display: none; }
}
/* Indicadores de permisos (GPS, Audio) */
.permission-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
opacity: 0.4;
filter: grayscale(100%);
transition: all 0.3s ease;
}
.permission-indicator.granted {
opacity: 1;
filter: grayscale(0%);
}
.permission-indicator.denied {
opacity: 0.3;
filter: grayscale(100%);
text-decoration: line-through;
}
.permission-indicator.pending {
opacity: 0.5;
filter: grayscale(50%);
animation: permissionPulse 2s infinite;
}
@keyframes permissionPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.8; }
}
/* Toggle zoom via logo */
.logo-zoom-toggle {
cursor: pointer;
}
.connection-indicator.connected {
background: #4caf50;
box-shadow: 0 0 6px rgba(76, 175, 80, 0.6);
}
.connection-indicator.disconnected {
background: #f44336;
box-shadow: 0 0 6px rgba(244, 67, 54, 0.6);
animation: connection-blink 1s infinite;
}
.connection-indicator.reconnecting {
background: #ff9800;
box-shadow: 0 0 6px rgba(255, 152, 0, 0.6);
animation: connection-pulse 1.5s infinite;
}
@keyframes connection-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes connection-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.3);
opacity: 0.7;
}
}
/* Tooltip sutil en hover */
.connection-indicator:hover::after {
content: attr(title);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--color-surface);
color: var(--color-text);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.7rem;
white-space: nowrap;
margin-top: 4px;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
border: 1px solid var(--color-border);
}
/* Posición relativa para el título que contiene el indicador */
.card-title {
position: relative;
}
/* ====================================
Alertas y Modales Móviles
==================================== */
@media (max-width: 768px) {
/* Banner de alerta */
.alert-banner {
padding: var(--spacing-sm);
}
.alert-banner-content {
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.alert-banner-icon {
font-size: 1.5rem;
}
.alert-banner-text {
flex: 1 1 70%;
}
.alert-banner-text strong {
font-size: 0.95rem;
}
.alert-banner-text span {
font-size: 0.8rem;
}
.alert-banner-sound-btn {
order: 4;
flex: 1 1 100%;
margin-top: var(--spacing-xs);
padding: var(--spacing-md);
font-size: 1rem;
}
.alert-banner-close {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
}
/* Modal de alerta baja dotación */
.low-qrv-alert-overlay {
padding: var(--spacing-sm);
}
.low-qrv-alert-content {
padding: var(--spacing-md);
max-height: 95vh;
overflow-y: auto;
}
.low-qrv-alert-icon {
font-size: 3rem;
}
.low-qrv-alert-title {
font-size: 1.5rem;
}
.low-qrv-actions {
flex-direction: column;
}
.low-qrv-actions .btn {
width: 100%;
padding: var(--spacing-md);
}
/* Modal de emergencia */
.emergency-modal-content {
padding: var(--spacing-md);
max-height: 95vh;
overflow-y: auto;
}
.emergency-types-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xs);
}
.emergency-type-card {
padding: var(--spacing-sm);
}
.emergency-type-icon {
font-size: 1.5rem;
}
.emergency-type-name {
font-size: 0.75rem;
}
.emergency-modal-actions {
flex-direction: column;
}
.emergency-modal-actions .btn {
width: 100%;
}
/* Overlay de emergencia */
.emergency-alert-overlay {
padding: var(--spacing-sm);
}
.emergency-alert-content {
padding: var(--spacing-md);
max-height: 95vh;
overflow-y: auto;
}
.emergency-alert-icon {
font-size: 3.5rem;
}
.emergency-alert-title {
font-size: 1.75rem;
}
.emergency-response-buttons {
flex-direction: column;
}
.emergency-response-btn {
padding: var(--spacing-md);
font-size: 1rem;
}
/* Panel de emergencia en dashboard */
.emergency-dashboard-panel {
padding: var(--spacing-md);
}
.emergency-dashboard-header {
flex-direction: column;
text-align: center;
}
.emergency-dashboard-icon {
font-size: 2.5rem;
}
.emergency-dashboard-info h3 {
font-size: 1.1rem;
}
.responders-list {
justify-content: center;
}
.responder-chip {
font-size: 0.8rem;
padding: var(--spacing-xs) var(--spacing-sm);
}
}
/* ====================================
Touch-friendly improvements
==================================== */
/* Todos los elementos clickeables mínimo 44x44px */
@media (pointer: coarse) {
.btn,
.nav-link,
.status-btn,
.mini-status-btn,
.mini-guard-btn,
.emergency-type-option,
.pagination a {
min-height: 44px;
min-width: 44px;
}
/* Espaciado extra para evitar toques accidentales */
.user-actions {
gap: var(--spacing-sm);
}
.d-flex.gap-1 {
gap: var(--spacing-sm);
}
/* Checkboxes y radio buttons más grandes */
input[type="checkbox"],
input[type="radio"] {
width: 20px;
height: 20px;
}
}
/* ====================================
Orientación landscape en móviles
==================================== */
@media (max-height: 500px) and (orientation: landscape) {
.low-qrv-alert-content,
.emergency-alert-content,
.emergency-modal-content {
max-height: 90vh;
padding: var(--spacing-sm);
}
.low-qrv-alert-icon,
.emergency-alert-icon {
font-size: 2rem;
}
.low-qrv-alert-title,
.emergency-alert-title {
font-size: 1.25rem;
margin: var(--spacing-xs) 0;
}
.emergency-response-buttons {
flex-direction: row;
flex-wrap: wrap;
}
}
/* ====================================
PWA / Fullscreen improvements
==================================== */
/* Safe areas para dispositivos con notch */
@supports (padding: max(0px)) {
.navbar {
padding-top: max(var(--spacing-sm), env(safe-area-inset-top));
padding-left: max(var(--spacing-md), env(safe-area-inset-left));
padding-right: max(var(--spacing-md), env(safe-area-inset-right));
}
.main-content {
padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
}
.low-qrv-alert-overlay,
.emergency-alert-overlay,
.emergency-modal {
padding: max(var(--spacing-md), env(safe-area-inset-top))
max(var(--spacing-md), env(safe-area-inset-right))
max(var(--spacing-md), env(safe-area-inset-bottom))
max(var(--spacing-md), env(safe-area-inset-left));
}
}
/* Prevenir selección de texto en botones */
.btn,
.status-btn,
.mini-status-btn,
.mini-guard-btn,
.emergency-type-option {
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* Smooth scrolling para iOS */
.table-responsive,
.admin-nav,
.emergency-ack-list {
-webkit-overflow-scrolling: touch;
}
/* ====================================
LISTA DE BOMBEROS OPTIMIZADA PARA MÓVIL
==================================== */
@media (max-width: 768px) {
/* Reducir espacio entre secciones */
.user-list-section {
margin-bottom: var(--spacing-md);
}
/* Header de sección más compacto */
.user-list-header {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.9rem;
}
/* Lista más compacta */
.user-list {
gap: 4px;
}
/* Card de usuario compacta - layout con badges y cambio */
.user-card {
padding: 8px 10px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto auto;
gap: 2px 8px;
border-radius: var(--radius-sm);
align-items: center;
}
/* Info horizontal compacta en 2 líneas */
.user-info-horizontal {
grid-column: 1;
grid-row: 1;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 2px 8px;
align-items: center;
min-width: 0;
}
/* Fila 1: Jerarquía + Nombre (izquierda) */
.user-col-jerarquia {
grid-column: 1;
grid-row: 1;
min-width: 0;
padding: 0;
gap: 4px;
}
.jerarquia-label {
font-size: 0.75rem;
padding: 2px 6px;
background: var(--color-surface-light);
border-radius: 4px;
white-space: nowrap;
}
.jefe-badge,
.segundo-jefe-badge {
font-size: 0.65rem;
padding: 1px 4px;
}
/* Fila 1: Badges (derecha) */
/* Badges en una sola línea */
.user-col-badges {
grid-column: 1 / -1;
grid-row: 3;
display: flex;
flex-wrap: wrap;
gap: 2px;
justify-content: flex-start;
min-width: 0;
padding: 0;
}
/* Badges solo emoji en móvil - 20% más grandes */
.user-badge {
width: 24px;
height: 24px;
padding: 0;
gap: 0;
}
.user-badge .badge-icon {
font-size: 0.85rem;
}
.user-badge .badge-text {
display: none;
}
/* Guardia muestra texto en móvil */
.user-badge.guard-badge {
width: auto;
padding: 2px 6px;
gap: 2px;
}
.user-badge.guard-badge .badge-text {
display: inline;
font-size: 0.5rem;
}
/* Fila 2: Nombre completo (span full) */
.user-col-nombre {
grid-column: 1 / -1;
grid-row: 2;
flex-direction: row;
align-items: baseline;
gap: 6px;
min-width: 0;
padding: 0;
}
.user-username {
font-size: 0.85rem;
font-weight: 700;
color: var(--color-text-primary);
}
.user-name-display {
font-size: 0.75rem;
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Acciones a la derecha con cambio debajo */
.user-actions {
grid-column: 2;
grid-row: 1 / 3;
display: flex;
flex-wrap: wrap;
gap: 3px;
padding: 0;
border: none;
margin: 0;
align-items: center;
justify-content: flex-end;
max-width: 130px;
}
/* Contenedor de botones en fila */
.user-actions form {
display: inline-flex;
}
/* Info de cambio para móvil - debajo de botones */
.cambio-mobile {
display: block;
width: 100%;
text-align: right;
font-size: 0.55rem;
color: var(--color-text-muted);
/* Envuelve en vez de cortar: con el dia + la hora, el ellipsis se
comia justo la fecha (apellidos largos). Mismo tamano, y solo baja
a dos lineas cuando no entra. */
white-space: normal;
overflow-wrap: anywhere;
}
/* Info de cambio oculta en su posición original */
.user-col-cambio {
display: none !important;
}
/* Licencia: tabla oculta en mobile, cards visibles */
.licencia-table-wrapper {
display: none;
}
.licencia-mobile-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.mini-status-btn,
.mini-guard-btn {
min-width: 36px;
min-height: 32px;
padding: 4px 8px;
font-size: 0.75rem;
border-radius: 4px;
}
.mini-guard-btn {
min-width: 32px;
padding: 4px;
}
}
/* Pantallas muy pequeñas - aún más compacto */
@media (max-width: 400px) {
.user-card {
padding: 6px 8px;
gap: 4px;
}
.user-info-horizontal {
gap: 1px 4px;
}
.jerarquia-label {
font-size: 0.7rem;
padding: 1px 4px;
}
.user-username {
font-size: 0.8rem;
}
.user-name-display {
font-size: 0.7rem;
}
.chofer-badge,
.guard-badge,
.dept-badge,
.licencia-ord-badge,
.licencia-ext-badge,
.licencia-salud-badge,
.licencia-especial-badge {
font-size: 0.6rem;
padding: 1px 3px;
}
.mini-status-btn {
min-width: 32px;
min-height: 28px;
font-size: 0.7rem;
padding: 2px 6px;
}
.mini-guard-btn {
min-width: 28px;
min-height: 28px;
padding: 2px;
font-size: 0.8rem;
}
/* Contadores globales más compactos */
.stats-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.stat-card {
padding: 8px;
}
.stat-number {
font-size: 1.5rem;
}
.stat-label {
font-size: 0.65rem;
}
/* Status buttons más compactos */
.status-buttons {
gap: 6px;
}
.status-btn {
padding: 10px 8px;
}
.status-btn span {
font-size: 0.7rem;
}
/* Cards generales */
.card {
padding: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.card-header {
margin-bottom: var(--spacing-sm);
flex-wrap: wrap;
gap: 6px;
}
.card-title {
font-size: 1rem;
}
/* Stats sutiles compactas */
.stats-subtle {
gap: 6px;
}
.stats-subtle-item {
font-size: 0.75rem;
gap: 4px;
}
.stats-bar {
height: 6px;
}
}
/* iPhone SE y pantallas pequeñas */
@media (max-width: 375px) {
.stats-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat-number {
font-size: 1.3rem;
}
.stat-label {
font-size: 0.6rem;
line-height: 1.2;
}
/* Badges compactos en pantallas muy pequeñas */
.user-col-badges {
display: flex;
gap: 2px;
}
.user-badge {
width: 22px;
height: 22px;
}
.user-badge .badge-icon {
font-size: 0.75rem;
}
.user-col-nombre {
grid-column: 1 / -1;
}
}
/* ====================================
Selector de Temas
==================================== */
.theme-selector {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.theme-toggle-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background: var(--color-surface);
color: var(--color-text);
font-size: 1.4rem;
cursor: pointer;
box-shadow: var(--shadow-lg);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.theme-toggle-btn:hover {
transform: scale(1.1);
background: var(--color-surface-hover);
}
.theme-options {
position: absolute;
bottom: 60px;
right: 0;
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: 8px;
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
min-width: 160px;
border: 1px solid var(--color-border);
}
.theme-selector.open .theme-options {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.theme-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
border: none;
background: transparent;
width: 100%;
text-align: left;
color: var(--color-text);
font-size: 0.9rem;
}
.theme-option:hover {
background: var(--color-surface-hover);
}
.theme-option.active {
background: var(--color-primary);
color: white;
}
.theme-option-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.theme-option[data-tema="light"] .theme-option-icon {
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
border: 2px solid #e0e0e0;
}
.theme-option[data-tema="medium"] .theme-option-icon {
background: linear-gradient(135deg, #faf8f4 0%, #ebe5da 100%);
border: 2px solid #ddd5c8;
}
.theme-option[data-tema="dark"] .theme-option-icon {
background: linear-gradient(135deg, #2d1c14 0%, #1a0f0a 100%);
border: 2px solid #4a3525;
}
.theme-option-label {
font-weight: 500;
}
/* Transiciones suaves para cambio de tema */
.card, .navbar, .btn, .form-control, .table, .alert, .flash,
.stat-card, .user-card, .footer, .admin-nav a {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Ajustes para tema claro en navbar */
[data-theme="light"] .navbar {
background: rgba(255, 255, 255, 0.95);
/* Sin backdrop-filter: el fondo es opaco (ver override !important mas abajo) asi que el
blur no se percibe, pero al ser .navbar sticky obliga a re-difuminar el backdrop en
cada repaint (incluido al escribir). Quitarlo es un no-op visual y baja el costo. */
border-bottom: 1px solid var(--color-border);
}
[data-theme="medium"] .navbar {
background: rgba(250, 248, 244, 0.95);
border-bottom: 1px solid var(--color-border);
}
/* Ajustes para inputs en temas claros */
[data-theme="light"] .form-control,
[data-theme="medium"] .form-control {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
}
[data-theme="light"] .form-control:focus,
[data-theme="medium"] .form-control:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
}
/* Cards en temas claros */
[data-theme="light"] .card,
[data-theme="medium"] .card {
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
/* User cards mantienen colores de estado */
[data-theme="light"] .user-card.qrv,
[data-theme="medium"] .user-card.qrv {
background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(76, 175, 80, 0.06) 100%);
border-color: var(--color-qrv);
}
[data-theme="light"] .user-card.qap,
[data-theme="medium"] .user-card.qap {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 193, 7, 0.06) 100%);
border-color: var(--color-qap);
}
[data-theme="light"] .user-card.qrt,
[data-theme="medium"] .user-card.qrt {
background: linear-gradient(135deg, rgba(244, 67, 54, 0.12) 0%, rgba(244, 67, 54, 0.06) 100%);
border-color: var(--color-qrt);
}
/* Stat cards en temas claros */
[data-theme="light"] .stat-card,
[data-theme="medium"] .stat-card {
background: var(--color-surface);
}
/* Footer en temas claros */
[data-theme="light"] .footer,
[data-theme="medium"] .footer {
background: var(--color-bg-elevated);
border-top: 1px solid var(--color-border);
}
/* Admin nav en temas claros */
[data-theme="light"] .admin-nav,
[data-theme="medium"] .admin-nav {
background: var(--color-surface);
border: 1px solid var(--color-border);
}
[data-theme="light"] .admin-nav a,
[data-theme="medium"] .admin-nav a {
color: var(--color-text);
}
[data-theme="light"] .admin-nav a:hover,
[data-theme="medium"] .admin-nav a:hover {
background: var(--color-surface-hover);
}
/* Tables en temas claros */
[data-theme="light"] .table th,
[data-theme="medium"] .table th {
background: var(--color-bg-elevated);
color: var(--color-text-primary);
}
[data-theme="light"] .table td,
[data-theme="medium"] .table td {
border-color: var(--color-border);
}
[data-theme="light"] .table tbody tr:hover,
[data-theme="medium"] .table tbody tr:hover {
background: var(--color-surface-hover);
}
/* ====================================
Overrides Completos para Temas Claros
==================================== */
/* ----- NAVBAR ----- */
[data-theme="light"] .navbar,
[data-theme="medium"] .navbar {
background: var(--color-surface) !important;
border-bottom: 2px solid var(--color-primary);
box-shadow: var(--shadow-md);
}
[data-theme="light"] .navbar-brand,
[data-theme="medium"] .navbar-brand {
color: var(--color-text-primary) !important;
}
[data-theme="light"] .brand-text,
[data-theme="medium"] .brand-text {
color: var(--color-text-primary) !important;
text-shadow: none;
}
[data-theme="light"] .nav-link,
[data-theme="medium"] .nav-link {
color: var(--color-text) !important;
}
[data-theme="light"] .nav-link:hover,
[data-theme="medium"] .nav-link:hover,
[data-theme="light"] .nav-link.active,
[data-theme="medium"] .nav-link.active {
color: var(--color-primary) !important;
background: var(--color-surface-hover);
}
[data-theme="light"] .user-name,
[data-theme="medium"] .user-name {
color: var(--color-text) !important;
}
[data-theme="light"] .navbar-toggle .hamburger,
[data-theme="light"] .navbar-toggle .hamburger::before,
[data-theme="light"] .navbar-toggle .hamburger::after,
[data-theme="medium"] .navbar-toggle .hamburger,
[data-theme="medium"] .navbar-toggle .hamburger::before,
[data-theme="medium"] .navbar-toggle .hamburger::after {
background: var(--color-text) !important;
}
/* ----- LINKS ----- */
[data-theme="light"] a:not(.btn):not(.jefe-btn):not(.jefe-btn-primary):not(.jefe-btn-success):not(.jefe-btn-danger):not(.jefe-btn-warning):not(.submenu-item):not(.nav-link):not(.admin-nav-item):not(.jefe-nav-item):not(.quick-access-btn):not(.cst-pill):not(.bk-banner-btn),
[data-theme="medium"] a:not(.btn):not(.jefe-btn):not(.jefe-btn-primary):not(.jefe-btn-success):not(.jefe-btn-danger):not(.jefe-btn-warning):not(.submenu-item):not(.nav-link):not(.admin-nav-item):not(.jefe-nav-item):not(.quick-access-btn):not(.cst-pill):not(.bk-banner-btn) {
color: var(--color-primary);
}
[data-theme="light"] a:not(.btn):not(.jefe-btn):not(.jefe-btn-primary):not(.jefe-btn-success):not(.jefe-btn-danger):not(.jefe-btn-warning):not(.submenu-item):not(.nav-link):not(.admin-nav-item):not(.jefe-nav-item):not(.quick-access-btn):not(.cst-pill):not(.bk-banner-btn):hover,
[data-theme="medium"] a:not(.btn):not(.jefe-btn):not(.jefe-btn-primary):not(.jefe-btn-success):not(.jefe-btn-danger):not(.jefe-btn-warning):not(.submenu-item):not(.nav-link):not(.admin-nav-item):not(.jefe-nav-item):not(.quick-access-btn):not(.cst-pill):not(.bk-banner-btn):hover {
color: var(--color-primary-dark);
}
/* ----- HEADINGS ----- */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="medium"] h1,
[data-theme="medium"] h2,
[data-theme="medium"] h3,
[data-theme="medium"] h4,
[data-theme="medium"] h5,
[data-theme="medium"] h6 {
color: var(--color-text-primary) !important;
}
/* ----- CARDS ----- */
[data-theme="light"] .card,
[data-theme="medium"] .card {
background: var(--color-surface);
border: 1px solid var(--color-border);
}
[data-theme="light"] .card-title,
[data-theme="medium"] .card-title {
color: var(--color-text-primary) !important;
}
[data-theme="light"] .card-header,
[data-theme="medium"] .card-header {
border-bottom-color: var(--color-border);
}
/* ----- BUTTONS ----- */
[data-theme="light"] .btn-outline,
[data-theme="medium"] .btn-outline {
color: var(--color-text);
border-color: var(--color-border);
}
[data-theme="light"] .btn-outline:hover,
[data-theme="medium"] .btn-outline:hover {
background: var(--color-surface-hover);
color: var(--color-text-primary);
}
[data-theme="light"] .btn-secondary,
[data-theme="medium"] .btn-secondary {
background: var(--color-surface-light);
color: var(--color-text);
border: 1px solid var(--color-border);
}
[data-theme="light"] .btn-link,
[data-theme="medium"] .btn-link {
color: #37536b;
}
[data-theme="light"] .btn-link:hover,
[data-theme="medium"] .btn-link:hover {
color: #2a4050;
background: rgba(55, 83, 107, 0.08);
}
/* Btn success/warning/info en temas claros - texto oscuro legible */
[data-theme="light"] .btn-success,
[data-theme="medium"] .btn-success {
background: linear-gradient(145deg, #43a047 0%, #2e7d32 100%);
color: #fff;
}
[data-theme="light"] .btn-warning,
[data-theme="medium"] .btn-warning {
background: linear-gradient(145deg, #ffb74d 0%, #ffa726 100%);
color: #3e2723;
}
[data-theme="light"] .btn-info,
[data-theme="medium"] .btn-info {
background: linear-gradient(145deg, #29b6f6 0%, #0288d1 100%);
color: #fff;
}
[data-theme="light"] .btn-info:hover,
[data-theme="medium"] .btn-info:hover {
background: linear-gradient(145deg, #4fc3f7 0%, #29b6f6 100%);
color: #fff;
}
/* Btn report-fallo y orden-interno en light/medium */
[data-theme="light"] .btn-report-fallo,
[data-theme="medium"] .btn-report-fallo {
color: #006064;
border-color: #00838f;
background: rgba(0, 131, 143, 0.1);
}
[data-theme="light"] .btn-orden-interno,
[data-theme="medium"] .btn-orden-interno {
color: #6a1b9a;
border-color: #8e24aa;
background: rgba(142, 36, 170, 0.1);
}
/* ----- FORMS ----- */
[data-theme="light"] .form-label,
[data-theme="medium"] .form-label {
color: var(--color-text-primary) !important;
}
[data-theme="light"] .form-text,
[data-theme="medium"] .form-text {
color: var(--color-text-secondary) !important;
}
[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="medium"] .form-control,
[data-theme="medium"] .form-select {
background: var(--color-surface) !important;
border-color: var(--color-border) !important;
color: var(--color-text) !important;
}
[data-theme="light"] .input-group-text,
[data-theme="medium"] .input-group-text {
background: var(--color-surface-light);
border-color: var(--color-border);
color: var(--color-text-secondary);
}
/* ----- STAT CARDS ----- */
[data-theme="light"] .stat-card,
[data-theme="medium"] .stat-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
}
[data-theme="light"] .stat-number,
[data-theme="medium"] .stat-number {
color: var(--color-text-primary);
}
[data-theme="light"] .stat-label,
[data-theme="medium"] .stat-label {
color: var(--color-text-secondary);
}
/* ----- USER CARDS ----- */
[data-theme="light"] .user-card,
[data-theme="medium"] .user-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
}
[data-theme="light"] .user-card .user-nombre,
[data-theme="medium"] .user-card .user-nombre {
color: var(--color-text-primary) !important;
}
[data-theme="light"] .user-card .user-jerarquia,
[data-theme="medium"] .user-card .user-jerarquia {
color: var(--color-text-secondary) !important;
}
/* User cards con estado - fondo sutil */
[data-theme="light"] .user-card.qrv,
[data-theme="medium"] .user-card.qrv {
background: rgba(76, 175, 80, 0.08);
border-left: 4px solid var(--color-qrv);
}
[data-theme="light"] .user-card.qap,
[data-theme="medium"] .user-card.qap {
background: rgba(255, 193, 7, 0.08);
border-left: 4px solid var(--color-qap);
}
[data-theme="light"] .user-card.qrt,
[data-theme="medium"] .user-card.qrt {
background: rgba(244, 67, 54, 0.08);
border-left: 4px solid var(--color-qrt);
}
/* ----- TABLES ----- */
[data-theme="light"] .table,
[data-theme="medium"] .table {
color: var(--color-text);
}
[data-theme="light"] .table th,
[data-theme="medium"] .table th {
background: var(--color-surface-light) !important;
color: var(--color-text-primary) !important;
border-color: var(--color-border);
}
[data-theme="light"] .table td,
[data-theme="medium"] .table td {
color: var(--color-text) !important;
border-color: var(--color-border);
}
[data-theme="light"] .table strong,
[data-theme="medium"] .table strong {
color: var(--color-text-primary);
}
/* ----- SECTION TITLES ----- */
[data-theme="light"] .section-title,
[data-theme="medium"] .section-title {
color: var(--color-text-primary);
}
/* ----- STATS SUBTLE ----- */
[data-theme="light"] .stats-subtle-item,
[data-theme="medium"] .stats-subtle-item {
color: var(--color-text);
}
/* ----- FLASH MESSAGES ----- */
[data-theme="light"] .flash,
[data-theme="medium"] .flash {
color: var(--color-text-primary);
}
[data-theme="light"] .flash-info,
[data-theme="medium"] .flash-info {
color: #0d47a1;
background: rgba(33, 150, 243, 0.12);
}
[data-theme="light"] .flash-success,
[data-theme="medium"] .flash-success {
color: #1b5e20;
background: rgba(46, 125, 50, 0.12);
}
[data-theme="light"] .flash-danger,
[data-theme="light"] .flash-error,
[data-theme="medium"] .flash-danger,
[data-theme="medium"] .flash-error {
color: #b71c1c;
background: rgba(198, 40, 40, 0.12);
}
[data-theme="light"] .flash-warning,
[data-theme="medium"] .flash-warning {
color: #e65100;
background: rgba(230, 81, 0, 0.12);
}
/* ----- TEXT UTILITIES ----- */
[data-theme="light"] .text-muted,
[data-theme="medium"] .text-muted {
color: var(--color-text-secondary) !important;
}
/* ----- FOOTER ----- */
[data-theme="light"] .footer,
[data-theme="medium"] .footer {
background: var(--color-surface);
color: var(--color-text-secondary);
border-top: 1px solid var(--color-border);
}
[data-theme="light"] .footer p,
[data-theme="medium"] .footer p {
color: var(--color-text-secondary);
}
/* ----- ADMIN NAV ----- */
[data-theme="light"] .admin-nav,
[data-theme="medium"] .admin-nav {
background: var(--color-surface);
border: 1px solid var(--color-border);
}
[data-theme="light"] .admin-nav a,
[data-theme="medium"] .admin-nav a {
color: var(--color-text) !important;
}
[data-theme="light"] .admin-nav a.active,
[data-theme="medium"] .admin-nav a.active {
background: var(--color-primary) !important;
color: white !important;
}
/* ----- BADGES ----- */
[data-theme="light"] .badge,
[data-theme="medium"] .badge {
color: white;
}
/* ----- SCORE BADGES ----- */
[data-theme="light"] .score-badge,
[data-theme="medium"] .score-badge {
color: var(--color-text-primary);
}
/* ----- ALERT BAR ----- */
[data-theme="light"] .alert-bar,
[data-theme="medium"] .alert-bar {
background: #fff3cd;
color: #856404;
border-bottom: 1px solid #ffc107;
}
/* ----- MOBILE MENU ----- */
@media (max-width: 768px) {
[data-theme="light"] .navbar-menu,
[data-theme="medium"] .navbar-menu {
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
}
/* ====================================
NUEVO PANEL DE ADMINISTRACIÓN
==================================== */
/* Header del Admin - Azul Acero Elegante */
.admin-header {
background: linear-gradient(145deg, #5c7a99 0%, #3d5a73 100%);
padding: var(--spacing-xl) var(--spacing-lg);
margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-lg);
border-radius: var(--radius-lg);
color: white;
position: relative;
overflow: hidden;
box-shadow:
0 4px 6px rgba(61, 90, 115, 0.15),
0 10px 20px rgba(61, 90, 115, 0.1),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.admin-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.1) 0%, transparent 50%),
radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.1) 0%, transparent 50%);
pointer-events: none;
}
.admin-header::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 250px;
height: 100%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='25' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
background-size: contain;
opacity: 0.5;
}
.admin-header-content {
position: relative;
z-index: 1;
}
.admin-header h1 {
color: white !important;
margin-bottom: var(--spacing-xs);
font-size: 1.75rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.admin-subtitle {
color: rgba(255, 255, 255, 0.9);
margin: 0;
font-size: 1rem;
}
/* Navegación Sidebar Moderna */
.admin-sidebar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: var(--spacing-xl);
padding: var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow:
0 1px 3px rgba(0,0,0,0.05),
0 4px 6px rgba(0,0,0,0.03);
border: 1px solid var(--color-border);
}
.admin-nav-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: var(--radius-md);
color: var(--color-text);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.25s ease;
border: 1px solid transparent;
}
.admin-nav-item:hover {
background: var(--color-surface-hover);
color: #5c7a99;
border-color: var(--color-border);
}
.admin-nav-item.active {
background: linear-gradient(145deg, #5c7a99 0%, #4a6d8a 100%);
color: white;
border-color: #5c7a99;
box-shadow: 0 2px 8px rgba(92, 122, 153, 0.35);
}
.admin-nav-icon {
font-size: 1.1rem;
}
.admin-nav-text {
white-space: nowrap;
}
.admin-nav-divider {
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin: var(--spacing-sm) 0;
}
.admin-nav-item.admin-nav-jefe {
background: linear-gradient(145deg, #0097a7 0%, #00838f 100%);
border-color: #0097a7;
}
.admin-nav-item.admin-nav-jefe:hover {
background: linear-gradient(145deg, #00acc1 0%, #0097a7 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 151, 167, 0.4);
}
/* Secciones */
.admin-section {
margin-bottom: var(--spacing-xl);
}
.admin-section-title {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--color-border);
}
.section-icon {
font-size: 1.3rem;
}
/* Grid de Stats del Admin */
.admin-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.admin-stat-card {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.admin-stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.admin-stat-card.stat-qrv {
border-left: 4px solid var(--color-qrv);
}
.admin-stat-card.stat-qap {
border-left: 4px solid var(--color-qap);
}
.admin-stat-card.stat-qrt {
border-left: 4px solid var(--color-qrt);
}
.admin-stat-card.stat-total {
border-left: 4px solid #5c7a99;
}
.admin-stat-icon {
font-size: 2.5rem;
opacity: 0.9;
}
.admin-stat-content {
flex: 1;
}
.admin-stat-number {
font-size: 2rem;
font-weight: 700;
color: var(--color-text-primary);
line-height: 1;
}
.admin-stat-label {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin-top: 4px;
}
.admin-stat-badge {
display: inline-block;
margin-top: 8px;
padding: 2px 10px;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.5px;
}
.stat-qrv .admin-stat-badge {
background: var(--color-qrv-bg);
color: var(--color-qrv);
}
.stat-qap .admin-stat-badge {
background: var(--color-qap-bg);
color: var(--color-qap);
}
.stat-qrt .admin-stat-badge {
background: var(--color-qrt-bg);
color: var(--color-qrt);
}
.stat-total .admin-stat-badge {
background: rgba(92, 122, 153, 0.15);
color: #5c7a99;
}
/* Grid de Cards del Admin */
.admin-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
}
.admin-card {
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.admin-card:hover {
box-shadow: var(--shadow-md);
border-color: #5c7a99;
}
.admin-card-header {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-border);
}
.admin-card-icon {
font-size: 2rem;
}
.admin-card-header h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text-primary);
}
.admin-card-body {
padding: var(--spacing-lg);
flex: 1;
}
.admin-card-desc {
margin: 0;
color: var(--color-text-secondary);
font-size: 0.9rem;
line-height: 1.5;
}
.admin-card-stats {
display: flex;
justify-content: space-around;
text-align: center;
}
.admin-card-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.admin-card-stat .stat-value {
font-size: 1.75rem;
font-weight: 700;
color: var(--color-text-primary);
}
.admin-card-stat .stat-value.success {
color: var(--color-qrv);
}
.admin-card-stat .stat-value.muted {
color: var(--color-text-muted);
}
.admin-card-stat .stat-desc {
font-size: 0.75rem;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.admin-card-footer {
padding: var(--spacing-md) var(--spacing-lg);
background: var(--color-surface-light);
border-top: 1px solid var(--color-border);
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.admin-card-btn {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: linear-gradient(145deg, #5c7a99 0%, #4a6d8a 100%);
color: white;
border-radius: var(--radius-md);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 2px 4px rgba(92, 122, 153, 0.2);
}
.admin-card-btn:hover {
background: linear-gradient(145deg, #6b8bab 0%, #5c7a99 100%);
color: white;
transform: translateX(3px);
box-shadow: 0 4px 8px rgba(92, 122, 153, 0.25);
}
.admin-card-btn.btn-outline {
background: transparent;
color: var(--color-text);
border: 2px solid #5c7a99;
box-shadow: none;
}
.admin-card-btn.btn-outline:hover {
background: rgba(92, 122, 153, 0.08);
border-color: #4a6d8a;
color: #4a6d8a;
transform: none;
}
/* Card Jefe de Sección */
.admin-card.admin-card-jefe {
border: 2px solid #0097a7;
background: linear-gradient(145deg, rgba(0, 151, 167, 0.05) 0%, transparent 100%);
}
.admin-card.admin-card-jefe .admin-card-header {
background: linear-gradient(145deg, rgba(0, 151, 167, 0.15) 0%, rgba(0, 151, 167, 0.05) 100%);
}
.admin-card.admin-card-jefe .admin-card-icon {
background: linear-gradient(145deg, #0097a7 0%, #00838f 100%);
}
.admin-card-btn.admin-card-btn-jefe {
background: linear-gradient(145deg, #0097a7 0%, #00838f 100%);
box-shadow: 0 2px 4px rgba(0, 151, 167, 0.3);
}
.admin-card-btn.admin-card-btn-jefe:hover {
background: linear-gradient(145deg, #00acc1 0%, #0097a7 100%);
box-shadow: 0 4px 12px rgba(0, 151, 167, 0.4);
}
/* Responsive Admin */
@media (max-width: 768px) {
.admin-header {
margin: calc(-1 * var(--spacing-md)) calc(-1 * var(--spacing-md)) var(--spacing-md);
padding: var(--spacing-lg) var(--spacing-md);
}
.admin-header h1 {
font-size: 1.5rem;
}
.admin-sidebar {
padding: var(--spacing-sm);
gap: 6px;
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.admin-nav-item {
padding: 8px 12px;
font-size: 0.8rem;
}
.admin-nav-text {
display: none;
}
.admin-nav-icon {
font-size: 1.3rem;
}
.admin-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-sm);
}
.admin-stat-card {
padding: var(--spacing-md);
flex-direction: column;
text-align: center;
}
.admin-stat-icon {
font-size: 2rem;
}
.admin-stat-number {
font-size: 1.5rem;
}
.admin-cards-grid {
grid-template-columns: 1fr;
}
}
/* Temas claros para admin */
[data-theme="light"] .admin-card,
[data-theme="medium"] .admin-card {
background: var(--color-surface);
}
[data-theme="light"] .admin-card-header,
[data-theme="medium"] .admin-card-header {
background: var(--color-surface-light);
}
[data-theme="light"] .admin-stat-card,
[data-theme="medium"] .admin-stat-card {
background: var(--color-surface);
}
[data-theme="light"] .admin-sidebar,
[data-theme="medium"] .admin-sidebar {
background: var(--color-surface);
}
[data-theme="light"] .admin-nav-item,
[data-theme="medium"] .admin-nav-item {
color: var(--color-text);
}
[data-theme="light"] .admin-nav-item:hover,
[data-theme="medium"] .admin-nav-item:hover {
color: var(--color-primary);
}
/* ====================================
Botones - Overrides para Temas Claros
==================================== */
[data-theme="light"] .btn,
[data-theme="medium"] .btn {
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
[data-theme="light"] .btn:hover,
[data-theme="medium"] .btn:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
[data-theme="light"] .btn-secondary,
[data-theme="medium"] .btn-secondary {
background: var(--color-surface);
color: var(--color-text);
border: 2px solid var(--color-border);
}
[data-theme="light"] .btn-secondary:hover,
[data-theme="medium"] .btn-secondary:hover {
background: var(--color-surface-hover);
color: var(--color-text-primary);
}
[data-theme="light"] .btn-outline,
[data-theme="medium"] .btn-outline {
background: transparent;
border: 2px solid var(--color-border);
color: var(--color-text);
}
[data-theme="light"] .btn-outline:hover,
[data-theme="medium"] .btn-outline:hover {
background: var(--color-surface-hover);
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Botones con fondo de color en tema medium: forzar texto blanco legible */
[data-theme="medium"] .btn-primary,
[data-theme="medium"] .btn-danger {
color: #fff !important;
}
/* Fix texto blanco en botones/nav/submenu para temas claros */
[data-theme="light"] .jefe-btn-primary,
[data-theme="light"] .jefe-btn-danger,
[data-theme="light"] .jefe-btn-success,
[data-theme="light"] .jefe-nav-item.active,
[data-theme="light"] .jefe-nav-item[href].active,
[data-theme="light"] .jefe-nav-item:hover,
[data-theme="light"] .submenu-item.active,
[data-theme="light"] .jefe-submenu .submenu-item.active,
[data-theme="light"] .jefe-submenu .submenu-item:hover,
[data-theme="light"] .jefe-submenu[data-id] .submenu-item.active,
[data-theme="light"] .jefe-submenu[data-id] .submenu-item:hover,
[data-theme="medium"] .jefe-btn-primary,
[data-theme="medium"] .jefe-btn-danger,
[data-theme="medium"] .jefe-btn-success,
[data-theme="medium"] .jefe-nav-item.active,
[data-theme="medium"] .jefe-nav-item[href].active,
[data-theme="medium"] .jefe-nav-item:hover,
[data-theme="medium"] .submenu-item.active,
[data-theme="medium"] .jefe-submenu .submenu-item.active,
[data-theme="medium"] .jefe-submenu .submenu-item:hover,
[data-theme="medium"] .jefe-submenu[data-id] .submenu-item.active,
[data-theme="medium"] .jefe-submenu[data-id] .submenu-item:hover {
color: #fff !important;
}
[data-theme="light"] .jefe-btn-primary:hover,
[data-theme="light"] .jefe-btn-danger:hover,
[data-theme="light"] .jefe-btn-success:hover,
[data-theme="medium"] .jefe-btn-primary:hover,
[data-theme="medium"] .jefe-btn-danger:hover,
[data-theme="medium"] .jefe-btn-success:hover {
color: #fff !important;
}
[data-theme="light"] .jefe-btn-small.jefe-btn-success,
[data-theme="light"] .jefe-btn-small.jefe-btn-danger,
[data-theme="medium"] .jefe-btn-small.jefe-btn-success,
[data-theme="medium"] .jefe-btn-small.jefe-btn-danger {
color: #fff !important;
font-weight: 600;
}
/* ====================================
Footer Mejorado con Info del Sistema
==================================== */
.footer {
background: var(--color-surface);
border-top: 1px solid var(--color-border);
padding: var(--spacing-lg) 0;
margin-top: auto;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-md);
}
.footer-main {
flex: 1;
}
.footer-copyright {
margin: 0;
color: var(--color-text-secondary);
font-size: 0.9rem;
}
.footer-info-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: 20px;
color: var(--color-text-secondary);
font-size: 0.85rem;
cursor: pointer;
transition: all 0.25s ease;
}
.footer-info-toggle:hover {
background: var(--color-surface-hover);
border-color: #5c7a99;
color: #5c7a99;
}
.footer-info-icon {
font-size: 1rem;
}
.footer-info {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease;
margin-top: 0;
}
.footer-info.open {
max-height: 800px;
opacity: 1;
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-border);
}
/* About Card - Desarrollador */
.about-card {
background: linear-gradient(145deg, var(--color-surface) 0%, var(--color-surface-hover) 100%);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.1),
0 2px 4px rgba(0, 0, 0, 0.05);
max-width: 400px;
}
.about-card-header {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-border);
}
.dev-avatar {
width: 56px;
height: 56px;
background: linear-gradient(145deg, #5c7a99 0%, #3d5a73 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 4px 8px rgba(61, 90, 115, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.dev-icon {
width: 28px;
height: 28px;
color: white;
}
.dev-info {
flex: 1;
}
.dev-name {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 4px 0;
letter-spacing: -0.02em;
}
.dev-title {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin: 0;
font-weight: 500;
}
.about-card-body {
padding-top: var(--spacing-sm);
}
.dev-contact {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: var(--color-surface-hover);
border: 1px solid var(--color-border);
border-radius: 10px;
color: var(--color-text);
text-decoration: none;
font-size: 0.9rem;
transition: all 0.25s ease;
}
.dev-contact:hover {
background: linear-gradient(145deg, #5c7a99 0%, #3d5a73 100%);
border-color: #5c7a99;
color: white;
box-shadow: 0 4px 12px rgba(61, 90, 115, 0.3);
}
.dev-contact:hover .contact-icon svg {
fill: white;
}
.contact-icon {
display: flex;
align-items: center;
justify-content: center;
}
.contact-icon svg {
fill: var(--color-text-secondary);
transition: fill 0.25s ease;
}
/* About Sections */
.about-section {
margin-bottom: var(--spacing-lg);
}
.about-section-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0 0 var(--spacing-md) 0;
}
.section-icon-svg {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: linear-gradient(145deg, #5c7a99 0%, #3d5a73 100%);
border-radius: 8px;
box-shadow: 0 2px 6px rgba(61, 90, 115, 0.25);
}
.section-icon-svg svg {
fill: white;
}
/* Tech Stack */
.tech-stack {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.tech-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text);
transition: all 0.2s ease;
}
.tech-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tech-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
padding: 4px;
}
.tech-icon svg {
width: 100%;
height: 100%;
}
/* Tech icon colors */
.python-icon {
background: rgba(55, 118, 171, 0.15);
}
.python-icon svg {
fill: #3776ab;
}
.flask-icon {
background: rgba(0, 0, 0, 0.08);
}
.flask-icon svg {
fill: var(--color-text);
}
.sql-icon {
background: rgba(203, 65, 84, 0.15);
}
.sql-icon svg {
fill: #cb4154;
}
.html-icon {
background: rgba(227, 79, 38, 0.15);
}
.html-icon svg {
fill: #e34f26;
}
.css-icon {
background: rgba(38, 77, 228, 0.15);
}
.css-icon svg {
fill: #264de4;
}
.js-icon {
background: rgba(247, 223, 30, 0.2);
}
.js-icon svg {
fill: #f0db4f;
}
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.feature-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: 0.85rem;
color: var(--color-text-secondary);
transition: all 0.2s ease;
}
.feature-item:hover {
border-color: var(--color-qrv);
background: rgba(34, 197, 94, 0.05);
}
.feature-check {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: rgba(34, 197, 94, 0.15);
color: var(--color-qrv);
border-radius: 50%;
font-size: 0.75rem;
font-weight: bold;
flex-shrink: 0;
}
.footer-bottom {
text-align: center;
margin-top: var(--spacing-lg);
padding-top: var(--spacing-md);
border-top: 1px dashed var(--color-border);
}
.footer-bottom p {
margin: 0;
font-size: 0.9rem;
color: var(--color-text-secondary);
font-weight: 500;
}
.footer-bottom .heart {
display: inline-block;
animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* Footer responsive */
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
text-align: center;
}
.footer-info-grid {
grid-template-columns: 1fr;
text-align: left;
}
}
/* Temas claros para footer */
[data-theme="light"] .tech-tag.flask,
[data-theme="medium"] .tech-tag.flask {
background: rgba(0, 0, 0, 0.06);
}
/* ====================================
Botones - Overrides para Tema Oscuro
==================================== */
[data-theme="dark"] .btn-secondary {
background: linear-gradient(145deg, #3a2518 0%, #2d1c14 100%);
color: var(--color-text);
border: 1px solid var(--color-border);
}
[data-theme="dark"] .btn-secondary:hover {
background: linear-gradient(145deg, #4a3020 0%, #3a2518 100%);
border-color: var(--color-border-light);
}
[data-theme="dark"] .btn-outline {
border-color: #7a9bb8;
color: #7a9bb8;
}
[data-theme="dark"] .btn-outline:hover {
background: rgba(122, 155, 184, 0.15);
border-color: #8fafc8;
color: #8fafc8;
}
[data-theme="dark"] .btn-link {
color: #7a9bb8;
}
[data-theme="dark"] .btn-link:hover {
background: rgba(122, 155, 184, 0.1);
color: #8fafc8;
}
/* Botones de colores en tema oscuro - más brillantes */
[data-theme="dark"] .btn-success {
background: linear-gradient(145deg, #66bb6a 0%, #43a047 100%);
color: #fff;
}
[data-theme="dark"] .btn-success:hover {
background: linear-gradient(145deg, #81c784 0%, #66bb6a 100%);
color: #1b5e20;
}
[data-theme="dark"] .btn-warning {
background: linear-gradient(145deg, #ffb74d 0%, #ffa726 100%);
color: #3e2723;
}
[data-theme="dark"] .btn-warning:hover {
background: linear-gradient(145deg, #ffcc80 0%, #ffb74d 100%);
color: #3e2723;
}
[data-theme="dark"] .btn-info {
background: linear-gradient(145deg, #4fc3f7 0%, #29b6f6 100%);
color: #01579b;
}
[data-theme="dark"] .btn-info:hover {
background: linear-gradient(145deg, #81d4fa 0%, #4fc3f7 100%);
color: #01579b;
}
/* ====================================
GPS Alert Styles
==================================== */
.gps-warning-banner {
background: linear-gradient(135deg, #e91e63, #c2185b);
color: white;
padding: 12px 20px;
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.gps-stat-card {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
text-align: center;
border: 1px solid var(--color-border);
transition: all 0.3s ease;
}
.gps-stat-card.alert {
background: rgba(244, 67, 54, 0.1);
border-color: #f44336;
animation: pulse 2s infinite;
}
.gps-stat-card.success {
background: rgba(76, 175, 80, 0.1);
border-color: #4caf50;
}
.gps-stat-number {
font-size: 2rem;
font-weight: bold;
color: var(--color-text-primary);
}
.gps-stat-label {
color: var(--color-text-secondary);
font-size: 0.9rem;
margin-top: var(--spacing-xs);
}
/* GPS Map Styles */
#gpsMap {
width: 100%;
height: 500px;
border-radius: var(--radius-md);
border: 2px solid var(--color-border);
background: var(--color-surface);
}
.map-legend {
display: flex;
gap: var(--spacing-lg);
flex-wrap: wrap;
padding: var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-sm);
margin-top: var(--spacing-md);
border: 1px solid var(--color-border);
}
.legend-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 0.9rem;
}
.legend-dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.legend-dot.qrv { background: var(--color-qrv); }
.legend-dot.qap { background: var(--color-qap); }
.legend-dot.qrt { background: var(--color-qrt); }
.legend-dot.base { background: #e53935; }
/* User markers */
.user-marker {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-xs);
border-left: 4px solid var(--color-border);
transition: all 0.2s ease;
}
.user-marker:hover {
background: var(--color-surface-hover);
}
.user-marker.qrv { border-left-color: var(--color-qrv); }
.user-marker.qap { border-left-color: var(--color-qap); }
.user-marker.qrt { border-left-color: var(--color-qrt); }
.user-marker.out-of-range {
background: rgba(233, 30, 99, 0.1);
border-left-color: #e91e63;
animation: pulse 1.5s infinite;
}
.user-marker.stale {
background: rgba(244, 67, 54, 0.12);
}
.user-marker.stale.out-of-range {
background: rgba(233, 30, 99, 0.15);
}
/* GPS Stats Grid */
.gps-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
/* Config Section Grid */
.config-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
}
/* GPS responsive */
@media (max-width: 768px) {
.gps-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
#gpsMap {
height: 350px;
}
.map-legend {
flex-direction: column;
gap: var(--spacing-sm);
}
}
/* ============================================
JEFES DE SECCION - Estilos
============================================ */
/* Header de Jefes */
.jefe-header {
padding: var(--spacing-lg) var(--spacing-xl);
margin: var(--spacing-md);
border-radius: var(--radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
color: white;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}
.jefe-header::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.jefe-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}
/* Headers por seccion */
.jefe-header-jefe {
background: linear-gradient(135deg, #3949ab 0%, #1a237e 50%, #283593 100%);
}
.jefe-header-capacitacion {
background: linear-gradient(135deg, #00897b 0%, #004d40 50%, #00695c 100%);
}
.jefe-header-movilidad {
background: linear-gradient(135deg, #e53935 0%, #b71c1c 50%, #c62828 100%);
}
.jefe-header-ayudantia {
background: linear-gradient(135deg, #fb8c00 0%, #e65100 50%, #ef6c00 100%);
}
.jefe-header-intendencia {
background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 50%, #1565c0 100%);
}
.jefe-header-segundo-jefe {
background: linear-gradient(135deg, #546e7a 0%, #263238 50%, #37474f 100%);
}
/* Alias para compatibilidad */
.jefe-header-primary { background: linear-gradient(135deg, #3949ab 0%, #1a237e 50%, #283593 100%); }
.jefe-header-danger { background: linear-gradient(135deg, #e53935 0%, #b71c1c 50%, #c62828 100%); }
.jefe-header-warning { background: linear-gradient(135deg, #fb8c00 0%, #e65100 50%, #ef6c00 100%); }
.jefe-header-info { background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 50%, #1565c0 100%); }
.jefe-header-content h1 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--spacing-xs);
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.jefe-subtitle {
font-size: 0.9rem;
opacity: 0.85;
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.jefe-header-icon {
font-size: 2.8rem;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
position: relative;
z-index: 1;
}
/* Navegacion Jefes - Menu horizontal con wrap */
.jefe-sidebar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-surface);
margin: 0 var(--spacing-md) var(--spacing-md);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 90;
}
.jefe-nav-item {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-full);
text-decoration: none;
color: var(--color-text);
transition: all 0.2s ease;
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid var(--color-border);
}
.jefe-nav-item:hover {
background: var(--color-surface-hover);
color: var(--color-text);
border-color: var(--color-border);
}
.jefe-nav-item.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* Colores pasteles por seccion */
.jefe-nav-item[href*="jefe_cuerpo"]:not(.active),
.jefe-nav-item[href*="jefe-cuerpo"]:not(.active) {
background: var(--color-seccion-jefe-bg);
color: var(--color-seccion-jefe-text);
border-color: var(--color-seccion-jefe);
}
.jefe-nav-item[href*="jefe_cuerpo"]:not(.active):hover,
.jefe-nav-item[href*="jefe_cuerpo"].active,
.jefe-nav-item[href*="jefe-cuerpo"]:not(.active):hover,
.jefe-nav-item[href*="jefe-cuerpo"].active {
background: var(--color-seccion-jefe);
color: #fff !important;
}
.jefe-nav-item[href*="capacitacion"]:not(.active) {
background: var(--color-seccion-capacitacion-bg);
color: var(--color-seccion-capacitacion-text);
border-color: var(--color-seccion-capacitacion);
}
.jefe-nav-item[href*="capacitacion"]:not(.active):hover,
.jefe-nav-item[href*="capacitacion"].active {
background: var(--color-seccion-capacitacion);
color: #fff !important;
}
.jefe-nav-item[href*="movilidad"]:not(.active) {
background: var(--color-seccion-movilidad-bg);
color: var(--color-seccion-movilidad-text);
border-color: var(--color-seccion-movilidad);
}
.jefe-nav-item[href*="movilidad"]:not(.active):hover,
.jefe-nav-item[href*="movilidad"].active {
background: var(--color-seccion-movilidad);
color: #fff !important;
}
.jefe-nav-item[href*="ayudantia"]:not(.active) {
background: var(--color-seccion-ayudantia-bg);
color: var(--color-seccion-ayudantia-text);
border-color: var(--color-seccion-ayudantia);
}
.jefe-nav-item[href*="ayudantia"]:not(.active):hover,
.jefe-nav-item[href*="ayudantia"].active {
background: var(--color-seccion-ayudantia);
color: var(--color-seccion-ayudantia-on, #fff) !important;
font-weight: 700;
}
.jefe-nav-item[href*="intendencia"]:not(.active) {
background: var(--color-seccion-intendencia-bg);
color: var(--color-seccion-intendencia-text);
border-color: var(--color-seccion-intendencia);
}
.jefe-nav-item[href*="intendencia"]:not(.active):hover,
.jefe-nav-item[href*="intendencia"].active {
background: var(--color-seccion-intendencia);
color: var(--color-seccion-intendencia-on, #fff) !important;
font-weight: 700;
}
.jefe-nav-icon {
font-size: 1rem;
}
/* Fondo blanco translucido detras del emoji en botones con fondo de color */
.jefe-nav-item.active .jefe-nav-icon,
.jefe-nav-item[href*="jefe_cuerpo"] .jefe-nav-icon,
.jefe-nav-item[href*="capacitacion"] .jefe-nav-icon,
.jefe-nav-item[href*="movilidad"] .jefe-nav-icon,
.jefe-nav-item[href*="ayudantia"] .jefe-nav-icon,
.jefe-nav-item[href*="intendencia"] .jefe-nav-icon {
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.jefe-nav-text {
font-size: 0.85rem;
}
.jefe-nav-divider {
width: 1px;
height: 24px;
background: var(--color-border);
margin: 0 var(--spacing-xs);
flex-shrink: 0;
}
/* Secciones */
.jefe-section {
padding: var(--spacing-md);
margin: 0 var(--spacing-md) var(--spacing-md);
}
.jefe-section-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: var(--spacing-md);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.section-icon {
font-size: 1.2rem;
}
/* Stats Grid */
.jefe-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-md);
}
.jefe-stat-card {
background: var(--color-surface);
padding: var(--spacing-md);
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: var(--spacing-md);
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--color-border);
}
.jefe-stat-card.stat-success {
border-left-color: var(--color-qrv);
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-qrv-bg) 100%);
}
.jefe-stat-card.stat-danger {
border-left-color: var(--color-qrt);
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-qrt-bg) 100%);
}
.jefe-stat-card.stat-warning {
border-left-color: var(--color-qap);
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-qap-bg) 100%);
}
.jefe-stat-card.stat-primary {
border-left-color: var(--color-seccion-jefe);
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-seccion-jefe-bg) 100%);
}
.jefe-stat-card.stat-info {
border-left-color: var(--color-seccion-intendencia);
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-seccion-intendencia-bg) 100%);
}
.jefe-stat-icon {
font-size: 2rem;
}
.jefe-stat-number {
font-size: 1.8rem;
font-weight: 700;
color: var(--color-text-primary);
}
.jefe-stat-label {
font-size: 0.85rem;
color: var(--color-text-secondary);
}
/* Cards Grid */
.jefe-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-md);
}
.jefe-cards-small {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.jefe-card {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
display: flex;
align-items: center;
gap: var(--spacing-md);
text-decoration: none;
color: var(--color-text);
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--color-border);
}
.jefe-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Colores de cards por seccion */
.jefe-card-primary { border-left-color: var(--color-seccion-jefe); }
.jefe-card-danger { border-left-color: var(--color-seccion-movilidad); }
.jefe-card-warning { border-left-color: var(--color-seccion-ayudantia); }
.jefe-card-info { border-left-color: var(--color-seccion-intendencia); }
.jefe-card-success { border-left-color: var(--color-seccion-capacitacion); }
/* Cards con fondo pastel */
.jefe-card-jefe {
border-left-color: var(--color-seccion-jefe);
background: var(--color-seccion-jefe-bg);
}
.jefe-card-capacitacion {
border-left-color: var(--color-seccion-capacitacion);
background: var(--color-seccion-capacitacion-bg);
}
.jefe-card-movilidad {
border-left-color: var(--color-seccion-movilidad);
background: var(--color-seccion-movilidad-bg);
}
.jefe-card-ayudantia {
border-left-color: var(--color-seccion-ayudantia);
background: var(--color-seccion-ayudantia-bg);
}
.jefe-card-intendencia {
border-left-color: var(--color-seccion-intendencia);
background: var(--color-seccion-intendencia-bg);
}
.jefe-card-segundo-jefe {
border-left-color: #78909c;
background: rgba(120, 144, 156, 0.12);
}
/* Color distinto y suave por card (borde izquierdo + tinte sutil; funciona en
los 3 temas porque el tinte es un overlay translucido sobre el fondo del tema) */
.jefe-card-jc { border-left-color: #d4a72c; background-image: linear-gradient(135deg, rgba(212,167,44,0.12), transparent 55%); }
.jefe-card-sj { border-left-color: #e07a7a; background-image: linear-gradient(135deg, rgba(224,122,122,0.12), transparent 55%); }
.jefe-card-cap { border-left-color: #4db6ac; background-image: linear-gradient(135deg, rgba(77,182,172,0.12), transparent 55%); }
.jefe-card-mov { border-left-color: #ef8e6e; background-image: linear-gradient(135deg, rgba(239,142,110,0.12), transparent 55%); }
.jefe-card-ayu { border-left-color: #f0b34d; background-image: linear-gradient(135deg, rgba(240,179,77,0.12), transparent 55%); }
.jefe-card-int { border-left-color: #6aa9e0; background-image: linear-gradient(135deg, rgba(106,169,224,0.12), transparent 55%); }
.jefe-card-eq { border-left-color: #90a4ae; background-image: linear-gradient(135deg, rgba(144,164,174,0.12), transparent 55%); }
.jefe-card-rop { border-left-color: #b072c4; background-image: linear-gradient(135deg, rgba(176,114,196,0.12), transparent 55%); }
.jefe-card-drn { border-left-color: #7e8fd6; background-image: linear-gradient(135deg, rgba(126,143,214,0.12), transparent 55%); }
.jefe-card-vhf { border-left-color: #4dc8d6; background-image: linear-gradient(135deg, rgba(77,200,214,0.12), transparent 55%); }
.jefe-card-eyms { border-left-color: #e07ba0; background-image: linear-gradient(135deg, rgba(224,123,160,0.12), transparent 55%); }
.jefe-card-crd { border-left-color: #a98b7d; background-image: linear-gradient(135deg, rgba(169,139,125,0.12), transparent 55%); }
.jefe-card-ra { border-left-color: #5bc0eb; background-image: linear-gradient(135deg, rgba(91,192,235,0.12), transparent 55%); }
.jefe-card-icon {
font-size: 2.5rem;
}
.jefe-card-content h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: var(--spacing-xs);
}
.jefe-card-content p {
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.jefe-card-arrow {
margin-left: auto;
font-size: 1.5rem;
opacity: 0.5;
}
/* Botones Jefe - Estilo consistente */
.jefe-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
padding: 8px 16px;
border-radius: var(--radius-md);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.2s ease;
white-space: nowrap;
}
.jefe-btn-primary {
background: var(--color-primary);
color: #fff !important;
border-color: var(--color-primary);
}
.jefe-btn-primary:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
/* ============================================================
Submenu de seccion: items teñidos por NIVEL DE PERMISO de acceso
Tono claro = ver (Lectura) · medio = editar (Operador) · oscuro = administrar (Admin)
Respeta el color de cada seccion/departamento.
Uso en templates: class="submenu-item lvl--"
El prefijo .jefe-submenu da especificidad (0,3,0) para ganarle a los
.submenu-item y .submenu-item.active locales de cada template.
============================================================ */
.jefe-submenu .submenu-item[class*="lvl-"],
.jefe-submenu[data-id] .submenu-item[class*="lvl-"] { color:#fff !important; border-color:transparent !important; }
.jefe-submenu .submenu-item[class*="lvl-"]:hover { filter: brightness(1.13); color:#fff !important; }
.jefe-submenu .submenu-item[class*="lvl-"].active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); font-weight:700; }
/* Secciones (color del encabezado) */
.jefe-submenu .submenu-item.lvl-capacitacion-ver { background:#4db6ac !important; }
.jefe-submenu .submenu-item.lvl-capacitacion-editar { background:#00897b !important; }
.jefe-submenu .submenu-item.lvl-capacitacion-administrar{ background:#00564d !important; }
.jefe-submenu .submenu-item.lvl-movilidad-ver { background:#ef5350 !important; }
.jefe-submenu .submenu-item.lvl-movilidad-editar { background:#e53935 !important; }
.jefe-submenu .submenu-item.lvl-movilidad-administrar { background:#b71c1c !important; }
.jefe-submenu .submenu-item.lvl-ayudantia-ver { background:#ffa726 !important; }
.jefe-submenu .submenu-item.lvl-ayudantia-editar { background:#fb8c00 !important; }
.jefe-submenu .submenu-item.lvl-ayudantia-administrar { background:#e65100 !important; }
.jefe-submenu .submenu-item.lvl-intendencia-ver { background:#42a5f5 !important; }
.jefe-submenu .submenu-item.lvl-intendencia-editar { background:#1e88e5 !important; }
.jefe-submenu .submenu-item.lvl-intendencia-administrar { background:#0d47a1 !important; }
/* Departamentos (respetan --color-depto-*) */
.jefe-submenu .submenu-item.lvl-equipos-ver { background:#90a4ae !important; }
.jefe-submenu .submenu-item.lvl-equipos-editar { background:#607d8b !important; }
.jefe-submenu .submenu-item.lvl-equipos-administrar{ background:#455a64 !important; }
.jefe-submenu .submenu-item.lvl-eyms-ver { background:#26a69a !important; }
.jefe-submenu .submenu-item.lvl-eyms-editar { background:#00897b !important; }
.jefe-submenu .submenu-item.lvl-eyms-administrar { background:#00695c !important; }
.jefe-submenu .submenu-item.lvl-vhf-ver { background:#7e57c2 !important; }
.jefe-submenu .submenu-item.lvl-vhf-editar { background:#5e35b1 !important; }
.jefe-submenu .submenu-item.lvl-vhf-administrar { background:#4527a0 !important; }
.jefe-submenu .submenu-item.lvl-drones-ver { background:#5c6bc0 !important; }
.jefe-submenu .submenu-item.lvl-drones-editar { background:#3949ab !important; }
.jefe-submenu .submenu-item.lvl-drones-administrar { background:#283593 !important; }
.jefe-submenu .submenu-item.lvl-cuerdas-ver { background:#ab47bc !important; }
.jefe-submenu .submenu-item.lvl-cuerdas-editar { background:#9c27b0 !important; }
.jefe-submenu .submenu-item.lvl-cuerdas-administrar{ background:#7b1fa2 !important; }
.jefe-submenu .submenu-item.lvl-rescate-ver { background:#29b6f6 !important; }
.jefe-submenu .submenu-item.lvl-rescate-editar { background:#0288d1 !important; }
.jefe-submenu .submenu-item.lvl-rescate-administrar{ background:#01579b !important; }
.jefe-submenu .submenu-item.lvl-roperia-ver { background:#ec407a !important; }
.jefe-submenu .submenu-item.lvl-roperia-editar { background:#d81b60 !important; }
.jefe-submenu .submenu-item.lvl-roperia-administrar{ background:#ad1457 !important; }
/* Contraste de los chips por nivel: el blanco sobre los tonos claros daba
1,9-3,9:1. Los claros pasan a texto oscuro; los del limite (4,2-4,4) siguen
en blanco con un velo que los lleva a AA. */
.jefe-submenu .submenu-item.lvl-capacitacion-ver,
.jefe-submenu .submenu-item.lvl-movilidad-ver,
.jefe-submenu .submenu-item.lvl-ayudantia-ver,
.jefe-submenu .submenu-item.lvl-ayudantia-editar,
.jefe-submenu .submenu-item.lvl-ayudantia-administrar,
.jefe-submenu .submenu-item.lvl-intendencia-ver,
.jefe-submenu .submenu-item.lvl-intendencia-editar,
.jefe-submenu .submenu-item.lvl-equipos-ver,
.jefe-submenu .submenu-item.lvl-eyms-ver,
.jefe-submenu .submenu-item.lvl-rescate-ver,
.jefe-submenu .submenu-item.lvl-rescate-editar,
.rop-subnav .rop-subnav-item.lvl-roperia-ver {
color: #141414 !important;
font-weight: 600;
}
.jefe-submenu .submenu-item.lvl-capacitacion-editar,
.jefe-submenu .submenu-item.lvl-movilidad-editar,
.jefe-submenu .submenu-item.lvl-equipos-editar,
.jefe-submenu .submenu-item.lvl-eyms-editar {
background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)) !important;
}
/* Roperia usa su propia subnav (.rop-subnav-item) */
.rop-subnav .rop-subnav-item[class*="lvl-"] { color:#fff !important; border-color:transparent !important; }
.rop-subnav .rop-subnav-item[class*="lvl-"]:hover { filter:brightness(1.13); color:#fff !important; }
.rop-subnav .rop-subnav-item[class*="lvl-"].active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); font-weight:700; }
.rop-subnav .rop-subnav-item.lvl-roperia-ver { background:#ec407a !important; }
.rop-subnav .rop-subnav-item.lvl-roperia-editar { background:#d81b60 !important; }
.rop-subnav .rop-subnav-item.lvl-roperia-administrar{ background:#ad1457 !important; }
.jefe-btn-secondary {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
}
.jefe-btn-secondary:hover {
background: var(--color-surface-hover);
border-color: var(--color-text-muted);
}
.jefe-btn-success {
background: var(--color-qrv);
color: #fff !important;
border-color: var(--color-qrv);
}
.jefe-btn-success:hover {
background: var(--color-qrv-dark);
border-color: var(--color-qrv-dark);
}
.jefe-btn-danger {
background: var(--color-qrt);
color: #fff !important;
border-color: var(--color-qrt);
}
.jefe-btn-danger:hover {
background: var(--color-qrt-dark);
border-color: var(--color-qrt-dark);
}
.jefe-btn-warning {
background: var(--color-qap);
color: var(--color-text-primary, #1a1a1a);
border-color: var(--color-qap);
}
.jefe-btn-warning:hover {
background: var(--color-qap-dark);
border-color: var(--color-qap-dark);
}
.jefe-btn-outline {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.jefe-btn-outline:hover {
background: var(--color-primary);
color: white;
}
.jefe-btn-text {
background: transparent;
color: var(--color-text-secondary);
border-color: transparent;
}
.jefe-btn-text:hover {
color: var(--color-text);
background: var(--color-surface-hover);
}
.jefe-btn-small {
padding: 4px 10px;
font-size: 0.75rem;
}
.jefe-btn-large {
padding: 12px 24px;
font-size: 0.95rem;
}
/* Indicador de chequeo en curso (borrador / autosave) */
.cb-borrador {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: 12px;
border-radius: var(--radius-md, 10px);
background: linear-gradient(180deg, rgba(243, 156, 18, 0.12), rgba(243, 156, 18, 0.05));
border: 1px solid rgba(243, 156, 18, 0.35);
box-shadow: inset 0 0 0 1px rgba(243, 156, 18, 0.06);
}
.cb-en-curso {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 8px;
font-size: 0.78rem;
color: #f39c12;
}
.cb-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #f39c12;
box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2);
flex-shrink: 0;
animation: cb-pulse 1.8s ease-in-out infinite;
}
@keyframes cb-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2); }
50% { box-shadow: 0 0 0 5px rgba(243, 156, 18, 0.08); }
}
.cb-en-curso-txt {
font-weight: 700;
letter-spacing: 0.01em;
}
.cb-meta {
font-size: 0.72rem;
font-weight: 500;
color: var(--text-secondary, #94a3b8);
}
.cb-actions {
display: flex;
gap: 8px;
}
.cb-actions .cb-retomar-btn,
.cb-actions .cb-descartar-form {
flex: 1 1 0;
min-width: 0;
}
.cb-actions .cb-retomar-btn,
.cb-actions .cb-descartar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
padding: 7px 12px;
font-size: 0.8rem;
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
.cb-dot { animation: none; }
}
.jefe-btn-icon {
width: 36px;
height: 36px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
font-size: 1.2rem;
padding: var(--spacing-xs);
border-radius: var(--radius-sm);
transition: all 0.2s ease;
}
.jefe-btn-icon:hover {
background: var(--color-surface-hover);
}
/* Acciones Row */
.jefe-actions-row {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
/* Quick Actions */
.jefe-quick-actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.quick-action-btn {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--color-text);
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
}
.quick-action-btn:hover {
background: var(--color-primary);
color: white;
}
/* Tablas */
.jefe-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.jefe-table {
width: 100%;
border-collapse: collapse;
}
.jefe-table th,
.jefe-table td {
padding: var(--spacing-sm) var(--spacing-md);
text-align: left;
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.jefe-table th {
background: var(--color-bg);
font-weight: 600;
font-size: 0.85rem;
color: var(--color-text-secondary);
text-transform: uppercase;
}
.jefe-table td {
font-size: 0.9rem;
}
.jefe-table tr:hover {
background: var(--color-surface-hover);
}
.actions-cell {
display: flex;
gap: var(--spacing-xs);
}
/* Badges - Colores pasteles consistentes */
.jefe-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
background: var(--color-bg);
color: var(--color-text-secondary);
white-space: nowrap;
}
/* Estados QRV/QAP/QRT */
.jefe-badge-success { background: var(--color-qrv-bg); color: var(--color-qrv-text); }
.jefe-badge-danger { background: var(--color-qrt-bg); color: var(--color-qrt-text); }
.jefe-badge-warning { background: var(--color-qap-bg); color: var(--color-qap-text); }
/* Colores por seccion */
.jefe-badge-info { background: var(--color-seccion-intendencia-bg); color: var(--color-seccion-intendencia-text); }
.jefe-badge-primary { background: var(--color-seccion-jefe-bg); color: var(--color-seccion-jefe-text); }
.jefe-badge-secondary { background: var(--color-bg); color: var(--color-text-muted); }
.jefe-badge-orange { background: var(--color-seccion-ayudantia-bg); color: var(--color-seccion-ayudantia-text); }
.jefe-badge-capacitacion { background: var(--color-seccion-capacitacion-bg); color: var(--color-seccion-capacitacion-text); }
.jefe-badge-movilidad { background: var(--color-seccion-movilidad-bg); color: var(--color-seccion-movilidad-text); }
/* Toolbar */
.jefe-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.jefe-filters {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
align-items: center;
}
.jefe-select {
padding: var(--spacing-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-size: 0.9rem;
min-width: 150px;
}
/* Tabs */
.jefe-tab-buttons {
display: flex;
gap: 2px;
background: var(--color-bg);
padding: 2px;
border-radius: var(--radius-sm);
}
.jefe-tab-btn {
padding: var(--spacing-sm) var(--spacing-md);
text-decoration: none;
color: var(--color-text-secondary);
font-size: 0.85rem;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
}
.jefe-tab-btn:hover {
color: var(--color-text);
}
.jefe-tab-btn.active {
background: var(--color-surface);
color: var(--color-text-primary);
box-shadow: var(--shadow-sm);
}
/* Formularios */
.jefe-form {
background: var(--color-surface);
padding: var(--spacing-lg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.jefe-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
}
.jefe-form-full {
grid-column: 1 / -1;
}
.jefe-form-row {
display: flex;
gap: var(--spacing-md);
}
.jefe-form-group {
margin-bottom: var(--spacing-md);
}
.jefe-form-group label {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text-secondary);
margin-bottom: var(--spacing-xs);
}
.jefe-form-group input,
.jefe-form-group textarea,
.jefe-form-group select {
width: 100%;
padding: var(--spacing-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
font-size: 0.9rem;
}
.jefe-form-group input:focus,
.jefe-form-group textarea:focus,
.jefe-form-group select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.2);
}
.jefe-form-group small {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-top: var(--spacing-xs);
display: block;
}
.jefe-checkbox {
display: flex;
align-items: center;
gap: var(--spacing-sm);
cursor: pointer;
}
.jefe-checkbox input {
width: auto;
}
.jefe-form-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-border);
}
/* Empty State */
.jefe-empty-state {
text-align: center;
padding: var(--spacing-xl);
background: var(--color-surface);
border-radius: var(--radius-md);
}
.jefe-empty-state .empty-icon {
font-size: 3rem;
display: block;
margin-bottom: var(--spacing-md);
opacity: 0.5;
}
.jefe-empty-state p {
color: var(--color-text-muted);
margin-bottom: var(--spacing-md);
}
/* Summary */
.jefe-summary {
padding: var(--spacing-md);
color: var(--color-text-secondary);
font-size: 0.85rem;
}
/* Modal */
.jefe-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: var(--spacing-md);
}
.jefe-modal-content {
background: var(--color-surface);
border-radius: var(--radius-lg);
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
}
.jefe-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md);
border-bottom: 1px solid var(--color-border);
}
.jefe-modal-header h3 {
font-size: 1.1rem;
font-weight: 600;
}
.jefe-modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--color-text-muted);
padding: 0;
line-height: 1;
}
.jefe-modal-close:hover {
color: var(--color-text);
}
.jefe-modal-content form {
padding: var(--spacing-md);
}
.jefe-modal-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
/* Vehiculos Grid */
.vehiculos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
}
.vehiculo-card {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--spacing-md);
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--color-border);
}
.vehiculo-card.vehiculo-success { border-left-color: var(--color-qrv); }
.vehiculo-card.vehiculo-danger { border-left-color: var(--color-qrt); }
/* Iluminacion verde/rojo segun estado (igual que EYMS / Equipos por Movil) */
.vehiculo-card.flota-card-ok {
border-color: rgba(76,175,80,0.55);
box-shadow: 0 0 0 1px rgba(76,175,80,0.30), 0 0 8px rgba(76,175,80,0.22);
}
.vehiculo-card.flota-card-alerta {
border-color: #e53935;
animation: flotaAlertaPulse 1.6s ease-in-out infinite;
}
@keyframes flotaAlertaPulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(229,57,53,0.45), 0 0 6px rgba(229,57,53,0.25); }
50% { box-shadow: 0 0 0 2px rgba(229,57,53,0.75), 0 0 16px rgba(229,57,53,0.55); }
}
.vehiculo-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-sm);
}
a.vehiculo-link {
text-decoration: none;
color: inherit;
}
a.vehiculo-link:hover .vehiculo-unidad {
color: var(--color-primary);
text-decoration: underline;
}
.vehiculo-unidad {
font-size: 1.2rem;
font-weight: 700;
}
.vehiculo-status-badge {
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
}
.vehiculo-status-badge.status-success {
background: var(--color-qrv-bg);
color: var(--color-qrv);
}
.vehiculo-status-badge.status-danger {
background: var(--color-qrt-bg);
color: var(--color-qrt);
}
.vehiculo-info {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin-bottom: var(--spacing-sm);
}
.vehiculo-tipo {
display: block;
}
.vehiculo-marca {
display: block;
color: var(--color-text-muted);
}
.vehiculo-actions {
margin-top: var(--spacing-sm);
}
.vehiculo-alerta {
margin-top: var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-sm);
background: rgba(244, 67, 54, 0.1);
border-radius: var(--radius-sm);
font-size: 0.75rem;
color: var(--color-qrt);
}
.vehiculo-alerta.warning {
background: rgba(255, 193, 7, 0.1);
color: var(--color-qap);
}
.vehiculo-alerta.info {
background: rgba(33, 150, 243, 0.1);
color: var(--color-status-info, #2196f3);
}
/* Alerta clickeable: lleva al origen (mantencion) */
a.vehiculo-alerta-link {
display: flex;
align-items: center;
gap: 4px;
text-decoration: none;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
a.vehiculo-alerta-link:hover {
background: rgba(244, 67, 54, 0.2);
transform: translateX(2px);
}
a.vehiculo-alerta-link.warning:hover {
background: rgba(255, 193, 7, 0.2);
}
a.vehiculo-alerta-link.info:hover {
background: rgba(33, 150, 243, 0.2);
}
/* Fila de mantencion resaltada al llegar desde el dashboard */
tr.mant-resaltado > td {
background: rgba(244, 67, 54, 0.14) !important;
animation: mantResaltado 2.5s ease-out 1;
}
@keyframes mantResaltado {
0% { background: rgba(244, 67, 54, 0.45); }
100% { background: rgba(244, 67, 54, 0.14); }
}
.inline-form {
display: inline;
}
/* Ranking Mensual */
.ranking-leyenda {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
}
.leyenda-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: 0.85rem;
}
.leyenda-color {
width: 12px;
height: 12px;
border-radius: 50%;
}
.color-disponibilidad { background: #2196f3; }
.color-servicios { background: #4caf50; }
.color-capacitacion { background: #ff9800; }
.color-orden { background: #9c27b0; }
.color-bonus { background: #e91e63; }
.color-discrecional { background: #607d8b; }
.leyenda-item strong {
margin-left: var(--spacing-xs);
}
.leyenda-item small {
color: var(--color-text-muted);
}
.ranking-table .col-pos {
width: 50px;
text-align: center;
}
.ranking-table .col-score {
width: 70px;
text-align: center;
}
.ranking-table .col-total {
width: 80px;
text-align: center;
}
.ranking-row td {
vertical-align: middle;
}
.total-success { color: var(--color-qrv); }
.total-info { color: #2196f3; }
.total-warning { color: var(--color-qap); }
.total-danger { color: var(--color-qrt); }
.ranking-summary {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
padding: var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-md);
margin-top: var(--spacing-md);
}
.summary-stat {
display: flex;
flex-direction: column;
}
.summary-label {
font-size: 0.75rem;
color: var(--color-text-muted);
text-transform: uppercase;
}
.summary-value {
font-size: 1.2rem;
font-weight: 600;
}
/* Puntajes Form */
.user-info-card {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.user-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--color-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
}
.user-details h3 {
font-size: 1.2rem;
margin-bottom: var(--spacing-xs);
}
.user-details p {
color: var(--color-text-secondary);
font-size: 0.9rem;
}
.user-total {
margin-left: auto;
text-align: right;
}
.total-label {
display: block;
font-size: 0.75rem;
color: var(--color-text-muted);
text-transform: uppercase;
}
.total-value {
font-size: 2.5rem;
font-weight: 700;
}
.total-max {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.puntajes-form {
background: transparent;
padding: 0;
box-shadow: none;
}
.puntajes-section {
background: var(--color-surface);
padding: var(--spacing-lg);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
box-shadow: var(--shadow-sm);
}
.puntajes-section h3 {
font-size: 1rem;
margin-bottom: var(--spacing-xs);
}
.section-desc {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-bottom: var(--spacing-md);
}
.puntaje-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--color-border);
}
.puntaje-row:last-child {
border-bottom: none;
}
.puntaje-info {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.puntaje-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
opacity: 0.8;
}
.puntaje-info strong {
display: block;
font-size: 0.9rem;
}
.puntaje-info small {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.puntaje-value,
.puntaje-input {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.puntaje-value .valor {
font-size: 1.2rem;
font-weight: 600;
}
.puntaje-value .max,
.puntaje-input .max {
color: var(--color-text-muted);
font-size: 0.85rem;
}
.puntaje-input input {
width: 80px;
text-align: center;
font-size: 1.1rem;
font-weight: 600;
}
/* Tareas */
.tareas-urgentes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-md);
}
.tarea-card {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--spacing-md);
box-shadow: var(--shadow-sm);
}
.tarea-card.tarea-urgente {
border-left: 4px solid var(--color-qrt);
background: rgba(244, 67, 54, 0.05);
}
.tarea-header {
display: flex;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.tarea-prioridad {
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
}
.prioridad-danger { background: var(--color-qrt); color: white; }
.prioridad-orange { background: #f57c00; color: white; }
.prioridad-warning { background: var(--color-qap); color: #333; }
.prioridad-info { background: #0097a7; color: white; }
.tarea-categoria {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.tarea-card h4 {
font-size: 1rem;
margin-bottom: var(--spacing-xs);
}
.tarea-card p {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin-bottom: var(--spacing-sm);
}
.tarea-meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
font-size: 0.75rem;
color: var(--color-text-muted);
margin-bottom: var(--spacing-sm);
}
.tarea-actions {
display: flex;
gap: var(--spacing-sm);
}
/* Tarea Detalle */
.tarea-detalle {
background: var(--color-surface);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.tarea-detalle-header {
padding: var(--spacing-lg);
border-bottom: 1px solid var(--color-border);
}
.tarea-detalle-header h2 {
font-size: 1.3rem;
margin-bottom: var(--spacing-sm);
}
.tarea-badges {
display: flex;
gap: var(--spacing-sm);
}
.tarea-detalle-body {
padding: var(--spacing-lg);
}
.tarea-descripcion {
margin-bottom: var(--spacing-lg);
}
.tarea-descripcion h4 {
font-size: 0.85rem;
color: var(--color-text-muted);
text-transform: uppercase;
margin-bottom: var(--spacing-sm);
}
.tarea-descripcion p {
line-height: 1.6;
}
.tarea-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
}
.info-item {
padding: var(--spacing-sm);
background: var(--color-bg);
border-radius: var(--radius-sm);
}
.info-label {
display: block;
font-size: 0.75rem;
color: var(--color-text-muted);
text-transform: uppercase;
margin-bottom: var(--spacing-xs);
}
.info-value {
font-weight: 500;
}
.tarea-detalle-acciones {
padding: var(--spacing-lg);
border-top: 1px solid var(--color-border);
background: var(--color-bg);
}
.tarea-detalle-acciones h4 {
font-size: 0.85rem;
color: var(--color-text-muted);
text-transform: uppercase;
margin-bottom: var(--spacing-md);
}
.acciones-row {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
}
.accion-form {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.accion-form label {
font-size: 0.85rem;
color: var(--color-text-secondary);
}
/* Comentarios */
.comentarios-lista {
margin-bottom: var(--spacing-lg);
}
.comentario {
padding: var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-sm);
box-shadow: var(--shadow-sm);
}
.comentario-sistema {
background: var(--color-bg);
border-left: 3px solid var(--color-border);
}
.comentario-header {
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing-xs);
}
.comentario-header strong {
font-size: 0.9rem;
}
.comentario-fecha {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.comentario-texto {
font-size: 0.9rem;
line-height: 1.5;
}
.comentario-form {
background: var(--color-surface);
padding: var(--spacing-md);
border-radius: var(--radius-md);
}
.comentario-form textarea {
width: 100%;
padding: var(--spacing-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
font-family: inherit;
resize: vertical;
margin-bottom: var(--spacing-sm);
}
/* Categoria Cards */
.jefe-categoria-card {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--spacing-md);
box-shadow: var(--shadow-sm);
}
.jefe-categoria-card.inactive {
opacity: 0.6;
}
.categoria-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-sm);
}
.categoria-header h3 {
font-size: 1rem;
}
.categoria-desc {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin-bottom: var(--spacing-md);
}
.categoria-stats {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.categoria-stats .stat {
text-align: center;
}
.categoria-stats .stat-value {
display: block;
font-size: 1.2rem;
font-weight: 700;
}
.categoria-stats .stat-label {
font-size: 0.7rem;
color: var(--color-text-muted);
}
.categoria-actions {
border-top: 1px solid var(--color-border);
padding-top: var(--spacing-sm);
}
/* Config */
.config-section {
margin-bottom: var(--spacing-lg);
}
.config-section h3 {
font-size: 1rem;
margin-bottom: var(--spacing-xs);
}
.config-total {
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
}
/* Back Link */
.jefe-back-link {
padding: var(--spacing-md);
text-align: center;
}
.jefe-back-link a {
color: var(--color-text-secondary);
text-decoration: none;
}
.jefe-back-link a:hover {
color: var(--color-primary);
}
/* Puntos Preview */
.jefe-puntos-preview {
background: var(--color-bg);
padding: var(--spacing-md);
border-radius: var(--radius-sm);
text-align: center;
}
.jefe-puntos-preview .puntos-valor {
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
}
/* Text utilities */
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-qrv); }
.text-danger { color: var(--color-qrt); }
.inactive-row {
opacity: 0.5;
}
/* Completar info */
.completar-info {
padding: var(--spacing-md);
background: var(--color-bg);
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-md);
text-align: center;
}
/* Responsive */
@media (max-width: 768px) {
.jefe-header {
flex-direction: column;
text-align: center;
gap: var(--spacing-md);
}
.jefe-sidebar {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 6px;
padding: var(--spacing-sm);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.jefe-sidebar::-webkit-scrollbar {
display: none;
}
.jefe-nav-item {
padding: 6px 10px;
font-size: 0.75rem;
flex-shrink: 0;
}
.jefe-nav-icon {
font-size: 0.85rem;
width: 20px;
height: 20px;
}
.jefe-nav-text {
font-size: 0.75rem;
}
.jefe-submenu {
justify-content: center;
padding: 0 var(--spacing-sm) var(--spacing-sm);
gap: 4px;
flex-wrap: wrap;
}
.jefe-submenu .submenu-item {
padding: 4px 10px;
font-size: 0.7rem;
}
.jefe-toolbar {
flex-direction: column;
}
.jefe-filters {
width: 100%;
}
.jefe-select {
/* flex:1 es 1 1 0%: con varios filtros en la misma fila cada select se
encogia a 100px y el texto de la opcion quedaba cortado. Con base 100%
cada uno arranca a lo ancho y recien se acomodan de a dos si entran. */
flex: 1 1 100%;
min-width: 140px;
/* con borde y padding propios, sin esto se pasa 2px del contenedor */
max-width: 100%;
box-sizing: border-box;
/* 16px como en .form-control: iOS hace zoom solo al enfocar un control
con fuente menor, y despues hay que volver a achicar con los dedos.
De paso el select pasa de 30px a una altura comoda para el dedo. */
font-size: 16px;
}
.acciones-row {
flex-direction: column;
}
.accion-form {
width: 100%;
}
.user-info-card {
flex-direction: column;
text-align: center;
}
.user-total {
margin-left: 0;
margin-top: var(--spacing-md);
}
.ranking-leyenda {
justify-content: center;
}
/* Stats grid responsive */
.jefe-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-sm);
}
.jefe-stat-card {
padding: var(--spacing-sm);
gap: var(--spacing-sm);
}
.jefe-stat-icon { font-size: 1.4rem; }
.jefe-stat-number { font-size: 1.3rem; }
.jefe-stat-label { font-size: 0.7rem; }
/* Tables: allow horizontal scroll with indicator.
Los otros contenedores de tabla (Orden Interno, Supervision) cortaban la
tabla sin ninguna pista de que habia mas a la derecha. */
.jefe-table-container,
.oi-table-container,
.sv-table-container {
position: relative;
}
.jefe-table-container::after,
.oi-table-container::after,
.sv-table-container::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 20px;
background: linear-gradient(to left, var(--color-surface), transparent);
pointer-events: none;
}
.jefe-table th,
.jefe-table td {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: 0.8rem;
}
/* Section padding */
.jefe-section {
padding: var(--spacing-sm);
margin: 0 var(--spacing-sm) var(--spacing-sm);
}
.jefe-section-title {
font-size: 1rem;
}
/* Header responsive */
.jefe-header-content h1 {
font-size: 1.2rem;
}
.jefe-subtitle {
font-size: 0.8rem;
}
.jefe-header-icon {
font-size: 2rem;
}
/* Submenu: horizontal scroll en mobile */
.jefe-submenu {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: var(--spacing-sm);
}
.jefe-submenu::-webkit-scrollbar { display: none; }
/* Filter bar responsive */
.jefe-filter-bar {
flex-direction: column;
gap: var(--spacing-sm);
}
/* Inline stats in dashboard */
[style*="grid-template-columns: repeat(auto-fill"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.5rem !important;
}
}
/* Extra small screens */
@media (max-width: 480px) {
.jefe-stats-grid {
grid-template-columns: 1fr 1fr;
}
.jefe-stat-number { font-size: 1.1rem; }
.jefe-stat-icon { font-size: 1.2rem; }
.jefe-nav-item {
padding: 4px 8px;
font-size: 0.7rem;
}
.jefe-submenu .submenu-item {
padding: 3px 8px;
font-size: 0.65rem;
}
.jefe-header {
padding: var(--spacing-sm);
margin: var(--spacing-sm);
}
.jefe-header-content h1 {
font-size: 1rem;
}
}
/* Quick Access Bar - Estilo J-NAV */
.quick-access-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-surface);
margin: 0 var(--spacing-md) var(--spacing-md);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.quick-access-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: var(--color-bg);
border: 1px solid transparent;
border-radius: 9999px;
text-decoration: none;
color: var(--color-text-secondary);
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
transition: all 0.2s ease;
}
.quick-access-btn:hover {
transform: translateY(-1px);
background: var(--color-surface-hover);
color: var(--color-text);
border-color: var(--color-border);
}
.quick-access-report {
background: rgba(0, 151, 167, 0.12);
color: #00838f;
border-color: #0097a7;
}
.quick-access-report:hover {
background: #0097a7;
color: white;
border-color: #0097a7;
}
.quick-access-jefe {
background: rgba(255, 152, 0, 0.12);
color: #e65100;
border-color: #ff9800;
}
.quick-access-jefe:hover {
background: #ff9800;
color: white;
border-color: #ff9800;
}
.quick-access-admin {
background: rgba(255, 160, 0, 0.12);
color: #ff8f00;
border-color: #ffa000;
}
.quick-access-admin:hover {
background: #ffa000;
color: white;
border-color: #ffa000;
}
.quick-icon {
font-size: 1rem;
}
@media (max-width: 600px) {
.quick-access-btn {
flex: 1 1 0;
justify-content: center;
text-align: center;
padding: 6px 8px;
font-size: 0.82rem;
}
}
/* Submenu para secciones de jefes - Estilo unificado con J-NAV */
.jefe-submenu {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px var(--spacing-md);
flex-wrap: wrap;
position: sticky;
top: 52px;
z-index: 89;
background: var(--color-bg);
margin-bottom: var(--spacing-sm);
}
.jefe-submenu .submenu-item {
display: inline-flex;
align-items: center;
padding: 5px 12px;
background: var(--color-bg);
border: 1px solid transparent;
border-radius: var(--radius-full);
text-decoration: none;
color: var(--color-text-secondary);
font-size: 0.8rem;
font-weight: 500;
transition: all 0.2s ease;
white-space: nowrap;
}
.jefe-submenu .submenu-item:hover {
background: var(--color-surface-hover);
color: var(--color-text);
border-color: var(--color-border);
}
.jefe-submenu .submenu-item.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* Colores pasteles para submenús por sección */
/* Jefe de Cuerpo */
.jefe-submenu[data-id="JC-SUB"] .submenu-item:not(.active) {
background: var(--color-seccion-jefe-bg);
color: var(--color-seccion-jefe-text);
border-color: var(--color-seccion-jefe);
}
.jefe-submenu[data-id="JC-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="JC-SUB"] .submenu-item.active {
background: var(--color-seccion-jefe);
color: white;
border-color: var(--color-seccion-jefe);
}
/* Segundo Jefe (identidad roja) */
.jefe-submenu[data-id="SJ-SUB"] .submenu-item:not(.active) {
background: var(--color-seccion-segundo-bg);
color: var(--color-seccion-segundo-text);
border-color: var(--color-seccion-segundo);
}
.jefe-submenu[data-id="SJ-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="SJ-SUB"] .submenu-item.active {
background: var(--color-seccion-segundo);
color: white;
border-color: var(--color-seccion-segundo);
}
/* Capacitación */
.jefe-submenu[data-id="CAP-SUB"] .submenu-item:not(.active) {
background: var(--color-seccion-capacitacion-bg);
color: var(--color-seccion-capacitacion-text);
border-color: var(--color-seccion-capacitacion);
}
.jefe-submenu[data-id="CAP-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="CAP-SUB"] .submenu-item.active {
background: var(--color-seccion-capacitacion);
color: white;
border-color: var(--color-seccion-capacitacion);
}
/* Movilidad */
.jefe-submenu[data-id="MOV-SUB"] .submenu-item:not(.active) {
background: var(--color-seccion-movilidad-bg);
color: var(--color-seccion-movilidad-text);
border-color: var(--color-seccion-movilidad);
}
.jefe-submenu[data-id="MOV-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="MOV-SUB"] .submenu-item.active {
background: var(--color-seccion-movilidad);
color: white;
border-color: var(--color-seccion-movilidad);
}
/* Ayudantía */
.jefe-submenu[data-id="AYU-SUB"] { justify-content: flex-start; }
.jefe-submenu[data-id="AYU-SUB"] .submenu-item:not(.active) {
background: var(--color-seccion-ayudantia-bg);
color: var(--color-seccion-ayudantia-text);
border-color: var(--color-seccion-ayudantia);
}
.jefe-submenu[data-id="AYU-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="AYU-SUB"] .submenu-item.active {
background: var(--color-seccion-ayudantia);
color: var(--color-seccion-ayudantia-on, #fff);
font-weight: 700;
border-color: var(--color-seccion-ayudantia);
}
/* Intendencia */
.jefe-submenu[data-id="INT-SUB"] .submenu-item:not(.active) {
background: var(--color-seccion-intendencia-bg);
color: var(--color-seccion-intendencia-text);
border-color: var(--color-seccion-intendencia);
}
.jefe-submenu[data-id="INT-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="INT-SUB"] .submenu-item.active {
background: var(--color-seccion-intendencia);
color: var(--color-seccion-intendencia-on, #fff);
font-weight: 700;
border-color: var(--color-seccion-intendencia);
}
/* Drones */
.jefe-submenu[data-id="DRN-SUB"] .submenu-item:not(.active) {
background: var(--color-seccion-drones-bg);
color: var(--color-seccion-drones-text);
border-color: var(--color-seccion-drones);
}
.jefe-submenu[data-id="DRN-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="DRN-SUB"] .submenu-item.active {
background: var(--color-seccion-drones);
color: white;
border-color: var(--color-seccion-drones);
}
/* VHF */
.jefe-submenu[data-id="VHF-SUB"] .submenu-item:not(.active) {
background: var(--color-seccion-vhf-bg);
color: var(--color-seccion-vhf-text);
border-color: var(--color-seccion-vhf);
}
.jefe-submenu[data-id="VHF-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="VHF-SUB"] .submenu-item.active {
background: var(--color-seccion-vhf);
color: var(--color-seccion-vhf-on, #fff);
font-weight: 700;
border-color: var(--color-seccion-vhf);
}
/* O2 / ERA */
.jefe-submenu[data-id="O2-SUB"] .submenu-item:not(.active) {
background: var(--color-seccion-o2-bg);
color: var(--color-seccion-o2-text);
border-color: var(--color-seccion-o2);
}
.jefe-submenu[data-id="O2-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="O2-SUB"] .submenu-item.active {
background: var(--color-seccion-o2);
color: white;
border-color: var(--color-seccion-o2);
}
/* Equipos */
.jefe-submenu[data-id="EQ-SUB"] .submenu-item:not(.active) {
background: var(--color-depto-equipos-bg);
color: var(--color-depto-equipos-text);
border-color: var(--color-depto-equipos);
}
.jefe-submenu[data-id="EQ-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="EQ-SUB"] .submenu-item.active {
background: var(--color-depto-equipos);
color: white;
border-color: var(--color-depto-equipos);
}
/* Cuerdas */
.jefe-submenu[data-id="CRD-SUB"] .submenu-item:not(.active) {
background: var(--color-depto-cuerdas-bg);
color: var(--color-depto-cuerdas-text);
border-color: var(--color-depto-cuerdas);
}
.jefe-submenu[data-id="CRD-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="CRD-SUB"] .submenu-item.active {
background: var(--color-depto-cuerdas);
color: white;
border-color: var(--color-depto-cuerdas);
}
/* Rescate Acuatico */
.jefe-submenu[data-id="RA-SUB"] .submenu-item:not(.active) {
background: var(--color-depto-ra-bg);
color: var(--color-depto-ra-text);
border-color: var(--color-depto-ra);
}
.jefe-submenu[data-id="RA-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="RA-SUB"] .submenu-item.active {
background: var(--color-depto-ra);
color: white;
border-color: var(--color-depto-ra);
}
/* Bolsos / EYMS */
.jefe-submenu[data-id="BLS-SUB"] .submenu-item:not(.active) {
background: var(--color-depto-bolsos-bg);
color: var(--color-depto-bolsos-text);
border-color: var(--color-depto-bolsos);
}
.jefe-submenu[data-id="BLS-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="BLS-SUB"] .submenu-item.active {
background: var(--color-depto-bolsos);
color: white;
border-color: var(--color-depto-bolsos);
}
/* Roperia */
.jefe-submenu[data-id="ROP-SUB"] .submenu-item:not(.active) {
background: var(--color-seccion-ayudantia-bg);
color: var(--color-seccion-ayudantia-text);
border-color: var(--color-seccion-ayudantia);
}
.jefe-submenu[data-id="ROP-SUB"] .submenu-item:hover,
.jefe-submenu[data-id="ROP-SUB"] .submenu-item.active {
background: var(--color-seccion-ayudantia);
color: var(--color-seccion-ayudantia-on, #fff);
font-weight: 700;
border-color: var(--color-seccion-ayudantia);
}
/* Chip activo: velo oscuro que lleva el blanco a AA (4.5:1) sobre los colores
de seccion, que solos daban 3,0-4,4. No aplica a las familias de color claro
(naranja/celeste/azul), que llevan texto oscuro: ahi el velo las apagaria. */
.jefe-submenu[data-id]:not([data-id="AYU-SUB"]):not([data-id="VHF-SUB"]):not([data-id="INT-SUB"]):not([data-id="ROP-SUB"]) .submenu-item.active,
.jefe-submenu[data-id]:not([data-id="AYU-SUB"]):not([data-id="VHF-SUB"]):not([data-id="INT-SUB"]):not([data-id="ROP-SUB"]) .submenu-item:hover,
.jefe-submenu .submenu-item.active,
.jefe-submenu .submenu-item:hover {
background-image: linear-gradient(rgba(0, 0, 0, 0.21), rgba(0, 0, 0, 0.21));
}
.jefe-submenu .submenu-item:not(.active):not(:hover) { background-image: none; }
/* El texto oscuro de las familias claras tiene que ganarle al fix global
"texto blanco en submenus de temas claros" (mas arriba, con !important). */
[data-theme] .jefe-submenu[data-id="AYU-SUB"] .submenu-item.active,
[data-theme] .jefe-submenu[data-id="AYU-SUB"] .submenu-item:hover,
[data-theme] .jefe-submenu[data-id="ROP-SUB"] .submenu-item.active,
[data-theme] .jefe-submenu[data-id="ROP-SUB"] .submenu-item:hover {
color: var(--color-seccion-ayudantia-on) !important;
}
[data-theme] .jefe-submenu[data-id="VHF-SUB"] .submenu-item.active,
[data-theme] .jefe-submenu[data-id="VHF-SUB"] .submenu-item:hover {
color: var(--color-seccion-vhf-on) !important;
}
[data-theme] .jefe-submenu[data-id="INT-SUB"] .submenu-item.active,
[data-theme] .jefe-submenu[data-id="INT-SUB"] .submenu-item:hover {
color: var(--color-seccion-intendencia-on) !important;
}
/* Items de departamento por permiso — estilo outline sutil */
.jefe-submenu .submenu-item.submenu-dept:not(.active) {
background: transparent !important;
border-style: dashed !important;
opacity: 0.65;
font-size: 0.75rem;
}
.jefe-submenu .submenu-item.submenu-dept:not(.active):hover {
background: var(--color-surface-hover) !important;
opacity: 1;
}
.jefe-submenu .submenu-item.submenu-dept.active {
opacity: 1;
border-style: solid !important;
}
/* ================================================
ADMIN PROFESSIONAL STYLES
Unified styling system for admin panel
================================================ */
/* Admin Buttons */
.admin-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
border: none;
border-radius: var(--radius-md);
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.admin-btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.admin-btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.admin-btn-primary:hover {
background: linear-gradient(135deg, #5a6fd6, #6a4190);
}
.admin-btn-secondary {
background: var(--color-surface-light);
color: var(--color-text);
border: 1px solid var(--color-border);
}
.admin-btn-secondary:hover {
background: var(--color-surface-hover);
border-color: var(--color-text-muted);
}
.admin-btn-success {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}
.admin-btn-success:hover {
background: linear-gradient(135deg, #059669, #047857);
}
.admin-btn-warning {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
}
.admin-btn-warning:hover {
background: linear-gradient(135deg, #d97706, #b45309);
}
.admin-btn-danger {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
}
.admin-btn-danger:hover {
background: linear-gradient(135deg, #dc2626, #b91c1c);
}
.admin-btn-sm {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: 0.8rem;
}
.admin-btn-lg {
padding: var(--spacing-md) var(--spacing-lg);
font-size: 1rem;
}
.admin-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--radius-sm);
}
.admin-btn-sm.admin-btn-icon {
width: 32px;
height: 32px;
}
/* Admin Toolbar */
.admin-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
box-shadow: var(--shadow-sm);
flex-wrap: wrap;
}
.admin-toolbar-search {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex: 1;
min-width: 200px;
max-width: 400px;
background: var(--color-bg);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.admin-toolbar-search:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.admin-toolbar-search-icon {
color: var(--color-text-muted);
}
.admin-toolbar-search input {
flex: 1;
border: none;
background: transparent;
color: var(--color-text);
font-size: 0.9rem;
outline: none;
}
.admin-toolbar-search input::placeholder {
color: var(--color-text-muted);
}
.admin-toolbar-group {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
/* Admin Table */
.admin-table-container {
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
margin-bottom: var(--spacing-md);
}
.admin-table {
width: 100%;
border-collapse: collapse;
}
.admin-table th,
.admin-table td {
padding: var(--spacing-md);
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.admin-table th {
background: var(--color-surface-light);
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-muted);
}
.admin-table td {
font-size: 0.9rem;
vertical-align: middle;
}
.admin-table tbody tr {
transition: background 0.15s ease;
}
.admin-table tbody tr:hover {
background: var(--color-surface-hover);
}
.admin-table tbody tr:last-child td {
border-bottom: none;
}
.cell-name {
font-weight: 600;
color: var(--color-text);
}
.cell-secondary {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-top: 2px;
}
.cell-actions {
display: flex;
gap: var(--spacing-xs);
justify-content: flex-end;
}
/* Admin Badges */
.admin-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.admin-badge-primary {
background: rgba(102, 126, 234, 0.15);
color: #667eea;
}
.admin-badge-success {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
}
.admin-badge-warning {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
.admin-badge-danger {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.admin-badge-info {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
}
.admin-badge-secondary {
background: var(--color-surface-light);
color: var(--color-text-muted);
}
/* Admin Pagination */
.admin-pagination {
display: flex;
justify-content: center;
gap: var(--spacing-xs);
padding: var(--spacing-md);
}
.admin-pagination-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--spacing-sm);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
border: 1px solid var(--color-border);
transition: all 0.2s ease;
}
.admin-pagination-btn:hover:not(.disabled):not(.active) {
background: var(--color-surface-hover);
border-color: var(--color-text-muted);
}
.admin-pagination-btn.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-color: transparent;
}
.admin-pagination-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Admin Empty State */
.admin-empty-state {
text-align: center;
padding: var(--spacing-xl) var(--spacing-lg);
}
.admin-empty-state-icon {
font-size: 3rem;
margin-bottom: var(--spacing-md);
opacity: 0.5;
}
.admin-empty-state-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--color-text);
}
.admin-empty-state-text {
color: var(--color-text-muted);
margin-bottom: var(--spacing-md);
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
/* Admin Flex Utilities */
.admin-flex {
display: flex;
}
.admin-gap-xs { gap: var(--spacing-xs); }
.admin-gap-sm { gap: var(--spacing-sm); }
.admin-gap-md { gap: var(--spacing-md); }
.admin-gap-lg { gap: var(--spacing-lg); }
/* Admin Form Elements */
.admin-form {
background: var(--color-surface);
padding: var(--spacing-lg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.admin-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-md);
}
.admin-form-group {
margin-bottom: var(--spacing-md);
}
.admin-form-group label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: 600;
font-size: 0.85rem;
color: var(--color-text);
}
.admin-form-group input,
.admin-form-group textarea,
.admin-form-group select {
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
font-size: 0.9rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-form-group input:focus,
.admin-form-group textarea:focus,
.admin-form-group select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.admin-form-group small {
display: block;
margin-top: var(--spacing-xs);
font-size: 0.8rem;
color: var(--color-text-muted);
}
.admin-form-actions {
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
margin-top: var(--spacing-lg);
padding-top: var(--spacing-md);
border-top: 1px solid var(--color-border);
}
/* Admin Config Section (Collapsible) */
.admin-config-section {
background: var(--color-surface);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.admin-config-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md) var(--spacing-lg);
background: var(--color-surface-light);
cursor: pointer;
transition: background 0.2s;
}
.admin-config-header:hover {
background: var(--color-surface-hover);
}
.admin-config-header h3 {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.admin-config-toggle {
font-size: 1.2rem;
transition: transform 0.3s;
}
.admin-config-section.open .admin-config-toggle {
transform: rotate(180deg);
}
.admin-config-body {
padding: var(--spacing-lg);
display: none;
}
.admin-config-section.open .admin-config-body {
display: block;
}
/* Admin Info Box */
.admin-info-box {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: rgba(59, 130, 246, 0.1);
border-left: 4px solid #3b82f6;
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-md);
}
.admin-info-box.warning {
background: rgba(245, 158, 11, 0.1);
border-left-color: #f59e0b;
}
.admin-info-box.danger {
background: rgba(239, 68, 68, 0.1);
border-left-color: #ef4444;
}
.admin-info-box.success {
background: rgba(16, 185, 129, 0.1);
border-left-color: #10b981;
}
.admin-info-box-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.admin-info-box-content {
flex: 1;
}
.admin-info-box-content strong {
display: block;
margin-bottom: var(--spacing-xs);
}
.admin-info-box-content p {
margin: 0;
font-size: 0.9rem;
color: var(--color-text-secondary);
}
/* Admin Select */
.admin-select {
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-size: 0.9rem;
cursor: pointer;
}
.admin-select:focus {
outline: none;
border-color: var(--color-primary);
}
/* Admin Modal */
.admin-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.admin-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.admin-modal {
background: var(--color-surface);
border-radius: var(--radius-lg);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-xl);
transform: scale(0.9);
transition: transform 0.3s ease;
}
.admin-modal-overlay.active .admin-modal {
transform: scale(1);
}
.admin-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-lg);
border-bottom: 1px solid var(--color-border);
}
.admin-modal-header h3 {
margin: 0;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.admin-modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--color-text-muted);
line-height: 1;
padding: 0;
}
.admin-modal-close:hover {
color: var(--color-text);
}
.admin-modal-body {
padding: var(--spacing-lg);
}
.admin-modal-footer {
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
padding: var(--spacing-lg);
border-top: 1px solid var(--color-border);
}
/* Admin Tabs */
.admin-tabs {
display: flex;
gap: var(--spacing-xs);
padding: var(--spacing-sm);
background: var(--color-surface);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
}
.admin-tab {
flex: 1;
padding: var(--spacing-sm) var(--spacing-md);
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
text-decoration: none;
}
.admin-tab:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.admin-tab.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
/* Admin Progress Bar */
.admin-progress {
height: 8px;
background: var(--color-surface-light);
border-radius: var(--radius-full);
overflow: hidden;
}
.admin-progress-bar {
height: 100%;
border-radius: var(--radius-full);
background: linear-gradient(90deg, #667eea, #764ba2);
transition: width 0.3s ease;
}
.admin-progress-bar.success {
background: linear-gradient(90deg, #10b981, #059669);
}
.admin-progress-bar.warning {
background: linear-gradient(90deg, #f59e0b, #d97706);
}
.admin-progress-bar.danger {
background: linear-gradient(90deg, #ef4444, #dc2626);
}
/* Admin Responsive */
@media (max-width: 768px) {
.admin-toolbar {
flex-direction: column;
align-items: stretch;
}
.admin-toolbar-search {
max-width: none;
}
.admin-toolbar-group {
justify-content: flex-end;
}
.admin-table-container {
overflow-x: auto;
}
.admin-table {
min-width: 600px;
}
.admin-form-grid {
grid-template-columns: 1fr;
}
.admin-pagination {
flex-wrap: wrap;
}
}
/* Light Theme Adjustments for Admin */
[data-theme="light"] .admin-btn-secondary,
[data-theme="medium"] .admin-btn-secondary {
background: white;
border-color: #e2e8f0;
}
[data-theme="light"] .admin-toolbar,
[data-theme="medium"] .admin-toolbar {
background: white;
border: 1px solid #e2e8f0;
}
[data-theme="light"] .admin-table-container,
[data-theme="medium"] .admin-table-container {
background: white;
border: 1px solid #e2e8f0;
}
[data-theme="light"] .admin-config-section,
[data-theme="medium"] .admin-config-section {
background: white;
border: 1px solid #e2e8f0;
}
[data-theme="light"] .admin-form,
[data-theme="medium"] .admin-form {
background: white;
border: 1px solid #e2e8f0;
}
/* ================================================
ADMIN ADDITIONAL COMPONENTS
Extended styling for scores, alerts, forms
================================================ */
/* Admin Form Labels and Inputs */
.admin-form-label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: 600;
font-size: 0.85rem;
color: var(--color-text);
}
.admin-form-input {
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
font-size: 0.9rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-form-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.admin-form-hint {
display: block;
margin-top: var(--spacing-xs);
font-size: 0.75rem;
color: var(--color-text-muted);
}
/* Admin Config Grid */
.config-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
}
/* Admin Config Title */
.admin-config-title {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-weight: 600;
}
.admin-config-title-icon {
font-size: 1.2rem;
}
.admin-config-chevron {
font-size: 0.8rem;
transition: transform 0.3s;
}
.admin-config-section.open .admin-config-chevron {
transform: rotate(180deg);
}
/* Admin Alerts */
.admin-alert {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
}
.admin-alert-info {
background: rgba(59, 130, 246, 0.1);
border-left: 4px solid #3b82f6;
}
.admin-alert-success {
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid #10b981;
}
.admin-alert-warning {
background: rgba(245, 158, 11, 0.1);
border-left: 4px solid #f59e0b;
}
.admin-alert-danger {
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid #ef4444;
}
.admin-alert-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.admin-alert-content {
flex: 1;
}
.admin-alert-title {
font-weight: 600;
margin-bottom: var(--spacing-xs);
}
.admin-alert-message {
font-size: 0.9rem;
color: var(--color-text-secondary);
line-height: 1.5;
}
/* Admin Spacing Utilities */
.admin-mt-xs { margin-top: var(--spacing-xs); }
.admin-mt-sm { margin-top: var(--spacing-sm); }
.admin-mt-md { margin-top: var(--spacing-md); }
.admin-mt-lg { margin-top: var(--spacing-lg); }
.admin-mt-xl { margin-top: var(--spacing-xl); }
.admin-mb-xs { margin-bottom: var(--spacing-xs); }
.admin-mb-sm { margin-bottom: var(--spacing-sm); }
.admin-mb-md { margin-bottom: var(--spacing-md); }
.admin-mb-lg { margin-bottom: var(--spacing-lg); }
.admin-mb-xl { margin-bottom: var(--spacing-xl); }
.admin-p-md { padding: var(--spacing-md); }
.admin-p-lg { padding: var(--spacing-lg); }
/* Score Legend */
.score-legend {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
}
.score-legend-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: 0.85rem;
}
.score-legend-color {
width: 12px;
height: 12px;
border-radius: var(--radius-sm);
}
/* Score Table Specific */
.score-position {
text-align: center;
font-weight: 700;
}
.score-medal {
font-size: 1.5rem;
}
.score-rank {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--color-surface-light);
border-radius: 50%;
font-size: 0.85rem;
}
.score-user {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.score-hours {
text-align: center;
}
.score-hours small {
display: block;
font-size: 0.75rem;
color: var(--color-text-muted);
}
.text-qrv { color: var(--color-qrv); }
.text-qap { color: var(--color-qap); }
.text-qrt { color: var(--color-qrt); }
.score-progress-bar {
position: relative;
height: 24px;
background: var(--color-surface-light);
border-radius: var(--radius-sm);
overflow: hidden;
min-width: 80px;
}
.score-progress-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
border-radius: var(--radius-sm);
transition: width 0.3s ease;
}
.score-progress-text {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 0.8rem;
font-weight: 600;
}
.guard-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
background: rgba(102, 126, 234, 0.2);
color: #667eea;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 600;
}
.score-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
font-weight: 700;
font-size: 0.9rem;
}
.score-high {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
}
.score-mid {
background: rgba(245, 158, 11, 0.2);
color: #f59e0b;
}
.score-low {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
/* Input Group */
.input-group {
display: flex;
align-items: stretch;
}
.input-group .admin-form-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-text {
display: flex;
align-items: center;
padding: 0 var(--spacing-md);
background: var(--color-surface-light);
border: 1px solid var(--color-border);
border-left: none;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: 0.85rem;
color: var(--color-text-muted);
}
/* Status Badge in Tables */
.status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.status-badge-qrv {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
}
.status-badge-qap {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
.status-badge-qrt {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
/* Admin Header Gradient Variants */
.admin-header-success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.admin-header-warning {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.admin-header-danger {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.admin-header-info {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
/* Admin Submenu Tabs */
.admin-submenu {
display: flex;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-surface);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
flex-wrap: wrap;
}
.admin-submenu-item {
padding: var(--spacing-sm) var(--spacing-md);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.admin-submenu-item:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.admin-submenu-item.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-color: transparent;
}
/* Light Theme for Score Elements */
[data-theme="light"] .score-legend,
[data-theme="medium"] .score-legend {
background: white;
border: 1px solid #e2e8f0;
}
[data-theme="light"] .score-progress-bar,
[data-theme="medium"] .score-progress-bar {
background: #f1f5f9;
}
[data-theme="light"] .admin-alert,
[data-theme="medium"] .admin-alert {
background: white;
}
/* ================================================
ADMIN SETTINGS COMPONENTS
Config forms and specialized UI elements
================================================ */
/* Config Help Box */
.config-help-box {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-md);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-lg);
}
.config-help-box.info {
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.config-help-box.warning {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.2);
}
.config-help-box.danger {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.config-help-box.success {
background: rgba(16, 185, 129, 0.08);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.config-help-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.config-help-content {
flex: 1;
}
.config-help-content strong {
display: block;
margin-bottom: var(--spacing-xs);
font-size: 0.9rem;
}
.config-help-content p {
margin: 0;
font-size: 0.85rem;
color: var(--color-text-secondary);
line-height: 1.5;
}
/* Config Grid Layouts */
.config-grid-2 {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--spacing-lg);
}
.config-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
}
@media (max-width: 900px) {
.config-grid-2 {
grid-template-columns: 1fr;
}
.config-grid-3 {
grid-template-columns: 1fr;
}
}
/* Config Logo Section */
.config-logo-section {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.config-logo-preview {
width: 100%;
aspect-ratio: 1;
max-width: 200px;
background: var(--color-surface-light);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed var(--color-border);
}
.config-logo-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.config-logo-placeholder {
text-align: center;
color: var(--color-text-muted);
}
.config-logo-placeholder span {
font-size: 3rem;
display: block;
margin-bottom: var(--spacing-sm);
}
.config-logo-placeholder small {
font-size: 0.8rem;
}
.config-logo-form {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
/* Config Field */
.config-field {
background: var(--color-surface-light);
padding: var(--spacing-md);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
}
.config-field-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-sm);
}
.config-field-label {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-weight: 600;
font-size: 0.9rem;
}
.config-field-tag {
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
}
.config-field-tag.critical {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.config-field-tag.primary {
background: rgba(102, 126, 234, 0.15);
color: #667eea;
}
.config-field-tag.bonus {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
}
.config-field-tag.optional {
background: var(--color-surface);
color: var(--color-text-muted);
}
.config-field-desc {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-bottom: var(--spacing-sm);
}
/* Config Name Section */
.config-name-section {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
/* Config Button Group */
.config-btn-group {
display: flex;
gap: var(--spacing-xs);
flex-wrap: wrap;
}
/* Config Section Divider */
.config-section-divider {
height: 1px;
background: var(--color-border);
margin: var(--spacing-lg) 0;
}
/* Config Toggle Switch */
.config-toggle {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--color-surface-light);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
}
.config-toggle-switch {
position: relative;
width: 50px;
height: 26px;
flex-shrink: 0;
}
.config-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.config-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--color-surface);
border: 2px solid var(--color-border);
border-radius: var(--radius-full);
transition: all 0.3s ease;
}
.config-toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
background: white;
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: var(--shadow-sm);
}
.config-toggle-switch input:checked + .config-toggle-slider {
background: linear-gradient(135deg, #667eea, #764ba2);
border-color: transparent;
}
.config-toggle-switch input:checked + .config-toggle-slider:before {
transform: translateX(24px);
}
.config-toggle-content {
flex: 1;
}
.config-toggle-label {
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 2px;
}
.config-toggle-desc {
font-size: 0.8rem;
color: var(--color-text-muted);
}
/* Config Preview Card */
.config-preview-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-md);
margin-top: var(--spacing-md);
}
.config-preview-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-muted);
margin-bottom: var(--spacing-xs);
}
.config-preview-value {
font-size: 1.1rem;
font-weight: 600;
}
/* Config Coordinates */
.config-coords-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-sm);
}
/* Config Message Template */
.config-message-preview {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-md);
font-family: monospace;
font-size: 0.85rem;
white-space: pre-wrap;
max-height: 150px;
overflow-y: auto;
}
/* Config Test Section */
.config-test-section {
background: var(--color-surface-light);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
margin-top: var(--spacing-lg);
}
.config-test-title {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-weight: 600;
margin-bottom: var(--spacing-md);
}
.config-test-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
}
.config-test-item {
background: var(--color-surface);
padding: var(--spacing-md);
border-radius: var(--radius-md);
text-align: center;
}
.config-test-icon {
font-size: 2rem;
margin-bottom: var(--spacing-sm);
}
.config-test-label {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin-bottom: var(--spacing-sm);
}
/* Config Recipients List */
.config-recipients {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
margin-top: var(--spacing-sm);
}
.config-recipient-chip {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: 4px 10px;
background: var(--color-surface);
border-radius: var(--radius-full);
font-size: 0.8rem;
}
.config-recipient-chip .remove {
cursor: pointer;
opacity: 0.6;
}
.config-recipient-chip .remove:hover {
opacity: 1;
}
/* Light Theme for Config Elements */
[data-theme="light"] .config-help-box,
[data-theme="medium"] .config-help-box {
background: white;
}
[data-theme="light"] .config-field,
[data-theme="medium"] .config-field {
background: #f8fafc;
}
[data-theme="light"] .config-toggle,
[data-theme="medium"] .config-toggle {
background: #f8fafc;
}
[data-theme="light"] .config-test-section,
[data-theme="medium"] .config-test-section {
background: #f8fafc;
}
/* ================================================
UI ELEMENT IDENTIFIERS (Debug Mode)
Simple numeric IDs for support and documentation
================================================ */
/* UI IDs are only visible when body has .show-ui-ids class */
body:not(.show-ui-ids) [data-id]::before {
display: none !important;
}
/* Base UI ID style - clear and visible */
body.show-ui-ids [data-id] {
position: relative;
}
body.show-ui-ids [data-id]::before {
content: "#" attr(data-id);
position: absolute;
top: 2px;
left: 2px;
padding: 2px 6px;
background: #000;
color: #0f0;
font-size: 10px;
font-weight: 700;
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
border-radius: 4px;
z-index: 9999;
pointer-events: none;
white-space: nowrap;
line-height: 1.3;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
border: 1px solid #0f0;
}
/* Headers - top right, larger */
body.show-ui-ids .admin-header[data-id]::before,
body.show-ui-ids .jefe-header[data-id]::before {
top: 10px;
left: auto;
right: 10px;
font-size: 12px;
padding: 4px 10px;
background: rgba(0,0,0,0.85);
}
/* Sections */
body.show-ui-ids .admin-section[data-id]::before,
body.show-ui-ids .jefe-section[data-id]::before {
top: -12px;
left: 10px;
background: #1a1a2e;
color: #00d4ff;
border-color: #00d4ff;
}
/* Tables */
body.show-ui-ids .admin-table-container[data-id]::before,
body.show-ui-ids .jefe-table-container[data-id]::before,
body.show-ui-ids table[data-id]::before {
top: 5px;
left: auto;
right: 5px;
background: #1a2e1a;
color: #4ade80;
border-color: #4ade80;
}
/* Stat Cards */
body.show-ui-ids .admin-stat-card[data-id]::before,
body.show-ui-ids .jefe-stat-card[data-id]::before {
top: 5px;
left: 5px;
font-size: 9px;
padding: 2px 5px;
background: #2e1a2e;
color: #f472b6;
border-color: #f472b6;
}
/* Cards */
body.show-ui-ids .admin-card[data-id]::before,
body.show-ui-ids .jefe-card[data-id]::before {
top: 8px;
left: 8px;
background: #1a1a2e;
color: #a78bfa;
border-color: #a78bfa;
}
/* Buttons */
body.show-ui-ids .admin-btn[data-id]::before,
body.show-ui-ids .jefe-btn[data-id]::before,
body.show-ui-ids button[data-id]::before {
top: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 8px;
padding: 1px 4px;
background: #1a2e2e;
color: #22d3ee;
border-color: #22d3ee;
}
/* Navigation */
body.show-ui-ids .admin-nav-item[data-id]::before,
body.show-ui-ids .jefe-nav-item[data-id]::before,
body.show-ui-ids nav[data-id]::before {
top: 2px;
left: 2px;
font-size: 8px;
padding: 1px 4px;
background: #2e2e1a;
color: #fbbf24;
border-color: #fbbf24;
}
/* Config Sections */
body.show-ui-ids .admin-config-section[data-id]::before {
top: 10px;
left: auto;
right: 50px;
background: #2e1a1a;
color: #fb7185;
border-color: #fb7185;
}
/* Forms */
body.show-ui-ids form[data-id]::before,
body.show-ui-ids .admin-form[data-id]::before,
body.show-ui-ids .jefe-form[data-id]::before {
top: 5px;
left: 5px;
background: #2e1a2e;
color: #e879f9;
border-color: #e879f9;
}
/* Form Groups */
body.show-ui-ids .admin-form-group[data-id]::before,
body.show-ui-ids .jefe-form-group[data-id]::before {
top: -8px;
left: 0;
font-size: 8px;
padding: 1px 4px;
}
/* Inputs */
body.show-ui-ids input[data-id]::before,
body.show-ui-ids select[data-id]::before,
body.show-ui-ids textarea[data-id]::before {
top: -10px;
left: 0;
font-size: 8px;
background: #1a2e1a;
color: #86efac;
border-color: #86efac;
}
/* Badges */
body.show-ui-ids .admin-badge[data-id]::before,
body.show-ui-ids .jefe-badge[data-id]::before {
top: -14px;
left: 50%;
transform: translateX(-50%);
font-size: 7px;
padding: 0 3px;
}
/* Toolbar */
body.show-ui-ids .admin-toolbar[data-id]::before {
top: 5px;
left: 5px;
background: #1a2e2e;
color: #5eead4;
border-color: #5eead4;
}
/* Modals */
body.show-ui-ids .admin-modal[data-id]::before,
body.show-ui-ids .modal[data-id]::before {
top: 10px;
left: 10px;
font-size: 11px;
background: #2e1a1a;
color: #fca5a5;
border-color: #fca5a5;
}
/* Pagination */
body.show-ui-ids .admin-pagination[data-id]::before {
top: -10px;
left: 10px;
font-size: 9px;
}
/* Hover effect - Alto contraste al pasar el mouse */
body.show-ui-ids [data-id]:hover {
outline: 3px solid #ff0 !important;
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(255, 255, 0, 0.3) !important;
}
body.show-ui-ids [data-id]:hover::before {
background: #ff0 !important;
color: #000 !important;
border-color: #000 !important;
transform: scale(1.3);
box-shadow: 0 4px 16px rgba(0,0,0,0.6);
font-size: 12px !important;
padding: 4px 10px !important;
z-index: 99999 !important;
}
/* Tooltip con nombre del elemento */
body.show-ui-ids [data-id][data-name]:hover::after {
content: attr(data-name);
position: absolute;
top: 100%;
left: 2px;
margin-top: 4px;
padding: 4px 8px;
background: #000;
color: #ff0;
font-size: 10px;
font-weight: 600;
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
border-radius: 4px;
z-index: 99998;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
/* Animation */
body.show-ui-ids [data-id]::before {
animation: uiIdPulse 0.4s ease-out;
transition: all 0.15s ease;
}
@keyframes uiIdPulse {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Dashboard specific elements */
body.show-ui-ids .card[data-id]::before {
top: 8px;
left: 8px;
background: #1a2e1a;
color: #4ade80;
border-color: #4ade80;
}
body.show-ui-ids .stat-card[data-id]::before {
top: 5px;
left: 5px;
font-size: 9px;
background: #2e1a2e;
color: #f472b6;
border-color: #f472b6;
}
body.show-ui-ids .status-btn[data-id]::before,
body.show-ui-ids .btn[data-id]::before {
top: -10px;
left: 50%;
transform: translateX(-50%);
font-size: 8px;
padding: 1px 4px;
background: #1a2e2e;
color: #22d3ee;
border-color: #22d3ee;
}
body.show-ui-ids .quick-access-bar[data-id]::before {
top: -10px;
left: 10px;
background: #2e2e1a;
color: #fde047;
border-color: #fde047;
}
body.show-ui-ids .quick-access-btn[data-id]::before {
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 7px;
}
body.show-ui-ids .user-list-section[data-id]::before {
top: 5px;
left: 5px;
background: #1a1a2e;
color: #818cf8;
border-color: #818cf8;
}
body.show-ui-ids .stats-grid[data-id]::before,
body.show-ui-ids .stats-subtle[data-id]::before {
top: -10px;
left: 10px;
background: #2e1a1a;
color: #fca5a5;
border-color: #fca5a5;
}
body.show-ui-ids .status-buttons[data-id]::before {
top: 5px;
left: 50%;
transform: translateX(-50%);
background: #1a2e2e;
color: #5eead4;
border-color: #5eead4;
}
/* ================================================
UI IDs POSITION OPTIONS
================================================ */
/* Position: Right */
body.show-ui-ids.ui-ids-right [data-id]::before {
left: auto !important;
right: 2px !important;
}
/* ================================================
UI IDs COLOR OPTIONS
================================================ */
/* Color: Green (default) - already set in base styles */
body.show-ui-ids.ui-ids-green [data-id]::before {
background: #000;
color: #0f0;
border-color: #0f0;
}
/* Color: Blue */
body.show-ui-ids.ui-ids-blue [data-id]::before {
background: #0a1628;
color: #60a5fa;
border-color: #3b82f6;
}
/* Color: Orange */
body.show-ui-ids.ui-ids-orange [data-id]::before {
background: #1c1007;
color: #fb923c;
border-color: #f97316;
}
/* Color: Pink */
body.show-ui-ids.ui-ids-pink [data-id]::before {
background: #1f0a1a;
color: #f472b6;
border-color: #ec4899;
}
/* Hover effect maintains color but lightens */
body.show-ui-ids.ui-ids-blue [data-id]:hover::before {
background: #dbeafe !important;
color: #1e40af !important;
border-color: #1e40af !important;
}
body.show-ui-ids.ui-ids-orange [data-id]:hover::before {
background: #ffedd5 !important;
color: #c2410c !important;
border-color: #c2410c !important;
}
body.show-ui-ids.ui-ids-pink [data-id]:hover::before {
background: #fce7f3 !important;
color: #be185d !important;
border-color: #be185d !important;
}
/* Preview container styles (for settings page) */
.ui-ids-preview.show-ui-ids [data-id]::before {
position: absolute;
content: "#" attr(data-id);
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
border-radius: 4px;
z-index: 9999;
pointer-events: none;
white-space: nowrap;
line-height: 1.3;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
border: 1px solid;
top: -8px;
left: 2px;
}
.ui-ids-preview.show-ui-ids.ui-ids-right [data-id]::before {
left: auto;
right: 2px;
}
.ui-ids-preview.show-ui-ids.ui-ids-green [data-id]::before {
background: #000;
color: #0f0;
border-color: #0f0;
}
.ui-ids-preview.show-ui-ids.ui-ids-blue [data-id]::before {
background: #0a1628;
color: #60a5fa;
border-color: #3b82f6;
}
.ui-ids-preview.show-ui-ids.ui-ids-orange [data-id]::before {
background: #1c1007;
color: #fb923c;
border-color: #f97316;
}
.ui-ids-preview.show-ui-ids.ui-ids-pink [data-id]::before {
background: #1f0a1a;
color: #f472b6;
border-color: #ec4899;
}
/* Print: hide UI IDs */
@media print {
body.show-ui-ids [data-id]::before {
display: none !important;
}
}
/* ===== VHF Dispatch Station ===== */
.quick-access-vhf-dispatch {
background: linear-gradient(135deg, var(--color-depto-era), var(--color-depto-era-dark)) !important;
color: white !important;
border-color: var(--color-depto-era-dark) !important;
}
.quick-access-vhf-dispatch:hover {
background: linear-gradient(135deg, var(--color-depto-era), var(--color-depto-era-dark)) !important;
transform: translateY(-2px);
}
/* ===== Próxima Capacitación hint ===== */
.proxima-cap-hint {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
font-weight: 600;
color: var(--color-seccion-capacitacion);
margin-left: 8px;
padding: 3px 10px;
border-radius: var(--radius-full);
background: var(--color-seccion-capacitacion-bg);
border: 1px solid var(--color-seccion-capacitacion);
}
.proxima-cap-urgente {
color: #000;
background: #f9a825;
border-color: #f57f17;
font-weight: 700;
animation: capPulse 1.5s ease-in-out infinite;
}
[data-theme="light"] .proxima-cap-urgente,
[data-theme="medium"] .proxima-cap-urgente {
color: #fff;
background: #e65100;
border-color: #bf360c;
}
@keyframes capPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(249, 168, 37, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(249, 168, 37, 0); }
}
/* ===== PWA Install Banner ===== */
.pwa-install-banner {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
background: var(--color-banner-bg);
color: #fff;
padding: 14px 20px;
box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
border-top: 2px solid var(--color-banner-accent);
}
.pwa-install-content {
max-width: 600px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 14px;
}
.pwa-install-logo {
width: 44px;
height: 44px;
border-radius: 12px;
flex-shrink: 0;
}
.pwa-install-text {
flex: 1;
min-width: 0;
}
.pwa-install-title {
font-weight: 700;
font-size: 0.9rem;
}
.pwa-install-subtitle {
font-size: 0.75rem;
color: rgba(255,255,255,0.7);
margin-top: 2px;
}
.pwa-install-btn {
padding: 8px 18px;
border: none;
border-radius: 8px;
background: var(--color-banner-accent);
color: #fff;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
/* ===== Push Permission Banner ===== */
.push-perm-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99990;
background: var(--color-banner-push);
color: #fff;
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-family: system-ui;
font-size: 0.9rem;
box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}
.push-perm-text {
flex: 1;
}
.push-perm-allow {
background: #fff;
color: var(--color-banner-push);
border: none;
padding: 8px 18px;
border-radius: 6px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.push-perm-dismiss {
background: transparent;
color: rgba(255,255,255,0.7);
border: none;
padding: 8px;
cursor: pointer;
font-size: 1.1rem;
}
/* Aviso de backup pendiente de descarga (toast flotante, no bloquea la app) */
.bk-banner {
position: fixed;
bottom: 12px;
left: 12px;
right: 12px;
max-width: 440px;
margin: 0 auto;
z-index: 99991;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px 12px;
padding: 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 10px 30px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.18);
animation: bkBannerIn 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes bkBannerIn {
from { opacity: 0; transform: translateY(14px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.bk-banner.bk-banner-out {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
.bk-banner { animation: none; }
}
.bk-banner-icon {
grid-column: 1;
grid-row: 1;
width: 38px;
height: 38px;
border-radius: var(--radius-full);
background: var(--color-banner-push);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bk-banner-icon svg { width: 20px; height: 20px; display: block; }
.bk-banner-body {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
.bk-banner-title {
color: var(--color-text-primary);
font-weight: 700;
font-size: 0.9rem;
line-height: 1.25;
}
.bk-banner-meta {
color: var(--color-text-secondary);
font-size: 0.76rem;
line-height: 1.3;
margin-top: 2px;
overflow-wrap: anywhere;
}
.bk-banner-btn,
.bk-banner-btn:hover,
.bk-banner-btn:visited {
grid-column: 1 / -1;
grid-row: 2;
background: var(--color-banner-push);
color: #fff;
border: none;
padding: 9px 18px;
border-radius: var(--radius-sm);
font-weight: 700;
font-size: 0.85rem;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.bk-banner-btn:hover { filter: brightness(1.1); }
.bk-banner-dismiss {
grid-column: 3;
grid-row: 1;
background: transparent;
color: var(--color-text-muted);
border: none;
width: 28px;
height: 28px;
border-radius: var(--radius-full);
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
}
.bk-banner-dismiss:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
@media (min-width: 520px) {
.bk-banner { grid-template-columns: auto 1fr auto auto; }
.bk-banner-btn,
.bk-banner-btn:hover,
.bk-banner-btn:visited { grid-column: 3; grid-row: 1; }
.bk-banner-dismiss { grid-column: 4; grid-row: 1; }
}
/* ===== Department Header Gradients ===== */
.jefe-header-cuerdas {
background: linear-gradient(135deg, var(--color-depto-cuerdas), var(--color-depto-cuerdas-dark));
}
.jefe-header-equipos {
background: linear-gradient(135deg, var(--color-depto-equipos-dark), var(--color-depto-equipos));
}
.jefe-header-ra {
background: linear-gradient(135deg, var(--color-depto-ra), var(--color-depto-ra-dark));
}
.jefe-header-era {
background: linear-gradient(135deg, var(--color-depto-era), var(--color-depto-era-dark));
}
.jefe-header-bolsos {
background: linear-gradient(135deg, var(--color-depto-bolsos), var(--color-depto-bolsos-dark));
}
.jefe-header-planilla {
border-left: 4px solid var(--color-planilla);
}
/* ===== Status Badges (theme-aware) ===== */
.status-badge-ok {
background: var(--color-status-ok-bg);
color: var(--color-status-ok);
border: 1px solid currentColor;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
}
.status-badge-warn {
background: var(--color-status-warn-bg);
color: var(--color-status-warn);
border: 1px solid currentColor;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
}
.status-badge-danger {
background: var(--color-status-danger-bg);
color: var(--color-status-danger);
border: 1px solid currentColor;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
}
.status-badge-info {
background: var(--color-status-info-bg);
color: var(--color-status-info);
border: 1px solid currentColor;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
}
.status-badge-purple {
background: var(--color-status-purple-bg);
color: var(--color-status-purple);
border: 1px solid currentColor;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
}
.status-badge-inactive {
background: var(--color-status-inactive-bg);
color: var(--color-status-inactive);
border: 1px solid currentColor;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
}
/* ===== Department accent buttons ===== */
.btn-depto-cuerdas {
background: var(--color-depto-cuerdas);
color: #fff !important;
border: none;
}
.btn-depto-cuerdas:hover { opacity: 0.9; }
.btn-depto-ra {
background: var(--color-depto-ra);
color: #fff !important;
border: none;
}
.btn-depto-ra:hover { opacity: 0.9; }
.btn-depto-bolsos {
background: var(--color-depto-bolsos);
color: #fff !important;
border: none;
}
.btn-depto-bolsos:hover { opacity: 0.9; }
.btn-depto-era {
background: var(--color-depto-era);
color: #fff !important;
border: none;
}
.btn-depto-era:hover { opacity: 0.9; }
/* ===== Reduced Motion ===== */
/* Respeta la preferencia del usuario para reducir animaciones.
Mejora rendimiento en dispositivos de gama baja y accesibilidad. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ===== GPU Compositing Hints ===== */
/* Mejora rendimiento de animaciones frecuentes usando la GPU */
.emergency-banner,
.emergency-overlay,
.alert-bar,
.connection-indicator,
.stat-card .stat-number {
will-change: transform, opacity;
}
/* ===== Orden personalizable de botones (drag-and-drop, admin) ===== */
#ui-reorder-bar { position: fixed; right: 16px; bottom: 76px; z-index: 2147483000; display: flex; gap: 8px; align-items: center; }
#ui-reorder-toggle { display: inline-flex; align-items: center; gap: 7px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 999px; padding: 9px 16px; font-size: 0.82rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.18); transition: all 0.15s; }
#ui-reorder-toggle:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.26); transform: translateY(-1px); }
#ui-reorder-toggle .uir-ico { font-size: 1.05rem; }
#ui-reorder-toggle.uir-active { background: #43a047; color: #fff; border-color: #43a047; }
#ui-reorder-reset { width: 38px; height: 38px; border-radius: 50%; background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); font-size: 1.05rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.18); transition: all 0.15s; }
#ui-reorder-reset:hover { color: var(--color-status-danger); transform: rotate(-30deg); }
/* Modo orden activo: cualquier boton/tarjeta arrastrable */
body.ui-reorder-on .ui-draggable {
cursor: grab; outline: 2px dashed rgba(142,36,170,0.55); outline-offset: 2px;
touch-action: none; -webkit-user-select: none; user-select: none;
-webkit-user-drag: none;
}
body.ui-reorder-on .ui-draggable:active { cursor: grabbing; }
.ui-dragging { opacity: 0.5; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
/* Toast */
#ui-reorder-toast { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%) translateY(12px); z-index: 1300; padding: 9px 18px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
#ui-reorder-toast.ui-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
#ui-reorder-toast.ui-toast-ok { background: #2e7d32; }
#ui-reorder-toast.ui-toast-err { background: #c62828; }
/* ============================================================
Cargar Combustible — formulario (movilidad/combustible_cargar.html)
============================================================ */
.cmb-page { max-width: 880px; margin: 0 auto; }
.cmb-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--spacing-lg);
margin: 0 var(--spacing-md) var(--spacing-md);
}
.cmb-card-list { margin-top: var(--spacing-md); }
/* Grupos temáticos dentro del formulario */
.cmb-group { padding: var(--spacing-lg) 0; }
.cmb-group:first-child { padding-top: 0; }
.cmb-group:last-child { padding-bottom: 0; }
.cmb-group + .cmb-group { border-top: 1px solid var(--color-border-light); }
.cmb-group .jefe-form-group:last-child { margin-bottom: 0; }
.cmb-group-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-seccion-movilidad);
margin-bottom: var(--spacing-md);
}
.cmb-group-title::before {
content: '';
width: 3px;
height: 15px;
border-radius: 2px;
background: var(--color-seccion-movilidad);
}
.cmb-opt {
font-weight: 500;
font-size: 0.68rem;
letter-spacing: 0.02em;
color: var(--color-text-muted);
background: var(--color-bg);
border: 1px solid var(--color-border-light);
padding: 1px 8px;
border-radius: var(--radius-full);
}
.cmb-label-hint {
font-weight: 400;
font-size: 0.8rem;
color: var(--color-text-secondary);
}
.cmb-hint {
font-size: 0.78rem;
color: var(--color-text-secondary);
margin-top: 4px;
}
/* Pares de campos lado a lado (se apilan en mobile) */
.cmb-row { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
.cmb-row > .jefe-form-group { flex: 1; min-width: 160px; margin-bottom: var(--spacing-md); }
.cmb-actions {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
margin-top: var(--spacing-lg);
}
.cmb-actions .jefe-btn { padding: 10px 20px; }
/* Sección "Cargas registradas" */
.cmb-list-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 var(--spacing-md);
}
.cmb-filtros {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
align-items: flex-end;
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-border-light);
}
.cmb-filtros .jefe-form-group { margin: 0; }
.cmb-f-date { flex: 1; min-width: 130px; }
.cmb-f-sel { flex: 1; min-width: 120px; }
.cmb-f-btn { flex-shrink: 0; }
.cmb-empty { text-align: center; color: var(--color-text-muted); padding: var(--spacing-lg); }
/* Listado: tabla en desktop, cards en mobile */
.cmb-tabla-mobile { display: none; }
.cmb-carga-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-sm) var(--spacing-md);
}
.cmb-cc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.cmb-cc-movil { font-weight: 600; color: var(--color-text-primary); min-width: 0; overflow-wrap: anywhere; }
.cmb-cc-litros { flex-shrink: 0; white-space: nowrap; font-weight: 700; color: var(--color-seccion-movilidad); }
.cmb-cc-litros small { font-weight: 500; color: var(--color-text-secondary); }
.cmb-cc-uso { font-size: 0.85rem; color: var(--color-text); margin-top: 3px; overflow-wrap: anywhere; }
.cmb-cc-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.85rem; font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 5px; }
.cmb-cc-obs { font-size: 0.78rem; color: var(--color-text-secondary); margin-top: 5px; font-style: italic; overflow-wrap: anywhere; }
.cmb-cc-del { margin-top: 8px; }
/* Header compacto en mobile para esta página */
@media (max-width: 768px) {
.jefe-header.jefe-header-cmb {
flex-direction: row;
align-items: center;
padding: var(--spacing-md);
}
.jefe-header.jefe-header-cmb .jefe-header-icon { font-size: 1.9rem; }
.jefe-header.jefe-header-cmb h1 { font-size: 1.15rem; }
.cmb-card { padding: var(--spacing-md); }
.cmb-tabla-desktop { display: none; }
.cmb-tabla-mobile { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.cmb-actions { flex-direction: column; }
.cmb-actions .jefe-btn { width: 100%; }
.cmb-f-btn { width: 100%; }
}
/* ============================================================
Analisis de Gastos (jefe/costos/index.html) — prefijo .cst-
============================================================ */
.cst-aviso {
background: var(--color-qap-bg);
border: 1px solid var(--color-qap);
color: var(--color-text);
border-radius: var(--radius-md);
padding: var(--spacing-md);
margin: 0 var(--spacing-md) var(--spacing-md);
font-size: 0.9rem;
}
.cst-h2 {
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 var(--spacing-md);
}
.cst-hint { font-size: 0.82rem; color: var(--color-text-secondary); margin: 0 0 var(--spacing-md); }
.cst-muted { color: var(--color-text-muted); font-size: 0.82rem; }
.cst-opt { font-weight: 400; font-size: 0.78rem; color: var(--color-text-muted); }
/* Selector de periodo */
.cst-periodo { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }
.cst-pill {
display: inline-flex; align-items: center;
padding: 6px 14px;
border-radius: var(--radius-full);
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
text-decoration: none;
font-size: 0.83rem; font-weight: 600;
transition: all 0.15s ease;
}
.cst-pill:hover { background: var(--color-surface-hover); border-color: var(--color-primary); }
.cst-pill.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.cst-rango { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.cst-rango input[type="date"] { width: auto; }
.cst-rango span { color: var(--color-text-secondary); }
.cst-periodo-info { margin-top: var(--spacing-sm); font-size: 0.85rem; color: var(--color-text-secondary); }
/* Rubros con barras */
.cst-rubros { display: flex; flex-direction: column; gap: var(--spacing-md); }
.cst-rubro-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 5px; }
.cst-rubro-nom { font-weight: 600; color: var(--color-text); }
.cst-rubro-val { font-weight: 700; color: var(--color-text-primary); white-space: nowrap; }
.cst-rubro-val small { font-weight: 500; color: var(--color-text-secondary); }
.cst-bar { height: 12px; background: var(--color-bg); border-radius: var(--radius-full); overflow: hidden; border: 1px solid var(--color-border-light); }
.cst-bar-fill { height: 100%; border-radius: var(--radius-full); min-width: 2px; transition: width 0.3s ease; }
.cst-bar-combustible { background: #e67e22; }
.cst-bar-compras { background: #3498db; }
.cst-bar-mantenimiento { background: #9b59b6; }
.cst-bar-manual { background: #16a085; }
/* Cards de desglose */
.cst-desgloses { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
.cst-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-md);
box-shadow: var(--shadow-sm);
}
.cst-card h3 { font-size: 0.95rem; color: var(--color-text-primary); margin: 0 0 var(--spacing-sm); }
.cst-card h3 small { font-weight: 500; color: var(--color-text-secondary); font-size: 0.8rem; }
/* Tabla compacta */
.cst-mini { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.cst-mini th { text-align: left; color: var(--color-text-secondary); font-weight: 600; font-size: 0.78rem; padding: 4px 6px; border-bottom: 1px solid var(--color-border); }
.cst-mini td { padding: 5px 6px; border-bottom: 1px solid var(--color-border-light); color: var(--color-text); }
.cst-mini .r { text-align: right; white-space: nowrap; }
.cst-mini tr.tot td { font-weight: 700; color: var(--color-text-primary); border-top: 2px solid var(--color-border); border-bottom: none; }
.cst-valores { margin-top: var(--spacing-md); }
/* Formularios inline de config */
.cst-param-form, .cst-gasto-form { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: flex-end; margin-bottom: var(--spacing-md); }
.cst-param-form .jefe-form-group, .cst-gasto-form .jefe-form-group { margin: 0; flex: 1; min-width: 130px; }
.cst-pdf-row { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.cst-pdf-row .jefe-form-group { flex: 1; min-width: 200px; }
.cst-hist { display: inline-flex; align-items: center; gap: 3px; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 2px 6px; margin: 0 4px 4px 0; font-size: 0.78rem; color: var(--color-text-secondary); }
.cst-x { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.cst-x:hover { color: var(--color-primary-dark); }
@media (max-width: 768px) {
.cst-desgloses { grid-template-columns: 1fr; }
.cst-rango { margin-left: 0; width: 100%; }
.cst-rango input[type="date"] { flex: 1; }
.jefe-header.jefe-header-costos { flex-direction: row; align-items: center; padding: var(--spacing-md); }
.jefe-header.jefe-header-costos h1 { font-size: 1.15rem; }
.jefe-header.jefe-header-costos .jefe-header-icon { font-size: 1.9rem; }
}
/* Seleccion de servicios para informe (Analisis de Gastos) */
.cst-serv-table th input[type="checkbox"], .cst-serv-chk { cursor: pointer; width: 16px; height: 16px; accent-color: var(--color-primary); }
.cst-serv-panel { margin-top: var(--spacing-md); padding: var(--spacing-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.cst-serv-sel { font-size: 0.95rem; color: var(--color-text); margin-bottom: var(--spacing-md); }
.cst-serv-sel strong { color: var(--color-primary); }
.cst-serv-panel .cst-pdf-row { margin-bottom: var(--spacing-sm); }
/* Personal en servicio (dashboard): activo (dotacion/central) vs apresto.
Solo colorea (tint de fondo + etiqueta), sin cambiar el tamaño de la card. */
.user-card.en-servicio-activo {
background: linear-gradient(0deg, rgba(21,101,192,0.13), rgba(21,101,192,0.13)), var(--color-surface);
}
.user-card.en-servicio-activo:hover {
background: linear-gradient(0deg, rgba(21,101,192,0.18), rgba(21,101,192,0.18)), var(--color-surface-hover);
}
.user-card.en-servicio-apresto {
background: linear-gradient(0deg, rgba(123,31,162,0.13), rgba(123,31,162,0.13)), var(--color-surface);
}
.user-card.en-servicio-apresto:hover {
background: linear-gradient(0deg, rgba(123,31,162,0.18), rgba(123,31,162,0.18)), var(--color-surface-hover);
}
.serv-tag {
display: block;
width: fit-content;
margin-top: 3px;
font-size: 0.56rem;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1.25;
padding: 1px 6px;
border-radius: var(--radius-full);
color: #fff;
white-space: nowrap;
}
.serv-tag-activo { background: #1565c0; }
.serv-tag-apresto { background: #7b1fa2; }
/* ====================================
Contraste AA en superficies de color pleno
==================================== */
/* Medido en el navegador sobre la app: el blanco daba 2,78:1 sobre el verde
(#4caf50), 3,00:1 sobre el teal de Capacitacion (#26a69a) y 3,86:1 sobre el
celeste de Rescate (#0288d1) — por debajo del 4,5:1 que pide AA para texto
chico. Un velo negro del 24% sobre el MISMO color sube el ratio a >=4,5 sin
cambiar el matiz (tecnica documentada en el skill appbomberos-ui;
oscurecer el color de base vuelve el celeste petroleo y el naranja marron). */
.jefe-btn-primary,
.jefe-btn-success,
.jefe-btn-danger,
.jefe-btn-warning,
.jefe-nav-item.active,
.submenu-item.active {
background-image: linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24));
}
/* El velo necesita ganarle a las reglas por seccion — `.jefe-nav-item[href*="capacitacion"].active`
usa el atajo `background`, que resetea background-image. Con [href] empatamos
especificidad y, al estar despues en el archivo, prevalece. */
.jefe-nav-item[href].active,
.jefe-submenu[data-id] .submenu-item.active {
background-image: linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24));
}
/* ====================================
Chips y enlaces tenues: contraste AA en tema oscuro
==================================== */
/* Mismo caso que los badges del panel admin: color pleno sobre su propio
tinte. Medido en el navegador (tema oscuro): puntaje bajo 3,39:1, badge de
estado 3,40:1, enlaces de la tabla de planillas 3,03-3,33:1. */
[data-theme="dark"] .score-low { color: #f47a7a; }
[data-theme="dark"] .score-high { color: #17bb85; }
[data-theme="dark"] .status-badge-qrt,
[data-theme="dark"] .status-qrt-text { color: #f47a7a; }
[data-theme="dark"] .ps-numero-link { color: #4c94dc; }
[data-theme="dark"] .ps-btn-tabla-ver { color: #599cdf; }
/* Mismos chips en tema claro y sepia: ahi el problema es el inverso (color
claro sobre tinte claro). Medido: QAP 1,92:1, QRT 3,09:1, reserva 3,88:1. */
[data-theme="light"] .status-badge-qrt,
[data-theme="medium"] .status-badge-qrt { color: #a42e2e; }
[data-theme="light"] .status-badge-qap,
[data-theme="medium"] .status-badge-qap { color: #845606; }
[data-theme="light"] .mini-status-btn.qap,
[data-theme="medium"] .mini-status-btn.qap { color: #a63a00; }
[data-theme="light"] .cat-reserva-badge,
[data-theme="medium"] .cat-reserva-badge { color: #1257a5; }
[data-theme="light"] .badge-lic-ord,
[data-theme="medium"] .badge-lic-ord { color: #145fb4; }
/* Chip de licencia ordinaria: azul del tema claro sobre fondo oscuro (2,19:1) */
[data-theme="dark"] .badge-lic-ord { color: #75a4da; }
/* Chips de estado y de planillas: el mismo caso (color pleno sobre su propio
tinte). Valores medidos en el navegador antes de corregir: QRV 2,04:1,
"Completada" 2,43:1, "Borrador" 3,35:1, "En Servicio" 3,43:1. */
[data-theme="light"] .status-badge-qrv,
[data-theme="medium"] .status-badge-qrv { color: #096b4b; }
[data-theme="light"] .ps-estado-badge,
[data-theme="medium"] .ps-estado-badge { color: #317033; }
[data-theme="light"] .ps-estado-badge.status-badge-warn,
[data-theme="medium"] .ps-estado-badge.status-badge-warn { color: #af3e00; }
[data-theme="light"] .ps-estado-badge.status-badge-ok,
[data-theme="medium"] .ps-estado-badge.status-badge-ok { color: #2a722e; }
[data-theme="dark"] .ps-estado-badge.status-badge-danger { color: #ed7876; }
[data-theme="light"] .tareas-badge.firma-progreso,
[data-theme="medium"] .tareas-badge.firma-progreso { color: #1258a7; }