/* ============================================================================
APP THEME — Rediseño basado en la referencia visual (Photoshop)
----------------------------------------------------------------------------
Capa FINAL de diseño. Se carga DESPUÉS de todas las hojas del proyecto
(bootstrap, admin/cliente/it.css, saas-theme, alcore-ui, mobile-overrides,
chatbot...). No cambia lógica: solo tokens, layout y componentes.
Estructura:
0 · Tokens (colores, tipografía, radios, sombras, movimiento)
1 · Base
2 · Shell: sidebar lateral + lienzo principal (escritorio)
3 · Navegación (ítems, íconos, submenús acordeón)
4 · Acciones de usuario y panel de notificaciones
5 · Encabezados de sección y tarjetas / widgets
6 · Botones
7 · Formularios, búsqueda y filtros
8 · Tablas y paginación
9 · Badges, estados, alertas, progreso
10 · Pestañas (control segmentado)
11 · Modales, popups, overlays
12 · Dropdowns, tooltips, toasts, menús contextuales
13 · Carga de archivos / estados de carga
14 · Footer y widgets flotantes
15 · Login / registro
16 · Responsive (tablet / móvil)
17 · Animaciones y movimiento reducido
============================================================================ */
/* ============================================================================
0 · TOKENS
============================================================================ */
:root {
/* Superficies */
--rw-canvas: #ECECF0; /* fondo exterior gris de la referencia */
--rw-sidebar: #FAFAFA; /* columna lateral */
--rw-surface: #FFFFFF; /* lienzo principal y tarjetas */
--rw-surface-2: #F7F7F8; /* hover sutil / cabeceras de tabla */
--rw-surface-3: #F2F2F4; /* búsqueda, control segmentado */
--rw-active: #EDEDF0; /* ítem activo del menú */
/* Bordes */
--rw-border: #EBEBEE;
--rw-border-soft: #F1F1F3;
--rw-border-strong: #DEDEE3;
/* Texto */
--rw-ink: #1A1A1E;
--rw-ink-2: #2B2B31;
--rw-text: #3D3D45;
--rw-muted: #71717A;
--rw-faint: #A1A1AA;
/* Acento (violeta de la referencia) */
--rw-accent: #6E5BE6;
--rw-accent-hover: #5B48D6;
--rw-accent-soft: #F1EFFE;
--rw-accent-border: #D8D2FB;
--rw-accent-ring: rgba(110, 91, 230, 0.18);
--rw-brand-blue: #1B3FE4; /* azul del logo Alcore */
--rw-gradient: linear-gradient(90deg, #6E5BE6 0%, #8F7BEE 45%, #C9A6F4 75%, #EDB8F7 100%);
/* Semánticos (banderas Urgent / Normal / Low de la referencia) */
--rw-red: #E5484D;
--rw-red-text: #CE2C31;
--rw-red-soft: #FEEFEF;
--rw-red-border: #F7CDCE;
--rw-orange: #F2761A;
--rw-orange-text: #C2580A;
--rw-orange-soft: #FFF3E9;
--rw-orange-border: #FAD6B8;
--rw-green: #23A86B;
--rw-green-text: #18804F;
--rw-green-soft: #EAF7F0;
--rw-green-border: #C2E7D3;
--rw-pink: #E0559A;
/* Tipografía */
--rw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--rw-fs-xs: 0.75rem; /* 12px */
--rw-fs-sm: 0.8125rem; /* 13px */
--rw-fs-md: 0.875rem; /* 14px */
--rw-fs-lg: 0.9375rem; /* 15px */
--rw-fs-title: 1.5rem; /* 24px título de página */
/* Radios */
--rw-r-xs: 6px;
--rw-r-sm: 8px;
--rw-r-md: 10px;
--rw-r-lg: 14px;
--rw-r-xl: 18px;
--rw-r-frame: 22px;
/* Sombras */
--rw-shadow-xs: 0 1px 2px rgba(20, 20, 30, 0.04);
--rw-shadow-card: 0 1px 2px rgba(20, 20, 30, 0.04), 0 4px 14px -6px rgba(20, 20, 30, 0.06);
--rw-shadow-hover: 0 2px 4px rgba(20, 20, 30, 0.04), 0 10px 24px -10px rgba(20, 20, 30, 0.12);
--rw-shadow-pop: 0 16px 40px -12px rgba(20, 20, 30, 0.20), 0 4px 10px -4px rgba(20, 20, 30, 0.08);
--rw-shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(16, 16, 20, 0.24);
/* Layout */
--rw-side-w: 264px;
--rw-gap: 12px;
/* Movimiento */
--rw-ease: cubic-bezier(0.22, 1, 0.36, 1);
--rw-dur-fast: 150ms;
--rw-dur: 200ms;
--rw-dur-slow: 280ms;
/* --- Íconos del menú (trazo estilo referencia) --- */
--i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1.5'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1.5'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1.5'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1.5'/%3E%3C/svg%3E");
--i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E");
--i-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8M12 17.5v-11'/%3E%3C/svg%3E");
--i-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
--i-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
--i-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65M22 12.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E");
--i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
--i-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E");
--i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
--i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E");
--i-activity: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");
--i-megaphone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E");
--i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
--i-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E");
--i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
--i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='3'/%3E%3Cpath d='M8 12h8M12 8v8'/%3E%3C/svg%3E");
--i-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E");
--i-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
--i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
--i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2M15 18H9M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
--i-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
--i-filecheck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M9 15l2 2 4-4'/%3E%3C/svg%3E");
--i-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16M18 17V9M13 17V5M8 17v-3'/%3E%3C/svg%3E");
--i-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17M16 7h6v6'/%3E%3C/svg%3E");
--i-userplus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E");
--i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
--i-idcard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Ccircle cx='8' cy='12' r='2'/%3E%3Cpath d='M14 10h4M14 14h4'/%3E%3C/svg%3E");
--i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
--i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
--i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
--i-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a10 10 0 0 1 0 20Z' fill='black'/%3E%3C/svg%3E");
--i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--i-collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5M18 17l-5-5 5-5'/%3E%3C/svg%3E");
/* --- Re-mapeo de los tokens heredados (alcore-ui / saas-theme / bootstrap) --- */
--al-blue: var(--rw-accent);
--al-blue-hover: var(--rw-accent-hover);
--al-blue-soft: var(--rw-accent-soft);
--al-blue-border: var(--rw-accent-border);
--al-ink: var(--rw-ink);
--al-ink-2: var(--rw-ink-2);
--al-text: var(--rw-text);
--al-muted: var(--rw-muted);
--al-faint: var(--rw-faint);
--al-border: var(--rw-border);
--al-border-soft: var(--rw-border-soft);
--al-bg: #F5F5F7;
--al-surface: var(--rw-surface);
--al-surface-2: #FAFAFB;
--al-green: var(--rw-green);
--al-green-soft: var(--rw-green-soft);
--al-green-border: var(--rw-green-border);
--al-green-text: var(--rw-green-text);
--al-red: var(--rw-red);
--al-red-soft: var(--rw-red-soft);
--al-red-border: var(--rw-red-border);
--al-amber: var(--rw-orange);
--al-amber-soft: var(--rw-orange-soft);
--al-amber-border: var(--rw-orange-border);
--al-radius-sm: var(--rw-r-sm);
--al-radius: var(--rw-r-md);
--al-radius-lg: var(--rw-r-lg);
--al-radius-xl: var(--rw-r-xl);
--al-shadow-sm: var(--rw-shadow-xs);
--al-shadow-md: var(--rw-shadow-hover);
--al-shadow-lg: var(--rw-shadow-pop);
--al-font-head: var(--rw-font);
--al-font-body: var(--rw-font);
--al-ease: var(--rw-ease);
--saas-primary: var(--rw-accent);
--saas-primary-hover: var(--rw-accent-hover);
--saas-primary-soft: var(--rw-accent-soft);
--saas-text-main: var(--rw-ink);
--saas-text-muted: var(--rw-muted);
--saas-text-light: var(--rw-faint);
--saas-border: var(--rw-border);
--bs-primary: var(--rw-accent);
--bs-primary-rgb: 110, 91, 230;
--bs-link-color: var(--rw-accent);
--bs-link-color-rgb: 110, 91, 230;
--bs-link-hover-color: var(--rw-accent-hover);
--bs-body-font-family: var(--rw-font);
--bs-body-color: var(--rw-text);
--bs-border-color: var(--rw-border);
--bs-border-radius: var(--rw-r-sm);
--bs-focus-ring-color: var(--rw-accent-ring);
}
/* ============================================================================
1 · BASE
============================================================================ */
body {
font-family: var(--rw-font) !important;
font-size: var(--rw-fs-md);
color: var(--rw-text) !important;
background-color: var(--rw-surface) !important;
font-feature-settings: 'cv11', 'ss01';
}
h1, h2, h3, h4, h5, h6,
.modal-title, .spa-section-title, .spm-header-title,
.comprobantes-title-text h4, .proyectos-title-text h4,
.db-card-title, .success-popup-title, .kpi-info h4,
.proveedor-block-title, .catalog-section-title {
font-family: var(--rw-font) !important;
font-weight: 600 !important;
color: var(--rw-ink) !important;
letter-spacing: -0.015em !important;
}
a { color: var(--rw-accent); }
a:hover { color: var(--rw-accent-hover); }
::selection { background: var(--rw-accent-soft); color: var(--rw-accent-hover); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, summary:focus-visible {
outline: 2px solid var(--rw-accent) !important;
outline-offset: 2px !important;
}
hr { border-color: var(--rw-border) !important; opacity: 1 !important; }
.text-primary { color: var(--rw-accent) !important; }
.bg-primary { background-color: var(--rw-accent) !important; }
.text-muted { color: var(--rw-muted) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--rw-border) !important; }
/* ============================================================================
2 · SHELL — sidebar lateral + lienzo (escritorio ≥ 992px)
Reproduce el marco de la referencia: fondo gris, columna lateral clara y
lienzo blanco con esquinas redondeadas.
============================================================================ */
@media (min-width: 992px) {
body.rw-shell {
background: var(--rw-canvas) !important;
padding: var(--rw-gap) !important;
min-height: 100vh;
}
body.rw-shell .top-navbar {
position: fixed !important;
top: var(--rw-gap) !important;
left: var(--rw-gap) !important;
bottom: var(--rw-gap) !important;
width: var(--rw-side-w) !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
padding: 18px 14px 14px !important;
background: var(--rw-sidebar) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: 0 !important;
border-right: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-frame) 0 0 var(--rw-r-frame) !important;
box-shadow: var(--rw-shadow-xs) !important;
z-index: 1030 !important;
}
body.rw-shell .main-content {
margin: 0 0 0 var(--rw-side-w) !important;
max-width: none !important;
width: auto !important;
min-height: calc(100vh - (var(--rw-gap) * 2));
background: var(--rw-surface) !important;
border-radius: 0 var(--rw-r-frame) var(--rw-r-frame) 0 !important;
box-shadow: var(--rw-shadow-xs) !important;
padding: 30px 36px 40px !important;
}
/* Columna superior del sidebar: marca */
body.rw-shell .top-navbar > .d-flex:first-child {
padding: 0 4px 16px !important;
border-bottom: 1px solid var(--rw-border-soft);
margin-bottom: 4px;
}
}
/* Marca corporativa: logo Alcore + saludo que se escribe solo + nombre del panel */
.top-navbar .brand-label.brand-alcore {
display: flex !important;
align-items: center !important;
gap: 11px !important;
min-width: 0;
margin: 0 !important;
font-family: var(--rw-font) !important;
letter-spacing: 0 !important;
}
.brand-alcore .brand-logo {
flex: 0 0 38px;
width: 38px;
height: 38px;
padding: 5px;
object-fit: contain;
border-radius: 11px;
background: #FFFFFF;
box-shadow: inset 0 0 0 1px var(--rw-border), 0 1px 2px rgba(20, 20, 30, 0.06);
}
.brand-alcore .brand-text {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.brand-alcore .brand-saludo {
display: flex;
align-items: center;
min-height: 19px;
font-size: var(--rw-fs-lg);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--rw-ink);
white-space: nowrap;
overflow: hidden;
}
.brand-alcore .brand-saludo-texto { overflow: hidden; text-overflow: ellipsis; }
.brand-alcore .brand-caret {
flex: 0 0 2px;
width: 2px;
height: 16px;
margin-left: 2px;
border-radius: 1px;
background: var(--rw-brand-blue);
animation: rw-caret 0.9s steps(1) infinite;
}
.brand-alcore.is-done .brand-caret { animation: rw-caret-out 0.5s ease 1.2s forwards; }
.brand-alcore .brand-panel {
font-size: var(--rw-fs-sm);
font-weight: 400;
color: var(--rw-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@keyframes rw-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes rw-caret-out { to { opacity: 0; width: 0; margin-left: 0; } }
/* ============================================================================
3 · NAVEGACIÓN — ítems, íconos y submenús acordeón
============================================================================ */
@media (min-width: 992px) {
body.rw-shell .top-nav-links {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 2px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 14px 2px 14px !important;
margin: 0 -2px !important;
position: static !important;
}
body.rw-shell .top-nav-links::before {
content: "Menú";
display: flex;
align-items: center;
gap: 6px;
font-size: var(--rw-fs-md);
font-weight: 400;
color: var(--rw-muted);
padding: 2px 10px 8px;
}
}
/* Ítems de primer nivel (escritorio y drawer móvil comparten estilo) */
body.rw-shell .top-nav-links > a.menu-link,
body.rw-shell .top-nav-links .nav-item-dropdown > a.vehiculos-parent {
/* display SIN !important: así siguen funcionando los ocultamientos por
permisos (perm_estilos_ocultar) y los style.display='none' del JS. */
display: flex;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
min-height: 40px !important;
padding: 0 10px !important;
margin: 0 !important;
border-radius: var(--rw-r-sm) !important;
background: transparent !important;
color: var(--rw-ink-2) !important;
font-family: var(--rw-font) !important;
font-size: var(--rw-fs-md) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
line-height: 1.3 !important;
white-space: nowrap !important;
text-decoration: none !important;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease !important;
}
body.rw-shell .top-nav-links > a.menu-link:hover,
body.rw-shell .top-nav-links .nav-item-dropdown > a.vehiculos-parent:hover {
background: #F0F0F2 !important;
color: var(--rw-ink) !important;
}
body.rw-shell .top-nav-links > a.menu-link.active,
body.rw-shell .top-nav-links .nav-item-dropdown > a.vehiculos-parent.has-active {
background: var(--rw-active) !important;
color: var(--rw-ink) !important;
font-weight: 500 !important;
}
body.rw-shell .top-nav-links .nav-item-dropdown > a.vehiculos-parent.open:not(.has-active) {
background: transparent !important;
}
body.rw-shell .top-nav-links > a.active::after,
body.rw-shell .top-nav-links a.menu-link.active::after { display: none !important; content: none !important; }
/* Ícono por sección (máscara SVG con currentColor) */
body.rw-shell .top-nav-links a.menu-link::before,
body.rw-shell .top-nav-links a.vehiculos-parent::before {
content: "";
flex: 0 0 18px;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask: var(--rw-ico, var(--i-list)) center / contain no-repeat;
mask: var(--rw-ico, var(--i-list)) center / contain no-repeat;
opacity: 0.92;
}
/* Chevron del grupo: junto al texto, como en la referencia ("Tasks ^") */
body.rw-shell .top-nav-links a.vehiculos-parent .fa-chevron-down {
display: inline-block !important;
width: 12px !important;
height: 12px !important;
margin-left: 0 !important;
font-size: 0 !important;
color: var(--rw-faint) !important;
background-color: currentColor;
-webkit-mask: var(--i-chevron) center / contain no-repeat;
mask: var(--i-chevron) center / contain no-repeat;
transition: transform var(--rw-dur) var(--rw-ease) !important;
}
body.rw-shell .top-nav-links a.vehiculos-parent .fa-chevron-down::before { content: none !important; }
body.rw-shell .top-nav-links a.vehiculos-parent.open .fa-chevron-down {
transform: rotate(180deg);
color: var(--rw-ink-2) !important;
}
/* Grupos */
body.rw-shell .top-nav-links .nav-item-dropdown {
display: block;
position: static !important;
width: 100% !important;
}
body.rw-shell .top-nav-links .nav-item-dropdown::after { content: none !important; display: none !important; }
/* Submenú en acordeón con guía vertical (referencia: hijos de "Tasks") */
body.rw-shell .top-nav-links .nav-item-dropdown .submenu-vehiculos {
position: static !important;
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
min-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: none !important;
animation: none !important;
margin: 0 0 0 19px !important;
padding: 0 0 0 10px !important;
background: transparent !important;
border: 0 !important;
border-left: 1px solid var(--rw-border-strong) !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: max-height var(--rw-dur-slow) var(--rw-ease), opacity var(--rw-dur) ease,
margin var(--rw-dur-slow) var(--rw-ease), visibility 0s linear var(--rw-dur-slow) !important;
}
body.rw-shell .top-nav-links .nav-item-dropdown .submenu-vehiculos.open {
max-height: 520px !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
margin: 2px 0 6px 19px !important;
transition: max-height var(--rw-dur-slow) var(--rw-ease), opacity var(--rw-dur) ease,
margin var(--rw-dur-slow) var(--rw-ease), visibility 0s !important;
}
body.rw-shell .top-nav-links .nav-item-dropdown .submenu-vehiculos a {
/* !important seguro: la regla de permisos usa especificidad de id (:not(#_)) */
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
gap: 9px !important;
width: 100% !important;
min-height: 36px !important;
padding: 0 10px !important;
margin: 0 !important;
border-radius: var(--rw-r-sm) !important;
background: transparent !important;
color: var(--rw-ink-2) !important;
font-size: var(--rw-fs-md) !important;
font-weight: 400 !important;
line-height: 1.3 !important;
white-space: nowrap !important;
text-decoration: none !important;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease !important;
}
body.rw-shell .top-nav-links .nav-item-dropdown .submenu-vehiculos a::before {
flex-basis: 16px !important;
width: 16px !important;
height: 16px !important;
opacity: 0.8 !important;
}
body.rw-shell .top-nav-links .nav-item-dropdown .submenu-vehiculos a:hover {
background: #F0F0F2 !important;
color: var(--rw-ink) !important;
}
body.rw-shell .top-nav-links .nav-item-dropdown .submenu-vehiculos a.active {
background: var(--rw-active) !important;
color: var(--rw-ink) !important;
font-weight: 500 !important;
}
/* Mapa de íconos por sección */
.rw-shell [data-section="dashboard"] { --rw-ico: var(--i-grid); }
.rw-shell [data-section="estado"] { --rw-ico: var(--i-activity); }
.rw-shell [data-section="comunicados"] { --rw-ico: var(--i-megaphone); }
.rw-shell [data-section="logs"],
.rw-shell [data-section="alertas"] { --rw-ico: var(--i-alert); }
.rw-shell [data-section="usuarios"] { --rw-ico: var(--i-users); }
.rw-shell [data-section="partidas"],
.rw-shell [data-section="partidas_tweaks"] { --rw-ico: var(--i-layers); }
.rw-shell [data-section="obras"],
.rw-shell [data-section="obras_control"],
.rw-shell [data-section="obras_tweaks"] { --rw-ico: var(--i-building); }
.rw-shell [data-section="ordenes_compra_admin"],
.rw-shell [data-section="mis_ordenes_compra"],
.rw-shell [data-section="oc_tweaks"] { --rw-ico: var(--i-file); }
.rw-shell [data-section="crear_orden_compra_admin"],
.rw-shell [data-section="ordenes_compra"] { --rw-ico: var(--i-plus); }
.rw-shell [data-section="proveedor_alta"] { --rw-ico: var(--i-userplus); }
.rw-shell [data-section="comprobantes"],
.rw-shell [data-section="balance"] { --rw-ico: var(--i-receipt); }
.rw-shell [data-section="comprobante_pago"] { --rw-ico: var(--i-upload); }
.rw-shell [data-section="ingresos"] { --rw-ico: var(--i-trend); }
.rw-shell [data-section="vehiculos"],
.rw-shell [data-section="ver_vehiculos"] { --rw-ico: var(--i-car); }
.rw-shell [data-section="vehiculos-mantenimientos"] { --rw-ico: var(--i-wrench); }
.rw-shell [data-section="proveedores"],
.rw-shell [data-section="proveedores_por_aprobar"] { --rw-ico: var(--i-truck); }
.rw-shell [data-section="proyectos"] { --rw-ico: var(--i-folder); }
.rw-shell [data-section="contratos"] { --rw-ico: var(--i-filecheck); }
.rw-shell [data-section="reportes"] { --rw-ico: var(--i-chart); }
.rw-shell [data-section="gestion_direcciones"] { --rw-ico: var(--i-pin); }
.rw-shell [data-section="autorizaciones_oc"],
.rw-shell [data-section="aprobadores"] { --rw-ico: var(--i-check); }
.rw-shell [data-section="expedientes"] { --rw-ico: var(--i-idcard); }
.rw-shell [data-section="nomina_gasto"] { --rw-ico: var(--i-wallet); }
.rw-shell [data-section="notificaciones"] { --rw-ico: var(--i-bell); }
.rw-shell [data-section="permisos"] { --rw-ico: var(--i-lock); }
.rw-shell [data-section="alm_todas"] { --rw-ico: var(--i-truck); }
.rw-shell [data-section="alm_pendientes"] { --rw-ico: var(--i-clock); }
.rw-shell [data-section="alm_parciales"] { --rw-ico: var(--i-half); }
.rw-shell [data-section="alm_entregadas"] { --rw-ico: var(--i-check); }
.rw-shell #pagosGastosToggle { --rw-ico: var(--i-file); }
.rw-shell #comprobacionGastosToggle { --rw-ico: var(--i-receipt); }
.rw-shell #vehiculosToggle { --rw-ico: var(--i-car); }
.rw-shell #gestionToggle { --rw-ico: var(--i-briefcase); }
.rw-shell #autorizacionesToggle { --rw-ico: var(--i-shield); }
.rw-shell #nominaToggle { --rw-ico: var(--i-wallet); }
.rw-shell #tweaksToggle { --rw-ico: var(--i-sliders); }
/* Contadores a la derecha del ítem (referencia: "Backlog 24") */
body.rw-shell .top-nav-links a .rw-nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.rw-shell .top-nav-links a .rw-nav-count {
margin-left: auto;
min-width: 22px;
text-align: right;
font-size: var(--rw-fs-sm);
font-weight: 400;
color: var(--rw-muted);
font-variant-numeric: tabular-nums;
}
body.rw-shell.rw-almacen .top-nav-links::before { content: "Entregas" !important; }
/* ============================================================================
4 · ACCIONES DE USUARIO (pie del sidebar) + PANEL DE NOTIFICACIONES
============================================================================ */
@media (min-width: 992px) {
body.rw-shell .top-navbar .header-actions {
position: relative !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 4px !important;
margin: 0 !important;
margin-left: 0 !important;
padding: 12px 0 0 !important;
border-top: 1px solid var(--rw-border-soft);
}
/* Tarjeta de perfil (referencia: avatar + nombre + correo) */
body.rw-shell .header-actions > a.menu-link[data-section="perfil"] {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
min-height: 46px;
padding: 4px 8px !important;
border-radius: var(--rw-r-md);
color: var(--rw-ink) !important;
text-decoration: none !important;
transition: background-color var(--rw-dur-fast) ease;
}
body.rw-shell .header-actions > a.menu-link[data-section="perfil"]::after {
content: "Mi perfil";
font-size: var(--rw-fs-md);
font-weight: 600;
color: var(--rw-ink);
white-space: nowrap;
}
body.rw-shell .header-actions > a.menu-link[data-section="perfil"]:hover,
body.rw-shell .header-actions > a.menu-link[data-section="perfil"].active {
background: var(--rw-active);
}
body.rw-shell .header-actions > a.menu-link[data-section="perfil"] i {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 34px !important;
line-height: 1;
color: #C9C1F7 !important;
background: #fff;
box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(20, 20, 30, 0.14);
}
body.rw-shell .header-actions .btn-outline-secondary {
order: 10;
flex: 1 1 100%;
margin-top: 6px;
}
/* Panel de notificaciones: se despliega a la derecha del sidebar */
body.rw-shell .header-actions .notif-panel {
position: fixed !important;
top: auto !important;
right: auto !important;
left: calc(var(--rw-gap) + var(--rw-side-w) + 10px) !important;
bottom: calc(var(--rw-gap) + 12px) !important;
transform: translateX(-6px) scale(0.98) !important;
transform-origin: bottom left;
}
body.rw-shell .header-actions .notif-panel.open { transform: none !important; }
}
/* Tarjeta de usuario (pie del sidebar, referencia: avatar + nombre + correo) */
.rw-user-card {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 4px 6px;
}
.rw-avatar {
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--rw-fs-md);
font-weight: 600;
color: var(--rw-accent-hover);
background: radial-gradient(120% 120% at 0% 0%, #FBD3EE 0%, rgba(251, 211, 238, 0) 60%), #DCD6FC;
box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(20, 20, 30, 0.14);
}
.rw-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rw-user-meta strong { font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-user-meta small { font-size: var(--rw-fs-xs); color: var(--rw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Botones-ícono (notificaciones / cerrar sesión) */
.rw-shell .notif-btn,
.rw-shell .header-actions > a[href*="cerrarSesion"] {
width: 36px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid transparent !important;
border-radius: var(--rw-r-sm) !important;
background: transparent !important;
color: var(--rw-muted) !important;
box-shadow: none !important;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease !important;
}
.rw-shell .notif-btn:hover { background: #F0F0F2 !important; color: var(--rw-ink) !important; }
.rw-shell .header-actions > a[href*="cerrarSesion"]:hover { background: var(--rw-red-soft) !important; color: var(--rw-red) !important; }
.rw-shell .notif-btn i,
.rw-shell .header-actions > a[href*="cerrarSesion"] i { font-size: 0 !important; width: 18px; height: 18px; background-color: currentColor; }
.rw-shell .notif-btn i { -webkit-mask: var(--i-bell) center / contain no-repeat; mask: var(--i-bell) center / contain no-repeat; }
.rw-shell .header-actions > a[href*="cerrarSesion"] i { -webkit-mask: var(--i-logout) center / contain no-repeat; mask: var(--i-logout) center / contain no-repeat; }
.rw-shell .notif-btn i::before,
.rw-shell .header-actions > a[href*="cerrarSesion"] i::before { content: none !important; }
/* Contador rojo cuadrado redondeado (referencia "Notification 7") */
.notif-badge, .reportar-notif-badge {
top: 2px !important;
right: 2px !important;
min-width: 17px;
height: 17px;
padding: 0 4px !important;
border-radius: 5px !important;
border: 2px solid var(--rw-sidebar) !important;
background: var(--rw-red) !important;
color: #fff !important;
font-size: 10px !important;
font-weight: 600 !important;
line-height: 13px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.notif-panel {
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-lg) !important;
box-shadow: var(--rw-shadow-pop) !important;
background: var(--rw-surface) !important;
width: min(380px, calc(100vw - 24px)) !important;
transition: opacity var(--rw-dur) ease, transform var(--rw-dur) var(--rw-ease), visibility var(--rw-dur) !important;
}
.notif-panel-head { padding: 14px 16px !important; border-bottom: 1px solid var(--rw-border-soft) !important; }
.notif-panel-title { font-size: var(--rw-fs-lg) !important; font-weight: 600 !important; color: var(--rw-ink) !important; }
.notif-panel-title i { color: var(--rw-ink-2) !important; }
.notif-head-btn { border-radius: var(--rw-r-sm) !important; color: var(--rw-muted) !important; }
.notif-head-btn:hover { background: var(--rw-surface-3) !important; color: var(--rw-ink) !important; }
.notif-head-btn.danger:hover { background: var(--rw-red-soft) !important; color: var(--rw-red) !important; }
.notif-item { border-bottom: 1px solid var(--rw-border-soft) !important; transition: background-color var(--rw-dur-fast) ease; }
.notif-item:hover { background: var(--rw-surface-2) !important; }
.notif-item.unread, .notif-item.no-leida { background: var(--rw-accent-soft) !important; }
.notif-panel-footer { border-top: 1px solid var(--rw-border-soft) !important; background: var(--rw-surface) !important; }
.notif-panel-footer a { color: var(--rw-ink-2) !important; font-weight: 500 !important; }
.notif-panel-footer a:hover { color: var(--rw-accent) !important; }
/* Overlay del drawer */
.sidebar-overlay {
background: rgba(24, 24, 30, 0.32) !important;
-webkit-backdrop-filter: blur(4px) !important;
backdrop-filter: blur(4px) !important;
}
/* ============================================================================
5 · ENCABEZADOS DE SECCIÓN, TARJETAS Y WIDGETS
============================================================================ */
/* Cada sección es la "página": sin doble marco dentro del lienzo blanco */
.rw-shell .main-content > .section > .card-container,
.rw-shell .main-content > .section > .dashboard-layout > .card-container,
.rw-shell .main-content > .section > .card {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
}
.rw-shell .main-content > .section > .card > .card-body { padding: 0 !important; }
/* Encabezado: "Tasks report" + descripción */
.spa-section-head {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
flex-wrap: wrap;
gap: 16px !important;
padding: 0 0 22px !important;
margin: 0 0 4px !important;
border: 0 !important;
background: transparent !important;
}
.spa-section-info { display: flex !important; align-items: flex-start !important; gap: 14px !important; }
.spa-section-title, .rw-shell .main-content > .header h2, .cli-head-text h2 {
font-size: var(--rw-fs-title) !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: -0.02em !important;
color: var(--rw-ink) !important;
margin: 0 0 8px !important;
}
.spa-section-subtitle, .catalog-section-subtitle, .cli-head-text p,
.rw-shell .main-content > .header p {
font-size: var(--rw-fs-lg) !important;
line-height: 1.6 !important;
color: var(--rw-muted) !important;
max-width: 620px;
margin: 0 !important;
}
/* La referencia no muestra ícono junto al título de página */
.spa-section-head .spa-section-icon,
.cli-head > .cli-head-icon,
.proyectos-title-icon, .contratos-title-icon { display: none !important; }
.spa-section-icon, .proyectos-title-icon, .comprobantes-metric-icon.monto {
background: var(--rw-accent-soft) !important;
color: var(--rw-accent) !important;
border-radius: var(--rw-r-md) !important;
}
/* Tarjetas / widgets (referencia: Task status, Comments, Burndown) */
.card, .db-card, .db-kpi-card, .kpi-card,
.comprobantes-metric-card, .proyectos-metric-card,
.form-section, .table-section, .dir-card,
.rw-shell .main-content .card-container .card-container {
background: var(--rw-surface) !important;
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-lg) !important;
box-shadow: var(--rw-shadow-card) !important;
transition: box-shadow var(--rw-dur) ease, border-color var(--rw-dur) ease, transform var(--rw-dur) var(--rw-ease) !important;
}
.db-kpi-card:hover, .kpi-card:hover, .comprobantes-metric-card:hover,
.proyectos-metric-card:hover, .dir-card:hover {
border-color: var(--rw-border-strong) !important;
box-shadow: var(--rw-shadow-hover) !important;
transform: translateY(-1px) !important;
}
.card-header {
background: transparent !important;
border-bottom: 1px solid var(--rw-border-soft) !important;
padding: 14px 18px !important;
font-size: var(--rw-fs-lg) !important;
font-weight: 600 !important;
color: var(--rw-ink) !important;
}
.card-footer { background: transparent !important; border-top: 1px solid var(--rw-border-soft) !important; }
.card-body { padding: 18px 20px; }
.db-card-title, .form-section h3, .table-section h3 {
font-size: var(--rw-fs-lg) !important;
font-weight: 600 !important;
color: var(--rw-ink) !important;
letter-spacing: -0.01em !important;
}
.db-card-title i, .form-section h3 i, .table-section h3 i { color: var(--rw-ink-2) !important; }
/* Títulos de tarjeta (referencia: "Task status", "Comments": 15px semibold) */
.rw-shell .card-container h5:not(.spa-section-title):not(.modal-title),
.dashboard-card-header h5, .dashboard-card-header h4 {
font-size: var(--rw-fs-lg) !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
.dashboard-split-card, .dashboard-responses-card, .dashboard-quick-actions-card,
.dashboard-welcome-card, .dashboard-metric-card {
background: var(--rw-surface) !important;
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-lg) !important;
box-shadow: var(--rw-shadow-card) !important;
}
.dashboard-metric-card { transition: box-shadow var(--rw-dur) ease, transform var(--rw-dur) var(--rw-ease) !important; }
.dashboard-metric-card:hover { box-shadow: var(--rw-shadow-hover) !important; transform: translateY(-1px); }
.dashboard-view-all { color: var(--rw-ink-2) !important; font-weight: 500 !important; }
.dashboard-view-all:hover { color: var(--rw-accent) !important; }
.dashboard-metric-icon, .dashboard-action-icon, .dashboard-response-icon { border-radius: var(--rw-r-md) !important; }
.dashboard-table th {
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
font-size: var(--rw-fs-sm) !important;
color: var(--rw-muted) !important;
border-bottom-color: var(--rw-border) !important;
}
.dashboard-table td { border-bottom-color: var(--rw-border-soft) !important; }
/* KPIs del dashboard: número grande arriba y etiqueta debajo (referencia "24 / Backlog") */
.db-kpi-card { padding: 18px 20px !important; align-items: center !important; gap: 14px !important; cursor: pointer; }
.db-kpi-content { display: flex !important; flex-direction: column-reverse !important; gap: 4px !important; }
.db-kpi-card .db-kpi-value { font-size: clamp(1.3rem, 1.55vw, 1.75rem) !important; white-space: nowrap; }
/* KPIs: número grande + etiqueta con ícono */
.db-kpi-value, .comprobantes-metric-value, .proyectos-metric-value, .spa-counter-number, .kpi-info h4,
.dashboard-metric-value {
font-family: var(--rw-font) !important;
font-size: 1.75rem !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
line-height: 1.15 !important;
color: var(--rw-ink) !important;
}
.db-kpi-label, .comprobantes-metric-label, .proyectos-metric-label, .kpi-info p,
.dashboard-metric-label {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: var(--rw-fs-md) !important;
font-weight: 500 !important;
color: var(--rw-ink-2) !important;
}
.db-kpi-icon-wrap, .kpi-icon {
border-radius: var(--rw-r-md) !important;
}
/* Timeline / alertas del dashboard */
.db-timeline-item, .db-alert-item {
border-color: var(--rw-border-soft) !important;
border-radius: var(--rw-r-md) !important;
transition: background-color var(--rw-dur-fast) ease !important;
}
.db-timeline-item:hover, .db-alert-item:hover { background: var(--rw-surface-2) !important; }
/* ============================================================================
6 · BOTONES
Primario = negro de la referencia ("Create task"); secundario = blanco.
============================================================================ */
.btn {
font-family: var(--rw-font) !important;
font-size: var(--rw-fs-md) !important;
font-weight: 500 !important;
min-height: 36px !important;
padding: 7px 14px !important;
border-radius: var(--rw-r-sm) !important;
gap: 7px !important;
transition: background-color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease,
color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease,
transform var(--rw-dur-fast) ease !important;
}
.btn:active:not(:disabled) { transform: scale(0.98) !important; }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--rw-accent-ring) !important; }
.btn:disabled, .btn.disabled { opacity: 0.55 !important; cursor: not-allowed !important; transform: none !important; }
.btn-sm, .btn-group-sm > .btn {
min-height: 32px !important;
padding: 5px 11px !important;
font-size: var(--rw-fs-sm) !important;
border-radius: 7px !important;
}
.btn-lg { min-height: 44px !important; padding: 10px 20px !important; font-size: var(--rw-fs-lg) !important; border-radius: var(--rw-r-md) !important; }
.btn-primary, .btn-dark,
.proyectos-btn-primary, .comprobantes-btn-primary, .contratos-btn-primary,
.oc-export-btn, .dashboard-response-btn, .success-popup-btn, .alf-btn-primary,
.cli-btn-primary {
background: #232327 !important;
border: 1px solid #18181B !important;
color: #FFFFFF !important;
box-shadow: var(--rw-shadow-btn) !important;
}
.btn-primary:hover, .btn-dark:hover,
.proyectos-btn-primary:hover, .comprobantes-btn-primary:hover, .contratos-btn-primary:hover,
.oc-export-btn:hover, .dashboard-response-btn:hover, .success-popup-btn:hover, .alf-btn-primary:hover,
.cli-btn-primary:hover {
background: #34343A !important;
border-color: #232327 !important;
color: #FFFFFF !important;
box-shadow: var(--rw-shadow-btn), 0 4px 12px -4px rgba(16, 16, 20, 0.32) !important;
transform: none !important;
}
.btn-primary:focus-visible, .btn-dark:focus-visible { box-shadow: var(--rw-shadow-btn), 0 0 0 3px var(--rw-accent-ring) !important; }
.btn-primary:disabled, .btn-primary.disabled, .btn-dark:disabled {
background: #9E9EA6 !important;
border-color: #9E9EA6 !important;
box-shadow: none !important;
}
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-dark,
.proyectos-btn-clear, .contratos-btn-clear, .spa-clear-filters-btn, .oc-reset-btn,
.alf-btn-ghost, .cli-btn:not(.cli-btn-primary) {
background: var(--rw-surface) !important;
border: 1px solid var(--rw-border-strong) !important;
color: var(--rw-ink-2) !important;
box-shadow: var(--rw-shadow-xs) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover, .btn-outline-dark:hover,
.proyectos-btn-clear:hover, .contratos-btn-clear:hover, .spa-clear-filters-btn:hover, .oc-reset-btn:hover,
.alf-btn-ghost:hover, .cli-btn:not(.cli-btn-primary):hover {
background: var(--rw-surface-2) !important;
border-color: #CFCFD6 !important;
color: var(--rw-ink) !important;
}
.btn-outline-primary, .btn-info, .btn-outline-info,
.proyectos-btn-secondary, .contratos-btn-secondary {
background: var(--rw-surface) !important;
border: 1px solid var(--rw-accent-border) !important;
color: var(--rw-accent) !important;
box-shadow: var(--rw-shadow-xs) !important;
}
.btn-outline-primary:hover, .btn-info:hover, .btn-outline-info:hover,
.proyectos-btn-secondary:hover, .contratos-btn-secondary:hover {
background: var(--rw-accent-soft) !important;
border-color: var(--rw-accent) !important;
color: var(--rw-accent-hover) !important;
}
.btn-success, .spm-btn-aprobar { background: var(--rw-green) !important; border-color: var(--rw-green) !important; color: #fff !important; box-shadow: var(--rw-shadow-btn) !important; }
.btn-success:hover, .spm-btn-aprobar:hover:not(:disabled) { background: var(--rw-green-text) !important; border-color: var(--rw-green-text) !important; }
.btn-outline-success { background: #fff !important; border-color: var(--rw-green-border) !important; color: var(--rw-green-text) !important; }
.btn-outline-success:hover { background: var(--rw-green-soft) !important; border-color: var(--rw-green) !important; }
.btn-danger, .spm-btn-rechazar { background: var(--rw-red) !important; border-color: var(--rw-red) !important; color: #fff !important; box-shadow: var(--rw-shadow-btn) !important; }
.btn-danger:hover, .spm-btn-rechazar:hover:not(:disabled) { background: var(--rw-red-text) !important; border-color: var(--rw-red-text) !important; }
.btn-outline-danger { background: #fff !important; border-color: var(--rw-red-border) !important; color: var(--rw-red-text) !important; }
.btn-outline-danger:hover { background: var(--rw-red-soft) !important; border-color: var(--rw-red) !important; }
.btn-warning { background: var(--rw-orange) !important; border-color: var(--rw-orange) !important; color: #fff !important; }
.btn-warning:hover { background: var(--rw-orange-text) !important; border-color: var(--rw-orange-text) !important; }
.btn-outline-warning { background: #fff !important; border-color: var(--rw-orange-border) !important; color: var(--rw-orange-text) !important; }
.btn-outline-warning:hover { background: var(--rw-orange-soft) !important; border-color: var(--rw-orange) !important; }
.btn-link { color: var(--rw-accent) !important; font-weight: 500 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.btn-link:hover { color: var(--rw-accent-hover) !important; }
/* Botones-ícono de acción (lápiz / expandir / más — referencia de widgets) */
.proyectos-action-btn, .contratos-action-btn, .oc-action-btn, .oc-action-icon-btn,
.balance-action-btn, .spa-action-btn-ver, .spa-doc-btn, .spm-file-action-btn, .js-btn-edit-user {
border: 1px solid var(--rw-border) !important;
border-radius: 7px !important;
background: var(--rw-surface) !important;
color: var(--rw-muted) !important;
box-shadow: none !important;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease !important;
}
.proyectos-action-btn:hover, .contratos-action-btn:hover, .oc-action-btn:hover, .oc-action-icon-btn:hover,
.balance-action-btn:hover, .spa-action-btn-ver:hover, .spa-doc-btn:hover, .spm-file-action-btn:hover, .js-btn-edit-user:hover {
background: var(--rw-surface-3) !important;
border-color: var(--rw-border-strong) !important;
color: var(--rw-ink) !important;
}
.btn-close {
width: 32px !important;
height: 32px !important;
border-radius: var(--rw-r-sm) !important;
background-size: 11px !important;
opacity: 0.5 !important;
transition: opacity var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease !important;
}
.btn-close:hover { opacity: 0.9 !important; background-color: var(--rw-surface-3) !important; }
.btn-close:focus { box-shadow: 0 0 0 3px var(--rw-accent-ring) !important; }
/* ============================================================================
7 · FORMULARIOS, BÚSQUEDA Y FILTROS
============================================================================ */
.form-label, .spa-filter-label, .filter-field label, .alf-field-label, .cli-field label {
font-size: var(--rw-fs-sm) !important;
font-weight: 500 !important;
color: var(--rw-ink-2) !important;
margin-bottom: 6px !important;
}
.form-control, .form-select {
min-height: 38px !important;
padding: 7px 12px !important;
font-size: var(--rw-fs-md) !important;
color: var(--rw-ink) !important;
background-color: var(--rw-surface) !important;
border: 1px solid var(--rw-border-strong) !important;
border-radius: var(--rw-r-sm) !important;
box-shadow: var(--rw-shadow-xs) !important;
transition: border-color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease !important;
}
.form-control-sm, .form-select-sm { min-height: 32px !important; padding: 5px 10px !important; font-size: var(--rw-fs-sm) !important; border-radius: 7px !important; }
.form-control::placeholder { color: var(--rw-faint) !important; }
.form-control:hover, .form-select:hover { border-color: #CFCFD6 !important; }
.form-control:focus, .form-select:focus {
border-color: var(--rw-accent) !important;
box-shadow: 0 0 0 3px var(--rw-accent-ring) !important;
outline: none !important;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
background-color: var(--rw-surface-2) !important;
color: var(--rw-muted) !important;
box-shadow: none !important;
}
.form-control.is-invalid, .was-validated .form-control:invalid, .form-select.is-invalid {
border-color: var(--rw-red) !important;
box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.14) !important;
}
.form-control.is-valid, .was-validated .form-control:valid { border-color: var(--rw-green) !important; }
.invalid-feedback { color: var(--rw-red-text) !important; font-size: var(--rw-fs-sm) !important; }
.valid-feedback { color: var(--rw-green-text) !important; font-size: var(--rw-fs-sm) !important; }
.form-text, small.text-muted { color: var(--rw-muted) !important; font-size: var(--rw-fs-sm) !important; }
.form-check-input {
border: 1.5px solid #C8C8D0 !important;
width: 1.05em;
height: 1.05em;
transition: background-color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease !important;
}
.form-check-input[type="checkbox"] { border-radius: 5px !important; }
.form-check-input:checked { background-color: var(--rw-accent) !important; border-color: var(--rw-accent) !important; }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--rw-accent-ring) !important; border-color: var(--rw-accent) !important; }
.form-switch .form-check-input { border-radius: 999px !important; height: 1.25em; width: 2.2em; }
.form-switch .form-check-input:checked { background-color: var(--rw-accent) !important; border-color: var(--rw-accent) !important; }
.form-check-input:disabled { opacity: 0.45 !important; }
.input-group-text {
background: var(--rw-surface-2) !important;
border: 1px solid var(--rw-border-strong) !important;
border-radius: var(--rw-r-sm) !important;
color: var(--rw-muted) !important;
}
/* Búsqueda — campo gris de la referencia ("Search ⌘F") */
.spa-search-input,
input.alf-search-input,
input.alf-search-input.form-control {
background-color: var(--rw-surface-3) !important;
border: 1px solid transparent !important;
border-radius: var(--rw-r-sm) !important;
box-shadow: none !important;
color: var(--rw-ink) !important;
}
.spa-search-input:hover, input.alf-search-input:hover { background-color: #EDEDF0 !important; border-color: transparent !important; }
.spa-search-input:focus, input.alf-search-input:focus {
background-color: var(--rw-surface) !important;
border-color: var(--rw-accent) !important;
box-shadow: 0 0 0 3px var(--rw-accent-ring) !important;
}
.alf-search-icon { color: var(--rw-muted) !important; }
/* Botón "Filter" de la referencia */
.alf-filter-btn {
background: var(--rw-surface) !important;
border: 1px solid var(--rw-border) !important;
border-radius: 7px !important;
color: var(--rw-ink-2) !important;
font-weight: 500 !important;
transition: background-color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease !important;
}
.alf-filter-btn:hover { background: var(--rw-surface-2) !important; border-color: var(--rw-border-strong) !important; color: var(--rw-ink) !important; }
.alf-filter-btn.has-filters { background: var(--rw-accent-soft) !important; border-color: var(--rw-accent-border) !important; color: var(--rw-accent-hover) !important; }
.alf-badge { background: var(--rw-accent) !important; }
.alf-pop {
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-lg) !important;
box-shadow: var(--rw-shadow-pop) !important;
transition: opacity var(--rw-dur) ease, transform var(--rw-dur) var(--rw-ease), visibility var(--rw-dur) !important;
}
.alf-pop-head { font-size: var(--rw-fs-lg) !important; font-weight: 600 !important; }
.alf-field .alf-ctrl, .alf-field select, .alf-field input,
.alf-field-wide .alf-ctrl input[type="date"] {
border-color: var(--rw-border-strong) !important;
border-radius: var(--rw-r-sm) !important;
}
.alf-field .alf-ctrl:focus, .alf-field select:focus, .alf-field input:focus {
border-color: var(--rw-accent) !important;
box-shadow: 0 0 0 3px var(--rw-accent-ring) !important;
}
/* Tom Select */
.ts-wrapper .ts-control, .ts-wrapper.single .ts-control {
border: 1px solid var(--rw-border-strong) !important;
border-radius: var(--rw-r-sm) !important;
box-shadow: var(--rw-shadow-xs) !important;
font-size: var(--rw-fs-md) !important;
}
.ts-wrapper.focus .ts-control, .alf-field .ts-wrapper.form-select.focus {
border-color: var(--rw-accent) !important;
box-shadow: 0 0 0 3px var(--rw-accent-ring) !important;
}
.ts-dropdown {
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-md) !important;
box-shadow: var(--rw-shadow-pop) !important;
animation: rw-pop var(--rw-dur-fast) var(--rw-ease);
}
.ts-dropdown .option { border-radius: 6px !important; }
.ts-dropdown .active { background: var(--rw-surface-3) !important; color: var(--rw-ink) !important; }
.ts-wrapper.multi .ts-control > .item {
background: var(--rw-surface-3) !important;
border: 1px solid var(--rw-border) !important;
border-radius: 6px !important;
color: var(--rw-ink-2) !important;
}
/* ============================================================================
8 · TABLAS Y PAGINACIÓN
============================================================================ */
.table-responsive, .spa-desktop-table {
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-lg) !important;
background: var(--rw-surface) !important;
box-shadow: var(--rw-shadow-card) !important;
}
.table, .spa-table, .tabla-compacta, .comprobantes-table { font-size: var(--rw-fs-md) !important; color: var(--rw-text) !important; }
.table th, .spa-table th, .tabla-compacta th, .comprobantes-table th {
background: #FAFAFB !important;
color: var(--rw-muted) !important;
font-size: var(--rw-fs-sm) !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
padding: 11px 16px !important;
border-bottom: 1px solid var(--rw-border) !important;
}
.table td, .spa-table td, .tabla-compacta td, .comprobantes-table td {
padding: 12px 16px !important;
font-size: var(--rw-fs-md) !important;
color: var(--rw-text) !important;
border-bottom: 1px solid var(--rw-border-soft) !important;
}
.table tbody tr:hover, .spa-table tbody tr:hover, .tabla-compacta tbody tr:hover, .comprobantes-table tbody tr:hover {
background: #FAFAFB !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #FCFCFD !important; }
.pagination { gap: 4px; }
.pagination .page-link,
.proyectos-page-btn, .proyectos-page-num-btn, .contratos-page-btn, .page-btn,
.js-alerta-page-btn, .js-comprobante-page-btn, .js-exp-page-btn, .js-mantenimiento-page-btn,
.js-oc-page-btn, .js-prov-page-btn, .js-spa-page-btn, .js-user-page-btn, .js-vehiculo-page-btn, .spa-page-btn {
min-width: 32px;
border: 1px solid var(--rw-border) !important;
border-radius: 7px !important;
background: var(--rw-surface) !important;
color: var(--rw-ink-2) !important;
font-size: var(--rw-fs-sm) !important;
font-weight: 500 !important;
box-shadow: none !important;
}
.pagination .page-link:hover,
.proyectos-page-btn:hover:not(:disabled), .proyectos-page-num-btn:hover:not(.active),
.contratos-page-btn:hover:not(:disabled), .page-btn:hover:not(:disabled), .spa-page-btn:hover:not(.active) {
background: var(--rw-surface-2) !important;
border-color: var(--rw-border-strong) !important;
}
.pagination .page-item.active .page-link,
.proyectos-page-num-btn.active, .page-btn.active, .js-oc-page-btn.active, .spa-page-btn.active {
background: #232327 !important;
border-color: #232327 !important;
color: #fff !important;
}
.pagination .page-item.disabled .page-link { color: var(--rw-faint) !important; background: var(--rw-surface-2) !important; }
/* ============================================================================
9 · BADGES, ESTADOS, ALERTAS, PROGRESO
============================================================================ */
.badge, .spm-status-badge {
font-family: var(--rw-font) !important;
font-size: var(--rw-fs-xs) !important;
font-weight: 500 !important;
padding: 3px 8px !important;
border-radius: var(--rw-r-xs) !important;
border: 1px solid transparent !important;
line-height: 1.4 !important;
}
.badge.rounded-pill { border-radius: 999px !important; }
.badge.bg-success, .badge.text-bg-success, .estado-activo, .estado-aprobada, .estado-aprobado, .spm-status-badge.aprobada {
background: var(--rw-green-soft) !important; color: var(--rw-green-text) !important; border-color: var(--rw-green-border) !important;
}
.badge.bg-danger, .badge.text-bg-danger, .estado-bloqueado, .estado-rechazada, .estado-rechazado, .estado-vencido, .spm-status-badge.rechazada {
background: var(--rw-red-soft) !important; color: var(--rw-red-text) !important; border-color: var(--rw-red-border) !important;
}
.badge.bg-warning, .badge.text-bg-warning, .estado-pendiente, .estado-en-proceso, .spm-status-badge.pendiente {
background: var(--rw-orange-soft) !important; color: var(--rw-orange-text) !important; border-color: var(--rw-orange-border) !important;
}
.badge.bg-info, .badge.text-bg-info, .badge.bg-primary, .badge.text-bg-primary {
background: var(--rw-accent-soft) !important; color: var(--rw-accent-hover) !important; border-color: var(--rw-accent-border) !important;
}
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light {
background: var(--rw-surface-3) !important; color: var(--rw-ink-2) !important; border-color: var(--rw-border) !important;
}
.badge.bg-dark, .badge.text-bg-dark { background: #232327 !important; color: #fff !important; border-color: #232327 !important; }
/* El contador de notificaciones conserva su forma propia */
.badge.notif-badge { border: 2px solid var(--rw-sidebar) !important; border-radius: 5px !important; padding: 0 4px !important; }
.alert {
border-radius: var(--rw-r-md) !important;
border: 1px solid transparent !important;
font-size: var(--rw-fs-md) !important;
padding: 12px 14px !important;
animation: rw-fade-up var(--rw-dur) var(--rw-ease);
}
.alert-success { background: var(--rw-green-soft) !important; color: var(--rw-green-text) !important; border-color: var(--rw-green-border) !important; }
.alert-danger { background: var(--rw-red-soft) !important; color: var(--rw-red-text) !important; border-color: var(--rw-red-border) !important; }
.alert-warning { background: var(--rw-orange-soft) !important; color: var(--rw-orange-text) !important; border-color: var(--rw-orange-border) !important; }
.alert-info, .alert-primary { background: var(--rw-accent-soft) !important; color: var(--rw-accent-hover) !important; border-color: var(--rw-accent-border) !important; }
.alert-secondary, .alert-light { background: var(--rw-surface-2) !important; color: var(--rw-ink-2) !important; border-color: var(--rw-border) !important; }
/* Barra de progreso con el degradado del widget "Task status" */
.progress {
height: 8px;
background: var(--rw-surface-3) !important;
border-radius: 999px !important;
overflow: hidden;
}
.progress-bar { background: var(--rw-gradient) !important; transition: width var(--rw-dur-slow) var(--rw-ease) !important; }
.progress-bar.bg-success { background: var(--rw-green) !important; }
.progress-bar.bg-danger { background: var(--rw-red) !important; }
.progress-bar.bg-warning { background: var(--rw-orange) !important; }
/* ============================================================================
10 · PESTAÑAS — control segmentado ("Spreadsheet · Board · Calendar")
============================================================================ */
.nav-tabs, .nav-pills {
background: var(--rw-surface-3) !important;
border: 0 !important;
border-radius: var(--rw-r-md) !important;
padding: 3px !important;
gap: 2px !important;
}
.nav-tabs .nav-link, .nav-pills .nav-link {
border: 0 !important;
border-radius: 7px !important;
color: var(--rw-ink-2) !important;
font-size: var(--rw-fs-md) !important;
font-weight: 400 !important;
padding: 6px 12px !important;
background: transparent !important;
transition: background-color var(--rw-dur) var(--rw-ease), color var(--rw-dur-fast) ease, box-shadow var(--rw-dur) ease !important;
}
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { color: var(--rw-ink) !important; background: rgba(255, 255, 255, 0.55) !important; }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
background: var(--rw-surface) !important;
color: var(--rw-ink) !important;
font-weight: 500 !important;
box-shadow: 0 1px 2px rgba(20, 20, 30, 0.08), 0 0 0 1px rgba(20, 20, 30, 0.04) !important;
}
.tab-pane.active.show { animation: rw-fade-up var(--rw-dur) var(--rw-ease); }
/* ============================================================================
11 · MODALES, POPUPS, OVERLAYS
============================================================================ */
.modal-content, .spm-modal-content {
border: 1px solid rgba(20, 20, 30, 0.06) !important;
border-radius: var(--rw-r-xl) !important;
box-shadow: var(--rw-shadow-pop), 0 30px 60px -20px rgba(20, 20, 30, 0.18) !important;
background: var(--rw-surface) !important;
overflow: hidden !important;
}
.modal-header, .reportar-modal-header, .spm-header {
background: var(--rw-surface) !important;
color: var(--rw-ink) !important;
border-bottom: 1px solid var(--rw-border-soft) !important;
padding: 18px 22px !important;
}
.modal-title { font-size: 1.0625rem !important; font-weight: 600 !important; line-height: 1.35 !important; }
.modal-title i { color: var(--rw-ink-2) !important; }
.catalog-modal-subtitle, .reportar-modal-subtitle { color: var(--rw-muted) !important; font-size: var(--rw-fs-sm) !important; }
.modal-body { padding: 20px 22px !important; color: var(--rw-text); }
.modal-footer {
background: var(--rw-surface) !important;
border-top: 1px solid var(--rw-border-soft) !important;
padding: 14px 22px !important;
gap: 8px !important;
}
.modal-footer > * { margin: 0 !important; }
.spm-header-icon { background: var(--rw-accent-soft) !important; color: var(--rw-accent) !important; border-radius: var(--rw-r-md) !important; }
/* Encabezados de modal con color de fondo heredado (bg-danger/bg-primary…) */
.modal-header.bg-primary, .modal-header.bg-dark, .modal-header.bg-danger,
.modal-header.bg-success, .modal-header.bg-warning, .modal-header.bg-info {
background: var(--rw-surface) !important;
color: var(--rw-ink) !important;
}
.modal-header.bg-primary .modal-title, .modal-header.bg-dark .modal-title,
.modal-header.bg-danger .modal-title, .modal-header.bg-success .modal-title { color: var(--rw-ink) !important; }
.modal-header .btn-close-white { filter: none !important; }
.modal-header.bg-danger .modal-title i { color: var(--rw-red) !important; }
.modal-header.bg-warning .modal-title i { color: var(--rw-orange) !important; }
.modal-header.bg-success .modal-title i { color: var(--rw-green) !important; }
/* Fondo */
.modal-backdrop { background: #18181E !important; }
.modal-backdrop.show {
opacity: 1 !important;
background: rgba(24, 24, 30, 0.34) !important;
-webkit-backdrop-filter: blur(4px) !important;
backdrop-filter: blur(4px) !important;
}
.modal-backdrop.fade { transition: opacity var(--rw-dur) ease !important; }
/* Apertura / cierre */
.modal.fade { transition: opacity var(--rw-dur) ease !important; }
.modal.fade .modal-dialog {
transform: translateY(10px) scale(0.98) !important;
transition: transform var(--rw-dur-slow) var(--rw-ease) !important;
}
.modal.show .modal-dialog { transform: none !important; }
.modal.modal-static .modal-dialog { transform: scale(1.015) !important; }
/* Popup de éxito / confirmaciones propias */
.success-popup-overlay {
background: rgba(24, 24, 30, 0.34) !important;
-webkit-backdrop-filter: blur(4px) !important;
backdrop-filter: blur(4px) !important;
animation: rw-fade var(--rw-dur) ease;
}
.success-popup-card {
border-radius: var(--rw-r-xl) !important;
border: 1px solid rgba(20, 20, 30, 0.06) !important;
box-shadow: var(--rw-shadow-pop) !important;
animation: rw-pop var(--rw-dur-slow) var(--rw-ease) !important;
}
.success-popup-icon {
background: var(--rw-green-soft) !important;
color: var(--rw-green) !important;
}
/* Paneles laterales (offcanvas) */
.offcanvas {
border: 0 !important;
box-shadow: var(--rw-shadow-pop) !important;
transition: transform var(--rw-dur-slow) var(--rw-ease) !important;
}
.offcanvas-start { border-radius: 0 var(--rw-r-xl) var(--rw-r-xl) 0 !important; }
.offcanvas-end { border-radius: var(--rw-r-xl) 0 0 var(--rw-r-xl) !important; }
.offcanvas-header { border-bottom: 1px solid var(--rw-border-soft); padding: 18px 22px !important; }
.offcanvas-backdrop.show { opacity: 1 !important; background: rgba(24, 24, 30, 0.34) !important; }
/* ============================================================================
12 · DROPDOWNS, TOOLTIPS, TOASTS, MENÚS CONTEXTUALES
============================================================================ */
.dropdown-menu {
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-md) !important;
box-shadow: var(--rw-shadow-pop) !important;
padding: 5px !important;
font-size: var(--rw-fs-md) !important;
min-width: 200px;
}
.dropdown-menu.show { animation: rw-pop var(--rw-dur-fast) var(--rw-ease); transform-origin: top; }
.dropdown-item {
border-radius: 6px !important;
padding: 7px 10px !important;
font-weight: 400 !important;
color: var(--rw-ink-2) !important;
display: flex;
align-items: center;
gap: 9px;
transition: background-color var(--rw-dur-fast) ease !important;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--rw-surface-3) !important; color: var(--rw-ink) !important; }
.dropdown-item.active, .dropdown-item:active { background: var(--rw-accent-soft) !important; color: var(--rw-accent-hover) !important; }
.dropdown-item.text-danger:hover { background: var(--rw-red-soft) !important; }
.dropdown-divider { border-color: var(--rw-border-soft) !important; margin: 5px 0 !important; }
.dropdown-header { font-size: var(--rw-fs-xs) !important; color: var(--rw-muted) !important; font-weight: 500 !important; }
.tooltip .tooltip-inner {
background: #232327 !important;
border-radius: 7px !important;
font-size: var(--rw-fs-sm) !important;
font-weight: 500 !important;
padding: 5px 9px !important;
box-shadow: 0 4px 12px -4px rgba(20, 20, 30, 0.3);
}
.tooltip.show { animation: rw-fade var(--rw-dur-fast) ease; }
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { border-top-color: #232327 !important; }
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { border-bottom-color: #232327 !important; }
.popover {
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-md) !important;
box-shadow: var(--rw-shadow-pop) !important;
font-family: var(--rw-font) !important;
}
/* Toasts (ui_feedback.js): tarjeta blanca con marca de color lateral en el ícono */
.toast {
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-lg) !important;
box-shadow: var(--rw-shadow-pop) !important;
overflow: hidden;
background: var(--rw-surface) !important;
font-size: var(--rw-fs-md) !important;
}
.toast.showing, .toast.show { animation: rw-toast-in var(--rw-dur-slow) var(--rw-ease); }
.toast.hide { display: none; }
.toast-header {
background: var(--rw-surface) !important;
color: var(--rw-ink) !important;
border-bottom: 1px solid var(--rw-border-soft) !important;
font-weight: 600 !important;
padding: 10px 14px !important;
}
.toast-header::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 9px;
background: var(--rw-muted);
flex: 0 0 8px;
}
.toast-header.text-bg-success::before { background: var(--rw-green); box-shadow: 0 0 0 3px var(--rw-green-soft); }
.toast-header.text-bg-warning::before { background: var(--rw-orange); box-shadow: 0 0 0 3px var(--rw-orange-soft); }
.toast-header.text-bg-danger::before { background: var(--rw-red); box-shadow: 0 0 0 3px var(--rw-red-soft); }
.toast-header .btn-close { width: 24px !important; height: 24px !important; }
.toast-body { color: var(--rw-text) !important; padding: 12px 14px !important; }
/* ============================================================================
13 · CARGA DE ARCHIVOS Y ESTADOS DE CARGA
============================================================================ */
.dnd-upload-zone, .dnd-dropzone {
border: 1.5px dashed #D6D6DD !important;
border-radius: var(--rw-r-lg) !important;
background: #FAFAFB !important;
}
.dnd-upload-zone:hover, .dnd-dropzone:hover,
.dnd-upload-zone.dragover, .dnd-dropzone.dnd-drag-over {
border-color: var(--rw-accent) !important;
background: var(--rw-accent-soft) !important;
}
.dnd-dropzone.dnd-drag-over { box-shadow: 0 0 0 4px var(--rw-accent-ring) !important; }
.dnd-dropzone-icon, .dnd-upload-zone i { color: var(--rw-faint) !important; }
.dnd-dropzone:hover .dnd-dropzone-icon, .dnd-dropzone.dnd-drag-over .dnd-dropzone-icon,
.dnd-upload-zone:hover i { color: var(--rw-accent) !important; }
.dnd-dropzone.dnd-has-files { border-color: var(--rw-green-border) !important; background: var(--rw-green-soft) !important; }
.dnd-file-item { border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-md) !important; animation: rw-fade-up var(--rw-dur) var(--rw-ease); }
.dnd-file-icon { border-radius: var(--rw-r-sm) !important; }
.dnd-file-remove:hover { background: var(--rw-red-soft) !important; color: var(--rw-red) !important; }
input[type="file"].form-control::file-selector-button {
background: var(--rw-surface-3);
border: 0;
border-radius: 6px;
color: var(--rw-ink-2);
font-weight: 500;
}
.spinner-border { color: var(--rw-accent); border-width: 2px; animation-duration: 0.7s; }
.spinner-grow { color: var(--rw-accent); }
.placeholder { background-color: var(--rw-surface-3) !important; border-radius: 6px; }
.placeholder-glow .placeholder { animation-duration: 1.4s; }
/* ============================================================================
14 · FOOTER Y WIDGETS FLOTANTES
============================================================================ */
.alcore-footer {
background: transparent !important;
border: 0 !important;
border-top: 1px solid var(--rw-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 28px 0 8px !important;
margin-top: 48px !important;
}
.alcore-footer-grid { border-bottom-color: var(--rw-border) !important; }
.alcore-footer-brand-subtitle { color: var(--rw-muted) !important; font-weight: 500 !important; }
.alcore-footer-col-title { color: var(--rw-muted) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; font-size: var(--rw-fs-sm) !important; }
.alcore-footer-links li a { color: var(--rw-ink-2) !important; }
.alcore-footer-links li a:hover, .alcore-footer-links li a:hover i { color: var(--rw-accent) !important; }
.reportar-notif-btn {
background: #232327 !important;
box-shadow: 0 10px 24px -8px rgba(16, 16, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
.reportar-notif-panel {
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-lg) !important;
box-shadow: var(--rw-shadow-pop) !important;
}
/* Asistente de ayuda (chatbot): lanzador oscuro como el botón primario */
#chatAyudaBtn {
width: 52px !important;
height: 52px !important;
background: #232327 !important;
box-shadow: 0 10px 24px -8px rgba(16, 16, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
transition: transform var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease !important;
}
#chatAyudaBtn:hover { transform: translateY(-2px) !important; }
#chatAyudaPanel {
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-xl) !important;
box-shadow: var(--rw-shadow-pop) !important;
}
#chatAyudaPanel.abierto { animation: rw-pop var(--rw-dur) var(--rw-ease); transform-origin: bottom right; }
.chat-ayuda-header {
background: var(--rw-surface) !important;
color: var(--rw-ink) !important;
border-bottom: 1px solid var(--rw-border-soft);
}
.chat-ayuda-header .titulo { color: var(--rw-ink) !important; font-weight: 600 !important; }
.chat-ayuda-header .subtitulo { color: var(--rw-muted) !important; }
.chat-ayuda-header .cerrar, .chat-ayuda-header .reportar { color: var(--rw-muted) !important; background: transparent !important; border-radius: var(--rw-r-sm) !important; }
.chat-ayuda-header .cerrar:hover, .chat-ayuda-header .reportar:hover { background: var(--rw-surface-3) !important; color: var(--rw-ink) !important; }
.chat-ayuda-msg.user { background: #232327 !important; color: #fff !important; }
.chat-ayuda-msg.bot { background: var(--rw-surface-3) !important; color: var(--rw-ink-2) !important; }
/* ============================================================================
Gestión de orden de compra (detalle OC — js/admin.js construirHtmlDetalleOrdenCompraAdmin)
============================================================================ */
.oc-detail-head { margin-bottom: 22px; }
.oc-back {
display: inline-flex;
align-items: center;
gap: 8px;
height: 30px;
padding: 0 10px 0 8px;
margin: 0 0 12px -8px;
border: 0;
border-radius: var(--rw-r-sm);
background: transparent;
color: var(--rw-muted);
font-size: var(--rw-fs-md);
font-weight: 500;
cursor: pointer;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease;
}
.oc-back:hover { background: var(--rw-surface-3); color: var(--rw-ink); }
.oc-back i { font-size: 0.85em; transition: transform var(--rw-dur-fast) ease; }
.oc-back:hover i { transform: translateX(-2px); }
.oc-detalle { animation: rw-fade-up var(--rw-dur-slow) var(--rw-ease); }
.oc-detalle .oc-card {
background: var(--rw-surface);
border: 1px solid var(--rw-border);
border-radius: var(--rw-r-lg);
box-shadow: var(--rw-shadow-card);
padding: 20px;
margin-bottom: 16px;
}
.oc-detalle .oc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.oc-detalle .oc-card-head .oc-card-title { margin: 0 !important; }
.oc-detalle .oc-card-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 16px !important;
font-size: var(--rw-fs-lg) !important;
font-weight: 600 !important;
color: var(--rw-ink) !important;
letter-spacing: -0.01em !important;
}
.oc-detalle .oc-card-title > i {
width: 28px; height: 28px; flex: 0 0 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
background: var(--rw-surface-3);
color: var(--rw-ink-2) !important;
font-size: 0.8rem;
}
.oc-detalle .oc-divider { height: 1px; background: var(--rw-border-soft); margin: 20px -20px; }
.oc-detalle .oc-subtitle { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
.oc-detalle .oc-label { display: block; margin-bottom: 4px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-muted); }
.oc-detalle .oc-value { display: block; font-size: var(--rw-fs-md); font-weight: 500; color: var(--rw-ink); word-break: break-word; }
.oc-detalle .oc-folio {
display: inline-flex; align-items: center;
height: 28px; padding: 0 10px;
border-radius: var(--rw-r-sm);
background: var(--rw-ink);
color: #fff;
font-size: var(--rw-fs-md);
font-weight: 600;
letter-spacing: 0.01em;
}
/* Información general: rejilla de datos */
.oc-detalle .oc-kv {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 16px 20px;
}
.oc-detalle .oc-kv > [class*="col-"] { width: auto; max-width: none; padding: 0; flex: none; }
.oc-detalle .ppEditSelect {
border-style: dashed !important;
border-color: var(--rw-accent-border) !important;
background-color: var(--rw-accent-soft) !important;
}
/* Rejillas de formulario (bootstrap row g-*) con aire uniforme */
.oc-detalle .oc-card .row.g-2, .oc-detalle .oc-card .row.g-3 { --bs-gutter-y: 14px; --bs-gutter-x: 16px; }
/* Stepper de avance (Creada → Autorizada → Pagada → Entregada) */
.oc-detalle .oc-stepper-card { padding: 18px 22px; }
.oc-stepper { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; }
.oc-step { position: relative; flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
.oc-step:not(:last-child)::after {
content: "";
flex: 1 1 auto;
height: 2px;
margin: 0 12px 0 4px;
border-radius: 2px;
background: var(--rw-border);
}
.oc-step.is-done:not(:last-child)::after { background: var(--rw-green); }
.oc-step-dot {
flex: 0 0 30px;
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--rw-surface-3);
color: var(--rw-faint);
font-size: var(--rw-fs-sm);
font-weight: 600;
box-shadow: inset 0 0 0 1px var(--rw-border);
}
.oc-step.is-done .oc-step-dot { background: var(--rw-green); color: #fff; box-shadow: 0 0 0 4px var(--rw-green-soft); }
.oc-step.is-rejected .oc-step-dot { background: var(--rw-red); color: #fff; box-shadow: 0 0 0 4px var(--rw-red-soft); }
.oc-step.is-current .oc-step-dot { background: var(--rw-surface); color: var(--rw-accent); box-shadow: inset 0 0 0 2px var(--rw-accent), 0 0 0 4px var(--rw-accent-soft); }
.oc-step-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.oc-step-label { font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-faint); white-space: nowrap; }
.oc-step-sub { font-size: var(--rw-fs-xs); color: var(--rw-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-step.is-done .oc-step-label, .oc-step.is-current .oc-step-label, .oc-step.is-rejected .oc-step-label { color: var(--rw-ink); }
.oc-step.is-done .oc-step-sub, .oc-step.is-current .oc-step-sub { color: var(--rw-muted); }
.oc-step.is-rejected .oc-step-sub { color: var(--rw-red-text); }
/* Zona de carga de archivos */
.oc-detalle .oc-drop {
min-height: 120px;
padding: 20px 16px;
gap: 2px;
border: 1.5px dashed #D6D6DD !important;
border-radius: var(--rw-r-lg);
background: #FAFAFB;
cursor: pointer;
transition: border-color var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease;
}
.oc-detalle .oc-drop:hover, .oc-detalle .oc-drop.dragover, .oc-detalle .oc-drop.drag-over { border-color: var(--rw-accent) !important; background: var(--rw-accent-soft); }
.oc-detalle .oc-drop-icon { font-size: 1.6rem; color: var(--rw-faint); margin-bottom: 6px; }
.oc-detalle .oc-drop:hover .oc-drop-icon { color: var(--rw-accent); }
.oc-detalle .oc-drop-title { margin: 0; font-size: var(--rw-fs-md); font-weight: 500; color: var(--rw-ink-2); }
.oc-detalle .oc-drop-sub { margin: 0; font-size: var(--rw-fs-xs); color: var(--rw-faint); }
/* Columna lateral: resumen fijo al hacer scroll */
@media (min-width: 1280px) { .oc-detalle .oc-side-sticky { position: sticky; top: 24px; } }
.oc-detalle .oc-summary .oc-card-title { padding-bottom: 14px; border-bottom: 1px solid var(--rw-border-soft); }
.oc-detalle .oc-summary-currency { margin-bottom: 16px; }
.oc-detalle .oc-sum-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 6px 0;
font-size: var(--rw-fs-md);
color: var(--rw-muted);
}
.oc-detalle .oc-sum-row strong { color: var(--rw-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.oc-detalle .oc-iva-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.oc-detalle .oc-iva-toggle .form-check-input { margin: 0; }
.oc-detalle .oc-sum-total {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
margin: 10px 0 4px;
padding: 14px 16px;
border-radius: var(--rw-r-md);
background: var(--rw-surface-2);
border: 1px solid var(--rw-border-soft);
}
.oc-detalle .oc-sum-total > span { font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink-2); }
.oc-detalle .oc-sum-total strong { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
.oc-detalle .oc-sum-eq { justify-content: space-between; margin: 6px 2px 0; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.oc-detalle .oc-summary > .oc-note:first-of-type,
.oc-detalle .oc-summary > .oc-btn-block:first-of-type,
.oc-detalle .oc-btn-main { margin-top: 16px; }
.oc-detalle .oc-btn-block { margin-bottom: 10px; }
.oc-detalle .oc-btn-main { min-height: 42px !important; margin-bottom: 10px; }
.oc-detalle .oc-btn-block + .oc-btn-main { margin-top: 0; }
.oc-detalle .oc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.oc-detalle .oc-actions .btn { width: 100%; min-width: 0; padding-left: 8px !important; padding-right: 8px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-detalle .oc-actions .oc-note { grid-column: 1 / -1; margin: 0; }
.btn-accent {
background: var(--rw-accent) !important;
border: 1px solid var(--rw-accent-hover) !important;
color: #fff !important;
box-shadow: var(--rw-shadow-btn) !important;
min-height: 42px !important;
}
.btn-accent:hover { background: var(--rw-accent-hover) !important; color: #fff !important; }
/* Avisos dentro del detalle */
.oc-detalle .oc-note {
display: flex; align-items: flex-start; gap: 8px;
margin: 0 0 10px;
padding: 10px 12px;
border-radius: var(--rw-r-md);
background: var(--rw-surface-2);
border: 1px solid var(--rw-border);
color: var(--rw-ink-2);
font-size: var(--rw-fs-sm);
line-height: 1.45;
}
.oc-detalle .oc-note > i { margin-top: 3px; }
.oc-detalle .oc-note-warn { background: var(--rw-orange-soft); border-color: var(--rw-orange-border); color: var(--rw-orange-text); }
.oc-detalle .oc-note-ok { background: var(--rw-green-soft); border-color: var(--rw-green-border); color: var(--rw-green-text); }
.oc-detalle .oc-note-block { display: block; }
.oc-detalle .oc-note-block .d-grid { margin-top: 8px; }
.oc-detalle .oc-historial { margin-top: 16px; }
.oc-detalle .oc-historial .btn-link { font-size: var(--rw-fs-sm) !important; color: var(--rw-ink-2) !important; text-decoration: none; }
.oc-detalle .oc-historial .btn-link:hover { color: var(--rw-accent) !important; }
/* Layout: contenido + columna de resumen (sin columnas de Bootstrap) */
.oc-detalle .oc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.oc-detalle .oc-main, .oc-detalle .oc-side { min-width: 0; }
.oc-detalle .oc-main > .oc-card:last-child, .oc-detalle .oc-side-sticky > .oc-card:last-child { margin-bottom: 0; }
.oc-detalle .oc-historial { margin-top: 0; }
@media (min-width: 1280px) {
.oc-detalle .oc-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}
/* Resumen a todo lo ancho (pantallas medianas): cifras | acciones */
.oc-detalle .oc-side { container-type: inline-size; }
@container (min-width: 620px) {
.oc-detalle .oc-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
.oc-detalle .oc-summary > .oc-card-title { grid-column: 1 / -1; }
.oc-detalle .oc-sum-actions > :first-child { margin-top: 0 !important; }
}
/* Artículos: lista de partidas sin desplazamiento horizontal */
.oc-detalle .oc-items-wrap { overflow: visible !important; container-type: inline-size; margin-bottom: 4px; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
.oc-detalle #adminItemsTable { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
.oc-detalle #adminItemsTable thead { display: none !important; }
.oc-detalle #adminItemsTable tbody { display: flex !important; flex-direction: column; gap: 10px; width: 100% !important; counter-reset: ocitem; }
.oc-detalle #adminItemsTable tbody:empty { display: none !important; }
.oc-detalle #adminItemsTable tr.admin-item-row {
position: relative;
display: grid !important;
grid-template-columns: minmax(64px, 0.8fr) minmax(60px, 0.7fr) minmax(88px, 1fr) minmax(110px, 1.3fr) 128px 34px !important;
grid-template-areas: "art art art art tot del" "can uni pre sku tot del";
gap: 10px 12px !important;
width: 100% !important;
margin: 0 !important;
padding: 14px 14px 14px 18px !important;
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-lg) !important;
background: var(--rw-surface) !important;
box-shadow: none !important;
counter-increment: ocitem;
transition: border-color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease;
}
.oc-detalle #adminItemsTable tr.admin-item-row::before {
content: "";
position: absolute; left: 0; top: 14px; bottom: 14px;
width: 3px; border-radius: 0 3px 3px 0;
background: transparent;
transition: background-color var(--rw-dur-fast) ease;
}
.oc-detalle #adminItemsTable tr.admin-item-row:hover,
.oc-detalle #adminItemsTable tr.admin-item-row:focus-within { border-color: #CFCFD6 !important; box-shadow: var(--rw-shadow-card) !important; }
.oc-detalle #adminItemsTable tr.admin-item-row:focus-within::before { background: var(--rw-accent); }
.oc-detalle #adminItemsTable tr.admin-item-row > td {
display: flex !important; flex-direction: column; justify-content: flex-start; gap: 5px;
min-width: 0; width: auto !important;
padding: 0 !important; border: 0 !important;
background: none !important; box-shadow: none !important;
text-align: left !important;
}
.oc-detalle #adminItemsTable tr.admin-item-row > td::before {
content: attr(data-label);
display: block !important;
margin: 0 !important;
font-size: var(--rw-fs-xs) !important; font-weight: 500 !important;
color: var(--rw-muted) !important; letter-spacing: 0 !important; text-transform: none !important;
line-height: 1.2;
}
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label="Artículo"]::before { content: "Artículo " counter(ocitem); }
.oc-detalle #adminItemsTable tr.admin-item-row > td input { width: 100% !important; min-width: 0 !important; }
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label="Artículo"] { grid-area: art !important; }
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label="Cantidad"] { grid-area: can !important; }
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label="Unidad"] { grid-area: uni !important; }
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label="P. Unitario"] { grid-area: pre !important; }
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label="ID Fiscal (SAT)"] { grid-area: sku !important; }
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label="Total"] {
grid-area: tot !important;
align-items: flex-end !important; justify-content: center !important;
padding: 10px 14px !important;
border-radius: var(--rw-r-md) !important;
background: var(--rw-surface-2) !important;
border: 1px solid var(--rw-border-soft) !important;
}
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label="Total"]::before { color: var(--rw-muted) !important; }
.oc-detalle #adminItemsTable .admin-item-total-linea { color: var(--rw-ink) !important; font-weight: 600; font-size: 1rem !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label="Cantidad"] input { text-align: left !important; }
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label=""] { grid-area: del !important; align-items: center !important; justify-content: center !important; }
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label=""]::before { display: none !important; }
.oc-detalle #adminItemsTable .btn-remove-admin-item {
width: 34px !important; height: 34px !important; min-height: 34px !important;
padding: 0 !important;
display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
border-radius: var(--rw-r-sm) !important;
border: 1px solid transparent !important;
background: transparent !important;
color: var(--rw-faint) !important;
box-shadow: none !important;
}
.oc-detalle #adminItemsTable .btn-remove-admin-item:hover { background: var(--rw-red-soft) !important; border-color: var(--rw-red-border, #F5C2C2) !important; color: var(--rw-red) !important; }
.oc-detalle #adminItemsTable .admin-item-remove-label { display: none !important; }
/* Contenedor angosto (tablet / celular): partidas como tarjetas de 3 columnas */
@container (max-width: 579px) {
.oc-detalle #adminItemsTable tr.admin-item-row {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-template-areas: "art art art" "can uni pre" "sku sku sku" "tot tot del";
padding: 14px 14px 12px 16px !important;
}
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label="Total"] {
flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
padding: 8px 12px !important;
}
.oc-detalle #adminItemsTable tr.admin-item-row > td[data-label=""] { justify-content: flex-end !important; align-items: stretch !important; }
.oc-detalle #adminItemsTable .btn-remove-admin-item { width: 100% !important; height: 100% !important; color: var(--rw-red) !important; background: var(--rw-red-soft) !important; }
.oc-detalle #adminItemsTable .admin-item-remove-label { display: none !important; }
.oc-detalle #adminItemsTable .btn-remove-admin-item::after { content: "Quitar"; font-size: var(--rw-fs-sm); font-weight: 500; }
.oc-detalle .oc-items-actions > .btn { flex: 1 1 100%; justify-content: center; }
}
.oc-detalle .oc-items-actions { margin-top: 12px; container-type: normal; }
@media (max-width: 575.98px) { .oc-detalle .oc-items-actions > .btn { flex: 1 1 100%; justify-content: center; } }
/* Historial de entregas con el mismo encabezado que el resto */
.oc-detalle .oc-entregas .oc-card-title { padding-bottom: 14px; border-bottom: 1px solid var(--rw-border-soft); }
@media (max-width: 1199.98px) {
.oc-step-sub { display: none; }
}
@media (max-width: 991.98px) {
.oc-detalle .oc-side-sticky { position: static; }
.oc-detalle .oc-card { padding: 16px; }
.oc-detalle .oc-divider { margin: 16px -16px; }
}
@media (max-width: 767.98px) {
/* Stepper vertical compacto */
.oc-detalle .oc-stepper-card { padding: 14px 16px; }
.oc-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.oc-step { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.oc-step:not(:last-child)::after {
position: absolute;
top: 15px;
left: calc(50% + 20px);
right: calc(-50% + 20px);
margin: 0;
}
.oc-step-text { align-items: center; }
.oc-step-label { font-size: var(--rw-fs-xs); }
.oc-detalle .oc-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.oc-detalle .oc-actions { grid-template-columns: 1fr 1fr; }
.oc-detalle .oc-sum-total strong { font-size: 1.35rem; }
.oc-detail-head .spa-section-subtitle { font-size: var(--rw-fs-md) !important; }
}
/* Partidas: grupos (partida maestra) como tarjetas con su lista de partidas */
#partidasBoard { padding: 4px 0 0; }
.pb-board { display: flex; flex-direction: column; gap: 14px; }
.pb-group {
border: 1px solid var(--rw-border);
border-radius: var(--rw-r-lg);
background: var(--rw-surface);
overflow: hidden;
transition: border-color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease;
}
.pb-group:hover { box-shadow: var(--rw-shadow-card); }
.pb-group.is-drop { border-color: var(--rw-accent); box-shadow: 0 0 0 3px var(--rw-accent-soft); }
.pb-group.is-drop .pb-group-body { background: var(--rw-accent-soft); }
.pb-group.is-inactive .pb-group-name, .pb-group.is-inactive .pb-group-icon { opacity: .6; }
.pb-group.is-sin { border-style: dashed; }
.pb-group-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
padding: 14px 16px 14px 18px;
background: var(--rw-surface-2);
border-bottom: 1px solid var(--rw-border-soft);
}
.pb-group-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pb-group-icon {
flex: 0 0 36px; width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; background: var(--rw-surface); border: 1px solid var(--rw-border);
color: var(--rw-ink-2); font-size: .85rem;
}
.pb-group-text { min-width: 0; }
.pb-group-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 4px !important; font-size: var(--rw-fs-lg) !important; font-weight: 600 !important; color: var(--rw-ink) !important; letter-spacing: -0.01em; }
.pb-group-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.pb-meta-txt i { margin-right: 4px; color: var(--rw-faint); font-size: .85em; }
.pb-chip {
display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
border-radius: 999px; background: var(--rw-surface); border: 1px solid var(--rw-border);
font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-ink-2); white-space: nowrap;
}
.pb-chip-off { background: var(--rw-orange-soft); border-color: var(--rw-orange-border); color: var(--rw-orange-text); }
.pb-group-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pb-btn {
display: inline-flex; align-items: center; gap: 7px;
height: 32px; padding: 0 12px;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-sm);
background: var(--rw-surface); color: var(--rw-ink-2);
font-size: var(--rw-fs-sm); font-weight: 500; line-height: 1;
cursor: pointer;
transition: background-color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease;
}
.pb-btn i { font-size: .8em; color: var(--rw-muted); }
.pb-btn:hover { background: var(--rw-surface-3); color: var(--rw-ink); }
.pb-btn-danger, .pb-btn-danger i { color: var(--rw-red); }
.pb-btn-danger:hover { background: var(--rw-red-soft); border-color: var(--rw-red-border); color: var(--rw-red); }
.pb-btn:focus-visible, .pb-icon:focus-visible, .pb-add:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
.pb-group-body { padding: 12px; transition: background-color var(--rw-dur-fast) ease; }
.pb-list { display: flex; flex-direction: column; gap: 6px; }
.pb-list-empty { padding: 14px; border-radius: var(--rw-r-md); text-align: center; font-size: var(--rw-fs-sm); color: var(--rw-faint); background: var(--rw-surface-2); }
.pb-item {
display: grid;
grid-template-columns: minmax(0, 1fr) 150px 200px auto;
align-items: center; gap: 14px;
padding: 8px 8px 8px 6px;
border: 1px solid transparent; border-radius: var(--rw-r-md);
background: var(--rw-surface);
transition: background-color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease, opacity var(--rw-dur-fast) ease;
}
.pb-item + .pb-item { box-shadow: 0 -1px 0 var(--rw-border-soft); }
.pb-item:hover, .pb-item:focus-within { background: var(--rw-surface-2); border-color: var(--rw-border-soft); box-shadow: none; }
.pb-item:hover + .pb-item, .pb-item:focus-within + .pb-item { box-shadow: none; }
.pb-item.is-dragging { opacity: .45; }
.pb-item.is-inactive .pb-item-title { color: var(--rw-faint); }
.pb-item-name { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: grab; user-select: none; }
.pb-item-name:active { cursor: grabbing; }
.pb-grip { flex: 0 0 auto; width: 16px; text-align: center; color: #C4C4CC; font-size: .8rem; transition: color var(--rw-dur-fast) ease; }
.pb-item:hover .pb-grip { color: var(--rw-muted); }
.pb-item-title { min-width: 0; font-size: var(--rw-fs-md); font-weight: 500; color: var(--rw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-field { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; }
.pb-field-label { font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-faint); line-height: 1.1; }
.pb-money { position: relative; display: flex; align-items: center; }
.pb-money-sym { position: absolute; left: 10px; font-size: var(--rw-fs-sm); color: var(--rw-faint); pointer-events: none; }
.pb-money .form-control { width: 100%; padding-left: 22px !important; text-align: right; font-variant-numeric: tabular-nums; }
.pb-field-grupo .form-select { width: 100%; }
.pb-item-actions { display: flex; align-items: center; gap: 2px; align-self: end; }
.pb-icon {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: var(--rw-r-sm);
background: transparent; color: var(--rw-muted); font-size: .8rem;
cursor: pointer;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease;
}
.pb-icon:hover { background: var(--rw-surface-3); color: var(--rw-ink); }
.pb-icon-danger:hover { background: var(--rw-red-soft); color: var(--rw-red); }
.pb-add {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; height: 38px; margin-top: 10px;
border: 1.5px dashed #D6D6DD; border-radius: var(--rw-r-md);
background: transparent; color: var(--rw-ink-2);
font-size: var(--rw-fs-sm); font-weight: 500;
cursor: pointer;
transition: border-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease;
}
.pb-add i { font-size: .8em; }
.pb-add:hover { border-color: var(--rw-accent); color: var(--rw-accent); background: var(--rw-accent-soft); }
.pb-empty { padding: 40px 16px; text-align: center; color: var(--rw-muted); }
.pb-empty i { font-size: 1.6rem; color: var(--rw-faint); margin-bottom: 10px; }
.pb-empty p { margin: 0; font-size: var(--rw-fs-md); }
@media (max-width: 991.98px) {
.pb-item { grid-template-columns: minmax(0, 1fr) 140px 170px auto; gap: 10px; }
}
@media (min-width: 768px) {
/* Etiquetas sólo en la primera fila: funcionan como encabezado de columna */
.pb-item:not(:first-child) .pb-field-label { display: none; }
.pb-item:not(:first-child) .pb-item-actions { align-self: center; }
.pb-item:first-child .pb-item-name { align-self: end; min-height: 32px; }
.pb-add { justify-content: flex-start; width: auto; height: 34px; margin: 8px 0 0 4px; padding: 0 12px; border: 0; color: var(--rw-accent); }
.pb-add:hover { background: var(--rw-accent-soft); }
}
@media (max-width: 767.98px) {
.pb-group-head { padding: 14px; }
.pb-group-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-btn { justify-content: center; padding: 0 8px; }
.pb-group-body { padding: 10px; }
.pb-item {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "name act" "monto grupo";
gap: 10px; padding: 12px;
border-color: var(--rw-border-soft);
}
.pb-item + .pb-item { box-shadow: none; }
.pb-item-name { grid-area: name; }
.pb-item-actions { grid-area: act; justify-self: end; align-self: center; }
.pb-field-monto { grid-area: monto; }
.pb-field-grupo { grid-area: grupo; }
.pb-item-title { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.pb-group, .pb-item, .pb-btn, .pb-icon, .pb-add { transition: none; }
}
/* ==========================================================================
Control de obras (admin + cliente): listado, detalle, pestañas y modales
========================================================================== */
.obra-btn-primary { background: var(--rw-accent) !important; border-color: var(--rw-accent) !important; color: #fff !important; box-shadow: var(--rw-shadow-btn); }
.obra-btn-primary:hover, .obra-btn-primary:focus { background: var(--rw-accent-hover) !important; border-color: var(--rw-accent-hover) !important; color: #fff !important; }
.obra-btn-outline { background: var(--rw-surface) !important; border-color: var(--rw-accent-border) !important; color: var(--rw-accent) !important; }
.obra-btn-outline:hover, .obra-btn-outline:focus { background: var(--rw-accent-soft) !important; border-color: var(--rw-accent) !important; }
.obra-btn-primary i, .obra-btn-outline i { font-size: .85em; }
/* Semáforo y estado */
.obra-sem { gap: 6px; height: 26px; padding: 0 10px; font-size: var(--rw-fs-xs); font-weight: 600; border: 1px solid transparent; }
.obra-sem::before { width: 6px; height: 6px; }
.obra-sem-verde { background: var(--rw-green-soft); border-color: var(--rw-green-border); color: var(--rw-green-text); }
.obra-sem-amarillo { background: var(--rw-orange-soft); border-color: var(--rw-orange-border); color: var(--rw-orange-text); }
.obra-sem-rojo { background: var(--rw-red-soft); border-color: var(--rw-red-border); color: var(--rw-red-text); }
.obra-sem-neutro { background: var(--rw-surface-3); border-color: var(--rw-border); color: var(--rw-muted); }
.obra-estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--rw-ink-2); }
.obra-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rw-faint); }
.obra-estado-en_ejecucion::before { background: var(--rw-green); }
.obra-estado-suspendida::before { background: var(--rw-orange); }
.obra-estado-terminada::before { background: var(--rw-accent); }
.obra-estado-cancelada::before { background: var(--rw-red); }
.obra-sub-neg, .obra-metric-value.is-neg, .is-neg { color: var(--rw-red-text) !important; }
.obra-pos { color: var(--rw-green-text) !important; }
.obra-muted { color: var(--rw-faint); }
/* Métricas (KPI) */
.obra-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
#obrasAdminListaPane, #obras_control .obra-tab-panel, #obras_control .obra-panel { container-type: inline-size; }
@container (min-width: 760px) {
.obra-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.obra-metrics.obra-metrics-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.obra-metrics.obra-metrics-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.obra-metric {
position: relative;
display: flex; flex-direction: column; gap: 4px;
padding: 16px 18px;
background: var(--rw-surface);
border: 1px solid var(--rw-border);
border-radius: var(--rw-r-lg);
box-shadow: var(--rw-shadow-xs);
min-width: 0;
}
.obra-metric-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-width: 0; }
.obra-metric-icon {
flex: 0 0 32px; width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 9px; font-size: .8rem;
background: var(--rw-surface-3); color: var(--rw-ink-2);
}
.obra-metric-accent .obra-metric-icon { background: var(--rw-accent-soft); color: var(--rw-accent); }
.obra-metric-blue .obra-metric-icon { background: #EEF3FF; color: #3E63DD; }
.obra-metric-orange .obra-metric-icon { background: var(--rw-orange-soft); color: var(--rw-orange-text); }
.obra-metric-green .obra-metric-icon { background: var(--rw-green-soft); color: var(--rw-green-text); }
.obra-metric-red .obra-metric-icon { background: var(--rw-red-soft); color: var(--rw-red-text); }
.obra-metric-label { min-width: 0; font-size: var(--rw-fs-sm) !important; font-weight: 500 !important; color: var(--rw-muted) !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.25; }
.obra-metric-hint { display: block; font-size: 11px; color: var(--rw-faint); font-weight: 400; }
.obra-metric-value { margin: 0 !important; font-size: 1.5rem !important; font-weight: 600 !important; letter-spacing: -0.02em; color: var(--rw-ink) !important; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.obra-metric-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 !important; font-size: var(--rw-fs-sm) !important; color: var(--rw-faint) !important; }
.obra-metric-sub .obra-sem { height: 22px; }
/* Listado de obras */
#obras_control .obra-metrics { margin-top: 20px; }
.obras-list-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 26px 0 12px; }
.obras-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; }
.obras-grid > .obra-card { min-width: 0; }
.obra-card {
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-xl) !important;
padding: 18px !important;
gap: 16px !important;
box-shadow: var(--rw-shadow-xs);
transition: box-shadow var(--rw-dur) var(--rw-ease), transform var(--rw-dur) var(--rw-ease), border-color var(--rw-dur) ease !important;
}
.obra-card:hover { box-shadow: var(--rw-shadow-hover) !important; border-color: var(--rw-border-strong) !important; transform: translateY(-2px); }
.obra-card:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
.obra-card-title { font-size: var(--rw-fs-lg) !important; font-weight: 600 !important; color: var(--rw-ink) !important; letter-spacing: -0.01em; }
.obra-card-sub { font-size: var(--rw-fs-sm) !important; color: var(--rw-muted) !important; }
.obra-card-v2 .obra-card-head { display: flex; align-items: flex-start; gap: 12px; }
.obra-card-avatar {
flex: 0 0 40px; width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 12px;
background: var(--rw-accent-soft); color: var(--rw-accent);
font-size: var(--rw-fs-sm); font-weight: 700; letter-spacing: .02em;
}
.obra-card-id { flex: 1 1 auto; min-width: 0; }
.obra-card-v2 .obra-card-title { margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obra-card-v2 .obra-card-sub { display: flex; flex-wrap: nowrap; gap: 12px; margin: 0; min-width: 0; white-space: nowrap; }
.obra-card-v2 .obra-card-sub > * { flex: 0 0 auto; }
.obra-card-v2 .obra-card-loc { flex: 0 1 auto; overflow: hidden; }
.obra-card-v2 .obra-card-loc { text-overflow: ellipsis; display: inline-block; }
.obra-card-pct { font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; margin-left: 4px; }
.obra-card-loc { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.obra-card-loc i { font-size: .8em; color: var(--rw-faint); margin-right: 5px; }
.obra-card-v2 > .obra-card-head > .obra-sem { flex: 0 0 auto; }
.obra-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rw-border-soft); border-radius: var(--rw-r-md); background: var(--rw-surface-2); }
.obra-card-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 0; }
.obra-card-stats > div + div { border-left: 1px solid var(--rw-border-soft); }
.obra-card-stats span { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.obra-card-stats strong { font-size: var(--rw-fs-lg); font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obra-card-progress .obra-bar { margin-bottom: 8px; }
.obra-card-progress .obra-bar-label { margin: 0; }
.obra-bar { height: 8px !important; background: var(--rw-surface-3) !important; }
.obra-bar-real { background: var(--rw-accent); }
.obra-bar-real.is-verde { background: var(--rw-green) !important; }
.obra-bar-real.is-amarillo { background: var(--rw-orange) !important; }
.obra-bar-real.is-rojo { background: var(--rw-red) !important; }
.obra-bar-label { font-size: var(--rw-fs-sm) !important; color: var(--rw-muted) !important; gap: 10px; }
.obra-bar-label > span:last-child { font-weight: 500; color: var(--rw-ink-2); font-variant-numeric: tabular-nums; }
.obra-bar-label .obra-sub-neg i { font-size: .85em; margin-right: 3px; }
.obra-card-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rw-border-soft); }
.obra-card-open { flex: 1 1 auto; justify-content: center; gap: 8px; min-height: 36px; }
.obra-card-open i { transition: transform var(--rw-dur-fast) ease; }
.obra-card:hover .obra-card-open i { transform: translateX(2px); }
.obra-icon-btn {
flex: 0 0 36px; width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-sm);
background: var(--rw-surface); color: var(--rw-muted); font-size: .8rem;
cursor: pointer;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease;
}
.obra-icon-btn:hover { background: var(--rw-surface-3); color: var(--rw-ink); }
.obra-icon-danger:hover { background: var(--rw-red-soft); border-color: var(--rw-red-border); color: var(--rw-red); }
.obra-icon-btn:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
/* Estados vacíos */
.obra-empty { color: var(--rw-muted) !important; font-size: var(--rw-fs-md) !important; }
.obra-empty > i { display: block; font-size: 1.5rem; color: var(--rw-faint); margin: 0 auto 10px; width: auto !important; height: auto !important; }
.obra-empty-card { grid-column: 1 / -1; border: 1.5px dashed var(--rw-border-strong); border-radius: var(--rw-r-xl); background: var(--rw-surface-2); }
.obra-empty-title { font-size: var(--rw-fs-lg); font-weight: 600; color: var(--rw-ink); margin-bottom: 4px; }
/* Detalle: encabezado propio (oculta el de la sección) */
#obras_control.is-obra-detalle > .card-container > .spa-section-head { display: none !important; }
.obra-detail-head { margin-bottom: 18px; }
.obra-detail-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.obra-detail-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.obra-detail-icon {
flex: 0 0 48px; width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 14px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: 1.1rem;
}
.obra-detail-title { margin: 0 0 6px !important; font-size: var(--rw-fs-title) !important; font-weight: 600 !important; letter-spacing: -0.02em; color: var(--rw-ink) !important; line-height: 1.15; }
.obra-detail-sub { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.obra-detail-sub > span { display: inline-flex; align-items: center; gap: 6px; }
.obra-detail-sub i { font-size: .85em; color: var(--rw-faint); }
#obraAdminDetalleEditarBtn { gap: 6px; }
#obraAdminDetalleEditarBtn i { font-size: .8em; }
/* Pestañas: control segmentado */
.obra-tabs {
display: inline-flex !important; max-width: 100%;
gap: 2px !important; padding: 4px;
margin: 0 0 18px !important;
border: 0 !important; border-radius: 12px;
background: var(--rw-surface-3);
overflow-x: auto; scrollbar-width: none;
}
.obra-tabs::-webkit-scrollbar { display: none; }
.obra-tab {
display: inline-flex !important; align-items: center; gap: 8px;
height: 36px; padding: 0 14px !important;
border: 0 !important; border-radius: 9px !important;
font-size: var(--rw-fs-md) !important; font-weight: 500 !important;
color: var(--rw-muted) !important;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease;
}
.obra-tab i { font-size: .85em; }
.obra-tab:hover { color: var(--rw-ink) !important; }
.obra-tab.active { background: var(--rw-surface) !important; color: var(--rw-ink) !important; box-shadow: 0 1px 2px rgba(20,20,30,.08), 0 0 0 1px rgba(20,20,30,.04); }
.obra-tab.active i { color: var(--rw-accent); }
.obra-tab:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 1px; }
.obra-tab-panel.active { animation: rw-fade-up var(--rw-dur) var(--rw-ease); }
/* Paneles (tarjetas de contenido) */
.obra-panel {
background: var(--rw-surface);
border: 1px solid var(--rw-border);
border-radius: var(--rw-r-lg);
box-shadow: var(--rw-shadow-xs);
padding: 18px 20px;
margin-bottom: 16px;
}
.obra-panel-flush { padding: 0; overflow: hidden; }
.obra-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.obra-panel-title { margin: 0 0 2px !important; font-size: var(--rw-fs-lg) !important; font-weight: 600 !important; color: var(--rw-ink) !important; letter-spacing: -0.01em; }
.obra-panel-sub { margin: 0; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.obra-panel-sub strong { color: var(--rw-ink-2); font-weight: 600; }
.obra-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.obra-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.obra-legend-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--rw-accent); }
.obra-legend-line { width: 16px; height: 0; border-top: 2px dashed var(--rw-red); }
.obra-panel .obra-chart-wrap { height: 280px; margin: 0; }
.obra-chart-wrap.is-empty { height: auto !important; }
.obra-footnote { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: var(--rw-fs-sm); line-height: 1.5; color: var(--rw-muted); }
.obra-footnote > i { margin-top: 3px; color: var(--rw-faint); }
.obra-note {
display: flex; align-items: flex-start; gap: 10px;
margin: 0 0 16px; padding: 11px 14px;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-md);
background: var(--rw-surface-2);
font-size: var(--rw-fs-sm); line-height: 1.5; color: var(--rw-ink-2);
}
.obra-note > i { margin-top: 3px; color: var(--rw-muted); }
.obra-note-warn { background: var(--rw-orange-soft); border-color: var(--rw-orange-border); color: var(--rw-orange-text); }
.obra-note-warn > i { color: inherit; }
.obra-alerta { border-radius: var(--rw-r-md); font-size: var(--rw-fs-sm); }
.obra-alerta-amarillo { background: var(--rw-orange-soft); border-color: var(--rw-orange-border); color: var(--rw-orange-text); }
.obra-alerta-rojo { background: var(--rw-red-soft); border-color: var(--rw-red-border); color: var(--rw-red-text); }
/* Listas tipo tabla (partidas del resumen y captura de presupuesto) */
.obra-rows { border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); overflow: hidden; }
.obra-row {
display: grid; align-items: center; gap: 16px;
padding: 12px 16px;
border-top: 1px solid var(--rw-border-soft);
background: var(--rw-surface);
transition: background-color var(--rw-dur-fast) ease;
}
.obra-rows-resumen .obra-row { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)) minmax(150px, 1.15fr); }
.obra-rows-presup .obra-row { grid-template-columns: minmax(0, 1.4fr) minmax(160px, 1.1fr) repeat(2, minmax(0, 1fr)); }
.obra-row:first-child { border-top: 0; }
.obra-row:not(.obra-row-head):hover { background: #FBFBFC; }
.obra-row-head { padding-top: 10px; padding-bottom: 10px; background: var(--rw-surface-2) !important; font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-muted); }
.obra-row-head > div:not(:first-child) { text-align: right; }
.obra-rows-presup .obra-row-head > div:nth-child(2) { text-align: left; }
.obra-cell-name { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.obra-row-title { font-size: var(--rw-fs-md); font-weight: 500; color: var(--rw-ink); overflow-wrap: anywhere; }
.obra-cell-num { text-align: right; font-size: var(--rw-fs-md); color: var(--rw-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.obra-cell-consumo { display: flex; align-items: center; gap: 10px; }
.obra-cell-consumo .obra-bar { flex: 1 1 auto; height: 6px !important; }
.obra-pct { flex: 0 0 52px; text-align: right; font-size: var(--rw-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.obra-pct-verde { color: var(--rw-green-text); }
.obra-pct-amarillo { color: var(--rw-orange-text); }
.obra-pct-rojo { color: var(--rw-red-text); }
.obra-pct-neutro { color: var(--rw-muted); }
.obra-row-toggle {
display: inline-flex; align-items: center; gap: 6px;
height: 24px; padding: 0 8px; margin-left: -8px;
border: 0; border-radius: 6px; background: transparent;
font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-accent);
cursor: pointer;
transition: background-color var(--rw-dur-fast) ease;
}
.obra-row-toggle:hover { background: var(--rw-accent-soft); }
.obra-row-toggle i { font-size: .75em; transition: transform var(--rw-dur) var(--rw-ease); }
.obra-row-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.obra-row.is-open { background: var(--rw-surface-2); }
.obra-subrows { background: var(--rw-surface-2); border-top: 1px solid var(--rw-border-soft); padding: 4px 0 8px; }
.obra-subrows[hidden] { display: none !important; }
.obra-subrow { background: transparent !important; border-top: 0; padding-top: 8px; padding-bottom: 8px; }
.obra-subrow .obra-cell-name { padding-left: 18px; position: relative; }
.obra-subrow .obra-cell-name::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--rw-border-strong); }
.obra-subrow .obra-row-title { font-size: var(--rw-fs-sm); color: var(--rw-ink-2); }
.obra-subrow .obra-cell-num { font-size: var(--rw-fs-sm); }
.obra-origen { font-size: 11px; color: var(--rw-faint); }
.obra-subrows-foot { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; padding: 6px 16px 2px; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.obra-subrows-foot strong { color: var(--rw-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.obra-money { position: relative; display: block; margin: 0; }
.obra-money-sym { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: var(--rw-fs-sm); color: var(--rw-faint); pointer-events: none; }
.obra-money .form-control { padding-left: 24px !important; text-align: right; font-variant-numeric: tabular-nums; }
.obra-subrow .obra-money .form-control { background: var(--rw-surface); }
/* Presupuesto de partida calculado desde sus asociadas (solo lectura) */
.obra-money .form-control.is-auto { background: var(--rw-surface-2, #F4F4F6) !important; color: var(--rw-ink); font-weight: 600; cursor: default; }
.obra-presup-auto-hint { display: block; margin-top: 3px; font-size: 11px; color: var(--rw-muted); text-align: right; }
.obra-presup-auto-hint[hidden] { display: none; }
/* Interruptor "Incluir IVA de las OC" */
.obra-iva-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding-left: 2.5em; font-size: var(--rw-fs-sm); color: var(--rw-ink-2); cursor: pointer; white-space: nowrap; }
.obra-iva-toggle .form-check-input { cursor: pointer; }
/* Barra de guardado (captura de presupuesto) */
.obra-savebar {
position: sticky; bottom: 12px; z-index: 5;
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin-top: 14px; padding: 12px 14px 12px 18px;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg);
background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
box-shadow: var(--rw-shadow-pop);
}
.obra-savebar-total { display: flex; align-items: baseline; gap: 10px; }
.obra-savebar-total span { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.obra-savebar-total strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
.obra-savebar .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; }
/* Contratos */
#obras_control .obra-contratos-table { margin: 0; }
#obras_control .obra-contratos-table th { background: var(--rw-surface-2) !important; font-size: var(--rw-fs-xs) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--rw-muted) !important; padding: 10px 16px !important; }
#obras_control .obra-contratos-table td { padding: 12px 16px !important; border-bottom: 1px solid var(--rw-border-soft) !important; font-variant-numeric: tabular-nums; }
#obras_control .obra-contratos-table tfoot td { background: var(--rw-surface-2); font-weight: 600; border-bottom: 0 !important; }
.obra-contrato-row { cursor: pointer; }
.obra-contrato-row:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: -2px; }
.obra-contrato-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.obra-contrato-name > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.obra-contrato-name strong { font-weight: 500; color: var(--rw-ink); }
.obra-contrato-name small { font-size: var(--rw-fs-xs); color: var(--rw-faint); }
.obra-contrato-icon { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: .8rem; }
.obra-count { display: inline-flex; min-width: 24px; height: 22px; padding: 0 7px; align-items: center; justify-content: center; border-radius: 999px; background: var(--rw-surface-3); font-size: var(--rw-fs-xs); font-weight: 600; color: var(--rw-ink-2); }
.obra-row-go { color: var(--rw-faint); transition: color var(--rw-dur-fast) ease, transform var(--rw-dur-fast) ease; display: inline-block; }
.obra-contrato-row:hover .obra-row-go { color: var(--rw-accent); transform: translateX(2px); }
/* Flujo y margen */
.obra-flujo-toolbar { align-items: flex-end; justify-content: space-between !important; gap: 12px; flex-wrap: wrap; margin-bottom: 16px !important; }
.obra-flujo-fbtn { height: 36px; padding: 0 14px !important; border-color: var(--rw-border) !important; border-radius: var(--rw-r-sm) !important; background: var(--rw-surface) !important; color: var(--rw-ink-2) !important; font-size: var(--rw-fs-sm) !important; font-weight: 500 !important; box-shadow: var(--rw-shadow-xs); }
.obra-flujo-fbtn:hover { background: var(--rw-surface-2) !important; }
.obra-flujo-fbtn.has-filters { border-color: var(--rw-accent) !important; background: var(--rw-accent-soft) !important; color: var(--rw-accent) !important; }
.obra-flujo-cmp-note { border-color: var(--rw-border) !important; background: var(--rw-surface-2) !important; border-radius: var(--rw-r-md) !important; padding: 10px 14px !important; font-size: var(--rw-fs-sm) !important; color: var(--rw-muted) !important; }
.obra-statement { border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); overflow: hidden; }
.obra-statement-group + .obra-statement-group { border-top: 1px solid var(--rw-border); }
.obra-statement-title { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--rw-surface-2); font-size: var(--rw-fs-xs); font-weight: 600; color: var(--rw-muted); letter-spacing: .02em; text-transform: uppercase; }
.obra-statement-title i { font-size: .85em; }
.obra-statement-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--rw-border-soft); font-size: var(--rw-fs-md); color: var(--rw-ink-2); }
.obra-statement-title + .obra-statement-row { border-top: 0; }
.obra-statement-row strong { font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.obra-statement-row.is-sub { padding-left: 32px; color: var(--rw-muted); font-size: var(--rw-fs-sm); }
.obra-statement-row.is-sub strong { font-weight: 500; color: var(--rw-ink-2); }
.obra-statement-group.is-result .obra-statement-row { background: #FBFBFC; }
.obra-statement-group.is-result .obra-statement-row strong { font-size: 1.05rem; }
/* Modales del módulo */
.obra-modal-intro { margin: 0 0 16px; font-size: var(--rw-fs-sm); color: var(--rw-muted); line-height: 1.5; }
.obra-modal-section { padding: 16px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface); }
.obra-modal-section + .obra-modal-section { margin-top: 12px; }
.obra-modal-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: var(--rw-fs-sm); font-weight: 600; color: var(--rw-ink); }
.obra-modal-section-title i { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--rw-surface-3); color: var(--rw-ink-2); font-size: .75rem; }
#obraAdminModal .form-label, #obraAsignacionModal .form-label { margin-bottom: 6px; }
.obra-asig-user { max-width: 440px; margin-bottom: 16px; }
.obra-asig-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; border: 1.5px dashed var(--rw-border-strong); border-radius: var(--rw-r-lg); background: var(--rw-surface-2); color: var(--rw-muted); font-size: var(--rw-fs-sm); text-align: center; }
.obra-asig-empty i { font-size: 1.3rem; color: var(--rw-faint); }
.obra-asig-block { padding: 16px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); margin-bottom: 12px; }
.obra-asig-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); }
.obra-asig-hint { font-size: var(--rw-fs-xs); font-weight: 400; color: var(--rw-faint); }
.obra-asig-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.obra-asig-option, .obra-asig-obra, .obra-asig-switch {
display: flex; align-items: flex-start; gap: 10px; margin: 0;
padding: 12px 14px;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-md);
background: var(--rw-surface);
cursor: pointer;
transition: border-color var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease;
}
.obra-asig-option:hover, .obra-asig-obra:hover, .obra-asig-switch:hover { border-color: var(--rw-border-strong); }
.obra-asig-option:has(input:checked), .obra-asig-obra:has(input:checked) { border-color: var(--rw-accent); background: var(--rw-accent-soft); box-shadow: 0 0 0 1px var(--rw-accent) inset; }
.obra-asig-option .form-check-input, .obra-asig-obra .form-check-input, .obra-asig-switch .form-check-input { flex: 0 0 auto; margin: 2px 0 0; }
.obra-asig-option span, .obra-asig-obra span, .obra-asig-switch span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.obra-asig-option strong, .obra-asig-obra strong, .obra-asig-switch strong { font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); }
.obra-asig-option small, .obra-asig-obra small, .obra-asig-switch small { font-size: var(--rw-fs-xs); color: var(--rw-muted); line-height: 1.4; }
.obra-asig-switch { margin-top: 10px; background: var(--rw-surface-2); }
.obra-asig-switch .form-check-input { width: 2.1em; height: 1.15em; border-radius: 2em; }
.obra-asig-obras { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.obra-asig-obra { align-items: center; }
.obra-asig-obra .form-check-input { margin-top: 0; }
/* Modal de contrato (solo lectura) */
.cv-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface-2); }
.cv-hero-label { font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-muted); }
.cv-hero-value { margin-top: 4px; font-size: 1.85rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
.cv-sec { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); }
.cv-sec i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--rw-surface-3); color: var(--rw-ink-2); font-size: .75rem; }
.cv-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cv-dato { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); }
.cv-dato span { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.cv-dato strong { font-size: var(--rw-fs-md); font-weight: 500; color: var(--rw-ink); overflow-wrap: anywhere; }
.cv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cv-kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); }
.cv-kpi span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.cv-kpi span i { width: 8px; height: 8px; border-radius: 50%; }
.cv-kpi strong { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Responsive */
@container (max-width: 900px) {
.obra-rows-resumen .obra-row { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
.obra-rows-resumen .obra-row > .obra-cell-consumo { grid-column: 1 / -1; }
.obra-rows-resumen .obra-row-head > div:last-child { display: none; }
.obra-rows-resumen .obra-subrow > .obra-cell-consumo { display: none; }
}
@media (max-width: 767.98px) {
.obras-grid { grid-template-columns: minmax(0, 1fr) !important; }
.obra-metrics, .obra-metrics-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
.obra-metric { padding: 14px; }
.obra-metric .obra-metric-icon { display: inline-flex !important; flex-basis: 28px; width: 28px; height: 28px; }
.obra-metric-value { font-size: 1.15rem !important; }
.obra-metric-top { gap: 8px; }
.obra-metric-label { font-size: var(--rw-fs-xs) !important; }
.obra-detail-title { font-size: 1.3rem !important; }
.obra-detail-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; }
.obra-detail-title-row > .btn { width: 100%; justify-content: center; }
.obra-tabs { display: flex !important; width: 100%; }
.obra-tab { flex: 0 0 auto; padding: 0 12px !important; }
.obra-panel { padding: 16px 14px; }
.obra-panel .obra-chart-wrap { height: 230px; }
.obra-panel-flush { padding: 0; }
/* Filas → tarjetas */
.obra-rows { border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 10px; }
.obra-row-head { display: none !important; }
.obra-rows .obra-row:not(.obra-subrow) {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px 12px; padding: 14px;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg);
}
.obra-rows-presup .obra-row:not(.obra-subrow) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.obra-rows .obra-cell-name { grid-column: 1 / -1; }
.obra-rows .obra-cell-input { grid-column: 1 / -1; }
.obra-rows [data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 11px; font-weight: 500; color: var(--rw-faint); text-align: left; }
.obra-rows .obra-cell-num { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-align: right; font-size: var(--rw-fs-sm); }
.obra-rows .obra-cell-num::before { margin: 0 !important; font-size: var(--rw-fs-xs) !important; }
.obra-rows .obra-row:not(.obra-subrow), .obra-subrow { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
.obra-rows .obra-cell-name { margin-bottom: 4px; }
.obra-rows .obra-cell-consumo { margin-top: 4px; }
.obra-card-v2 .obra-card-sub { flex-wrap: wrap; white-space: normal; gap: 2px 12px; }
.obra-card-v2 .obra-card-title { white-space: normal; }
.obra-rows .obra-cell-consumo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
.obra-rows .obra-cell-consumo::before { flex: 1 0 100%; margin-bottom: 0; }
.obra-rows .obra-cell-consumo:empty { display: none; }
.obra-subrows { margin-top: -10px; border: 1px solid var(--rw-border); border-top: 0; border-radius: 0 0 var(--rw-r-lg) var(--rw-r-lg); padding: 4px 0 8px; }
.obra-row.is-open { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.obra-subrow { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px 10px; padding: 10px 14px; border-top: 1px solid var(--rw-border) !important; }
.obra-subrow:first-child { border-top: 0 !important; }
.obra-rows-presup .obra-subrow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.obra-subrow .obra-cell-name { grid-column: 1 / -1; }
.obra-savebar { bottom: 8px; padding: 12px; }
#obras_control .obra-contratos-table thead, #obras_control .obra-contratos-table tfoot { display: none; }
#obras_control .obra-contratos-table, #obras_control .obra-contratos-table tbody { display: block; width: 100%; }
#obras_control .obra-contratos-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; border-bottom: 1px solid var(--rw-border-soft); }
#obras_control .obra-contratos-table tr:last-child { border-bottom: 0; }
#obras_control .obra-contratos-table td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0; }
#obras_control .obra-contratos-table td:first-child { grid-column: 1 / -1; }
#obras_control .obra-contratos-table td:last-child { display: none; }
#obras_control .obra-contratos-table td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: 11px; color: var(--rw-faint); }
.obra-savebar .btn { flex: 1 1 100%; justify-content: center; }
.obra-flujo-toolbar { align-items: stretch; }
.obra-statement-row { padding: 10px 14px; }
.obra-statement-row.is-sub { padding-left: 24px; }
.obra-asig-levels { grid-template-columns: 1fr; }
.cv-hero-value { font-size: 1.5rem; }
}
@media (max-width: 359.98px) {
.obra-metrics, .obra-metrics-6 { grid-template-columns: 1fr !important; }
.obra-card-stats strong { font-size: var(--rw-fs-md); }
}
@media (prefers-reduced-motion: reduce) {
.obra-card, .obra-tab, .obra-row-toggle i, .obra-icon-btn, .obra-card-open i { transition: none !important; }
.obra-tab-panel.active { animation: none; }
.obra-card:hover { transform: none; }
}
/* Pie de página común (includes/partials/footer_app.php) */
.rw-footer {
margin-top: 48px;
padding-top: 22px;
border-top: 1px solid var(--rw-border);
color: var(--rw-muted);
font-size: var(--rw-fs-sm);
}
.rw-footer-main {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px 28px;
}
.rw-footer-brand { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 340px; }
.rw-footer-logo {
flex: 0 0 34px;
width: 34px;
height: 34px;
padding: 5px;
object-fit: contain;
border-radius: 10px;
background: var(--rw-surface);
box-shadow: inset 0 0 0 1px var(--rw-border), var(--rw-shadow-xs);
}
.rw-footer-brand strong { display: block; color: var(--rw-ink); font-size: var(--rw-fs-md); font-weight: 600; line-height: 1.3; }
.rw-footer-brand span { display: block; color: var(--rw-muted); font-size: var(--rw-fs-sm); line-height: 1.4; }
.rw-footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.rw-footer-links a {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 8px;
border-radius: var(--rw-r-sm);
color: var(--rw-ink-2);
font-size: var(--rw-fs-sm);
font-weight: 500;
text-decoration: none;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease;
}
.rw-footer-links a i { color: var(--rw-muted); font-size: 0.9em; }
.rw-footer-links a:hover { background: var(--rw-surface-3); color: var(--rw-ink); }
.rw-footer-links a:hover i { color: var(--rw-ink-2); }
.rw-footer-sep { width: 1px; height: 16px; background: var(--rw-border-strong); margin: 0 6px; }
.rw-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--rw-border-soft);
font-size: var(--rw-fs-xs);
}
.rw-footer-bottom i { font-size: 0.9em; margin: 0 2px; }
.rw-footer-meta { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rw-footer-chip {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: var(--rw-r-xs);
background: var(--rw-surface-3);
border: 1px solid var(--rw-border);
color: var(--rw-ink-2);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) {
.rw-footer { margin-top: 36px; padding-top: 18px; }
.rw-footer-main { flex-direction: column; align-items: flex-start; }
.rw-footer-links { margin: 0 -10px; }
.rw-footer-sep { display: none; }
.rw-footer-bottom { flex-direction: column; align-items: flex-start; }
/* deja libre la esquina del botón flotante del asistente */
.rw-footer { padding-bottom: 64px; }
}
/* ============================================================================
15 · LOGIN / REGISTRO
============================================================================ */
body.rw-auth {
background: var(--rw-canvas) !important;
font-family: var(--rw-font) !important;
}
body.rw-auth::before { display: none !important; }
body.rw-auth .login-card,
body.rw-auth .register-card {
background: var(--rw-surface) !important;
border: 1px solid rgba(20, 20, 30, 0.05) !important;
border-radius: var(--rw-r-frame) !important;
box-shadow: var(--rw-shadow-card), 0 30px 60px -30px rgba(20, 20, 30, 0.18) !important;
animation: rw-fade-up var(--rw-dur-slow) var(--rw-ease);
}
body.rw-auth .auth-logo { width: 220px; height: auto; max-width: 70%; margin: 0 auto 22px; display: block; }
body.rw-auth h5 { font-size: var(--rw-fs-title) !important; font-weight: 600 !important; color: var(--rw-ink) !important; letter-spacing: -0.02em !important; }
body.rw-auth .subtitle { color: var(--rw-muted) !important; font-size: var(--rw-fs-lg) !important; }
body.rw-auth .btn-login {
background: #232327 !important;
border: 1px solid #18181B !important;
color: #fff !important;
border-radius: var(--rw-r-sm) !important;
min-height: 42px;
font-weight: 500 !important;
box-shadow: var(--rw-shadow-btn) !important;
}
body.rw-auth .btn-login:hover { background: #34343A !important; }
body.rw-auth .btn-microsoft {
border: 1px solid var(--rw-border-strong) !important;
border-radius: var(--rw-r-sm) !important;
background: var(--rw-surface) !important;
color: var(--rw-ink-2) !important;
font-weight: 500 !important;
box-shadow: var(--rw-shadow-xs) !important;
transition: background-color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease !important;
}
body.rw-auth .btn-microsoft:hover { background: var(--rw-surface-2) !important; border-color: #CFCFD6 !important; }
body.rw-auth .separator { color: var(--rw-faint) !important; }
body.rw-auth .separator::before, body.rw-auth .separator::after { background: var(--rw-border) !important; }
body.rw-auth .register-link a, body.rw-auth .login-link a, body.rw-auth .forgot-link a { color: var(--rw-accent) !important; font-weight: 500 !important; }
/* Almacén (vista sin sidebar): barra superior limpia */
body.rw-plain .top-navbar {
background: var(--rw-surface) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border-bottom: 1px solid var(--rw-border) !important;
}
body.rw-plain .top-navbar { justify-content: space-between !important; }
/* ============================================================================
15b · DASHBOARDS — widgets estilo referencia (Task status / Comments /
Commits / Burndown). Componentes compartidos por admin, cliente e IT.
============================================================================ */
.rw-dash { display: flex; flex-direction: column; gap: 20px; }
.rw-dash-row { display: grid; gap: 20px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
.rw-col-3 { grid-column: span 3; } .rw-col-4 { grid-column: span 4; } .rw-col-5 { grid-column: span 5; }
.rw-col-6 { grid-column: span 6; } .rw-col-7 { grid-column: span 7; } .rw-col-8 { grid-column: span 8; }
.rw-col-12 { grid-column: 1 / -1; }
.rw-widget {
background: var(--rw-surface);
border: 1px solid var(--rw-border);
border-radius: var(--rw-r-lg);
box-shadow: var(--rw-shadow-card);
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
min-width: 0;
animation: rw-fade-up var(--rw-dur-slow) var(--rw-ease) both;
}
.rw-dash-row:nth-child(2) .rw-widget { animation-delay: 40ms; }
.rw-dash-row:nth-child(3) .rw-widget { animation-delay: 80ms; }
.rw-dash-row:nth-child(4) .rw-widget { animation-delay: 120ms; }
.rw-widget-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 16px;
min-height: 30px;
}
.rw-widget-title {
margin: 0 !important;
font-size: var(--rw-fs-lg) !important;
font-weight: 600 !important;
color: var(--rw-ink) !important;
letter-spacing: -0.01em !important;
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.rw-widget-title > i { color: var(--rw-ink-2); font-size: 0.95em; width: 16px; text-align: center; }
.rw-widget-title small { font-size: var(--rw-fs-sm); font-weight: 400; color: var(--rw-muted); white-space: nowrap; }
.rw-widget-actions {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid var(--rw-border-soft);
border-radius: var(--rw-r-sm);
flex-shrink: 0;
}
.rw-icon-btn {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--rw-muted);
font-size: 0.8rem;
cursor: pointer;
text-decoration: none;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease;
}
.rw-icon-btn:hover { background: var(--rw-surface-3); color: var(--rw-ink); }
/* Cifras grandes con etiqueta (referencia: "24 / Backlog") */
.rw-stats { display: grid; grid-template-columns: repeat(var(--rw-n, 3), minmax(0, 1fr)); gap: 10px; }
.rw-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
min-width: 0;
padding: 6px 8px;
margin: -6px -8px;
background: transparent;
border: 0;
border-radius: var(--rw-r-sm);
text-align: left;
color: inherit;
}
button.rw-stat { cursor: pointer; transition: background-color var(--rw-dur-fast) ease; }
button.rw-stat:hover { background: var(--rw-surface-2); }
.rw-stat-num, .rw-big {
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--rw-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.rw-stat-lbl {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--rw-fs-md);
font-weight: 500;
color: var(--rw-ink-2);
white-space: nowrap;
}
.rw-sub { font-size: var(--rw-fs-sm); color: var(--rw-muted); margin-top: 4px; }
.tone-orange { color: var(--rw-orange) !important; }
.tone-violet { color: var(--rw-accent) !important; }
.tone-green { color: var(--rw-green) !important; }
.tone-red { color: var(--rw-red) !important; }
.tone-pink { color: var(--rw-pink) !important; }
.tone-muted { color: var(--rw-faint) !important; }
/* Tendencia (referencia: "↙ 10.2% (7d)") */
.rw-trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--rw-fs-sm); font-weight: 500; white-space: nowrap; }
.rw-trend.up { color: var(--rw-green-text); }
.rw-trend.down { color: var(--rw-red-text); }
.rw-trend.flat { color: var(--rw-muted); }
.rw-trend small { color: var(--rw-muted); font-weight: 400; }
/* Barra segmentada con degradado (referencia: widget "Task status") */
.rw-seg-bar {
position: relative;
display: flex;
height: 56px;
margin-top: 18px;
border-radius: var(--rw-r-sm);
overflow: hidden;
background: var(--rw-surface-3);
}
.rw-seg-bar > span { height: 100%; min-width: 0; transition: width var(--rw-dur-slow) var(--rw-ease); }
.rw-seg-bar > span + span { box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.55); }
.rw-seg-bar::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 22px, rgba(255, 255, 255, 0.12) 22px 24px);
pointer-events: none;
}
.rw-seg-bar .seg-orange { background: linear-gradient(90deg, #F59A45, #F2761A); }
.rw-seg-bar .seg-violet { background: linear-gradient(90deg, #5B48D6, #8F7BEE); }
.rw-seg-bar .seg-lilac { background: linear-gradient(90deg, #A897F2, #E6B5F6); }
.rw-seg-bar .seg-green { background: linear-gradient(90deg, #3DBB7E, #23A86B); }
.rw-seg-bar .seg-red { background: linear-gradient(90deg, #EF6A6E, #E5484D); }
.rw-seg-bar .seg-gray { background: linear-gradient(90deg, #C7C7CF, #A1A1AA); }
.rw-seg-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--rw-fs-xs); color: var(--rw-faint); }
.rw-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: var(--rw-fs-sm); color: var(--rw-ink-2); }
.rw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rw-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* Mini gráficas (referencia: dispersión de "Comments" y barras de "Commits") */
.rw-kpi-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.rw-kpi-split > div:first-child { min-width: 0; }
.rw-spark { width: 132px; height: 52px; flex-shrink: 0; overflow: visible; }
.rw-bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; flex-shrink: 0; }
.rw-bars span {
width: 7px;
border-radius: 3px 3px 1px 1px;
background: #FCD9BC;
transition: height var(--rw-dur-slow) var(--rw-ease);
}
.rw-bars span.is-hot { background: linear-gradient(180deg, #F59A45, #F2761A); }
/* Gráfica grande (referencia: "Burndown chart") */
.rw-chart { position: relative; width: 100%; flex: 1; min-height: 200px; }
.rw-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Mini-KPIs de "Requiere atención" */
.rw-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1199.98px) { .rw-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rw-mini {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--rw-border-soft);
border-radius: var(--rw-r-md);
background: var(--rw-surface);
text-align: left;
color: inherit;
min-width: 0;
transition: border-color var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease, transform var(--rw-dur-fast) ease;
}
button.rw-mini { cursor: pointer; }
button.rw-mini:hover { border-color: var(--rw-border-strong); background: var(--rw-surface-2); }
.rw-mini-ico {
width: 36px; height: 36px; flex: 0 0 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--rw-r-md);
background: var(--rw-surface-3);
color: var(--rw-ink-2);
}
.rw-mini-ico.tone-bg-orange { background: var(--rw-orange-soft); color: var(--rw-orange); }
.rw-mini-ico.tone-bg-violet { background: var(--rw-accent-soft); color: var(--rw-accent); }
.rw-mini-ico.tone-bg-green { background: var(--rw-green-soft); color: var(--rw-green); }
.rw-mini-ico.tone-bg-red { background: var(--rw-red-soft); color: var(--rw-red); }
.rw-mini-num { font-size: 1.2rem; font-weight: 600; color: var(--rw-ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.rw-mini-lbl { font-size: var(--rw-fs-sm); color: var(--rw-muted); line-height: 1.3; }
/* Listas dentro de widgets (alertas, respuestas, actividad) */
.rw-list { display: flex; flex-direction: column; }
.rw-list-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--rw-border-soft);
}
.rw-list-item:first-child { padding-top: 0; }
.rw-list-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rw-list-body { flex: 1; min-width: 0; }
.rw-list-title { font-size: var(--rw-fs-md); font-weight: 500; color: var(--rw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-list-meta { font-size: var(--rw-fs-sm); color: var(--rw-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.rw-widget-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rw-border-soft); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rw-link { font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.rw-link:hover { color: var(--rw-accent); }
.rw-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 12px; text-align: center; color: var(--rw-muted); font-size: var(--rw-fs-md); flex: 1; }
.rw-empty > i { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--rw-surface-3); color: var(--rw-ink-2); }
.rw-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: var(--rw-fs-xs); font-weight: 600; background: var(--rw-surface-3); color: var(--rw-ink-2); }
.rw-count-badge.is-red { background: var(--rw-red); color: #fff; }
/* Estado de servicios (IT) */
.rw-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.rw-dot.ok { background: var(--rw-green); box-shadow: 0 0 0 3px var(--rw-green-soft); }
.rw-dot.warn { background: var(--rw-orange); box-shadow: 0 0 0 3px var(--rw-orange-soft); }
.rw-dot.err { background: var(--rw-red); box-shadow: 0 0 0 3px var(--rw-red-soft); }
.rw-console {
margin: 0;
padding: 14px 16px;
max-height: 280px;
overflow: auto;
border-radius: var(--rw-r-md);
background: #18181B;
color: #E4E4E7;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.75rem;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
/* Interacción de la gráfica de gasto (hover por día) */
.oc-hover-g .oc-hairline, .oc-hover-g .oc-dot, .oc-hover-g .oc-tooltip-g { opacity: 0; transition: opacity var(--rw-dur-fast) ease; }
.oc-hover-g .oc-tooltip-g { pointer-events: none; }
.oc-hover-g:hover .oc-hairline { opacity: 0.5; }
.oc-hover-g:hover .oc-dot, .oc-hover-g:hover .oc-tooltip-g { opacity: 1; }
.rw-widget .proyectos-table th, .rw-widget .dashboard-table th {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: var(--rw-fs-sm) !important;
font-weight: 500 !important;
color: var(--rw-muted) !important;
}
/* Gasto en proyectos (top 5): ranking con barra de presupuesto y marca del 100% */
.rw-proy-wrap { display: flex; flex-direction: column; flex: 1; }
.rw-proy-summary {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 16px;
margin-bottom: 14px;
}
.rw-proy-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rw-proy-total .rw-sub { margin: 0; }
.rw-proy-total .rw-sub strong { color: var(--rw-ink-2); font-weight: 600; }
.rw-proy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rw-proy-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 10px;
border-radius: 999px;
background: var(--rw-surface-2);
border: 1px solid var(--rw-border-soft);
font-size: var(--rw-fs-xs);
font-weight: 500;
color: var(--rw-ink-2);
}
.rw-proy-chip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.rw-proy-chip.is-red i { background: var(--rw-red); }
.rw-proy-chip.is-orange i { background: var(--rw-orange); }
.rw-proy-chip.is-green i { background: var(--rw-green); }
.rw-proy-list { display: flex; flex-direction: column; gap: 4px; }
.rw-proy-item {
--tono: var(--rw-green);
--tono-soft: var(--rw-green-soft);
--tono-text: var(--rw-green-text);
display: grid;
grid-template-columns: 26px minmax(0, 1.3fr) minmax(110px, 1fr) 128px 56px;
align-items: center;
gap: 14px;
width: 100%;
padding: 11px 12px;
margin: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--rw-r-md);
text-align: left;
color: inherit;
cursor: pointer;
transition: background-color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease;
}
.rw-proy-item:hover { background: var(--rw-surface-2); border-color: var(--rw-border-soft); }
.rw-proy-item.is-orange { --tono: var(--rw-orange); --tono-soft: var(--rw-orange-soft); --tono-text: var(--rw-orange-text); }
.rw-proy-item.is-red { --tono: var(--rw-red); --tono-soft: var(--rw-red-soft); --tono-text: var(--rw-red-text); }
.rw-proy-rank {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
background: var(--rw-surface-3);
color: var(--rw-ink-2);
font-size: var(--rw-fs-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.rw-proy-info { display: flex; flex-direction: column; min-width: 0; }
.rw-proy-name { font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-proy-meta { font-size: var(--rw-fs-xs); color: var(--rw-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-proy-bar {
position: relative;
display: block;
height: 10px;
border-radius: 999px;
background: var(--rw-surface-3);
overflow: visible;
}
.rw-proy-fill {
position: absolute; left: 0; top: 0; bottom: 0;
border-radius: 999px;
background: linear-gradient(90deg, color-mix(in srgb, var(--tono) 55%, #fff), var(--tono));
transition: width var(--rw-dur-slow) var(--rw-ease);
}
.rw-proy-over {
position: absolute; top: 0; bottom: 0;
border-radius: 0 999px 999px 0;
background: repeating-linear-gradient(135deg, var(--rw-red) 0 4px, #F7A3A6 4px 8px);
}
.rw-proy-mark {
position: absolute; top: -4px; bottom: -4px;
width: 2px;
margin-left: -1px;
border-radius: 2px;
background: var(--rw-ink-2);
opacity: 0.55;
}
.rw-proy-amount { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; line-height: 1.25; }
.rw-proy-amount strong { font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
.rw-proy-amount small { font-size: var(--rw-fs-xs); color: var(--rw-muted); font-variant-numeric: tabular-nums; }
.rw-proy-pct {
justify-self: end;
min-width: 48px;
padding: 4px 8px;
border-radius: 999px;
text-align: center;
font-size: var(--rw-fs-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
background: var(--tono-soft);
color: var(--tono-text);
}
.rw-proy-wrap .rw-widget-foot { margin-top: 12px; }
@media (max-width: 767.98px) {
.rw-proy-item {
grid-template-columns: 26px minmax(0, 1fr) auto;
grid-template-areas:
"rank info pct"
"bar bar bar"
"amt amt amt";
row-gap: 10px;
padding: 12px;
border-color: var(--rw-border-soft);
}
.rw-proy-rank { grid-area: rank; }
.rw-proy-info { grid-area: info; }
.rw-proy-pct { grid-area: pct; }
.rw-proy-bar { grid-area: bar; }
.rw-proy-amount { grid-area: amt; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
.rw-proy-list { gap: 8px; }
.rw-proy-name, .rw-proy-meta { white-space: normal; }
.rw-proy-wrap .rw-widget-foot { flex-direction: column; align-items: flex-start; }
}
/* Encabezado de página del dashboard con acciones a la derecha */
.rw-page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.rw-page-head h1, .rw-page-head h4 { font-size: var(--rw-fs-title) !important; font-weight: 600 !important; margin: 0 0 8px !important; letter-spacing: -0.02em !important; }
.rw-page-head p { margin: 0; color: var(--rw-muted); font-size: var(--rw-fs-lg); }
.rw-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rw-date-pill {
display: inline-flex; align-items: center; gap: 8px;
height: 36px; padding: 0 12px;
border: 1px solid var(--rw-border-strong);
border-radius: var(--rw-r-sm);
background: var(--rw-surface);
color: var(--rw-ink-2);
font-size: var(--rw-fs-md);
font-weight: 500;
box-shadow: var(--rw-shadow-xs);
}
@media (max-width: 1199.98px) {
.rw-col-3, .rw-col-4 { grid-column: span 6; }
.rw-col-5, .rw-col-7, .rw-col-8 { grid-column: 1 / -1; }
.rw-col-wide-md { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
.rw-dash, .rw-dash-row { gap: 14px; }
.rw-dash-row > * { grid-column: 1 / -1 !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
/* Tablet vertical: los widgets chicos van de dos en dos */
.rw-dash-row > .rw-col-3, .rw-dash-row > .rw-col-4 { grid-column: span 6 !important; }
}
@media (max-width: 767.98px) {
.rw-widget { padding: 16px; }
.rw-seg-bar { height: 40px; }
.rw-stat-num, .rw-big { font-size: 1.45rem; }
.rw-spark { width: 104px; }
.rw-page-actions { width: 100%; }
.rw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 16px; }
.rw-minis { grid-template-columns: 1fr !important; }
/* La gráfica grande conserva su legibilidad: se desplaza en horizontal */
.rw-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rw-chart svg { min-width: 560px; }
}
/* ============================================================================
15c · TABLAS RESPONSIVE (js/tablas_responsive.js marca table.rw-stack)
En móvil cada fila se convierte en una tarjeta con etiqueta por dato.
============================================================================ */
@media (max-width: 768px) {
table.rw-stack,
table.rw-stack > tbody,
table.rw-stack > tbody > tr,
table.rw-stack > tbody > tr > td { display: block !important; width: 100% !important; min-width: 0 !important; }
table.rw-stack { border: 0 !important; background: transparent !important; min-width: 0 !important; table-layout: auto !important; }
table.rw-stack > thead, table.rw-stack > tfoot > tr > th:empty { display: none !important; }
table.rw-stack > tbody { display: flex !important; flex-direction: column; gap: 10px; }
table.rw-stack > tbody > tr {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 16px;
padding: 14px !important;
background: var(--rw-surface) !important;
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-md) !important;
box-shadow: var(--rw-shadow-xs);
}
table.rw-stack > tbody > tr:hover { background: var(--rw-surface) !important; }
table.rw-stack > tbody > tr > td {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
text-align: left !important;
white-space: normal !important;
word-break: break-word;
font-size: var(--rw-fs-md) !important;
}
table.rw-stack > tbody > tr > td::before {
content: attr(data-label);
font-size: var(--rw-fs-xs);
font-weight: 500;
color: var(--rw-muted);
text-transform: none;
letter-spacing: 0;
line-height: 1.3;
}
table.rw-stack > tbody > tr > td[data-label=""]::before,
table.rw-stack > tbody > tr > td.rw-cell-primary::before,
table.rw-stack > tbody > tr > td.rw-cell-actions::before,
table.rw-stack > tbody > tr > td[colspan]::before { display: none !important; }
table.rw-stack > tbody > tr > td.rw-cell-primary {
grid-column: 1 / -1;
font-size: var(--rw-fs-lg) !important;
font-weight: 600;
color: var(--rw-ink) !important;
padding-bottom: 8px !important;
border-bottom: 1px solid var(--rw-border-soft) !important;
}
table.rw-stack > tbody > tr > td.rw-cell-wide { grid-column: 1 / -1; }
table.rw-stack > tbody > tr > td.rw-cell-actions {
grid-column: 1 / -1;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding-top: 10px !important;
border-top: 1px solid var(--rw-border-soft) !important;
}
table.rw-stack > tbody > tr > td.rw-cell-actions .btn { flex: 1 1 auto; }
table.rw-stack > tbody > tr > td.rw-cell-actions > div,
table.rw-stack > tbody > tr > td.rw-cell-actions > .d-flex { width: 100%; flex-wrap: wrap; justify-content: flex-start !important; }
table.rw-stack > tbody > tr > td[colspan] { grid-column: 1 / -1; align-items: center; text-align: center !important; font-weight: 400 !important; font-size: var(--rw-fs-md) !important; color: var(--rw-muted) !important; background: transparent !important; }
table.rw-stack > tbody > tr:has(> td[colspan]:only-child) { display: block !important; box-shadow: none; border-style: dashed !important; }
table.rw-stack > tbody > tr > td:empty:not([colspan]) { display: none !important; }
table.rw-stack .form-control, table.rw-stack .form-select { width: 100% !important; max-width: none !important; }
/* Contenidos en bloque (barras de avance, grupos) ocupan todo el ancho de la celda */
table.rw-stack > tbody > tr > td > div { align-self: stretch; max-width: 100%; }
table.rw-stack > tbody > tr > td.rw-cell-actions > div { align-self: auto; }
table.rw-stack > tbody > tr.rw-collapsible:not(.rw-open) > td.rw-extra { display: none !important; }
table.rw-stack > tbody > tr > td.rw-stack-more { grid-column: 1 / -1; display: flex !important; }
table.rw-stack > tbody > tr > td.rw-stack-more::before { display: none !important; }
.rw-stack-more-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
border: 1px solid var(--rw-border);
border-radius: var(--rw-r-sm);
background: var(--rw-surface-2);
color: var(--rw-ink-2);
font-size: var(--rw-fs-sm);
font-weight: 500;
cursor: pointer;
}
.rw-stack-more-btn i { transition: transform var(--rw-dur) var(--rw-ease); }
tr.rw-open .rw-stack-more-btn i { transform: rotate(180deg); }
/* Contenedores de la tabla: sin marco ni scroll; las tarjetas ya se separan solas */
.table-responsive:has(> table.rw-stack),
.spa-desktop-table:has(> table.rw-stack),
.proyectos-table-wrap:has(> table.rw-stack),
.contratos-table-wrap:has(> table.rw-stack),
.dashboard-table-wrap:has(> table.rw-stack) {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
border-radius: 0 !important;
}
*:has(> table.rw-stack) { overflow-x: visible !important; }
/* Las filas ocultas por el antiguo helper vuelven a mostrarse (ya no se usa) */
table.rw-stack .mobile-hidden-col { display: flex !important; }
table.rw-stack .mobile-expand-toggle { display: none !important; }
}
@media (min-width: 769px) {
td.rw-stack-more { display: none !important; }
}
/* Encabezado heredado "Panel IT - …": la marca del menú ya saluda al usuario */
.rw-shell .main-content > .header { display: none !important; }
/* Botones con color heredado en línea (antes azul, hoy violeta) → mismo
botón primario negro que el resto del sistema */
.btn[style*="#6E5BE6" i]:not(.btn-outline-primary):not(.btn-link),
.btn[style*="rgb(110, 91, 230)"]:not(.btn-outline-primary):not(.btn-link) {
background: #232327 !important;
border-color: #18181B !important;
color: #fff !important;
box-shadow: var(--rw-shadow-btn) !important;
}
/* Encabezados de sección del panel IT (h5 con ícono) con el mismo peso visual
que el resto de títulos de página */
.rw-shell .main-content > .section > .card-container > div:first-child > h5:first-child {
font-size: 1.25rem !important;
font-weight: 600 !important;
letter-spacing: -0.015em !important;
}
.rw-shell .main-content > .section > .card-container > div:first-child > h5:first-child > i { color: var(--rw-ink-2); font-size: 0.85em; }
/* Saltos
heredados entre encabezado y contenido: el espaciado ya lo da el encabezado */
.spa-section-head + br, .spa-section-head + br + br { display: none !important; }
.spa-section-head + br + .alf-bar, .spa-section-head + .alf-bar { margin-top: 0; }
/* Barra de filtros: alcore_filtros.js mueve los controles al panel "Filtro" y
deja sus contenedores vacíos; con flex-wrap + gap generaban un hueco enorme
bajo el buscador (más visible en móvil, donde se apilan en columna). */
.alf-bar .spa-select-wrap:not(:has(select, input, textarea, button)),
.alf-bar .spa-search-wrap:not(:has(input)),
.alf-bar .filter-group:not(:has(select, input, textarea, button)),
.alf-bar > div:not(.alf-search):not(.alf-pop):not(:has(select, input, textarea, button)),
.alf-bar > div:not(.alf-search):not(.alf-pop) > div:not(:has(select, input, textarea, button)) {
display: none !important;
}
.alf-bar > div:not(.alf-search):not(.alf-pop):not(:has(> :not([style*="display: none"]):not([data-alf-hide]))) { display: none !important; }
/* ============================================================================
16 · RESPONSIVE (tablet / móvil < 992px)
============================================================================ */
@media (max-width: 991.98px) {
html, body.rw-shell { overflow-x: clip; }
/* Encabezados de sección apilados y alineados a la izquierda (antes el
bloque de título quedaba empujado a la derecha al pasar a columna). */
.spa-section-head,
.rw-shell .spa-section-head { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 14px !important; }
.spa-section-head > *:not(.spa-section-info) { align-self: stretch; }
.spa-section-head > .btn,
.spa-section-head > div:not(.spa-section-info) .btn { flex: 1 1 auto; }
.spa-section-head > div:not(.spa-section-info) { display: flex; flex-wrap: wrap; gap: 8px; }
.spa-section-info { width: 100%; }
.spa-table-head { padding: 14px 16px !important; }
/* Lista de tarjetas móviles: sin "caja gris" dentro de la tarjeta */
.spa-mobile-list { background: transparent !important; padding: 12px !important; gap: 12px !important; }
.spa-mobile-card { border-radius: var(--rw-r-md) !important; box-shadow: var(--rw-shadow-xs) !important; border-color: var(--rw-border) !important; }
.rw-page-head { align-items: stretch; }
body.rw-shell { background: var(--rw-surface) !important; padding: 0 !important; }
body.rw-shell .top-navbar > .d-flex:first-child { min-width: 0; flex: 1 1 auto; }
body.rw-shell .top-navbar .header-actions { flex-shrink: 0; }
body.rw-shell .top-navbar {
height: 58px !important;
padding: 0 14px !important;
background: rgba(255, 255, 255, 0.94) !important;
border-bottom: 1px solid var(--rw-border) !important;
box-shadow: none !important;
}
body.rw-shell .top-navbar .brand-alcore { gap: 9px !important; }
body.rw-shell .top-navbar .brand-alcore .brand-logo { width: 34px; height: 34px; flex-basis: 34px; padding: 4px; border-radius: 9px; }
body.rw-shell .top-navbar .brand-alcore .brand-saludo { font-size: var(--rw-fs-md); }
body.rw-shell .top-navbar .brand-alcore .brand-panel { font-size: var(--rw-fs-xs); }
.mobile-menu-toggle {
width: 40px;
height: 40px;
border-radius: var(--rw-r-sm) !important;
color: var(--rw-ink) !important;
transition: background-color var(--rw-dur-fast) ease !important;
}
.mobile-menu-toggle:hover, .mobile-menu-toggle:active { background: var(--rw-surface-3) !important; }
/* Drawer lateral = mismo sidebar de escritorio */
body.rw-shell .top-nav-links {
background: var(--rw-sidebar) !important;
border-right: 1px solid var(--rw-border) !important;
border-radius: 0 var(--rw-r-xl) var(--rw-r-xl) 0 !important;
box-shadow: var(--rw-shadow-pop) !important;
padding: 18px 12px 28px !important;
gap: 2px !important;
transition: left var(--rw-dur-slow) var(--rw-ease) !important;
}
body.rw-shell .top-nav-links::before {
content: "Menú" !important;
font-size: var(--rw-fs-md) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--rw-muted) !important;
border-bottom: 0 !important;
padding: 2px 10px 8px !important;
margin: 0 !important;
}
body.rw-shell .top-nav-links > a.menu-link,
body.rw-shell .top-nav-links .nav-item-dropdown > a.vehiculos-parent { min-height: 44px !important; }
body.rw-shell .top-nav-links .nav-item-dropdown .submenu-vehiculos a { min-height: 42px !important; }
body.rw-shell .header-actions { gap: 4px !important; }
body.rw-shell .header-actions > a.menu-link[data-section="perfil"] {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--rw-r-sm);
}
body.rw-shell .header-actions > a.menu-link[data-section="perfil"] i { color: #B9B0F5 !important; font-size: 24px !important; }
.rw-shell .notif-btn, .rw-shell .header-actions > a[href*="cerrarSesion"] { width: 40px !important; height: 40px !important; }
body.rw-shell .rw-user-card { flex: 0 0 auto; padding: 0; }
body.rw-shell .rw-user-meta { display: none; }
body.rw-shell .rw-avatar { width: 32px; height: 32px; flex-basis: 32px; }
/* "Ver como IT/Admin" (usuario de pruebas): solo ícono en móvil */
body.rw-shell .header-actions .btn-outline-secondary { font-size: 0 !important; width: 40px; padding: 0 !important; gap: 0 !important; }
body.rw-shell .header-actions .btn-outline-secondary i { font-size: 14px !important; margin: 0 !important; }
.notif-badge { border-color: #fff !important; }
body.rw-shell .main-content {
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 20px 16px 32px !important;
max-width: 100% !important;
}
.spa-section-title, .cli-head-text h2 { font-size: 1.3rem !important; }
.spa-section-subtitle, .cli-head-text p { font-size: var(--rw-fs-md) !important; }
.spa-section-head { padding-bottom: 16px !important; }
.spa-section-head > .btn { width: 100%; }
/* admin.css pone la cabecera en columna; con align-items:flex-end el título
se iba a la derecha (se veía "corrido" en tablet/móvil). */
.spa-section-head { align-items: stretch !important; }
.spa-section-head > .spa-section-info { width: 100%; }
.rw-page-head { align-items: flex-start; }
/* Paginadores largos: los botones bajan de renglón en vez de salirse */
.spa-pagination-pages, .pagination { flex-wrap: wrap !important; justify-content: center !important; max-width: 100%; }
.spa-pagination-wrap { flex-wrap: wrap; }
/* Grids de una sola columna que se ensanchaban por su contenido */
.ng-captura-cols { grid-template-columns: minmax(0, 1fr) !important; }
.ng-captura-cols > * { min-width: 0 !important; }
/* Encabezados de Proyectos / Contratos: alineados a la izquierda como el resto */
.proyectos-header, .contratos-header, .comprobantes-header { text-align: left !important; align-items: stretch !important; }
.proyectos-title-wrap, .contratos-title-wrap, .comprobantes-title-wrap {
align-items: flex-start !important;
text-align: left !important;
flex-direction: row !important;
gap: 12px !important;
}
.proyectos-title-text, .contratos-title-text, .comprobantes-title-text { text-align: left !important; }
}
@media (max-width: 575.98px) {
body.rw-shell .top-navbar .brand-alcore .brand-panel { display: none; }
body.rw-shell .top-navbar .brand-alcore .brand-saludo { max-width: 46vw; }
.modal-dialog { margin: 10px !important; }
.modal-content { border-radius: var(--rw-r-lg) !important; }
.modal-header { padding: 14px 16px !important; }
.modal-body { padding: 16px !important; }
.modal-footer { padding: 12px 16px !important; }
.modal-footer .btn { flex: 1 1 auto; }
.btn { min-height: 40px !important; }
.btn-sm { min-height: 36px !important; }
.form-control, .form-select { font-size: 16px !important; } /* evita zoom en iOS */
.nav-tabs, .nav-pills { width: 100%; overflow-x: auto; flex-wrap: nowrap !important; }
.nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
.toast-container { left: 0; right: 0; padding: 10px !important; }
.toast { width: 100% !important; }
}
/* ============================================================================
17 · ANIMACIONES Y MOVIMIENTO REDUCIDO
============================================================================ */
@keyframes rw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rw-fade-up {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@keyframes rw-pop {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@keyframes rw-toast-in {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: none; }
}
/* Transición entre vistas (cambio de sección del menú) */
.rw-shell .main-content > .section.active { animation: rw-fade-up var(--rw-dur-slow) var(--rw-ease); }
@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;
}
.modal.fade .modal-dialog { transform: none !important; }
}
/* ============================================================================
21 · KIT DE COMPONENTES v2 (secciones de admin y cliente)
Piezas comunes: KPIs, paneles, notas, chips, botones de ícono, celdas,
estados vacíos y bloques de modal. Las secciones las usan con estas clases.
============================================================================ */
/* Encabezados de tabla uniformes en todo el sistema */
.rw-shell .main-content table thead th,
.rw-shell .modal table thead th,
.alm-main table thead th {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: var(--rw-fs-xs) !important;
font-weight: 500 !important;
color: var(--rw-muted) !important;
background: var(--rw-surface-2) !important;
white-space: nowrap;
}
.spa-status-pill, .proyectos-badge, .contratos-badge, .badge, .rw-chip { white-space: nowrap; }
/* KPIs */
.rw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.rw-kpis.rw-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rw-kpis.rw-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rw-kpi {
position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
padding: 16px 18px;
background: var(--rw-surface); border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg);
box-shadow: var(--rw-shadow-xs);
text-align: left;
}
button.rw-kpi { cursor: pointer; font: inherit; transition: border-color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease; }
button.rw-kpi:hover { border-color: var(--rw-border-strong); box-shadow: var(--rw-shadow-hover); }
.rw-kpi.is-active { border-color: var(--rw-accent); box-shadow: 0 0 0 1px var(--rw-accent) inset; }
.rw-kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-width: 0; }
.rw-kpi-icon {
flex: 0 0 32px; width: 32px; height: 32px;
display: inline-flex !important; align-items: center; justify-content: center;
border-radius: 9px; font-size: .8rem;
background: var(--rw-surface-3); color: var(--rw-ink-2);
}
.rw-kpi-icon svg { width: 16px; height: 16px; }
.rw-kpi--accent .rw-kpi-icon { background: var(--rw-accent-soft); color: var(--rw-accent); }
.rw-kpi--blue .rw-kpi-icon { background: #EEF3FF; color: #3E63DD; }
.rw-kpi--orange .rw-kpi-icon { background: var(--rw-orange-soft); color: var(--rw-orange-text); }
.rw-kpi--green .rw-kpi-icon { background: var(--rw-green-soft); color: var(--rw-green-text); }
.rw-kpi--red .rw-kpi-icon { background: var(--rw-red-soft); color: var(--rw-red-text); }
.rw-kpi-label { min-width: 0; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-muted); line-height: 1.25; }
.rw-kpi-value { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--rw-ink); font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.rw-kpi-value.is-neg { color: var(--rw-red-text); }
.rw-kpi-sub { font-size: var(--rw-fs-sm); color: var(--rw-faint); }
/* Panel (tarjeta de contenido con encabezado) */
.rw-panel {
background: var(--rw-surface); border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg);
box-shadow: var(--rw-shadow-xs); margin-bottom: 16px; overflow: hidden;
}
.rw-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--rw-border-soft); }
.rw-panel-title { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: var(--rw-fs-lg) !important; font-weight: 600 !important; color: var(--rw-ink) !important; letter-spacing: -0.01em; }
.rw-panel-sub { margin: 2px 0 0; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.rw-panel-body { padding: 16px 18px; }
.rw-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--rw-border-soft); }
.rw-panel > .table-responsive, .rw-panel .spa-desktop-table { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.rw-count { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--rw-surface-3); font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-ink-2); white-space: nowrap; }
/* Notas */
.rw-note {
display: flex; align-items: flex-start; gap: 10px;
margin: 0 0 16px; padding: 11px 14px;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-md);
background: var(--rw-surface-2);
font-size: var(--rw-fs-sm); line-height: 1.5; color: var(--rw-ink-2);
}
.rw-note > i, .rw-note > svg { flex: 0 0 auto; margin-top: 3px; color: var(--rw-muted); }
.rw-note--warn { background: var(--rw-orange-soft); border-color: var(--rw-orange-border); color: var(--rw-orange-text); }
.rw-note--danger { background: var(--rw-red-soft); border-color: var(--rw-red-border); color: var(--rw-red-text); }
.rw-note--ok { background: var(--rw-green-soft); border-color: var(--rw-green-border); color: var(--rw-green-text); }
.rw-note--warn > i, .rw-note--danger > i, .rw-note--ok > i { color: inherit; }
/* Chips de estado */
.rw-chip {
display: inline-flex; align-items: center; gap: 6px;
height: 24px; padding: 0 9px;
border: 1px solid var(--rw-border); border-radius: 999px;
background: var(--rw-surface-3); color: var(--rw-ink-2);
font-size: var(--rw-fs-xs); font-weight: 500; line-height: 1;
}
.rw-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.rw-chip.no-dot::before { display: none; }
.rw-chip--green { background: var(--rw-green-soft); border-color: var(--rw-green-border); color: var(--rw-green-text); }
.rw-chip--orange { background: var(--rw-orange-soft); border-color: var(--rw-orange-border); color: var(--rw-orange-text); }
.rw-chip--red { background: var(--rw-red-soft); border-color: var(--rw-red-border); color: var(--rw-red-text); }
.rw-chip--accent { background: var(--rw-accent-soft); border-color: var(--rw-accent-border); color: var(--rw-accent); }
.rw-chip--blue { background: #EEF3FF; border-color: #D3DEFB; color: #3651C4; }
.rw-chip--neutral { background: var(--rw-surface-3); border-color: var(--rw-border); color: var(--rw-muted); }
/* Código / identificador (placa, clave, RFC, folio) */
.rw-mono {
display: inline-flex; align-items: center; height: 22px; padding: 0 7px;
border-radius: 6px; background: var(--rw-surface-3); border: 1px solid var(--rw-border);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 500;
color: var(--rw-ink-2); letter-spacing: .01em; white-space: nowrap;
}
/* Celdas */
.rw-cell-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rw-cell-main > div { display: flex; flex-direction: column; min-width: 0; }
.rw-cell-title { font-weight: 500; color: var(--rw-ink); line-height: 1.3; }
.rw-cell-sub { font-size: var(--rw-fs-xs); color: var(--rw-faint); line-height: 1.35; }
.rw-avatar {
flex: 0 0 34px; width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; background: var(--rw-accent-soft); color: var(--rw-accent);
font-size: var(--rw-fs-xs); font-weight: 700; letter-spacing: .02em;
}
.rw-avatar--neutral { background: var(--rw-surface-3); color: var(--rw-ink-2); }
.rw-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw-nowrap { white-space: nowrap; }
.rw-muted { color: var(--rw-faint) !important; }
.rw-pos { color: var(--rw-green-text) !important; }
.rw-neg { color: var(--rw-red-text) !important; }
/* Botones de ícono y grupo de acciones */
.rw-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.rw-icon-btn {
flex: 0 0 32px; width: 32px; height: 32px; padding: 0 !important;
display: inline-flex !important; align-items: center; justify-content: center;
border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-sm) !important;
background: var(--rw-surface) !important; color: var(--rw-muted) !important;
font-size: .8rem; line-height: 1; cursor: pointer; box-shadow: none !important;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease;
}
.rw-icon-btn svg { width: 15px; height: 15px; }
.rw-icon-btn:hover { background: var(--rw-surface-3) !important; color: var(--rw-ink) !important; }
.rw-icon-btn--accent:hover { background: var(--rw-accent-soft) !important; border-color: var(--rw-accent-border) !important; color: var(--rw-accent) !important; }
.rw-icon-btn--danger:hover { background: var(--rw-red-soft) !important; border-color: var(--rw-red-border) !important; color: var(--rw-red) !important; }
.rw-icon-btn:disabled, .rw-icon-btn.disabled { opacity: .45; pointer-events: none; }
.rw-icon-btn:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
/* Estado vacío */
.rw-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; text-align: center; color: var(--rw-muted); font-size: var(--rw-fs-md); }
.rw-empty > i, .rw-empty > svg { font-size: 1.5rem; width: 26px; height: 26px; color: var(--rw-faint); margin-bottom: 4px; }
.rw-empty-title { font-size: var(--rw-fs-lg); font-weight: 600; color: var(--rw-ink); }
/* Bloques de modal y datos de detalle */
.rw-modal-intro { margin: 0 0 16px; font-size: var(--rw-fs-sm); color: var(--rw-muted); line-height: 1.5; }
.rw-modal-section { padding: 16px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface); }
.rw-modal-section + .rw-modal-section { margin-top: 12px; }
.rw-modal-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--rw-fs-sm); font-weight: 600; color: var(--rw-ink); }
.rw-modal-section-title > i { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--rw-surface-3); color: var(--rw-ink-2); font-size: .75rem; }
.rw-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface-2); margin-bottom: 14px; }
.rw-hero-label { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.rw-hero-value { margin-top: 2px; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--rw-ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.rw-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.rw-dl > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface); }
.rw-dl dt, .rw-dl .rw-dl-label { margin: 0; font-size: var(--rw-fs-xs); font-weight: 400; color: var(--rw-muted); }
.rw-dl dd, .rw-dl .rw-dl-value { margin: 0; font-size: var(--rw-fs-md); font-weight: 500; color: var(--rw-ink); overflow-wrap: anywhere; }
.rw-sec-title { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); }
.rw-sec-title > i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--rw-surface-3); color: var(--rw-ink-2); font-size: .75rem; }
.rw-file {
display: flex; align-items: center; gap: 10px; min-width: 0;
padding: 10px 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md);
background: var(--rw-surface); color: var(--rw-ink); text-decoration: none;
transition: border-color var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease;
}
a.rw-file:hover { border-color: var(--rw-border-strong); background: var(--rw-surface-2); color: var(--rw-ink); }
.rw-file-icon { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--rw-red-soft); color: var(--rw-red-text); font-size: .85rem; }
.rw-file-name { flex: 1 1 auto; min-width: 0; font-size: var(--rw-fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-file-meta { flex: 0 0 auto; font-size: var(--rw-fs-xs); color: var(--rw-faint); white-space: nowrap; }
@media (max-width: 1199.98px) {
.rw-kpis.rw-kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
.rw-kpis, .rw-kpis.rw-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
.rw-kpis, .rw-kpis.rw-kpis-3, .rw-kpis.rw-kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rw-kpi { padding: 14px; }
.rw-kpi-icon { flex-basis: 28px; width: 28px; height: 28px; }
.rw-kpi-value { font-size: 1.15rem; }
.rw-kpi-label { font-size: var(--rw-fs-xs); }
.rw-panel-head, .rw-panel-body, .rw-panel-foot { padding-left: 14px; padding-right: 14px; }
.rw-hero-value { font-size: 1.35rem; }
}
@media (max-width: 359.98px) {
.rw-kpis, .rw-kpis.rw-kpis-3, .rw-kpis.rw-kpis-5 { grid-template-columns: 1fr; }
}
/* @@SECCIONES-V2@@ (las secciones agregan sus estilos debajo) */
/* ===== Secciones v2 · grupo A ===== */
/* ============================================================================
SECCIONES v2 · A — Vehículos (control, mantenimientos, alertas) y flota cliente
Ámbito: #vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos y sus
modales (#detalleModal .vh-detalle, #vehiculoFormModal, #estadoVehiculoModal,
#subirMantenimientoArchivoModal, #modalDetalleMantenimiento, #modalDetalleAlerta,
#detalleRegistroModal .vh-detalle). Clases propias con prefijo .vh-
============================================================================ */
/* --- Estados de carga / vacío --- */
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos, #modalDetalleMantenimiento, #detalleRegistroModal) .vh-loading {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 36px 16px; text-align: center; color: var(--rw-muted); font-size: var(--rw-fs-sm);
}
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos, #modalDetalleMantenimiento, #detalleRegistroModal) .vh-loading p { margin: 0; }
/* --- Nota y panel --- */
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-note { margin: 0 0 12px; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-note-inset { margin: 14px; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-panel { margin-bottom: 0; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-panel .rw-panel-head { border-bottom: 1px solid var(--rw-border); }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-panel .rw-panel-sub { margin: 2px 0 0; }
#alertas .vh-kpis { margin-bottom: 16px; }
/* --- Tabla --- */
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table { width: 100%; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table th {
padding: 10px 16px !important; border-bottom: 1px solid var(--rw-border) !important;
}
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table td {
padding: 12px 16px !important; vertical-align: middle !important;
border-bottom: 1px solid var(--rw-border-soft) !important;
font-size: var(--rw-fs-md) !important; color: var(--rw-text) !important;
}
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table tbody tr:last-child td { border-bottom: 0 !important; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-row { cursor: pointer; transition: background-color var(--rw-dur-fast) ease; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-row:hover td { background: var(--rw-surface-2) !important; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-row:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: -2px; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table .rw-cell-main { min-width: 200px; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table .rw-cell-title { font-size: var(--rw-fs-md); }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table .rw-avatar { font-size: .8rem; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-th-actions,
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-td-actions { text-align: right !important; white-space: nowrap; width: 1%; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table .rw-chip,
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table .rw-mono { white-space: nowrap; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas) .vh-date { display: block; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas) .vh-time { display: block; font-size: var(--rw-fs-xs); color: var(--rw-faint); font-variant-numeric: tabular-nums; }
:is(#vehiculos-mantenimientos, #alertas) .vh-msg {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
max-width: 340px; color: var(--rw-muted); font-size: var(--rw-fs-sm); line-height: 1.45;
}
/* Tipo de alerta con punto de color */
#alertas .vh-type { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--rw-ink); line-height: 1.3; }
#alertas .vh-type::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--rw-accent); }
#alertas .vh-type--red::before { background: var(--rw-red); }
#alertas .vh-type--orange::before { background: var(--rw-orange); }
#alertas .vh-type--green::before { background: var(--rw-green); }
/* Archivo en línea (mantenimientos) */
#vehiculos-mantenimientos .vh-file-inline {
display: inline-flex; align-items: center; gap: 8px; max-width: 240px; min-width: 0;
color: var(--rw-ink); text-decoration: none; font-size: var(--rw-fs-sm);
}
#vehiculos-mantenimientos .vh-file-inline > i {
flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 7px; background: var(--rw-red-soft); color: var(--rw-red-text); font-size: .8rem;
}
#vehiculos-mantenimientos .vh-file-inline-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
#vehiculos-mantenimientos .vh-file-inline-meta { flex: 0 0 auto; font-size: var(--rw-fs-xs); color: var(--rw-faint); white-space: nowrap; }
#vehiculos-mantenimientos .vh-file-inline:hover .vh-file-inline-name { color: var(--rw-accent); text-decoration: underline; }
#vehiculos-mantenimientos .vh-table .dropdown-menu { border-radius: var(--rw-r-md); font-size: var(--rw-fs-sm); }
#vehiculos-mantenimientos .vh-table .dropdown-menu i { width: 16px; color: var(--rw-muted); }
/* Paginación dentro del panel */
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-pagination {
padding: 12px 18px !important; border-top: 1px solid var(--rw-border-soft) !important; background: transparent !important;
}
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-page-dots { display: inline-flex; align-items: center; padding: 0 2px; color: var(--rw-faint); font-size: var(--rw-fs-sm); }
/* --- Tarjetas móviles --- */
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-mcard {
gap: 12px !important; padding: 14px !important; cursor: pointer;
transition: border-color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease;
}
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-mcard:hover { transform: none !important; border-color: var(--rw-border-strong) !important; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-mcard:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-mcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-mcard-head .rw-cell-main { flex: 1 1 auto; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-mcard-head .rw-chip { flex: 0 0 auto; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-kv { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid var(--rw-border-soft); }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; font-size: var(--rw-fs-sm); }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-kv dt { margin: 0; font-weight: 400; color: var(--rw-muted); white-space: nowrap; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-kv dd { margin: 0; min-width: 0; text-align: right; font-weight: 500; color: var(--rw-ink); overflow-wrap: anywhere; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-tnum { font-variant-numeric: tabular-nums; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-mcard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-mcard-actions .btn { width: 100%; justify-content: center; }
:is(#vehiculos-mantenimientos, #alertas) .vh-mcard-text { margin: 0; font-size: var(--rw-fs-sm); color: var(--rw-text); line-height: 1.5; }
#alertas .vh-mcard-veh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#alertas .vh-mcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--rw-border-soft); }
#alertas .vh-mcard-meta { font-size: var(--rw-fs-xs); color: var(--rw-faint); font-variant-numeric: tabular-nums; }
#vehiculos-mantenimientos .vh-mcard .rw-file { background: var(--rw-surface-2); }
/* Móvil: el panel deja de ser marco (las tarjetas ya separan) */
@media (max-width: 768px) {
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-panel {
border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; border-radius: 0 !important;
}
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-panel .rw-panel-head {
padding: 4px 0 12px !important; border-bottom: 0 !important; flex-wrap: wrap; align-items: center; row-gap: 6px;
}
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-panel .rw-panel-sub { display: none; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-mlist { padding: 0 !important; gap: 10px !important; border-bottom: 0 !important; background: transparent !important; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-pagination {
padding: 14px 0 0 !important; border-top: 0 !important; gap: 10px !important;
}
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-panel > .rw-empty { border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface); }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-note { font-size: var(--rw-fs-xs); padding: 9px 12px; }
}
/* --- Bloques de detalle (modales) --- */
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento, #modalDetalleAlerta) .vh-detalle > :first-child,
#modalDetalleAlerta .modal-body > .vh-hero { margin-top: 0; }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento, #modalDetalleAlerta) .vh-hero { align-items: center; }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento, #modalDetalleAlerta) .vh-hero-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 260px; }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento, #modalDetalleAlerta) .vh-hero-main > div { min-width: 0; }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento, #modalDetalleAlerta) .vh-hero-icon {
flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 11px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: 1rem;
}
#modalDetalleAlerta .vh-hero-icon--red { background: var(--rw-red-soft); color: var(--rw-red-text); }
#modalDetalleAlerta .vh-hero-icon--orange { background: var(--rw-orange-soft); color: var(--rw-orange-text); }
#modalDetalleAlerta .vh-hero-icon--green { background: var(--rw-green-soft); color: var(--rw-green-text); }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento, #modalDetalleAlerta) .vh-hero-title { font-size: 1.05rem; font-weight: 600; color: var(--rw-ink); line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento, #modalDetalleAlerta) .vh-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento, #modalDetalleAlerta) .vh-hero-meta i { color: var(--rw-faint); }
:is(#detalleModal, #detalleRegistroModal) .vh-hero-side { text-align: right; }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento, #modalDetalleAlerta) .rw-sec-title .rw-count { margin-left: 2px; height: 20px; padding: 0 8px; }
:is(#detalleModal, #detalleRegistroModal) .vh-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento, #modalDetalleAlerta) .vh-note-modal { margin: 12px 0 0; }
:is(#detalleRegistroModal) .vh-sec .vh-note-modal { margin-top: 0; }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento) .vh-files { display: flex; flex-direction: column; gap: 8px; }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento) .vh-files--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 10px; }
#detalleRegistroModal .vh-sec .vh-files--grid { margin-top: 0; }
#modalDetalleMantenimiento .vh-file-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#modalDetalleMantenimiento .vh-file-text .rw-file-name { color: var(--rw-ink); text-decoration: none; }
#modalDetalleMantenimiento .vh-file-text .rw-file-name:hover { color: var(--rw-accent); text-decoration: underline; }
#modalDetalleMantenimiento .vh-file-text .rw-file-meta { white-space: normal; }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento) .vh-empty-inline {
padding: 14px; border: 1px dashed var(--rw-border-strong); border-radius: var(--rw-r-md);
text-align: center; font-size: var(--rw-fs-sm); color: var(--rw-muted);
}
#modalDetalleMantenimiento .vh-inline-form {
margin-top: 10px; padding: 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface-2);
}
#modalDetalleMantenimiento .vh-inline-form .form-label { font-size: var(--rw-fs-sm); font-weight: 500; margin-bottom: 6px; }
#modalDetalleMantenimiento .vh-inline-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#modalDetalleMantenimiento .vh-inline-form-row .form-control { flex: 1 1 200px; min-width: 0; background: var(--rw-surface); }
#modalDetalleMantenimiento .vh-inline-form textarea { background: var(--rw-surface); }
#modalDetalleMantenimiento .vh-inline-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
:is(#modalDetalleMantenimiento, #subirMantenimientoArchivoModal) .vh-hint { display: block; margin-top: 6px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#modalDetalleMantenimiento .vh-notas { display: flex; flex-direction: column; gap: 8px; }
#modalDetalleMantenimiento .vh-nota { padding: 10px 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface); }
#modalDetalleMantenimiento .vh-nota-text { font-size: var(--rw-fs-md); color: var(--rw-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
#modalDetalleMantenimiento .vh-nota-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font-size: var(--rw-fs-xs); color: var(--rw-faint); }
#modalDetalleMantenimiento .vh-nota-meta .rw-chip { height: 20px; }
:is(#detalleModal, #detalleRegistroModal) .vh-hist { display: flex; flex-direction: column; gap: 8px; }
:is(#detalleModal, #detalleRegistroModal) .vh-hist-item { padding: 10px 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface); }
#detalleModal .vh-hist-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#detalleModal .vh-hist-title { font-weight: 500; color: var(--rw-ink); }
#detalleModal .vh-hist-cost { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--rw-ink); white-space: nowrap; }
#detalleModal .vh-hist-meta { margin-top: 2px; font-size: var(--rw-fs-xs); color: var(--rw-muted); font-variant-numeric: tabular-nums; }
#detalleModal .vh-hist-desc { margin-top: 4px; font-size: var(--rw-fs-sm); color: var(--rw-text); }
#detalleRegistroModal .vh-hist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 14px; }
#detalleRegistroModal .vh-hist-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#detalleRegistroModal .vh-hist-grid .rw-dl-label { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#detalleRegistroModal .vh-hist-grid .rw-dl-value { font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink); overflow-wrap: anywhere; }
#detalleRegistroModal .vh-sec .rw-sec-title { margin-top: 20px; }
#modalDetalleAlerta .vh-msg-block {
margin: 0; padding: 12px 14px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md);
background: var(--rw-surface-2); font-size: var(--rw-fs-md); color: var(--rw-ink-2); line-height: 1.55;
}
/* Formularios de vehículo / mantenimiento / estado */
#vehiculoFormModal .vehiculo-form-section.rw-modal-section {
background: var(--rw-surface) !important; padding: 16px !important; border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-lg) !important; margin: 0 !important;
}
#vehiculoFormModal .vehiculo-form-section.rw-modal-section + .rw-modal-section { margin-top: 12px !important; }
#vehiculoFormModal .vehiculo-form-section h6.rw-modal-section-title {
font-size: var(--rw-fs-sm) !important; font-weight: 600 !important; text-transform: none !important;
letter-spacing: 0 !important; color: var(--rw-ink) !important; margin: 0 0 12px !important;
}
:is(#vehiculoFormModal, #subirMantenimientoArchivoModal) .rw-modal-section .form-label { font-size: var(--rw-fs-sm); }
#vehiculoFormModal .vh-file-current { margin-top: 8px; }
#vehiculoFormModal .vh-file-current .rw-file { padding: 7px 10px; }
#vehiculoFormModal .vh-file-current .rw-file-icon { flex-basis: 26px; width: 26px; height: 26px; font-size: .75rem; }
/* Documentos del vehículo: dos columnas parejas. Cada columna es una pila
(etiqueta → zona de carga → archivo actual) y las dos zonas de carga miden lo
mismo aunque una traiga archivo y la otra no. */
#vehiculoFormModal .vh-files-hint {
margin: -4px 0 12px; font-size: var(--rw-fs-sm); color: var(--rw-ink-2); line-height: 1.5;
}
#vehiculoFormModal .vehiculo-files-section .row > [class*="col-"] { display: flex; flex-direction: column; }
#vehiculoFormModal .vehiculo-files-section .dnd-wrapper { display: flex; flex-direction: column; gap: 8px; }
#vehiculoFormModal .vehiculo-files-section .dnd-dropzone { min-height: 96px !important; }
#vehiculoFormModal .vehiculo-files-section .dnd-dropzone-title { font-size: var(--rw-fs-sm); }
#vehiculoFormModal .vehiculo-files-section .dnd-dropzone-subtitle { font-size: var(--rw-fs-xs, .75rem); }
#vehiculoFormModal .vehiculo-files-section .dnd-file-list,
#vehiculoFormModal .vehiculo-files-section .dnd-file-summary { margin: 0; }
/* La zona de carga ya dice formatos y tamaño: el aviso repetía lo mismo y
alargaba el modal. */
#vehiculoFormModal .vehiculo-files-section .dnd-info-banner { display: none; }
@media (max-width: 575.98px) {
:is(#detalleModal, #detalleRegistroModal) .vh-hero-side { text-align: left; flex: 1 1 100%; padding-top: 10px; border-top: 1px solid var(--rw-border); }
:is(#detalleModal, #detalleRegistroModal, #modalDetalleMantenimiento, #modalDetalleAlerta) .rw-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#vehiculoFormModal .vehiculo-form-section.rw-modal-section,
#subirMantenimientoArchivoModal .rw-modal-section { padding: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-row,
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-mcard { transition: none !important; }
}
/* Ajustes de columnas (mantenimientos) */
#vehiculos-mantenimientos .vh-user { display: block; color: var(--rw-ink); white-space: nowrap; }
#vehiculos-mantenimientos .vh-table td:nth-child(2) { min-width: 150px; }
#vehiculos-mantenimientos .vh-msg { max-width: 260px; }
#vehiculos-mantenimientos .vh-table .rw-cell-main { min-width: 210px; }
:is(#vehiculos, #ver_vehiculos) .vh-table td:nth-child(3) { min-width: 150px; }
#modalDetalleMantenimiento .vh-inline-form-row { flex-direction: column; align-items: stretch; }
#modalDetalleMantenimiento .vh-inline-form-row > * { width: 100%; }
#modalDetalleMantenimiento .vh-inline-form-row > .btn { width: auto; align-self: flex-end; }
/* Escritorio compacto (portátiles / tablet horizontal) */
#vehiculos .vh-placa-inline { display: none; }
@media (min-width: 769px) and (max-width: 1439.98px) {
#vehiculos .vh-col-placa { display: none; }
#vehiculos .vh-placa-inline { display: block; margin-top: 4px; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table th { padding: 10px 8px !important; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table td { padding: 10px 8px !important; font-size: var(--rw-fs-sm) !important; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table .rw-cell-main,
#vehiculos-mantenimientos .vh-table .rw-cell-main { min-width: 0; gap: 10px; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table .rw-avatar { display: none; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table .rw-cell-title { font-size: var(--rw-fs-sm); }
:is(#vehiculos, #ver_vehiculos) .vh-table td:nth-child(3),
#vehiculos-mantenimientos .vh-table td:nth-child(2) { min-width: 0; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas) .rw-icon-btn { width: 30px; height: 30px; flex-basis: 30px; }
#vehiculos-mantenimientos .vh-file-inline { max-width: 130px; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table :is(th, td):first-child { padding-left: 16px !important; }
:is(#vehiculos, #vehiculos-mantenimientos, #alertas, #ver_vehiculos) .vh-table :is(th, td):last-child { padding-right: 14px !important; }
#vehiculos-mantenimientos .vh-file-inline-meta { display: none; }
:is(#vehiculos-mantenimientos, #alertas) .vh-msg { max-width: 200px; }
}
/* ===== Secciones v2 · grupo B ===== */
/* ============================================================================
SEC2 · B — Ingresos, Comprobantes de gastos (admin), Mis órdenes de compra,
Comprobantes de pago y Subir comprobante (cliente). Selectores acotados.
============================================================================ */
/* ---------------------------------------------------------------- Ingresos */
#ingresos .ing-kpis:empty { display: none; }
#ingresos .ing-kpis .rw-kpi-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ingresos .ing-form { margin-bottom: 16px; }
#ingresos .ing-form.is-open { animation: bxFadeIn var(--rw-dur) var(--rw-ease); }
#ingresos .ing-form .rw-panel-head { flex-wrap: nowrap; }
#ingresos .ing-form-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
#ingresos .ing-form-icon {
flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; background: var(--rw-green-soft); color: var(--rw-green-text); font-size: .85rem;
}
#ingresos .ing-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
#ingresos .ing-f { min-width: 0; }
#ingresos .ing-f .form-label { margin-bottom: 6px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
#ingresos .ing-f--concepto { grid-column: span 2; }
#ingresos .ing-money { position: relative; }
#ingresos .ing-money-prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--rw-faint); font-size: var(--rw-fs-md); pointer-events: none; }
#ingresos .ing-money .form-control { padding-left: 24px !important; font-variant-numeric: tabular-nums; }
#ingresos .ing-form-foot { background: var(--rw-surface-2); }
#ingresos .ing-form-msg { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#ingresos .ing-form-msg.is-error { color: var(--rw-red-text); }
#ingresos .ing-form-actions { display: flex; gap: 8px; margin-left: auto; }
#ingresos .ing-panel .rw-panel-title .rw-count { margin-left: 2px; }
#ingresos .ing-total { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
#ingresos .ing-total-label { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#ingresos .ing-total-value { font-size: 1.05rem; font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
#ingresos .ing-table td { vertical-align: middle; }
#ingresos .ing-td-main { min-width: 240px; }
#ingresos .ing-td-main .rw-cell-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ingresos .ing-avatar { background: var(--rw-green-soft); color: var(--rw-green-text); font-size: .75rem; }
#ingresos .ing-td-proy { min-width: 150px; max-width: 220px; }
#ingresos .ing-proy { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--rw-ink-2); line-height: 1.35; }
#ingresos .ing-td-forma { color: var(--rw-muted) !important; min-width: 110px; }
#ingresos .ing-monto { font-weight: 600; color: var(--rw-ink) !important; }
#ingresos .ing-th-actions, #ingresos .ing-td-actions { width: 88px; text-align: right; }
#ingresos .ing-page-gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--rw-faint); }
#ingresos .ing-panel .rw-panel-foot .spa-pagination-text { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#ingresos .ing-card { display: flex; flex-direction: column; gap: 10px; }
#ingresos .ing-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
#ingresos .ing-card-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
#ingresos .ing-card-title { font-weight: 500; color: var(--rw-ink); line-height: 1.35; }
#ingresos .ing-card-sub { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#ingresos .ing-card-monto { font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
#ingresos .ing-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#ingresos .ing-card-ref { font-size: var(--rw-fs-xs); color: var(--rw-faint); }
#ingresos .ing-card-actions { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--rw-border-soft); }
#ingresos .ing-card-actions .btn { flex: 1 1 auto; }
#ingresos .ing-forma-inline { display: none; }
@media (max-width: 1439.98px) {
#ingresos .ing-table .ing-col-forma { display: none; }
#ingresos .ing-forma-inline { display: inline; }
}
@media (max-width: 1199.98px) {
#ingresos .ing-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
#ingresos .ing-form-grid { grid-template-columns: 1fr; }
#ingresos .ing-f--concepto { grid-column: auto; }
#ingresos .ing-form-actions { width: 100%; }
#ingresos .ing-form-actions .btn { flex: 1 1 0; }
#ingresos .ing-panel .rw-panel-head { align-items: flex-start; }
#ingresos .ing-total { align-items: flex-start; }
}
@keyframes bxFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
#ingresos .ing-form.is-open { animation: none; }
}
/* ------------------------------------------- Comprobantes de gastos (admin) */
#comprobantes .cmp-balance { margin: 4px 0 16px; background: var(--rw-surface) !important; box-shadow: var(--rw-shadow-xs); }
#comprobantes .cmp-balance-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
#comprobantes .cmp-balance-icon {
flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 11px; background: var(--rw-green-soft); color: var(--rw-green-text); font-size: .9rem;
}
#comprobantes .cmp-balance-sub { margin-top: 2px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#comprobantes .cmp-balance-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 18px; border-left: 1px solid var(--rw-border); }
#comprobantes .cmp-balance-reducido { font-size: 1rem; font-weight: 600; color: var(--rw-ink-2); font-variant-numeric: tabular-nums; }
#comprobantes .cmp-btn-subir { white-space: nowrap; }
#comprobantes .cmp-kpis .rw-kpi-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#comprobantes .cmp-kpis button.rw-kpi:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
#comprobantes .cmp-panel .rw-panel-title .rw-count { margin-left: 2px; }
#comprobantes .cmp-table tbody tr.row-finanza { cursor: pointer; }
#comprobantes .cmp-table td { vertical-align: middle; }
#comprobantes .cmp-table td.cmp-col-folio { white-space: nowrap; }
#comprobantes .cmp-folio-wrap { display: flex; align-items: center; gap: 6px; }
#comprobantes .cmp-folio { font-weight: 600; color: var(--rw-accent); font-variant-numeric: tabular-nums; }
#comprobantes .cmp-alerta { color: var(--rw-red); font-size: .75rem; }
#comprobantes .cmp-col-folio .rw-cell-sub { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
#comprobantes .cmp-col-sol { min-width: 110px; max-width: 150px; color: var(--rw-ink-2) !important; }
#comprobantes .cmp-col-proy { min-width: 170px; max-width: 240px; }
#comprobantes .cmp-col-proy .rw-cell-title, #comprobantes .cmp-col-proy .rw-cell-sub { display: block; }
#comprobantes .cmp-col-emisor { min-width: 160px; max-width: 220px; color: var(--rw-ink-2) !important; }
#comprobantes .cmp-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
#comprobantes .cmp-clamp-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#comprobantes .cmp-oc-line { margin-top: 4px; }
#comprobantes .cmp-oc { height: 20px; font-size: 11px; }
#comprobantes .cmp-sin-oc { font-size: var(--rw-fs-xs); color: var(--rw-faint); }
#comprobantes .cmp-tipo { gap: 5px; }
#comprobantes .cmp-tipo i { font-size: .7rem; }
#comprobantes .cmp-monto { font-weight: 600; color: var(--rw-ink) !important; }
#comprobantes .cmp-col-actions { width: 120px; text-align: right; }
#comprobantes .cmp-page-gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--rw-faint); }
#comprobantes .cmp-foot .spa-pagination-text { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#comprobantes .cmp-note { margin-top: 4px; }
#comprobantes .cmp-card { display: flex; flex-direction: column; gap: 10px; }
#comprobantes .cmp-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
#comprobantes .cmp-card-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
#comprobantes .cmp-card-fecha { font-size: var(--rw-fs-xs); color: var(--rw-faint); font-variant-numeric: tabular-nums; }
#comprobantes .cmp-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#comprobantes .cmp-card-title { font-weight: 500; color: var(--rw-ink); line-height: 1.35; }
#comprobantes .cmp-card-sub { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#comprobantes .cmp-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#comprobantes .cmp-card-concepto { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#comprobantes .cmp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--rw-border-soft); }
#comprobantes .cmp-card-monto { font-weight: 600; font-size: 1rem; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
#comprobantes .cmp-card-ver { height: 32px; display: inline-flex; align-items: center; }
/* Filtros del listado generado por el servidor (fallback sin alf) */
#comprobantes #filtroComprobantesAdminForm .spa-filter-bar { margin-bottom: 16px !important; }
#comprobantes .cmp-sol-inline, #comprobantes .cmp-tipo-inline { display: none; }
#comprobantes .cmp-oc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 1499.98px) {
#comprobantes .cmp-table .cmp-col-sol { display: none; }
#comprobantes .cmp-sol-inline { display: block; }
}
@media (max-width: 1299.98px) {
#comprobantes .cmp-table .cmp-col-tipo { display: none; }
#comprobantes .cmp-tipo-inline { display: inline-flex; height: 20px; font-size: 11px; }
}
@media (max-width: 767.98px) {
#comprobantes .cmp-balance { flex-direction: column; align-items: stretch; }
#comprobantes .cmp-balance-side { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--rw-border); }
#comprobantes .cmp-btn-subir { width: 100%; justify-content: center; }
}
/* Modal de detalle de comprobante (contenido generado por get_detalles_solicitud_finanzas.php) */
#detalleModal .cmpd > .rw-note { margin: 0 0 12px; }
#detalleModal .cmpd-hero { margin-bottom: 12px; }
#detalleModal .cmpd-hero-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
#detalleModal .cmpd-hero-icon {
flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 11px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: .9rem;
}
#detalleModal .cmpd-hero-txt { min-width: 0; }
#detalleModal .cmpd-hero-folio { font-size: 1.15rem; font-weight: 600; color: var(--rw-ink); letter-spacing: -0.01em; line-height: 1.2; }
#detalleModal .cmpd-hero-sub { font-size: var(--rw-fs-xs); color: var(--rw-muted); margin-top: 2px; }
#detalleModal .cmpd-hero-side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#detalleModal .cmpd-hero-total { text-align: right; }
#detalleModal .cmpd-hero-total .rw-hero-value { font-size: 1.35rem; }
#detalleModal .cmpd .rw-sec-title:first-of-type { margin-top: 6px; }
#detalleModal .cmpd .rw-dl { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
#detalleModal .cmpd-dl-full { grid-column: 1 / -1; }
#detalleModal .cmpd-oc { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#detalleModal .cmpd-ver-oc { height: 26px; padding: 0 8px !important; font-size: var(--rw-fs-xs) !important; display: inline-flex; align-items: center; gap: 5px; }
#detalleModal .cmpd-uuid, #detalleModal .cmpd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; }
#detalleModal .cmpd-num { font-variant-numeric: tabular-nums; }
#detalleModal .cmpd-strong { font-weight: 600; color: var(--rw-ink); }
#detalleModal .cmpd-note { margin: 12px 0 0; }
#detalleModal .cmpd-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
#detalleModal .cmpd-file-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#detalleModal .cmpd-file-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
#detalleModal .rw-file-meta i { font-size: .65rem; margin-left: 2px; }
#detalleModal .cmpd-file--xml .rw-file-icon { background: var(--rw-accent-soft); color: var(--rw-accent); }
#detalleModal .cmpd-file--green .rw-file-icon { background: var(--rw-green-soft); color: var(--rw-green-text); }
#detalleModal .cmpd-file--neutral .rw-file-icon { background: var(--rw-surface-3); color: var(--rw-ink-2); }
#detalleModal .cmpd-preview { display: block; margin-top: 10px; }
#detalleModal .cmpd-preview img { max-width: 100%; max-height: 280px; object-fit: contain; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface); }
#detalleModal .cmpd-meta { margin-top: 8px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#detalleModal .cmpd-gestion { margin-top: 20px; background: var(--rw-surface-2); }
#detalleModal .cmpd-gestion > .rw-note { margin-bottom: 12px; }
#detalleModal .cmpd-gestion-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; }
#detalleModal .cmpd-gestion .form-label { margin-bottom: 6px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
#detalleModal .cmpd-help { display: block; margin-top: 6px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#detalleModal .cmpd-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#detalleModal .cmpd-quick .btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; }
#detalleModal .cmpd-quick--full { margin-top: 14px; }
#detalleModal .cmpd-btn-ok { background: var(--rw-green-soft) !important; border: 1px solid var(--rw-green-border) !important; color: var(--rw-green-text) !important; }
#detalleModal .cmpd-btn-ok:hover { background: #DDF2E6 !important; }
#detalleModal .cmpd-btn-no { background: var(--rw-surface) !important; border: 1px solid var(--rw-red-border) !important; color: var(--rw-red-text) !important; }
#detalleModal .cmpd-btn-no:hover { background: var(--rw-red-soft) !important; }
#detalleModal .cmpd-solicitud { margin: 14px 0 0; }
#detalleModal .cmpd-solicitud-title { font-weight: 600; }
#detalleModal .cmpd-solicitud-motivo { margin-top: 2px; font-size: var(--rw-fs-xs); opacity: .9; }
@media (max-width: 767.98px) {
#detalleModal .cmpd-gestion-grid { grid-template-columns: 1fr; }
#detalleModal .cmpd-hero-side { width: 100%; justify-content: space-between; }
#detalleModal .cmpd .rw-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Modal subir comprobante de gasto (admin) */
#modalSubirComprobanteAdmin .rw-modal-section .form-label { margin-bottom: 6px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
#modalSubirComprobanteAdmin .rw-modal-section .form-text { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#modalSubirComprobanteAdmin #adminComprobanteExtra { margin-top: 4px; }
#modalSubirComprobanteAdmin #adminComprobanteTicket { margin-top: 12px; }
/* ---- Listas en tarjeta (tablet y móvil): filas planas dentro del panel, sin tarjeta-en-tarjeta ---- */
@media (max-width: 1279.98px) {
#ingresos .ing-panel .spa-desktop-table,
#comprobantes .cmp-panel .spa-desktop-table { display: none !important; }
#ingresos .ing-panel .spa-mobile-list,
#comprobantes .cmp-panel .spa-mobile-list {
display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important;
background: transparent !important; border: 0 !important;
}
#ingresos .ing-panel .spa-mobile-card,
#comprobantes .cmp-panel .spa-mobile-card {
padding: 14px 18px !important; margin: 0 !important; gap: 10px;
border: 0 !important; border-bottom: 1px solid var(--rw-border-soft) !important; border-radius: 0 !important;
box-shadow: none !important; background: var(--rw-surface) !important; transform: none !important;
}
#ingresos .ing-panel .spa-mobile-card:last-child,
#comprobantes .cmp-panel .spa-mobile-card:last-child { border-bottom: 0 !important; }
#comprobantes .cmp-panel .spa-mobile-card:hover,
#ingresos .ing-panel .spa-mobile-card:hover { background: var(--rw-surface-2) !important; }
#ingresos .ing-panel .rw-panel-foot,
#comprobantes .cmp-panel .rw-panel-foot { border-top: 1px solid var(--rw-border) !important; }
}
@media (max-width: 767.98px) {
#ingresos .ing-panel .spa-mobile-card,
#comprobantes .cmp-panel .spa-mobile-card { padding: 14px !important; }
#ingresos .ing-panel .rw-panel-foot,
#comprobantes .cmp-panel .rw-panel-foot { justify-content: center; }
#ingresos .ing-panel .rw-panel-foot .spa-pagination-text,
#comprobantes .cmp-panel .rw-panel-foot .spa-pagination-text { width: 100%; text-align: center; }
}
@media (max-width: 1279.98px) {
#ingresos .ing-kpis, #comprobantes .cmp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
#ingresos .ing-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; }
#ingresos .ing-card > .ing-card-top { grid-column: 1 / -1; }
#ingresos .ing-card > .ing-card-meta, #ingresos .ing-card > .ing-card-ref { grid-column: 1; }
#ingresos .ing-card > .ing-card-actions { grid-column: 2; grid-row: 2 / span 2; align-self: end; padding-top: 0; border-top: 0; }
#ingresos .ing-card-actions .btn { flex: 0 0 auto; }
}
/* ------------------------------------------------ Mis órdenes de compra (cliente) */
#mis_ordenes_compra .mo-kpis { margin-top: 0; }
#mis_ordenes_compra .mo-kpis button.rw-kpi:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
#mis_ordenes_compra .mo-panel .rw-panel-title .rw-count { margin-left: 2px; }
#mis_ordenes_compra .mo-table tbody tr { cursor: pointer; }
#mis_ordenes_compra .mo-table td { vertical-align: middle; }
#mis_ordenes_compra .mo-col-orden { white-space: nowrap; }
#mis_ordenes_compra .mo-col-orden .rw-cell-sub, #mis_ordenes_compra .mo-col-proy .rw-cell-sub,
#mis_ordenes_compra .mo-col-estado .rw-cell-sub, #mis_ordenes_compra .mo-total .rw-cell-sub { display: block; margin-top: 2px; }
#mis_ordenes_compra .mo-folio { font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
#mis_ordenes_compra .mo-col-proy { min-width: 180px; max-width: 280px; }
#mis_ordenes_compra .mo-col-proy .rw-cell-title { display: block; }
#mis_ordenes_compra .mo-col-prov { min-width: 150px; max-width: 240px; color: var(--rw-ink-2) !important; }
#mis_ordenes_compra .mo-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
#mis_ordenes_compra .mo-clamp-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mis_ordenes_compra .mo-prov-inline { display: none !important; }
#mis_ordenes_compra .mo-total { font-weight: 600; color: var(--rw-ink) !important; }
#mis_ordenes_compra .mo-total .rw-cell-sub { font-weight: 400; }
#mis_ordenes_compra .mo-col-estado { white-space: nowrap; }
#mis_ordenes_compra .mo-pago { color: var(--rw-muted); }
#mis_ordenes_compra .mo-col-actions { width: 110px; text-align: right; }
#mis_ordenes_compra .mo-chevron { display: inline-flex; width: 16px; justify-content: center; color: var(--rw-faint); font-size: .7rem; margin-left: 4px; }
#mis_ordenes_compra .mo-page-gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--rw-faint); }
#mis_ordenes_compra .mo-foot-text { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#mis_ordenes_compra .mo-foot .spa-pagination-pages { display: flex; gap: 4px; }
#mis_ordenes_compra .mo-card, #balance .bal-card { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
#mis_ordenes_compra .mo-card-top, #balance .bal-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
#mis_ordenes_compra .mo-card-id, #balance .bal-card-id { display: flex; flex-direction: column; gap: 1px; }
#mis_ordenes_compra .mo-card-fecha, #balance .bal-card-fecha { font-size: var(--rw-fs-xs); color: var(--rw-faint); font-variant-numeric: tabular-nums; }
#mis_ordenes_compra .mo-card-main, #balance .bal-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#mis_ordenes_compra .mo-card-title, #balance .bal-card-title { font-weight: 500; color: var(--rw-ink); line-height: 1.35; }
#mis_ordenes_compra .mo-card-sub, #balance .bal-card-sub { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#mis_ordenes_compra .mo-card-foot, #balance .bal-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--rw-border-soft); }
#mis_ordenes_compra .mo-card-total, #balance .bal-card-monto { font-weight: 600; font-size: 1rem; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
#balance .bal-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 1439.98px) {
#mis_ordenes_compra .mo-table .mo-col-prov { display: none; }
#mis_ordenes_compra .mo-prov-inline { display: block !important; }
}
/* ------------------------------------------------ Comprobantes de pago (cliente) */
#balance .bal-btn-subir { white-space: nowrap; }
#balance .bal-hero { margin: 4px 0 16px; background: var(--rw-surface) !important; box-shadow: var(--rw-shadow-xs); }
#balance .bal-hero-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
#balance .bal-hero-icon {
flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 11px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: .9rem;
}
#balance .bal-hero-sub { margin-top: 2px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#balance .bal-hero-stats { display: flex; gap: 0; }
#balance .bal-stat { display: flex; flex-direction: column; gap: 2px; padding: 2px 18px; border-left: 1px solid var(--rw-border); min-width: 96px; }
#balance .bal-stat-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rw-fs-xs); color: var(--rw-muted); white-space: nowrap; }
#balance .bal-stat-value { font-size: 1.15rem; font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
#balance .bal-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
#balance .bal-dot--orange { background: var(--rw-orange); }
#balance .bal-dot--green { background: var(--rw-green); }
#balance .bal-dot--red { background: var(--rw-red); }
#balance .bal-panel .rw-panel-title .rw-count { margin-left: 2px; }
#balance .bal-table tbody tr { cursor: pointer; }
#balance .bal-table td { vertical-align: middle; }
#balance .bal-col-folio { white-space: nowrap; }
#balance .bal-col-folio .rw-cell-sub, #balance .bal-col-prov .rw-cell-sub { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
#balance .bal-folio { font-weight: 600; color: var(--rw-accent); font-variant-numeric: tabular-nums; }
#balance .bal-col-proy { min-width: 180px; max-width: 280px; }
#balance .bal-col-proy .rw-cell-title { display: block; }
#balance .bal-col-prov { min-width: 150px; max-width: 240px; color: var(--rw-ink-2) !important; }
#balance .bal-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
#balance .bal-oc-line { margin-top: 4px; }
#balance .bal-oc { height: 20px; font-size: 11px; }
#balance .bal-sin-oc { font-size: var(--rw-fs-xs); color: var(--rw-faint); }
#balance .bal-monto { font-weight: 600; color: var(--rw-ink) !important; }
#balance .bal-col-actions { width: 90px; text-align: right; }
#balance .bal-col-actions .rw-icon-btn, #balance .bal-card .rw-icon-btn { text-decoration: none; }
#balance .bal-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
#balance .bal-foot:empty { display: none; }
#balance .bal-foot .spa-pagination-text, #balance .bal-foot-text { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#balance .bal-foot .spa-pagination-pages { display: flex; gap: 4px; align-items: center; }
#balance .bal-page-gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--rw-faint); }
@media (max-width: 991.98px) {
#balance .bal-hero { flex-direction: column; align-items: stretch; }
#balance .bal-hero-stats { border-top: 1px solid var(--rw-border); padding-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#balance .bal-stat { padding: 0 10px; min-width: 0; }
#balance .bal-stat:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 767.98px) {
#balance .bal-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
#balance .bal-stat:nth-child(3) { border-left: 0; padding-left: 0; }
#balance .bal-btn-subir { width: 100%; justify-content: center; }
}
/* Listas de cliente: tarjetas planas dentro del panel (tablet y móvil) */
@media (max-width: 1199.98px) {
#mis_ordenes_compra .mo-panel .spa-desktop-table,
#balance .bal-panel .spa-desktop-table { display: none !important; }
#mis_ordenes_compra .mo-panel .spa-mobile-list,
#balance .bal-panel .spa-mobile-list {
display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important;
background: transparent !important; border: 0 !important;
}
#mis_ordenes_compra .mo-panel .oc-mobile-card,
#balance .bal-panel .oc-mobile-card {
padding: 14px 18px !important; margin: 0 !important;
border: 0 !important; border-bottom: 1px solid var(--rw-border-soft) !important; border-radius: 0 !important;
box-shadow: none !important; background: var(--rw-surface) !important; transform: none !important;
}
#mis_ordenes_compra .mo-panel .oc-mobile-card:last-child,
#balance .bal-panel .oc-mobile-card:last-child { border-bottom: 0 !important; }
#mis_ordenes_compra .mo-panel .oc-mobile-card:hover,
#balance .bal-panel .oc-mobile-card:hover { background: var(--rw-surface-2) !important; }
#mis_ordenes_compra .mo-foot, #balance .bal-foot { border-top: 1px solid var(--rw-border) !important; }
}
@media (max-width: 767.98px) {
#mis_ordenes_compra .mo-panel .oc-mobile-card,
#balance .bal-panel .oc-mobile-card { padding: 14px !important; }
#mis_ordenes_compra .mo-foot, #balance .bal-foot { justify-content: center; }
#mis_ordenes_compra .mo-foot-text, #balance .bal-foot .spa-pagination-text { width: 100%; text-align: center; }
}
@media (max-width: 1279.98px) {
#mis_ordenes_compra .mo-kpis.rw-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
#mis_ordenes_compra .mo-kpis .rw-kpi { padding: 14px; }
#mis_ordenes_compra .mo-kpis .rw-kpi-top { gap: 8px; }
#mis_ordenes_compra .mo-kpis .rw-kpi-icon { flex-basis: 28px; width: 28px; height: 28px; }
#mis_ordenes_compra .mo-kpis .rw-kpi-label { font-size: var(--rw-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mis_ordenes_compra .mo-kpis .rw-kpi-sub { font-size: var(--rw-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 991.98px) {
#mis_ordenes_compra .mo-kpis.rw-kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#mis_ordenes_compra .mo-kpis .rw-kpi:first-child { grid-column: 1 / -1; }
}
/* Modal de detalle (cliente): OC y comprobante */
#detalleRegistroModal .bxd-hero { margin-bottom: 12px; }
#detalleRegistroModal .bxd-hero-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
#detalleRegistroModal .bxd-hero-icon {
flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 11px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: .9rem;
}
#detalleRegistroModal .bxd-hero-txt { min-width: 0; }
#detalleRegistroModal .bxd-hero-id { font-size: 1.15rem; font-weight: 600; color: var(--rw-ink); letter-spacing: -0.01em; line-height: 1.2; }
#detalleRegistroModal .bxd-hero-sub { font-size: var(--rw-fs-xs); color: var(--rw-muted); margin-top: 2px; }
#detalleRegistroModal .bxd-hero-side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#detalleRegistroModal .bxd-hero-total { text-align: right; }
#detalleRegistroModal .bxd-hero-total .rw-hero-value { font-size: 1.35rem; }
#detalleRegistroModal .bxd .rw-sec-title:first-of-type { margin-top: 6px; }
#detalleRegistroModal .bxd .rw-dl { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
#detalleRegistroModal .bxd-dl-full { grid-column: 1 / -1; }
#detalleRegistroModal .bxd-dl-sub { display: block; font-size: var(--rw-fs-xs); font-weight: 400; color: var(--rw-muted); }
#detalleRegistroModal .bxd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
#detalleRegistroModal .bxd-num { font-variant-numeric: tabular-nums; }
#detalleRegistroModal .bxd-strong { font-weight: 600; color: var(--rw-ink); }
#detalleRegistroModal .bxd-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
#detalleRegistroModal .bxd-file-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#detalleRegistroModal .bxd-file-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
#detalleRegistroModal .rw-file-meta i { font-size: .65rem; margin-left: 2px; }
#detalleRegistroModal .bxd-file--green .rw-file-icon { background: var(--rw-green-soft); color: var(--rw-green-text); }
#detalleRegistroModal .bxd-file--neutral .rw-file-icon { background: var(--rw-surface-3); color: var(--rw-ink-2); }
#detalleRegistroModal .bxd-empty { padding: 12px 14px; border: 1px dashed var(--rw-border-strong); border-radius: var(--rw-r-md); font-size: var(--rw-fs-sm); color: var(--rw-faint); }
#detalleRegistroModal .bxd-meta { margin-top: 8px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#detalleRegistroModal .bxd-note { margin: 12px 0 0; }
#detalleRegistroModal .bxd-files + .bxd-note { margin-top: 10px; }
#detalleRegistroModal .bxd-entrega { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; background: var(--rw-surface-2); }
#detalleRegistroModal .bxd-entrega .rw-modal-section-title { margin-bottom: 6px; }
#detalleRegistroModal .bxd-entrega-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--rw-fs-sm); color: var(--rw-ink-2); margin-bottom: 4px; }
#detalleRegistroModal .bxd-help { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
/* Formulario de edición de OC */
#detalleRegistroModal .bxe-form .rw-modal-section .form-label { margin-bottom: 6px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
#detalleRegistroModal .bxe-items-head,
#detalleRegistroModal .bxe-item { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 32px; gap: 8px; align-items: center; }
#detalleRegistroModal .bxe-items-head { margin-bottom: 6px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#detalleRegistroModal .bxe-item { margin-bottom: 8px; }
#detalleRegistroModal .bxe-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (max-width: 767.98px) {
#detalleRegistroModal .bxd-hero-side { width: 100%; justify-content: space-between; }
#detalleRegistroModal .bxd .rw-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#detalleRegistroModal .bxd-files { grid-template-columns: 1fr; }
#detalleRegistroModal .bxe-items-head { display: none; }
#detalleRegistroModal .bxe-item { grid-template-columns: 1fr 1fr 32px; padding-bottom: 10px; border-bottom: 1px solid var(--rw-border-soft); }
#detalleRegistroModal .bxe-item .oc-descripcion { grid-column: 1 / -1; }
#detalleRegistroModal .bxe-actions .btn { width: 100%; }
}
/* ------------------------------------------------ Subir comprobante (cliente) */
#comprobante_pago .cmp-layout { gap: 0 !important; }
#comprobante_pago .cpx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
#comprobante_pago .cpx-panel { margin: 0; }
#comprobante_pago .cpx-step { padding: 18px 20px; border-bottom: 1px solid var(--rw-border-soft); }
#comprobante_pago .cpx-step-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
#comprobante_pago .cpx-step-num {
flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: var(--rw-fs-sm); font-weight: 600;
}
#comprobante_pago .cpx-step-num--sub { background: var(--rw-surface-3); color: var(--rw-ink-2); font-size: .7rem; }
#comprobante_pago .cpx-step-title { font-size: var(--rw-fs-lg); font-weight: 600; color: var(--rw-ink); line-height: 1.3; }
#comprobante_pago .cpx-opt { font-weight: 400; color: var(--rw-muted); font-size: var(--rw-fs-sm); }
#comprobante_pago .cpx-step-sub { font-size: var(--rw-fs-sm); color: var(--rw-muted); margin-top: 1px; }
#comprobante_pago .cpx-step .form-label { margin-bottom: 6px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
#comprobante_pago .cpx-help { display: block; margin-top: 6px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#comprobante_pago .cpx-ia { margin-top: 10px; padding: 9px 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface-2); font-size: var(--rw-fs-sm) !important; }
/* Bloques condicionales: sin fondo de color, como un paso más del formulario */
#comprobante_pago .comprobante-extra-fields.cpx-step,
#comprobante_pago .comprobante-ticket-fields.cpx-step { display: none; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--rw-border-soft) !important; border-radius: 0 !important; background: var(--rw-surface) !important; animation: bxFadeIn var(--rw-dur) var(--rw-ease); }
#comprobante_pago .comprobante-extra-fields.cpx-step.is-visible,
#comprobante_pago .comprobante-ticket-fields.cpx-step.is-visible { display: block; }
#comprobante_pago .cpx-foot { justify-content: flex-end; background: var(--rw-surface-2); }
#comprobante_pago .cpx-submit { min-width: 200px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#comprobante_pago .cpx-ocinfo { margin-top: 12px; }
#comprobante_pago .cpx-oc { padding: 14px 16px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface-2); animation: bxFadeIn var(--rw-dur) var(--rw-ease); }
#comprobante_pago .cpx-oc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
#comprobante_pago .cpx-oc-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
#comprobante_pago .cpx-oc-prov { font-size: var(--rw-fs-sm); color: var(--rw-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#comprobante_pago .cpx-oc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#comprobante_pago .cpx-oc-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface); min-width: 0; }
#comprobante_pago .cpx-oc-label { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#comprobante_pago .cpx-oc-value { font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#comprobante_pago .cpx-oc-value.is-neg { color: var(--rw-red-text); }
#comprobante_pago .cpx-oc-bar { height: 6px; margin-top: 12px; border-radius: 999px; background: var(--rw-surface-3); overflow: hidden; }
#comprobante_pago .cpx-oc-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--rw-accent); transition: width var(--rw-dur-slow) var(--rw-ease); }
#comprobante_pago .cpx-oc-bar.is-over > span { background: var(--rw-red); }
#comprobante_pago .cpx-oc-meta { margin-top: 8px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#comprobante_pago .cpx-oc-meta strong { color: var(--rw-ink-2); font-weight: 500; }
#comprobante_pago .cpx-aside .rw-panel { margin: 0; }
#comprobante_pago .cpx-aside .rw-panel-title i { color: var(--rw-muted); font-size: .85rem; }
#comprobante_pago .cpx-steps-list { list-style: none; margin: 0; padding: 14px 18px 4px; display: flex; flex-direction: column; gap: 12px; }
#comprobante_pago .cpx-steps-list li { display: flex; gap: 10px; font-size: var(--rw-fs-sm); color: var(--rw-ink-2); line-height: 1.45; }
#comprobante_pago .cpx-li-num { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--rw-surface-3); color: var(--rw-ink-2); font-size: var(--rw-fs-xs); font-weight: 600; }
#comprobante_pago .cpx-note.comprobante-note { margin: 12px 18px 18px; padding: 11px 14px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface-2); font-size: var(--rw-fs-xs); color: var(--rw-muted); line-height: 1.5; }
@media (max-width: 1199.98px) {
#comprobante_pago .cpx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
#comprobante_pago .cpx-step { padding: 16px 14px; }
#comprobante_pago .cpx-oc-grid { grid-template-columns: 1fr 1fr; }
#comprobante_pago .cpx-oc-grid > div:last-child { grid-column: 1 / -1; }
#comprobante_pago .cpx-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
#comprobante_pago .cpx-oc, #comprobante_pago .comprobante-extra-fields.cpx-step,
#comprobante_pago .comprobante-ticket-fields.cpx-step { animation: none; }
#comprobante_pago .cpx-oc-bar > span { transition: none; }
}
#balance .bal-foot.balance-pagination-container { margin-top: 0 !important; }
#balance .bal-foot .comprobantes-page-controls { margin: 0 !important; padding: 0 !important; border: 0 !important; }
#comprobante_pago .cpx-grid > * { min-width: 0; }
#comprobante_pago #comprobanteOrden { max-width: 100%; text-overflow: ellipsis; }
/* ===== Secciones v2 · grupo C ===== */
/* ============================================================================
SECCIONES v2 · C — Catálogo Proveedores, Proveedores por aprobar, Proyectos,
Contratos, Usuarios (admin) y Dar de alta proveedor (cliente) + sus modales.
Prefijo propio: .cp-* (página: .cp-page, modales: .cp-modal)
============================================================================ */
/* ---------- Encabezado de página ---------- */
.cp-page .spa-section-head { margin-bottom: 20px !important; }
.cp-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-head-actions .btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cp-page .rw-kpis { margin-bottom: 16px; }
.cp-page .alf-bar { margin-bottom: 16px !important; }
.cp-loading-text { margin: 12px 0 0; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.cp-page .rw-note { margin-top: 0; }
/* ---------- Panel de listado ---------- */
.cp-panel .rw-panel-head > div:first-child { min-width: 0; }
.cp-panel .spa-desktop-table { overflow-x: auto; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.cp-panel > .rw-empty, .cp-panel #proyectosAdminContainer > .rw-empty, .cp-panel #contratosAdminContainer > .rw-empty { border: 0; }
.cp-table { width: 100%; margin: 0; border-collapse: collapse; }
.cp-table thead th { padding: 10px 16px !important; border-bottom: 1px solid var(--rw-border) !important; }
.cp-table tbody td { padding: 12px 16px !important; vertical-align: middle; border-bottom: 1px solid var(--rw-border-soft) !important; color: var(--rw-text) !important; }
.cp-table tbody tr:last-child td { border-bottom: 0 !important; }
.cp-table th.rw-num, .cp-table td.rw-num { text-align: right !important; }
.cp-table td.rw-num .rw-actions { justify-content: flex-end; }
.cp-table .rw-cell-main { min-width: 220px; }
.cp-table .rw-cell-title { font-size: var(--rw-fs-md); }
.cp-table .rw-cell-sub em { font-style: normal; color: var(--rw-faint); }
.cp-row-link { cursor: pointer; transition: background-color var(--rw-dur-fast) ease; }
.cp-row-link:hover td { background: var(--rw-surface-2) !important; }
.cp-row-link:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: -2px; }
.cp-table tr.is-pendiente td:first-child { box-shadow: inset 3px 0 0 var(--rw-orange); }
.cp-table .rw-avatar i { font-size: .8rem; }
.cp-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.3; }
.cp-num-stack { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.3; }
.cp-strong { font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
.cp-mono-sub { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .01em; }
.cp-uso { min-width: 32px; justify-content: center; font-variant-numeric: tabular-nums; }
.cp-uso.is-on { background: var(--rw-accent-soft); color: var(--rw-accent); }
.cp-doc-link { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--rw-border); border-radius: 999px; font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-ink-2); text-decoration: none; background: var(--rw-surface); }
.cp-doc-link:hover { border-color: var(--rw-accent-border); background: var(--rw-accent-soft); color: var(--rw-accent); }
.cp-page .rw-icon-btn.spa-action-btn-ver { width: 32px; height: 32px; }
/* Pie del panel con paginación */
.cp-foot { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.cp-foot-info { font-variant-numeric: tabular-nums; }
.cp-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cp-pages .spa-page-btn { height: 32px; min-width: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; }
.cp-pages .spa-page-btn:disabled { opacity: .45; cursor: default; }
.cp-pages .spa-page-btn:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
.cp-pages .cp-per-page { width: auto; height: 32px; padding: 0 30px 0 10px !important; margin-right: 6px; font-size: var(--rw-fs-sm) !important; border-radius: var(--rw-r-sm) !important; }
.cp-ellipsis { padding: 0 4px; color: var(--rw-faint); }
/* Menú de acciones de usuario */
.cp-user-menu { min-width: 200px; font-size: var(--rw-fs-sm); }
.cp-user-menu .dropdown-item { display: flex; align-items: center; gap: 10px; }
.cp-user-menu .dropdown-item i { width: 14px; text-align: center; color: var(--rw-faint); }
.cp-user-menu .dropdown-item i.cp-ic-ok { color: var(--rw-green-text); }
.cp-user-menu .dropdown-item i.cp-ic-danger { color: var(--rw-red-text); }
.cp-user-menu .dropdown-header { font-size: var(--rw-fs-xs); text-transform: none; letter-spacing: 0; color: var(--rw-muted); }
#usuarios .rw-actions .dropdown { display: inline-flex; }
/* ---------- Tarjetas móviles ---------- */
.cp-mcard { display: flex !important; flex-direction: column; gap: 12px !important; padding: 14px !important; cursor: pointer; height: auto !important; }
#usuarios .cp-mcard { cursor: default; }
.cp-mcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cp-mcard-head .rw-cell-main { flex: 1 1 auto; min-width: 0; }
.cp-mcard-head .rw-cell-title, .cp-mcard-head .rw-cell-sub { overflow-wrap: anywhere; }
.cp-mcard-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--rw-border-soft); }
.cp-mcard-dl > div { min-width: 0; }
.cp-mcard-dl dt { margin: 0 0 3px; font-size: var(--rw-fs-xs); font-weight: 400; color: var(--rw-muted); }
.cp-mcard-dl dd { margin: 0; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink); overflow-wrap: anywhere; }
.cp-mcard-dl .rw-mono { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cp-mcard-amount { display: flex; flex-direction: column; gap: 2px; }
.cp-mcard-amount span { font-size: 1.15rem; font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
.cp-mcard-amount small { font-size: var(--rw-fs-xs); color: var(--rw-faint); }
.cp-mcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--rw-border-soft); }
.cp-mcard-meta { min-width: 0; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.cp-mcard-meta i { margin-right: 4px; }
.cp-mcard-foot .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 768px) {
/* Panel sin marco en móvil: las tarjetas ya se separan solas (sin doble tarjeta) */
.cp-page .cp-panel { border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; }
.cp-page .cp-panel > .rw-panel-head { padding: 0 0 12px !important; border-bottom: 0 !important; }
.cp-page .cp-panel .spa-mobile-list { padding: 0 !important; gap: 10px !important; background: transparent !important; border: 0 !important; }
.cp-page .cp-panel .cp-foot { padding: 14px 0 0 !important; border-top: 0 !important; justify-content: center; }
.cp-page .cp-panel .cp-foot-info { width: 100%; text-align: center; }
.cp-page .cp-panel .cp-pages { justify-content: center; }
.cp-page .cp-panel > .rw-empty { border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface); }
.cp-mcard { border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-lg) !important; background: var(--rw-surface) !important; box-shadow: var(--rw-shadow-xs) !important; }
.cp-head-actions { width: 100%; }
.cp-head-actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* ---------- Modales (comunes) ---------- */
.cp-modal .modal-body > .rw-modal-section + .rw-modal-section,
.cp-modal .modal-body > .rw-hero + .rw-modal-section,
.cp-modal .modal-body > .rw-kpis + .rw-modal-intro + .rw-panel { margin-top: 12px; }
.cp-modal .rw-modal-section { background: var(--rw-surface); }
.cp-modal .rw-modal-section-title .rw-count { height: 20px; padding: 0 8px; margin-left: 2px; }
.cp-modal .rw-hero .rw-avatar { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; font-size: var(--rw-fs-sm); }
.cp-hero-name { display: block; font-size: 1.05rem; font-weight: 600; color: var(--rw-ink); letter-spacing: -0.01em; line-height: 1.3; }
.cp-hero-sub { margin-top: 4px; font-size: var(--rw-fs-sm); color: var(--rw-muted); font-variant-numeric: tabular-nums; }
.cp-hero-side { text-align: right; }
.cp-hero-side-value { margin-top: 2px; font-size: 1.15rem; font-weight: 600; color: var(--rw-green-text); font-variant-numeric: tabular-nums; }
.cp-dl-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: var(--rw-fs-sm) !important; letter-spacing: .01em; }
.cp-input-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; letter-spacing: .02em; }
.cp-upper { text-transform: uppercase; }
.cp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cp-section-head .rw-modal-section-title { margin: 0; }
.cp-section-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.cp-loading-inline { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.cp-modal .modal-footer .btn { display: inline-flex; align-items: center; gap: 6px; }
.cp-modal .rw-modal-intro i { margin-right: 4px; }
.cp-help { display: block; margin-top: 6px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.cp-help-top { margin: 0 0 10px; font-size: var(--rw-fs-sm); }
.cp-note-top { margin: 12px 0 0 !important; }
.cp-dialog-sm { max-width: 460px; }
.cp-dialog-md { max-width: 580px; }
.cp-modal .catalog-modal-grid.cp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Tablas dentro de modales */
.cp-table-wrap { border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); overflow: hidden; overflow-x: auto; background: var(--rw-surface); }
.cp-table-compact thead th { padding: 9px 12px !important; }
.cp-table-compact tbody td { padding: 10px 12px !important; font-size: var(--rw-fs-sm) !important; }
.cp-table-compact tfoot td { padding: 10px 12px !important; font-size: var(--rw-fs-sm); font-weight: 600; color: var(--rw-ink); background: var(--rw-surface-2); border-top: 1px solid var(--rw-border); font-variant-numeric: tabular-nums; }
.cp-table-compact tfoot td.rw-num { text-align: right; }
.cp-bar-cell { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cp-bar { position: relative; display: inline-block; width: 90px; height: 6px; border-radius: 999px; background: var(--rw-surface-3); overflow: hidden; }
.cp-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--rw-accent); }
.cp-bar-pct { min-width: 44px; font-size: var(--rw-fs-xs); color: var(--rw-muted); font-variant-numeric: tabular-nums; }
/* Archivos */
.cp-file-list { display: grid; gap: 8px; }
.cp-file-list:empty { display: none; }
.cp-modal .rw-file .rw-icon-btn { flex: 0 0 30px; width: 30px; height: 30px; }
.cp-modal a.rw-file-name, .cp-alta a.rw-file-name { color: var(--rw-ink); text-decoration: none; }
.cp-modal a.rw-file-name:hover { color: var(--rw-accent); text-decoration: underline; }
.rw-file .rw-file-icon .fa-file-image { color: #3E63DD; }
.cp-modal .rw-file-icon:has(.fa-file-image) { background: #EEF3FF; }
.cp-file-pend { border-style: dashed; background: var(--rw-surface-2); }
.cp-file-none { font-size: var(--rw-fs-xs); color: var(--rw-faint); }
.cp-file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-file-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 9px; border: 1px solid var(--rw-border); border-radius: 999px; font-size: var(--rw-fs-xs); background: var(--rw-surface-2); }
.cp-file-chip a { color: var(--rw-ink-2); text-decoration: none; }
.cp-file-chip a:hover { color: var(--rw-accent); }
.cp-file-chip a i { color: var(--rw-faint); margin-right: 2px; }
.cp-file-chip button { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--rw-faint); cursor: pointer; font-size: .7rem; }
.cp-file-chip button:hover { background: var(--rw-red-soft); color: var(--rw-red-text); }
.cp-file-chip button:focus-visible { outline: 2px solid var(--rw-accent); }
.cp-clips { display: inline-flex; align-items: center; gap: 6px; }
.cp-clips a { color: var(--rw-accent); text-decoration: none; }
/* Zonas para soltar archivos */
.cp-dropzone {
display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
min-height: 0 !important; padding: 18px 16px !important; margin: 0 !important; text-align: center;
border: 1.5px dashed var(--rw-border-strong) !important; border-radius: var(--rw-r-lg) !important;
background: var(--rw-surface-2) !important; cursor: pointer;
transition: border-color var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease;
}
.cp-dropzone:hover, .cp-dropzone.dragover { border-color: var(--rw-accent) !important; background: var(--rw-accent-soft) !important; }
.cp-dropzone:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
.cp-dropzone .cp-dropzone-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; border-radius: 10px; background: var(--rw-surface); border: 1px solid var(--rw-border); }
.cp-dropzone .cp-dropzone-icon i { font-size: .95rem !important; color: var(--rw-accent) !important; margin: 0 !important; }
.cp-dropzone .cp-dropzone-title { font-size: var(--rw-fs-sm) !important; font-weight: 500 !important; color: var(--rw-ink) !important; }
.cp-dropzone .cp-dropzone-title u { color: var(--rw-accent); text-decoration-color: var(--rw-accent-border); text-underline-offset: 2px; }
.cp-dropzone small, .cp-dropzone .dnd-subtitle { font-size: var(--rw-fs-xs) !important; color: var(--rw-muted) !important; }
.cp-dropzone-sm { padding: 14px !important; }
/* Filas de documentos (proveedor: admin y cliente) */
.cp-doc-list { display: grid; gap: 8px; margin: 10px 0 0; }
.cp-doc-list:empty { display: none; }
#proveedorAdminDocsActuales.cp-doc-list { margin: 0 0 10px; }
.cp-doc-list .prov-doc-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px 8px 8px !important; border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-md) !important; background: var(--rw-surface) !important; }
.cp-doc-list .prov-doc-row .prov-doc-file { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--rw-red-soft); color: var(--rw-red-text) !important; font-size: .85rem !important; }
.cp-doc-list .prov-doc-row .prov-doc-file.fa-file-image { background: #EEF3FF; color: #3E63DD !important; }
.cp-doc-list .prov-doc-row input[type="text"] { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px !important; border: 1px solid transparent !important; border-radius: var(--rw-r-sm) !important; background: transparent !important; font-size: var(--rw-fs-sm) !important; font-weight: 500; color: var(--rw-ink) !important; box-shadow: none !important; }
.cp-doc-list .prov-doc-row input[type="text"]:hover { border-color: var(--rw-border) !important; }
.cp-doc-list .prov-doc-row input[type="text"]:focus { border-color: var(--rw-accent) !important; background: var(--rw-surface) !important; box-shadow: 0 0 0 3px var(--rw-accent-ring) !important; }
.cp-doc-list .prov-doc-row .prov-doc-meta { flex: 0 0 auto; font-size: var(--rw-fs-xs) !important; color: var(--rw-faint) !important; text-decoration: none; white-space: nowrap; }
.cp-doc-list .prov-doc-row a.prov-doc-meta { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-sm); color: var(--rw-ink-2) !important; }
.cp-doc-list .prov-doc-row a.prov-doc-meta:hover { background: var(--rw-surface-2); }
.cp-doc-list .prov-doc-row .prov-doc-eliminar { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-sm); color: var(--rw-red-text) !important; cursor: pointer; }
.cp-doc-list .prov-doc-row .prov-doc-eliminar input { margin: 0; accent-color: var(--rw-red); }
.cp-doc-list .prov-doc-row .prov-doc-del { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-sm); background: var(--rw-surface) !important; color: var(--rw-muted) !important; cursor: pointer; }
.cp-doc-list .prov-doc-row .prov-doc-del:hover { background: var(--rw-red-soft) !important; border-color: var(--rw-red-border) !important; color: var(--rw-red-text) !important; }
.cp-doc-list .prov-doc-row.is-marcado { background: var(--rw-red-soft) !important; border-color: var(--rw-red-border) !important; }
.cp-doc-list .prov-doc-row.is-marcado input[type="text"] { text-decoration: line-through; color: var(--rw-red-text) !important; }
.cp-doc-empty { display: block; margin: 0 0 10px; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
/* Nota REPSE */
.cp-docs-note { margin: 0 0 12px !important; display: flex !important; color: var(--rw-ink-2) !important; background: var(--rw-surface-2) !important; border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-md) !important; padding: 12px 14px !important; font-size: var(--rw-fs-sm) !important; }
.cp-docs-note > i { color: var(--rw-accent) !important; margin-top: 3px !important; }
.cp-docs-note strong { display: block; margin-bottom: 2px; color: var(--rw-ink); font-weight: 600; }
.cp-docs-note ul { margin: 8px 0 0; padding-left: 18px; columns: 2; column-gap: 24px; }
.cp-docs-note ul li { margin: 0 0 3px; break-inside: avoid; color: var(--rw-text); }
/* Barra "Leer constancia con IA" */
.cp-ia-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--rw-accent-border); border-radius: var(--rw-r-lg); background: var(--rw-accent-soft); }
.cp-ia-icon { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--rw-surface); color: var(--rw-accent); border: 1px solid var(--rw-accent-border); }
.cp-ia-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-ia-text strong { font-size: var(--rw-fs-sm); font-weight: 600; color: var(--rw-ink); }
.cp-ia-text small { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.cp-ia-text > div { margin-top: 6px; font-size: var(--rw-fs-sm); }
.cp-ia-bar .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: var(--rw-surface) !important; }
/* Interruptor con descripción */
.cp-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cp-switch-row .form-check { margin: 0; padding-left: 2.6em; min-height: 0; }
.cp-switch-row .form-check-input { width: 2.4em; height: 1.3em; margin-top: 0; cursor: pointer; }
.cp-switch-title { display: block; margin: 0; font-size: var(--rw-fs-sm); font-weight: 600; color: var(--rw-ink); cursor: pointer; }
.cp-switch-sub { margin-top: 2px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.cp-switch-sub:empty { display: none; }
.cp-switch-inline { margin-top: 12px; padding: 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface-2); }
/* Lista de proyectos con casilla (almacenistas) */
.cp-check-list { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface); }
.cp-check-row { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 8px 10px; border-radius: var(--rw-r-sm); cursor: pointer; transition: background-color var(--rw-dur-fast) ease; }
.cp-check-row:hover { background: var(--rw-surface-2); }
.cp-check-row:has(input:checked) { background: var(--rw-accent-soft); }
.cp-check-row .form-check-input { flex: 0 0 auto; margin: 0; cursor: pointer; }
.cp-check-name { min-width: 0; font-size: var(--rw-fs-sm); color: var(--rw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-check-empty { padding: 10px; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#almMProyectosWrap { transition: opacity var(--rw-dur) ease; }
/* Pie de modal con rango de fechas */
.cp-footer-split { justify-content: space-between !important; gap: 10px; flex-wrap: wrap; }
.cp-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-range-label { font-size: var(--rw-fs-sm); color: var(--rw-muted); white-space: nowrap; }
.cp-range-label i { margin-right: 4px; }
.cp-range .form-control { width: 150px; }
.cp-range-sep { color: var(--rw-faint); }
.cp-footer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.cp-modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cp-modal-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
/* Fianzas en el modal de gasto */
.cp-fianza-list { display: grid; gap: 8px; }
.cp-fianza { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface); }
.cp-fianza-main { min-width: 0; flex: 1 1 auto; }
.cp-fianza-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cp-fianza-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.cp-fianza-meta i { margin-right: 3px; }
.cp-fianza-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.cp-fianza-monto { font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Reporte global */
.cp-kpis-modal { margin-bottom: 8px !important; }
.cp-kpis-modal .rw-kpi-value { font-size: 1.25rem; }
.cp-modal .cp-rep-proj { margin: 0 0 12px; box-shadow: none; }
.cp-rep-proj .rw-panel-head { padding: 12px 14px; }
.cp-rep-proj .cp-table-wrap { border: 0; border-radius: 0; }
/* Contrato: filas, mini KPIs, subtarjeta de factura */
.cp-contrato-rows { display: grid; gap: 10px; }
.cp-contrato-row { padding: 12px !important; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface-2); }
.cp-inline-field { display: flex; gap: 8px; align-items: center; }
.cp-inline-field .rw-icon-btn { flex: 0 0 38px; width: 38px; height: 38px; }
.cp-add-row { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; }
#contratoAdjuntosPanel .rw-modal-intro { margin-bottom: 10px; }
#contratoArchivoLista, #contratoFacturaArchivosLista { margin-top: 10px; }
.cp-mini-kpi span i { background: var(--rw-faint); }
.cp-mini-kpi--accent span i { background: var(--rw-accent); }
.cp-mini-kpi--green span i { background: var(--rw-green); }
.cp-mini-kpi--orange span i { background: var(--rw-orange); }
.cp-mini-kpi strong { color: var(--rw-ink); }
.cp-fact-kpis { margin-bottom: 4px; }
.cp-sec-sm { margin: 16px 0 8px !important; font-size: var(--rw-fs-sm) !important; }
.cp-subcard { margin-top: 14px; padding: 14px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface-2); }
.cp-subcard-title { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--rw-border); font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); }
.cp-subcard-title i { color: var(--rw-accent); font-size: .8rem; }
.cp-field-group-title { margin: 14px 0 8px; font-size: var(--rw-fs-xs); font-weight: 600; color: var(--rw-muted); }
.cp-subcard .form-label { font-size: var(--rw-fs-xs) !important; margin-bottom: 4px; }
.cp-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cp-grid-ded { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 10px; }
.cp-mt { margin-top: 10px; }
.cp-subcard-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.cp-subcard-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
/* Vista de contrato: progreso */
.cp-progress-group { margin-top: 14px; }
.cp-progress-label { display: flex; justify-content: space-between; margin: 10px 0 5px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.cp-progress-label strong { font-weight: 600; color: var(--rw-ink-2); font-variant-numeric: tabular-nums; }
.cp-progress { position: relative; height: 6px; border-radius: 999px; background: var(--rw-surface-3); overflow: hidden; }
.cp-progress > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--rw-accent); transition: width var(--rw-dur-slow) var(--rw-ease); }
.cp-progress--green > span { background: var(--rw-green); }
#contratoVistaModal .cv-kpis, #contratoAdminModal .cv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 767.98px) {
.cp-modal .catalog-modal-grid.cp-grid-3, .cp-grid-ded { grid-template-columns: 1fr; }
#contratoVistaModal .cv-kpis, #contratoAdminModal .cv-kpis { grid-template-columns: 1fr; }
.cp-modal .rw-modal-section { padding: 14px; }
.cp-ia-bar { flex-wrap: wrap; }
.cp-ia-bar .btn { width: 100%; justify-content: center; }
.cp-docs-note ul { columns: 1; }
.cp-hero-side { text-align: left; }
.cp-fianza { flex-direction: column; }
.cp-fianza-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
.cp-range .form-control { width: calc(50% - 16px); flex: 1 1 120px; }
.cp-footer-actions { width: 100%; margin-left: 0; }
.cp-footer-actions .btn { flex: 1 1 auto; justify-content: center; }
.cp-bar { width: 50px; }
.cp-doc-list .prov-doc-row { flex-wrap: wrap; }
.cp-doc-list .prov-doc-row input[type="text"] { flex-basis: calc(100% - 80px); }
}
/* ---------- Cliente · Dar de alta proveedor ---------- */
.cp-alta .cp-form-section { margin-bottom: 14px; overflow: visible; }
.cp-alta .rw-panel-title { gap: 10px; }
.cp-step-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: .78rem; }
.cp-alta .rw-panel-sub { padding-left: 38px; }
.cp-alta .rw-panel-body { padding: 18px; }
.cp-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.cp-form-grid > div { min-width: 0; }
.cp-form-grid .cp-col-2 { grid-column: span 2; }
.cp-alta .form-label { font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); margin-bottom: 6px; }
.cp-optional { font-weight: 400; color: var(--rw-faint); }
.cp-docs-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cp-alta .cp-docs-note { margin: 0 !important; }
.cp-alta .cp-docs-note ul { columns: 1; }
.cp-alta .cp-dropzone { padding: 26px 16px !important; }
.cp-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--rw-border-soft); }
.cp-form-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; }
.cp-alta #constanciaIaStatus { margin-top: 6px; font-size: var(--rw-fs-sm); }
@media (max-width: 991.98px) {
.cp-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-docs-layout { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
.cp-form-grid { grid-template-columns: 1fr; }
.cp-form-grid .cp-col-2 { grid-column: auto; }
.cp-alta .rw-panel-sub { padding-left: 0; }
.cp-alta .rw-panel-body { padding: 14px; }
.cp-form-actions { flex-direction: column-reverse; align-items: stretch; }
.cp-form-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.cp-row-link, .cp-dropzone, .cp-check-row, .cp-progress > span { transition: none !important; }
}
/* Contratos: proyecto + clave en la misma línea secundaria */
.cp-sub-row { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cp-sub-row .rw-mono { height: 18px; padding: 0 5px; font-size: 11px; }
#contratos .cp-table .rw-cell-main { min-width: 240px; }
#contratos .cp-num-stack .rw-cell-sub { line-height: 1.45; }
.cp-nodocs { font-size: var(--rw-fs-xs); white-space: nowrap; }
/* Los elementos ocultos desde JS (style display:none) siguen ocultos aunque
botones del tema/kit fuercen display con !important */
.cp-modal [style*="display: none"], .cp-modal [style*="display:none"],
.cp-page [style*="display: none"], .cp-page [style*="display:none"] { display: none !important; }
.cp-modal .rw-dl { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 767.98px) {
.cp-range { width: 100%; flex-wrap: nowrap; }
.cp-range-label { display: none; }
.cp-range .form-control { flex: 1 1 0; width: auto !important; min-width: 0; }
}
/* ===== Secciones v2 · grupo D ===== */
/* ============================================================================
SECCIONES v2 · D — Reportes, Direcciones, Expedientes, Gasto nómina,
Reglamentos (nómina/vehículos) y Obras (cliente)
============================================================================ */
/* ---------------------------------------------------------------- Reglamentos */
#reglamentos_nomina .rgl-head-icon,
#reglamentos_vehiculos .rgl-head-icon { background: var(--rw-accent-soft) !important; color: var(--rw-accent) !important; }
.rgl-root { margin-top: 16px; }
.rgl-loading { display: flex; align-items: center; gap: 10px; padding: 28px 16px; color: var(--rw-muted); font-size: var(--rw-fs-sm); justify-content: center; border: 1px dashed var(--rw-border); border-radius: var(--rw-r-lg); }
.rgl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.rgl-toolbar-text { display: inline-flex; align-items: center; gap: 8px; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
.rgl-toolbar-text i { color: var(--rw-faint); }
.rgl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.rgl-card { display: flex; flex-direction: column; margin: 0 !important; }
.rgl-card .rw-panel-head { flex-wrap: nowrap; align-items: flex-start; }
.rgl-card-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rgl-card-title > div { min-width: 0; }
.rgl-card-icon { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: .85rem; }
.rgl-card-body { padding: 6px 10px; }
.rgl-files { list-style: none; margin: 0; padding: 0; }
.rgl-file { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--rw-r-md); transition: background-color var(--rw-dur-fast) ease; }
.rgl-file + .rgl-file { border-top: 1px solid var(--rw-border-soft); }
.rgl-file:hover { background: var(--rw-surface-2); }
.rgl-file-icon { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--rw-surface-3); color: var(--rw-ink-2); font-size: .9rem; }
.rgl-file-icon.is-pdf { background: var(--rw-red-soft); color: var(--rw-red-text); }
.rgl-file-icon.is-doc { background: #EEF3FF; color: #3651C4; }
.rgl-file-icon.is-xls { background: var(--rw-green-soft); color: var(--rw-green-text); }
.rgl-file-icon.is-img { background: var(--rw-orange-soft); color: var(--rw-orange-text); }
.rgl-file-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rgl-file-name { font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink) !important; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgl-file-name:hover { color: var(--rw-accent) !important; }
.rgl-file-meta { font-size: var(--rw-fs-xs); color: var(--rw-faint); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgl-file .rw-actions { flex: 0 0 auto; }
.rgl-file a.rw-icon-btn { text-decoration: none; }
.rgl-empty { display: flex; align-items: center; gap: 10px; padding: 14px 8px; font-size: var(--rw-fs-sm); color: var(--rw-faint); }
.rgl-card-foot { padding: 0 14px 14px; margin-top: auto; }
.rgl-drop { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px dashed var(--rw-border-strong); border-radius: var(--rw-r-md); background: var(--rw-surface-2); cursor: pointer; transition: border-color var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease; }
.rgl-drop:hover, .rgl-drop.is-over { border-color: var(--rw-accent); background: var(--rw-accent-soft); }
.rgl-drop:focus-within { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
.rgl-drop.is-uploading { opacity: .7; pointer-events: none; }
.rgl-drop-icon { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--rw-surface); border: 1px solid var(--rw-border); color: var(--rw-accent); font-size: .85rem; }
.rgl-drop-text { display: flex; flex-direction: column; font-size: var(--rw-fs-sm); color: var(--rw-muted); line-height: 1.35; }
.rgl-drop-text strong { font-weight: 600; color: var(--rw-ink); }
.rgl-drop-text small { font-size: var(--rw-fs-xs); color: var(--rw-faint); }
@media (max-width: 767.98px) {
.rgl-grid { grid-template-columns: 1fr; }
.rgl-file { gap: 10px; padding: 10px 4px; }
.rgl-file .rw-actions a.rw-icon-btn[download] { display: none !important; }
}
/* ---------------------------------------------------------------- Direcciones recurrentes (admin + cliente) */
#gestion_direcciones .dir-layout { gap: 0; }
#gestion_direcciones .cli-head { margin-bottom: 20px !important; }
#gestion_direcciones .dir-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 14px !important; flex-direction: initial !important; margin-top: 4px; }
#gestion_direcciones .dir-grid > .dir-empty { grid-column: 1 / -1; border: 1px dashed var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface); }
#gestion_direcciones .dir-card {
display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 12px !important;
padding: 16px !important; margin: 0 !important; min-width: 0;
background: var(--rw-surface) !important; border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-lg) !important;
box-shadow: var(--rw-shadow-xs) !important; transform: none !important;
transition: border-color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease;
}
#gestion_direcciones .dir-card:hover { border-color: var(--rw-border-strong) !important; box-shadow: var(--rw-shadow-hover) !important; }
#gestion_direcciones .dir-card-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
#gestion_direcciones .dir-card-icon { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: .9rem; }
#gestion_direcciones .dir-card-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
#gestion_direcciones .dir-card-alias { margin: 0 !important; font-size: var(--rw-fs-lg) !important; font-weight: 600 !important; color: var(--rw-ink) !important; line-height: 1.3; letter-spacing: -0.01em; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
#gestion_direcciones .dir-card-place { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#gestion_direcciones .dir-card-actions { flex: 0 0 auto; display: inline-flex !important; gap: 4px !important; }
#gestion_direcciones .dir-card-detail { flex: 1 1 auto; font-size: var(--rw-fs-sm) !important; color: var(--rw-ink-2) !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
#gestion_direcciones .dir-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rw-border-soft); }
#gestion_direcciones .dir-card-chip { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--rw-surface-3); border: 1px solid var(--rw-border); font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-ink-2) !important; text-decoration: none !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
#gestion_direcciones .dir-card-chip i { font-size: .68rem; color: var(--rw-muted); }
#gestion_direcciones .dir-card-chip.is-muted { color: var(--rw-faint) !important; background: transparent; border-style: dashed; }
#gestion_direcciones a.dir-card-chip:hover { border-color: var(--rw-border-strong); }
#gestion_direcciones .dir-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-accent) !important; text-decoration: none !important; white-space: nowrap; }
#gestion_direcciones .dir-card-link:hover { text-decoration: underline !important; }
#gestion_direcciones .dir-card-link:focus-visible, #gestion_direcciones .dir-card-chip:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 767.98px) {
#gestion_direcciones .dir-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
#gestion_direcciones .dir-card { padding: 14px !important; }
}
/* Modal alta/edición de dirección + confirmación */
#modalDireccionRecurrente .rw-modal-section .form-label { font-size: var(--rw-fs-sm); }
#modalDireccionRecurrente .rw-modal-section .row { --bs-gutter-y: 12px; }
#modalDireccionRecurrente .rw-modal-section > .form-label { display: block; }
#modalConfirmarEliminarDireccion .modal-title i { color: var(--rw-red-text); }
#modalConfirmarEliminarDireccion .dir-del-confirm { display: flex; align-items: flex-start; gap: 12px; font-size: var(--rw-fs-md); color: var(--rw-ink-2); line-height: 1.5; }
#modalConfirmarEliminarDireccion .dir-del-icon { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--rw-red-soft); color: var(--rw-red-text); }
#modalConfirmarEliminarDireccion strong { color: var(--rw-ink); font-weight: 600; }
/* ---------------------------------------------------------------- Reportes */
#reportes .rep-head-icon { background: var(--rw-accent-soft) !important; color: var(--rw-accent) !important; }
#reportes .rep-type-selector { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 20px 0 16px; }
#reportes .rep-type-btn {
min-width: 0; flex: initial; display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg);
background: var(--rw-surface); box-shadow: var(--rw-shadow-xs);
font: 500 var(--rw-fs-sm)/1.25 var(--rw-font, 'Inter', sans-serif); color: var(--rw-ink-2); text-align: left;
transition: border-color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease;
}
#reportes .rep-type-btn i { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--rw-surface-3); color: var(--rw-muted); font-size: .8rem; }
#reportes .rep-type-btn span { min-width: 0; }
#reportes .rep-type-btn:hover { border-color: var(--rw-border-strong); background: var(--rw-surface); box-shadow: var(--rw-shadow-hover); }
#reportes .rep-type-btn.active { border-color: var(--rw-accent); background: var(--rw-surface); color: var(--rw-ink); box-shadow: 0 0 0 1px var(--rw-accent) inset; }
#reportes .rep-type-btn.active i { background: var(--rw-accent-soft); color: var(--rw-accent); }
#reportes .rep-type-btn:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
#reportes .rep-filtros { background: var(--rw-surface); border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); box-shadow: var(--rw-shadow-xs); padding: 16px 18px; margin-bottom: 16px; }
#reportes .rep-filtros-presets { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px; background: var(--rw-surface-3); border-radius: 10px; flex-wrap: wrap; }
#reportes .rep-preset-btn { padding: 5px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--rw-muted); font-size: var(--rw-fs-sm); font-weight: 500; }
#reportes .rep-preset-btn:hover { background: rgba(255,255,255,.6); color: var(--rw-ink); }
#reportes .rep-preset-btn.active { background: var(--rw-surface); color: var(--rw-ink); box-shadow: 0 1px 2px rgba(16,16,20,.08), 0 0 0 1px var(--rw-border); }
#reportes .rep-filtros-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
#reportes .rep-filtro-item label { font-size: var(--rw-fs-xs); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--rw-muted); }
#reportes .rep-filtros-actions { padding-top: 14px; border-top: 1px solid var(--rw-border-soft); }
#reportes .rep-btn-generar { background: var(--rw-accent); color: #fff; border-radius: var(--rw-r-sm); font-size: var(--rw-fs-sm); font-weight: 500; padding: 8px 14px; box-shadow: var(--rw-shadow-btn, none); }
#reportes .rep-btn-generar:hover { background: var(--rw-accent-hover, #5B49D6); color: #fff; }
#reportes .rep-btn-excel, #reportes .rep-btn-pdf { border-radius: var(--rw-r-sm); border: 1px solid var(--rw-border); background: var(--rw-surface); color: var(--rw-ink-2); font-size: var(--rw-fs-sm); font-weight: 500; padding: 8px 14px; }
#reportes .rep-btn-excel i { color: var(--rw-green-text); }
#reportes .rep-btn-pdf i { color: var(--rw-red-text); }
#reportes .rep-btn-excel:hover:not(:disabled), #reportes .rep-btn-pdf:hover:not(:disabled) { background: var(--rw-surface-3); border-color: var(--rw-border-strong); }
#reportes .rep-resumen.rw-kpis { margin-bottom: 16px; }
#reportes .rep-resumen .rep-kpi { flex: initial; min-width: 0; padding: 16px 18px; background: var(--rw-surface); border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); gap: 4px; }
#reportes .rep-resumen .rep-kpi-label { font-size: var(--rw-fs-sm); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--rw-muted); }
#reportes .rep-resumen .rep-kpi-value { font-size: 1.5rem; font-weight: 600; color: var(--rw-ink); }
#reportes .rep-resumen .rep-kpi-warn .rep-kpi-value { color: var(--rw-red-text); }
#reportes .rep-resumen.rw-kpis-5 .rep-kpi-value { font-size: 1.25rem; }
#reportes .rep-resumen .rep-kpi-value { overflow-wrap: normal; white-space: nowrap; }
#reportes .rep-kpi.rw-kpi--neutral .rw-kpi-icon { background: var(--rw-surface-3); color: var(--rw-ink-2); }
#reportes .rep-chart-wrap { background: var(--rw-surface); border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); box-shadow: var(--rw-shadow-xs); padding: 16px 18px; margin-bottom: 16px; }
#reportes .rep-chart-head { margin-bottom: 12px; }
#reportes .rep-chart-title { margin: 0; font-size: var(--rw-fs-lg); font-weight: 600; color: var(--rw-ink); letter-spacing: -0.01em; }
#reportes .rep-chart-sub { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#reportes .rep-chart-canvas { position: relative; height: 300px; }
#reportes .rep-tabla-wrap { margin-top: 0; }
#reportes .rep-tabla-panel { background: var(--rw-surface); border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); box-shadow: var(--rw-shadow-xs); overflow: hidden; margin-bottom: 16px; min-width: 0; }
#reportes .rep-tabla-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rw-border-soft); }
#reportes .rep-tabla-title, #reportes .rep-subtabla-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; font-size: var(--rw-fs-lg); font-weight: 600; color: var(--rw-ink); letter-spacing: -0.01em; text-transform: none; }
#reportes .rep-tabla-title i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--rw-surface-3); color: var(--rw-ink-2); font-size: .72rem; }
#reportes .rep-tabla-sub { margin-top: 2px; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#reportes .rep-tabla-scroll { overflow: auto; max-height: min(70vh, 640px); border: 0; border-radius: 0; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
#reportes .rep-tabla { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; font-size: var(--rw-fs-sm); font-variant-numeric: tabular-nums; }
#reportes .rep-tabla thead th { position: sticky; top: 0; z-index: 2; padding: 10px 14px; border-bottom: 1px solid var(--rw-border) !important; white-space: nowrap; text-align: left; }
#reportes .rep-tabla thead th.rw-num { text-align: right !important; }
#reportes .rep-tabla tbody td { padding: 10px 14px; border-bottom: 1px solid var(--rw-border-soft); color: var(--rw-ink-2); vertical-align: middle; white-space: nowrap; }
#reportes .rep-tabla tbody tr:last-child td { border-bottom: 0; }
#reportes .rep-tabla tbody tr:hover td { background: var(--rw-surface-2); }
#reportes .rep-tabla td.rw-num { color: var(--rw-ink); }
/* columnas de texto largo: pueden partirse en 2 líneas pero con ancho mínimo cómodo */
#reportes .rep-tabla td.rep-col-proyecto, #reportes .rep-tabla td.rep-col-proveedor, #reportes .rep-tabla td.rep-col-emisor,
#reportes .rep-tabla td.rep-col-vehiculo, #reportes .rep-tabla td.rep-col-partida, #reportes .rep-tabla td.rep-col-solicitante,
#reportes .rep-tabla td.rep-col-operador, #reportes .rep-tabla td.rep-col-usuario { white-space: normal; min-width: 150px; max-width: 260px; line-height: 1.35; }
#reportes .rep-tabla td.rep-col-proyecto, #reportes .rep-tabla td.rep-col-proveedor, #reportes .rep-tabla td.rep-col-emisor { min-width: 200px; }
#reportes .rep-tabla td.rep-col-proyecto, #reportes .rep-tabla td.rep-col-proveedor, #reportes .rep-tabla td.rep-col-emisor, #reportes .rep-tabla td.rep-col-vehiculo { color: var(--rw-ink); font-weight: 500; }
#reportes .rep-tabla--presupuesto_proveedor td.rep-col-proveedor, #reportes .rep-tabla--proyectos td.rep-col-proyecto { min-width: 260px; max-width: 380px; }
#reportes .rep-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--rw-ink-2); white-space: nowrap; }
#reportes .rep-tabla td.rep-col-folio .rep-mono { color: var(--rw-ink); font-weight: 500; }
#reportes .rep-uuid { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
#reportes .rep-row-nodeducible td { background: var(--rw-red-soft) !important; }
#reportes .rep-tabla tfoot td { position: sticky; bottom: 0; z-index: 1; padding: 11px 14px; background: var(--rw-surface-2); border-top: 1px solid var(--rw-border); font-weight: 600; color: var(--rw-ink); white-space: nowrap; }
#reportes .rep-row-total { background: transparent !important; }
#reportes .rep-fiscal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
#reportes .rep-fiscal-grid > .rep-tabla-panel:only-child { grid-column: 1 / -1; }
#reportes .rep-empty { border: 1px dashed var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface); }
#reportes .rep-empty--error > i { color: var(--rw-red-text); }
@media (max-width: 1199.98px) {
#reportes .rep-type-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#reportes .rep-fiscal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
#reportes .rep-resumen .rep-kpi { padding: 14px; }
#reportes .rep-resumen .rep-kpi-value { font-size: 1.1rem; overflow-wrap: normal; }
#reportes .rep-type-selector { display: flex; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; margin: 14px 0; padding: 2px 1px 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
#reportes .rep-type-selector::-webkit-scrollbar { display: none; }
#reportes .rep-type-btn { flex: 0 0 auto; padding: 9px 12px; scroll-snap-align: start; white-space: nowrap; }
#reportes .rep-type-btn i { flex-basis: 26px; width: 26px; height: 26px; }
#reportes .rep-filtros { padding: 14px; }
#reportes .rep-filtros-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#reportes .rep-filtros-actions { flex-direction: column; align-items: stretch; }
#reportes .rep-btn-generar { justify-content: center; }
#reportes .rep-export-group > .btn { flex: 1 1 0; justify-content: center; }
#reportes .rep-chart-canvas { height: 240px; }
#reportes .rep-tabla-head { padding: 12px 14px; }
#reportes .rep-tabla-scroll { max-height: 70vh; }
#reportes .rep-tabla td.rep-col-proyecto, #reportes .rep-tabla td.rep-col-proveedor, #reportes .rep-tabla td.rep-col-emisor { min-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
#reportes .rep-type-btn, #gestion_direcciones .dir-card, .rgl-drop, .rgl-file { transition: none !important; }
}
/* ---------------------------------------------------------------- Expedientes */
#expedientes .exp-loading-text, #expedienteContratoModal .exp-loading-text { margin: 12px 0 0; color: var(--rw-muted); font-size: var(--rw-fs-sm); }
#expedientes .exp-table td { vertical-align: middle; }
#expedientes .exp-row { cursor: pointer; }
#expedientes .exp-row:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: -2px; }
#expedientes .exp-table .rw-cell-main { min-width: 220px; }
#expedientes .exp-td-proyecto { min-width: 170px; max-width: 240px; color: var(--rw-ink-2); line-height: 1.35; }
#expedientes .exp-td-fecha { font-variant-numeric: tabular-nums; color: var(--rw-ink-2); }
#expedientes .exp-rfc, #expedienteAdminModal .exp-rfc { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
#expedientes .exp-counts { display: inline-flex; gap: 6px; flex-wrap: nowrap; }
#expedientes .exp-count { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--rw-surface-3); border: 1px solid var(--rw-border); font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#expedientes .exp-count i { font-size: .65rem; color: var(--rw-muted); }
#expedientes .exp-count.is-zero { color: var(--rw-faint); background: transparent; }
#expedientes .exp-table .rw-actions { flex-wrap: nowrap; }
#expedientes .exp-mcard { padding: 14px !important; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
#expedientes .exp-mcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#expedientes .exp-mcard-head .rw-cell-main { min-width: 0; }
#expedientes .exp-mcard-meta { display: flex; flex-direction: column; gap: 4px; font-size: var(--rw-fs-sm); color: var(--rw-ink-2); }
#expedientes .exp-mcard-meta span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
#expedientes .exp-mcard-meta i { width: 14px; color: var(--rw-faint); font-size: .75rem; }
#expedientes .exp-mcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--rw-border-soft); }
#expedientes .spa-note-callout { margin-top: 16px; }
/* Modal detalle (#detalleModal compartido: solo contenido .exp-det) */
.exp-det .exp-det-hero { gap: 12px 16px; }
.exp-det .exp-det-hero > .rw-cell-main { flex: 1 1 260px; }
.exp-det .exp-det-avatar { flex-basis: 44px; width: 44px; height: 44px; border-radius: 12px; font-size: var(--rw-fs-sm); }
.exp-det .exp-det-name { font-size: var(--rw-fs-lg); font-weight: 600; }
.exp-det .exp-det-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; padding-top: 12px; border-top: 1px solid var(--rw-border); }
.exp-det .exp-det-estado { color: var(--rw-orange-text) !important; }
.exp-det .exp-det-sec + .exp-det-sec { margin-top: 12px; }
.exp-det .rw-modal-section-title .rw-count { height: 22px; font-size: 11px; }
.exp-det .rw-dl .exp-dl-wide { grid-column: 1 / -1; }
.exp-det .rw-dl .rw-mono { height: 20px; font-size: 11.5px; }
.exp-det .exp-det-empty { padding: 12px; border: 1px dashed var(--rw-border); border-radius: var(--rw-r-md); font-size: var(--rw-fs-sm); color: var(--rw-faint); text-align: center; }
.exp-det .exp-det-table { overflow-x: auto; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); }
.exp-det .exp-det-table table { font-size: var(--rw-fs-sm); }
.exp-det .exp-det-table th, .exp-det .exp-det-table td { padding: 9px 12px !important; }
.exp-det .exp-det-table tbody tr:last-child td { border-bottom: 0; }
.exp-det .exp-det-strong, .exp-contratos-table .exp-det-strong { font-weight: 500; color: var(--rw-ink); }
.exp-det .exp-det-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.exp-det .rw-file-meta { max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
/* Iconos de archivo por tipo (compartidos por modales de expediente) */
.exp-det .exp-file-icon, #expedienteAdminModal .exp-file-icon { background: var(--rw-surface-3); color: var(--rw-ink-2); }
.exp-det .exp-file-icon.is-pdf, #expedienteAdminModal .exp-file-icon.is-pdf { background: var(--rw-red-soft); color: var(--rw-red-text); }
.exp-det .exp-file-icon.is-doc, #expedienteAdminModal .exp-file-icon.is-doc { background: #EEF3FF; color: #3651C4; }
.exp-det .exp-file-icon.is-xls, #expedienteAdminModal .exp-file-icon.is-xls { background: var(--rw-green-soft); color: var(--rw-green-text); }
.exp-det .exp-file-icon.is-img, #expedienteAdminModal .exp-file-icon.is-img { background: var(--rw-orange-soft); color: var(--rw-orange-text); }
/* Modal alta/edición de expediente + contrato + formatos + contratos */
#expedienteAdminModal .exp-sec, #expedienteContratoDocModal .exp-sec, #expedienteContratoModal .exp-sec { margin: 0 0 12px !important; }
#expedienteAdminModal .rw-modal-section-title, #expedienteContratoDocModal .rw-modal-section-title, #expedienteContratoModal .rw-modal-section-title { font-size: var(--rw-fs-md); }
#expedienteAdminModal .exp-sec-head, #expedienteContratoDocModal .exp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
#expedienteAdminModal .exp-sec-head .rw-modal-section-title, #expedienteContratoDocModal .exp-sec-head .rw-modal-section-title { margin: 0; }
#expedienteContratoDocModal .exp-sec-head--outer { margin: 4px 0 8px; }
#expedienteAdminModal .exp-hint { display: block; margin-top: 8px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#expedienteAdminModal .exp-hint--top { margin: -4px 0 10px; font-size: var(--rw-fs-sm); }
/* Jefe inmediato: la lista del buscador debe quedar sobre el formulario. */
#expedienteAdminModal .ts-dropdown { z-index: 20; }
#expedienteAdminModal .ts-dropdown .create { color: var(--rw-accent); }
#expedienteAdminModal .exp-ben-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; }
#expedienteAdminModal .exp-ben-row { padding: 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface-2); }
#expedienteAdminModal .exp-ben-row .catalog-modal-grid { gap: 10px; }
#expedienteAdminModal .exp-ben-row .form-label { font-size: var(--rw-fs-xs); }
#expedienteAdminModal .exp-ben-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#expedienteAdminModal .exp-ben-badge { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: .7rem; }
#expedienteAdminModal .beneficiario-expediente-title { flex: 1 1 auto; font-size: var(--rw-fs-sm); font-weight: 600; color: var(--rw-ink); }
#expedienteAdminModal .exp-ia { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--rw-accent-border); border-radius: var(--rw-r-md); background: var(--rw-accent-soft); }
#expedienteAdminModal .exp-ia small { color: var(--rw-ink-2) !important; }
#expedienteAdminModal .exp-ia-resultado { margin-top: 10px; }
#expedienteAdminModal .exp-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 8px; margin-top: 10px; }
#expedienteAdminModal .exp-files-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px dashed var(--rw-border); border-radius: var(--rw-r-md); font-size: var(--rw-fs-sm); color: var(--rw-faint); }
#expedienteAdminModal .exp-file-row { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface); min-width: 0; transition: border-color var(--rw-dur-fast) ease; }
#expedienteAdminModal .exp-file-row:hover { border-color: var(--rw-border-strong); }
#expedienteAdminModal .exp-file-row:has(.js-archivo-eliminar:checked) { border-color: var(--rw-red-border); background: var(--rw-red-soft); }
#expedienteAdminModal .exp-file-icon { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: .8rem; }
#expedienteAdminModal .exp-file-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
#expedienteAdminModal .exp-file-name { max-width: 100%; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#expedienteAdminModal .exp-file-name:hover { color: var(--rw-accent); text-decoration: underline; }
#expedienteAdminModal .exp-file-tag { height: 20px; font-size: 11px; }
#expedienteAdminModal .exp-file-del { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
#expedienteAdminModal .exp-file-del .form-check-input { margin: 0; }
#expedienteAdminModal .exp-file-del small { font-size: var(--rw-fs-xs); color: var(--rw-red-text); }
#expedienteAdminModal .exp-docs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#expedienteContratoDocModal .exp-docs-apply { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rw-border-soft); }
#expedienteContratoDocModal .exp-contrato-doc { padding: 16px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface); }
#expedienteContratoModal .exp-contrato-form .catalog-modal-grid { gap: 12px; }
#expedienteContratoModal .exp-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rw-border-soft); }
#expedienteContratoModal .exp-contratos-list { border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface); overflow: hidden; }
#expedienteContratoModal .exp-contratos-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rw-border-soft); }
#expedienteContratoModal .exp-contratos-head .rw-panel-title { font-size: var(--rw-fs-md) !important; }
#expedienteContratoModal .exp-contratos-scroll { overflow-x: auto; }
#expedienteContratoModal .exp-contratos-table { font-size: var(--rw-fs-sm); }
#expedienteContratoModal .exp-contratos-table th, #expedienteContratoModal .exp-contratos-table td { padding: 10px 14px !important; }
#expedienteContratoModal .exp-contratos-table tbody tr:last-child td { border-bottom: 0; }
#expedienteContratoModal .exp-td-notas { min-width: 200px; color: var(--rw-ink-2); }
#expedienteContratoModal .exp-contratos-list .catalog-empty-state, #expedienteContratoModal .exp-contratos-list .catalog-loading-state { border: 0 !important; }
@media (max-width: 767.98px) {
.exp-det .exp-det-actions .btn { flex: 1 1 auto; }
.exp-det .exp-det-files { grid-template-columns: 1fr; }
#expedienteAdminModal .exp-sec, #expedienteContratoDocModal .exp-sec, #expedienteContratoModal .exp-sec { padding: 12px; }
#expedienteAdminModal .exp-ben-row { padding: 10px; }
#expedienteContratoModal .exp-form-actions .btn { flex: 1 1 0; }
}
#expedientes .exp-table .rw-cell-main { min-width: 200px; }
#expedientes .exp-td-proyecto { min-width: 140px; }
#expedientes .exp-table th:last-child, #expedientes .exp-table td:last-child { padding-right: 16px !important; }
@media (max-width: 767.98px) {
#expedientes .exp-mobile-list { padding: 0 !important; gap: 0 !important; display: flex; flex-direction: column; }
#expedientes .exp-mobile-list .exp-mcard { margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--rw-border-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 16px !important; }
#expedientes .exp-mobile-list .exp-mcard:last-child { border-bottom: 0 !important; }
#expedientes .exp-mcard-foot { border-top: 0; padding-top: 0; }
}
@media (max-width: 767.98px) {
.exp-det .rw-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.exp-det .rw-modal-section { padding: 12px; }
}
/* ---------------------------------------------------------------- Gasto nómina */
#nomina_gasto .ng-head-icon { background: var(--rw-accent-soft) !important; color: var(--rw-accent) !important; }
#nomina_gasto #ngAyudaPanel .ng-ayuda-p { margin: 0 0 8px; }
#nomina_gasto #ngTabs { margin-bottom: 16px; }
#nomina_gasto .ng-acum { margin-bottom: 16px; }
#nomina_gasto .rw-kpi--neutral .rw-kpi-icon { background: var(--rw-surface-3); color: var(--rw-ink-2); }
#nomina_gasto .ng-captura-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
#nomina_gasto .ng-captura-left, #nomina_gasto .ng-captura-right { min-width: 0; }
#nomina_gasto .ng-captura-right { position: static; margin-top: 0; }
@media (min-width: 1600px) {
#nomina_gasto .ng-captura-cols { grid-template-columns: minmax(0, 1fr) 380px; }
#nomina_gasto .ng-captura-right { position: sticky; top: 12px; }
}
/* Barra de herramientas (fecha + acción) */
#nomina_gasto .ng-toolbar { padding: 12px 14px !important; background: var(--rw-surface) !important; border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-lg) !important; box-shadow: var(--rw-shadow-xs) !important; }
#nomina_gasto .ng-toolbar .d-flex { gap: 10px 12px !important; }
#nomina_gasto .ng-field .form-control { min-width: 170px; height: 36px; }
#nomina_gasto .ng-btn { height: 36px; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
#nomina_gasto .ng-check { margin: 0 0 8px; }
#nomina_gasto .ng-check .form-check-label { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#nomina_gasto #ngExportAcciones .btn { height: 36px; display: inline-flex; align-items: center; font-weight: 500; }
#nomina_gasto .ng-btn-excel i { color: var(--rw-green-text); }
#nomina_gasto .ng-btn-pdf i { color: var(--rw-red-text); }
#nomina_gasto .ng-aviso { margin: 0 0 12px; }
#nomina_gasto .ng-aviso strong { color: inherit; }
#nomina_gasto .ng-loading { border: 1px dashed var(--rw-border); border-radius: var(--rw-r-lg); padding: 28px 16px; }
/* Tabla de captura dentro de un panel */
#nomina_gasto .ng-captura-wrap { background: var(--rw-surface); border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-lg) !important; box-shadow: var(--rw-shadow-xs); overflow-x: auto; }
#nomina_gasto .ng-captura-tabla { min-width: 900px; margin: 0; font-size: var(--rw-fs-sm); font-variant-numeric: tabular-nums; }
#nomina_gasto .ng-captura-tabla thead th { padding: 10px 10px !important; border-bottom: 1px solid var(--rw-border) !important; vertical-align: middle; }
#nomina_gasto .ng-captura-tabla th.ng-th-grip { width: 30px; }
#nomina_gasto .ng-captura-tabla th.ng-th-proyecto { min-width: 200px; }
#nomina_gasto .ng-captura-tabla th.ng-th-monto { width: 132px; text-align: right !important; }
#nomina_gasto .ng-captura-tabla th.ng-th-total { width: 130px; text-align: right !important; }
#nomina_gasto .ng-th-info { cursor: help; border-bottom: 0 !important; }
#nomina_gasto .ng-th-info .fa-circle-info { color: var(--rw-faint); font-size: .7rem; }
#nomina_gasto .ng-captura-tabla tbody td { padding: 6px 10px !important; border-bottom: 1px solid var(--rw-border-soft) !important; }
#nomina_gasto .ng-captura-tabla tbody tr:hover td { background: var(--rw-surface-2); }
#nomina_gasto .ng-captura-tabla td.ng-td-grip { width: 30px; text-align: center; padding: 6px 2px 6px 8px !important; }
#nomina_gasto .ng-td-grip i { cursor: grab; color: var(--rw-border-strong); }
#nomina_gasto .ng-captura-tabla td.ng-td-proyecto { font-weight: 500; color: var(--rw-ink); line-height: 1.3; }
#nomina_gasto .ng-chip-inactivo { height: 20px; font-size: 11px; margin-left: 4px; vertical-align: 1px; }
#nomina_gasto .ng-captura-tabla .ng-monto { height: 32px; font-size: var(--rw-fs-sm); font-variant-numeric: tabular-nums; }
#nomina_gasto .ng-captura-tabla td.ng-td-total { text-align: right; white-space: nowrap; }
#nomina_gasto .ng-total-fila { font-weight: 600; color: var(--rw-ink); }
#nomina_gasto .ng-captura-tabla tfoot td { padding: 12px 10px !important; background: var(--rw-surface-2); border-top: 1px solid var(--rw-border) !important; border-bottom: 0 !important; font-weight: 600; color: var(--rw-ink); }
#nomina_gasto .ng-captura-tabla tfoot td.ng-td-sum { text-align: right; white-space: nowrap; }
#nomina_gasto .ng-captura-tabla tfoot td.ng-td-sum--total { color: var(--rw-accent); }
#nomina_gasto #ngCapturaAcciones { gap: 8px; }
#nomina_gasto .ng-btn-guardar { font-weight: 500; padding: 9px 18px; }
/* Panel "Semanas capturadas" (acordeón por mes) */
#nomina_gasto #ngSemanasGuardadas { background: var(--rw-surface); border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); box-shadow: var(--rw-shadow-xs); padding: 14px; }
#nomina_gasto .ng-semanas-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; font-size: var(--rw-fs-lg); font-weight: 600; color: var(--rw-ink); }
#nomina_gasto .ng-semanas-head i { color: var(--rw-muted); }
#nomina_gasto .ng-semanas-conteo { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--rw-surface-3); font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-ink-2); }
#nomina_gasto .ng-anios { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: 10px; background: var(--rw-surface-3); margin-bottom: 12px; }
#nomina_gasto .ng-anio { border: 0; border-radius: 8px; background: transparent; color: var(--rw-muted); font-size: var(--rw-fs-sm); padding: 4px 12px; }
#nomina_gasto .ng-anio.on { background: var(--rw-surface); color: var(--rw-ink); font-weight: 500; box-shadow: 0 1px 2px rgba(16,16,20,.08), 0 0 0 1px var(--rw-border); }
#nomina_gasto .ng-meses { max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
#nomina_gasto .ng-mes { margin: 0; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); overflow: hidden; flex: 0 0 auto; }
#nomina_gasto .ng-mes-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--rw-surface-2); cursor: pointer; transition: background-color var(--rw-dur-fast) ease; }
#nomina_gasto .ng-mes-head:hover { background: var(--rw-surface-3); }
#nomina_gasto .ng-mes-head:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: -2px; }
#nomina_gasto .ng-mes-nombre { font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); text-transform: capitalize; }
#nomina_gasto .ng-mes-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
#nomina_gasto .ng-mes-count { font-size: var(--rw-fs-xs); color: var(--rw-faint); white-space: nowrap; }
#nomina_gasto .ng-mes-total { font-size: var(--rw-fs-sm); font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
#nomina_gasto .ng-mes-chev { width: 12px; color: var(--rw-faint); font-size: .72rem; }
#nomina_gasto .ng-week-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--rw-border-soft); font-size: var(--rw-fs-sm); }
#nomina_gasto .ng-week-fecha { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
#nomina_gasto .ng-week-nombre { font-weight: 500; color: var(--rw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nomina_gasto .ng-week-dia { font-size: var(--rw-fs-xs); color: var(--rw-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nomina_gasto .ng-week-saved { font-size: inherit; color: inherit; }
#nomina_gasto .ng-week-total { min-width: 0; color: var(--rw-ink-2); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
#nomina_gasto .ng-week-acts { margin: 0; gap: 4px; }
#nomina_gasto .ng-week-acts .rw-icon-btn { flex-basis: 28px; width: 28px; height: 28px; font-size: .72rem; }
#nomina_gasto .ng-semanas-empty { padding: 24px 12px; border: 1px dashed var(--rw-border); border-radius: var(--rw-r-md); }
/* Resumen */
#nomina_gasto .ng-cards { margin-bottom: 16px; display: grid; }
#nomina_gasto .ng-card { background: var(--rw-surface) !important; border: 1px solid var(--rw-border) !important; }
#nomina_gasto .ng-card .ng-card-label { color: var(--rw-muted) !important; font-size: var(--rw-fs-sm); }
#nomina_gasto .ng-card .ng-card-valor { color: var(--rw-ink) !important; font-size: 1.5rem; }
#nomina_gasto .ng-panel .ng-subtitulo { padding: 0 !important; border: 0 !important; margin: 0 !important; text-transform: none; letter-spacing: -0.01em; }
#nomina_gasto .ng-panel .rw-panel-title i { color: var(--rw-muted); font-size: .85rem; }
#nomina_gasto .ng-res-tabla { font-size: var(--rw-fs-sm); font-variant-numeric: tabular-nums; }
#nomina_gasto .ng-res-tabla th, #nomina_gasto .ng-res-tabla td { padding: 10px 14px !important; white-space: nowrap; }
#nomina_gasto .ng-res-tabla tbody td { border-bottom: 1px solid var(--rw-border-soft) !important; color: var(--rw-ink-2); }
#nomina_gasto .ng-res-tabla tbody tr:last-child td { border-bottom: 0 !important; }
#nomina_gasto .ng-res-tabla tbody tr:hover td { background: var(--rw-surface-2); }
#nomina_gasto .ng-res-proyecto { font-weight: 500; color: var(--rw-ink) !important; white-space: normal !important; min-width: 180px; }
#nomina_gasto .ng-res-total { font-weight: 600; color: var(--rw-ink) !important; }
#nomina_gasto .ng-res-tabla tfoot td { background: var(--rw-surface-2); border-top: 1px solid var(--rw-border) !important; font-weight: 600; color: var(--rw-ink); }
#nomina_gasto .ng-pct { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
#nomina_gasto .ng-pct-bar { width: 40px; height: 6px; border-radius: 999px; background: var(--rw-surface-3); overflow: hidden; }
#nomina_gasto .ng-pct-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--rw-accent); }
#nomina_gasto .ng-res-scroll { max-height: 440px; overflow-y: auto; }
#nomina_gasto .ng-res-scroll thead th { position: sticky; top: 0; z-index: 1; }
#nomina_gasto .ng-matriz-note { margin: 12px 18px 12px; }
#nomina_gasto .ng-matriz .ng-matriz-sticky { position: sticky; left: 0; z-index: 1; background: var(--rw-surface); box-shadow: 1px 0 0 var(--rw-border-soft); }
#nomina_gasto .ng-matriz thead .ng-matriz-sticky { background: var(--rw-surface-2) !important; z-index: 2; }
#nomina_gasto .ng-matriz tbody tr:hover .ng-matriz-sticky { background: var(--rw-surface-2); }
/* Modal importar */
#ngImportModal .ng-imp-steps { margin: 0 0 14px; padding-left: 20px; font-size: var(--rw-fs-sm); color: var(--rw-ink-2); line-height: 1.6; }
#ngImportModal .ng-imp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
#ngImportModal .ng-imp-upload { cursor: pointer; }
#ngImportModal .ng-imp-upload:focus-within { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
#ngImportModal .ng-imp-preview { font-size: var(--rw-fs-sm); color: var(--rw-muted); border-radius: var(--rw-r-lg); transition: background-color var(--rw-dur-fast) ease; }
#ngImportModal .ng-imp-preview.is-over { background: var(--rw-accent-soft); outline: 2px dashed var(--rw-accent); outline-offset: 2px; }
#ngImportModal .ng-imp-vacio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; border: 1px dashed var(--rw-border-strong); border-radius: var(--rw-r-lg); background: var(--rw-surface-2); text-align: center; color: var(--rw-muted); }
#ngImportModal .ng-imp-vacio i { font-size: 1.4rem; color: var(--rw-green-text); }
#ngImportModal .ng-imp-resumen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#ngImportModal .ng-imp-tabla { max-height: 300px; overflow: auto; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); }
#ngImportModal .ng-imp-tabla table { font-size: var(--rw-fs-sm); }
#ngImportModal .ng-imp-tabla th, #ngImportModal .ng-imp-tabla td { padding: 8px 12px !important; }
#ngImportModal .ng-imp-tabla thead th { position: sticky; top: 0; z-index: 1; }
#ngImportModal .ng-imp-error td { background: var(--rw-red-soft) !important; }
#ngImportModal .ng-imp-mas { margin-top: 6px; font-size: var(--rw-fs-xs); color: var(--rw-faint); }
#ngRenombrarModal .rw-modal-intro strong { color: var(--rw-ink); }
@media (max-width: 767.98px) {
#nomina_gasto .ng-toolbar .ng-field, #nomina_gasto .ng-toolbar .ng-field .form-control { width: 100%; }
#nomina_gasto .ng-toolbar .ng-btn { width: 100%; justify-content: center; }
#nomina_gasto #ngExportAcciones { width: 100%; margin-left: 0 !important; }
#nomina_gasto #ngExportAcciones .btn { flex: 1 1 0; justify-content: center; }
#nomina_gasto .ng-card .ng-card-valor { font-size: 1.1rem; }
#nomina_gasto #ngCapturaAcciones .btn { width: 100%; }
#nomina_gasto #ngSemanasGuardadas { padding: 12px; }
#nomina_gasto .ng-meses { max-height: none; }
#nomina_gasto .ng-mes-count { display: none; }
#nomina_gasto .ng-week-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
#nomina_gasto .ng-week-acts { grid-column: 1 / -1; justify-content: flex-end; }
}
/* Captura en móvil: cada proyecto como tarjeta limpia (sin tarjeta dentro de tarjeta) */
@media (max-width: 640px) {
#nomina_gasto .ng-captura-wrap { background: transparent; border: 0 !important; box-shadow: none; overflow: visible; }
#nomina_gasto .ng-captura-tabla { min-width: 0 !important; }
#nomina_gasto .ng-captura-tabla tr.ng-fila, #nomina_gasto .ng-captura-tabla tr.ng-foot { border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-lg) !important; background: var(--rw-surface) !important; padding: 6px 4px 8px !important; margin-bottom: 10px; }
#nomina_gasto .ng-captura-tabla tr.ng-foot { background: var(--rw-surface-2) !important; }
#nomina_gasto .ng-captura-tabla tbody td, #nomina_gasto .ng-captura-tabla tfoot td { border: 0 !important; background: transparent !important; padding: 6px 10px !important; }
#nomina_gasto .ng-captura-tabla td[data-label]::before { font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-muted); }
#nomina_gasto .ng-captura-tabla td.ng-td-grip { display: none !important; }
#nomina_gasto .ng-captura-tabla td.ng-td-proyecto { border-bottom: 1px solid var(--rw-border-soft) !important; padding-bottom: 10px !important; margin-bottom: 4px; justify-content: space-between; }
#nomina_gasto .ng-captura-tabla td.ng-td-total { border-top: 1px solid var(--rw-border-soft) !important; margin-top: 4px; padding-top: 10px !important; }
}
@media (max-width: 640px) {
#nomina_gasto .ng-captura-tabla tbody td, #nomina_gasto .ng-captura-tabla tfoot td { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px; width: 100% !important; }
#nomina_gasto .ng-captura-tabla td::before { display: inline !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: var(--rw-fs-xs) !important; font-weight: 500 !important; color: var(--rw-muted) !important; }
#nomina_gasto .ng-captura-tabla td.ng-td-proyecto::before { display: none !important; }
#nomina_gasto .ng-captura-tabla td.ng-td-monto .form-control { width: 58% !important; flex: 0 0 auto; }
#nomina_gasto .ng-captura-tabla td.ng-td-proyecto { font-size: var(--rw-fs-md); }
}
#ngImportModal #ngImportConfirmBtn[style*="display:none"], #ngImportModal #ngImportConfirmBtn[style*="display: none"] { display: none !important; }
/* ---------------------------------------------------------------- Obras (cliente): mismo diseño que Control de obras */
#obras #obrasListaPane, #obras .obra-cli-detail, #obras .obra-panel { container-type: inline-size; }
#obras .obra-cli-head-icon { background: var(--rw-accent-soft) !important; color: var(--rw-accent) !important; }
#obras .obra-cli-aviso { margin-top: 16px; }
#obras .obra-cli-aviso:empty { display: none; }
#obras .obra-cli-nivel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface-2); }
#obras .obra-cli-nivel-icon { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: .85rem; }
#obras .obra-cli-nivel-title { font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); }
#obras .obra-cli-nivel-text { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#obras .obra-cli-list-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 20px 0 12px; }
#obras .obra-cli-list-head .rw-count { align-self: center; }
#obras .obra-card-v2 { cursor: pointer; }
#obras .obra-card-v2 .obra-card-foot { justify-content: stretch; }
#obras .obra-card-v2 .obra-card-open { flex: 1 1 auto; pointer-events: none; }
#obras .obra-cli-detail .obra-detail-head { margin-bottom: 16px; }
#obras .obra-cli-detail .obra-metrics { margin: 0; }
#obras .obra-cli-readonly { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--rw-border); border-radius: 999px; background: var(--rw-surface-2); font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-muted); white-space: nowrap; }
#obras .obra-cli-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: 16px; }
#obras .obra-cli-alerta { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 11px 14px; border: 1px solid var(--rw-orange-border); }
#obras .obra-cli-alerta .obra-alerta-icon { margin-top: 3px; }
#obras .obra-card-sub, #obras .obra-detail-sub { margin: 0; }
@media (max-width: 767.98px) {
#obras .obra-cli-readonly { display: none; }
}
#obras > .cli-wrap > #obrasListaPane > .card-container, #obras > .cli-wrap > #obrasDetallePane > .card-container { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
#nomina_gasto .ng-acum .rw-kpi-value, #nomina_gasto .ng-cards .rw-kpi-value { white-space: nowrap; overflow-wrap: normal; font-size: clamp(1.1rem, 1.9vw, 1.5rem) !important; }
@media (max-width: 767.98px) {
#nomina_gasto .ng-acum .rw-kpi-value, #nomina_gasto .ng-cards .rw-kpi-value { font-size: 1.05rem !important; }
}
/* ======== Facturas de la OC (js/oc_facturas.js): detalle OC, entrega cliente y almacén ======== */
.ocf { background: var(--rw-surface); border: 1px solid var(--rw-border); border-radius: 12px; padding: 14px 16px; margin-top: 16px; font-size: var(--rw-fs-sm); color: var(--rw-text); }
.ocf-modal-host.ocf { border: 0; padding: 0; margin: 0; }
.ocf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ocf-title { margin: 0 !important; font-size: var(--rw-fs-md) !important; font-weight: 700 !important; color: var(--rw-ink) !important; display: flex; align-items: center; gap: 8px; }
.ocf-title i { color: var(--rw-accent); }
.ocf-cargando, .ocf-vacio { color: var(--rw-muted); text-align: center; padding: 10px; }
.ocf-error { color: var(--rw-red-text); }
.ocf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ocf-kpi { background: var(--rw-surface-2); border: 1px solid var(--rw-border-soft); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.ocf-kpi span { display: block; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.ocf-kpi strong { display: block; font-size: var(--rw-fs-md); color: var(--rw-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocf-kpi.is-ok strong { color: var(--rw-green-text); }
.ocf-kpi.is-warn strong { color: var(--rw-orange-text); }
.ocf-kpi.is-bad strong { color: var(--rw-red-text); }
.ocf-tabla-wrap { overflow-x: auto; }
.ocf-tabla { width: 100%; border-collapse: collapse; }
.ocf-tabla th { text-align: left; font-size: var(--rw-fs-xs); font-weight: 600; color: var(--rw-muted); padding: 6px 8px; border-bottom: 1px solid var(--rw-border); }
.ocf-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--rw-border-soft); vertical-align: top; }
.ocf-tabla a { color: var(--rw-accent); text-decoration: none; font-weight: 600; }
.ocf-num { text-align: right !important; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ocf-sub { font-size: 11px; color: var(--rw-faint); word-break: break-all; }
.ocf-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--rw-border); background: var(--rw-surface-2); color: var(--rw-muted); white-space: nowrap; }
.ocf-pill.is-ok { background: var(--rw-green-soft); border-color: var(--rw-green-border); color: var(--rw-green-text); }
.ocf-pill.is-warn { background: var(--rw-orange-soft); border-color: var(--rw-orange-border); color: var(--rw-orange-text); }
.ocf-pill.is-bad { background: var(--rw-red-soft); border-color: var(--rw-red-border); color: var(--rw-red-text); }
.ocf-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ocf-drop { display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--rw-accent-border); background: var(--rw-accent-soft); color: var(--rw-accent); border-radius: 10px; padding: 10px 12px; cursor: pointer; margin: 0; font-weight: 600; }
.ocf-drop:hover { border-color: var(--rw-accent); }
.ocf-drop-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ocf-lectura { border-radius: 8px; padding: 8px 10px; background: var(--rw-surface-2); color: var(--rw-text); }
.ocf-lectura.is-ok { background: var(--rw-green-soft); color: var(--rw-green-text); }
.ocf-lectura.is-warn { background: var(--rw-orange-soft); color: var(--rw-orange-text); }
.ocf-lectura[hidden], .ocf-manual[hidden], .ocf-acciones[hidden] { display: none !important; }
.ocf-aviso { margin-top: 6px; color: var(--rw-orange-text); }
.ocf-manual label { display: block; font-size: var(--rw-fs-xs); font-weight: 600; color: var(--rw-muted); margin: 0; }
.ocf-manual label .form-control { margin-top: 3px; }
.ocf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 8px; }
.ocf-acciones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ocf-nota { margin: 0; font-size: var(--rw-fs-xs); color: var(--rw-faint); }
/* ===== Secciones v2 · grupo E ===== */
/* ============================================================================
SECCIONES v2 · E — Órdenes de compra › Listado (admin)
Ámbito: #ordenes_compra_admin (lista generada por get_admin_ordenes_compra.php)
y modales de OC: #modalDetalleOrdenCompra, #modalHistorialOc, #modalRechazarOc,
#modalSolicitarAutorizacionOc, #modalConfirmarAutorizacionTrasGuardar,
#modalMotivoBorradoAdmin, #modalConfirmarPagoOc. Clases propias: .ocl- / .ocm-
============================================================================ */
/* --- Filtros (antes con estilos en línea) --- */
#ordenes_compra_admin .ocl-filtros { margin: 0 0 16px; }
#ordenes_compra_admin .ocl-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; width: 100%; }
#ordenes_compra_admin .ocl-filter-search { flex: 1 1 280px; min-width: 0; }
#ordenes_compra_admin .ocl-filter-search .spa-search-input { padding-right: 40px !important; }
#ordenes_compra_admin .ocl-search-ico { right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
#ordenes_compra_admin .ocl-filter-row > .spa-select-wrap { width: auto; min-width: 150px; }
#ordenes_compra_admin .ocl-filter-prov { min-width: 200px !important; }
#ordenes_compra_admin .ocl-fechas { display: flex; align-items: center; gap: 8px; }
#ordenes_compra_admin .ocl-fechas input { min-width: 0; }
#ordenes_compra_admin .ocl-filter-actions { display: flex; gap: 8px; }
/* --- KPIs --- */
#ordenes_compra_admin .ocl-kpis .rw-kpi-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ordenes_compra_admin .ocl-kpis button.rw-kpi:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
/* --- Panel y tabla --- */
#ordenes_compra_admin .ocl-panel .rw-panel-title .rw-count { margin-left: 2px; }
#ordenes_compra_admin .ocl-panel .spa-desktop-table { overflow-x: auto; }
#ordenes_compra_admin .ocl-table { width: 100%; }
#ordenes_compra_admin .ocl-table th { padding: 10px 12px !important; border-bottom: 1px solid var(--rw-border) !important; }
#ordenes_compra_admin .ocl-table td {
padding: 12px 12px !important; vertical-align: middle !important;
border-bottom: 1px solid var(--rw-border-soft) !important;
font-size: var(--rw-fs-md) !important; color: var(--rw-text) !important;
}
#ordenes_compra_admin .ocl-table th:first-child, #ordenes_compra_admin .ocl-table td:first-child { padding-left: 18px !important; }
#ordenes_compra_admin .ocl-table th:last-child, #ordenes_compra_admin .ocl-table td:last-child { padding-right: 18px !important; }
#ordenes_compra_admin .ocl-table tbody tr:last-child td { border-bottom: 0 !important; }
#ordenes_compra_admin .ocl-table tr.row-orden-compra-admin { cursor: pointer; transition: background-color var(--rw-dur-fast) ease; }
#ordenes_compra_admin .ocl-table tr.row-orden-compra-admin:hover td { background: var(--rw-surface-2) !important; }
#ordenes_compra_admin .ocl-table tr.row-orden-compra-admin:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: -2px; }
#ordenes_compra_admin .ocl-table .rw-cell-sub { display: block; margin-top: 2px; }
#ordenes_compra_admin .ocl-folio { display: block; font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
#ordenes_compra_admin .ocl-col-orden { white-space: nowrap; width: 1%; }
#ordenes_compra_admin .ocl-col-orden .rw-cell-sub { font-variant-numeric: tabular-nums; }
#ordenes_compra_admin .ocl-sol-inline { display: none !important; }
#ordenes_compra_admin .ocl-ed-line { margin-top: 6px; }
#ordenes_compra_admin .ocl-chip-ed { height: 22px; gap: 5px; font-size: 11px; }
#ordenes_compra_admin .ocl-chip-ed i { font-size: .65rem; }
#ordenes_compra_admin .ocl-col-proy { min-width: 150px; max-width: 240px; }
#ordenes_compra_admin .ocl-col-proy .rw-cell-title { display: block; }
#ordenes_compra_admin .ocl-col-prov { min-width: 140px; max-width: 220px; }
#ordenes_compra_admin .ocl-prov { color: var(--rw-ink-2); }
#ordenes_compra_admin .ocl-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
#ordenes_compra_admin .ocl-clamp-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ordenes_compra_admin .ocl-fp-line { display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
#ordenes_compra_admin .ocl-fp-fecha { display: inline-flex; align-items: center; gap: 4px; color: var(--rw-orange-text); font-weight: 500; white-space: nowrap; }
#ordenes_compra_admin .ocl-fp-fecha i { font-size: .65rem; }
#ordenes_compra_admin .ocl-col-sol { white-space: nowrap; }
#ordenes_compra_admin .ocl-col-sol .rw-cell-main { gap: 10px; }
#ordenes_compra_admin .ocl-avatar { flex-basis: 30px; width: 30px; height: 30px; border-radius: 50%; font-size: 11px; }
#ordenes_compra_admin .ocl-sol-name { color: var(--rw-ink-2); font-size: var(--rw-fs-sm); }
#ordenes_compra_admin .ocl-col-total { width: 1%; }
#ordenes_compra_admin .ocl-total { display: block; font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
#ordenes_compra_admin .ocl-total.rw-muted { font-weight: 500; }
#ordenes_compra_admin .ocl-total-sub { font-variant-numeric: tabular-nums; }
#ordenes_compra_admin .ocl-col-estado { width: 1%; min-width: 150px; }
#ordenes_compra_admin .ocl-sub-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; margin-top: 5px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#ordenes_compra_admin .ocl-sub-line > span { white-space: nowrap; }
#ordenes_compra_admin .ocl-pago.is-pagado { display: inline-flex; align-items: center; gap: 4px; color: var(--rw-green-text); }
#ordenes_compra_admin .ocl-pago.is-pagado i { font-size: .7rem; }
#ordenes_compra_admin .ocl-sep { color: var(--rw-faint); }
#ordenes_compra_admin .ocl-col-actions { width: 1%; text-align: right !important; white-space: nowrap; }
#ordenes_compra_admin .ocl-chevron { margin-left: 6px; font-size: .7rem; color: var(--rw-faint); }
#ordenes_compra_admin .js-oc-action-excel:hover { color: var(--rw-green-text) !important; background: var(--rw-green-soft) !important; border-color: var(--rw-green-border) !important; }
#ordenes_compra_admin .js-oc-action-pdf:hover { color: var(--rw-red-text) !important; background: var(--rw-red-soft) !important; border-color: var(--rw-red-border) !important; }
#ordenes_compra_admin .ocl-foot .spa-pagination-text { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#ordenes_compra_admin .ocl-page-gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--rw-faint); }
#ordenes_compra_admin .ocl-note { margin-top: 4px; }
#ordenes_compra_admin .ocl-note span i { font-size: .75rem; margin: 0 1px; }
/* Columnas que se pliegan antes de pasar a tarjetas: el solicitante queda solo
como avatar (nombre en el tooltip) y bajo 1360 px pasa a la celda de la orden. */
@media (max-width: 1599.98px) {
#ordenes_compra_admin .ocl-table .ocl-sol-name { display: none; }
#ordenes_compra_admin .ocl-table th.ocl-col-sol { text-align: center !important; }
#ordenes_compra_admin .ocl-table td.ocl-col-sol .rw-cell-main { justify-content: center; }
}
@media (max-width: 1359.98px) {
#ordenes_compra_admin .ocl-table .ocl-col-sol { display: none; }
#ordenes_compra_admin .ocl-sol-inline { display: block !important; }
}
/* El select original del filtro de proveedor (oculto por TomSelect) no debe
empujar el ancho de la página. */
#ordenes_compra_admin #filtroOcProveedorAdmin.ts-hidden-accessible {
position: absolute !important; left: 0 !important; top: 0 !important;
width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important;
}
#ordenes_compra_admin .ocl-filter-prov { position: relative; }
/* --- Tarjetas (tablet y móvil): filas planas dentro del panel --- */
#ordenes_compra_admin .ocl-card { display: flex; flex-direction: column; gap: 10px; }
#ordenes_compra_admin .ocl-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
#ordenes_compra_admin .ocl-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ordenes_compra_admin .ocl-card-fecha { font-size: var(--rw-fs-xs); color: var(--rw-faint); font-variant-numeric: tabular-nums; }
#ordenes_compra_admin .ocl-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ordenes_compra_admin .ocl-card-title { font-weight: 500; color: var(--rw-ink); line-height: 1.35; }
#ordenes_compra_admin .ocl-card-sub { font-size: var(--rw-fs-xs); color: var(--rw-muted); line-height: 1.4; }
#ordenes_compra_admin .ocl-card-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#ordenes_compra_admin .ocl-card-sol { display: inline-flex; align-items: center; gap: 8px; color: var(--rw-ink-2); font-size: var(--rw-fs-sm); }
#ordenes_compra_admin .ocl-card-sol .ocl-avatar { flex-basis: 26px; width: 26px; height: 26px; font-size: 10px; }
#ordenes_compra_admin .ocl-card-fp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#ordenes_compra_admin .ocl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--rw-border-soft); }
#ordenes_compra_admin .ocl-card-total { min-width: 0; }
#ordenes_compra_admin .ocl-card-total .ocl-total { font-size: 1rem; }
#ordenes_compra_admin .ocl-card-total .ocl-total-sub { display: block; }
#ordenes_compra_admin .ocl-card-total .ocl-sub-line { margin-top: 3px; }
#ordenes_compra_admin .ocl-card .rw-actions { flex: 0 0 auto; }
#ordenes_compra_admin .ocl-card-ver {
height: 32px; display: inline-flex !important; align-items: center; gap: 6px;
padding: 0 10px !important; border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-sm) !important;
background: var(--rw-surface) !important; color: var(--rw-ink-2) !important; font-size: var(--rw-fs-sm) !important; font-weight: 500 !important;
}
#ordenes_compra_admin .ocl-card-ver:hover { background: var(--rw-accent-soft) !important; border-color: var(--rw-accent-border) !important; color: var(--rw-accent) !important; }
#ordenes_compra_admin .ocl-card-ver i { font-size: .75rem; }
@media (max-width: 1359.98px) {
#ordenes_compra_admin .ocl-panel .spa-desktop-table { display: none !important; }
#ordenes_compra_admin .ocl-panel .spa-mobile-list {
display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important;
background: transparent !important; border: 0 !important;
}
#ordenes_compra_admin .ocl-panel .spa-mobile-card {
padding: 14px 18px !important; margin: 0 !important;
border: 0 !important; border-bottom: 1px solid var(--rw-border-soft) !important; border-radius: 0 !important;
box-shadow: none !important; background: var(--rw-surface) !important; transform: none !important;
}
#ordenes_compra_admin .ocl-panel .spa-mobile-card:last-child { border-bottom: 0 !important; }
#ordenes_compra_admin .ocl-panel .rw-panel-foot { border-top: 1px solid var(--rw-border) !important; }
}
@media (min-width: 768px) and (max-width: 1359.98px) {
/* 3 + 2 KPIs ocupando todo el ancho */
#ordenes_compra_admin .ocl-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#ordenes_compra_admin .ocl-kpis > .rw-kpi { grid-column: span 2; }
#ordenes_compra_admin .ocl-kpis > .rw-kpi:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 767.98px) {
#ordenes_compra_admin .ocl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#ordenes_compra_admin .ocl-kpis > .rw-kpi:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
#ordenes_compra_admin .ocl-panel .spa-mobile-card { padding: 14px !important; }
#ordenes_compra_admin .ocl-panel .rw-panel-foot { justify-content: center; }
#ordenes_compra_admin .ocl-panel .rw-panel-foot .spa-pagination-text { width: 100%; text-align: center; }
#ordenes_compra_admin .ocl-filter-row > .spa-select-wrap,
#ordenes_compra_admin .ocl-filter-prov { min-width: 0 !important; width: 100%; }
#ordenes_compra_admin .ocl-card-foot { flex-direction: column; align-items: stretch; }
#ordenes_compra_admin .ocl-card-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
#ordenes_compra_admin .ocl-card-total .ocl-total-sub { order: 3; width: 100%; }
#ordenes_compra_admin .ocl-card-total .ocl-sub-line { margin-top: 0; }
#ordenes_compra_admin .ocl-card .rw-actions { display: flex; width: 100%; gap: 6px; }
#ordenes_compra_admin .ocl-card-ver { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 379.98px) {
#ordenes_compra_admin .ocl-card-ver span, #ordenes_compra_admin .ocl-card-ver { font-size: var(--rw-fs-xs) !important; }
}
@media (prefers-reduced-motion: reduce) {
#ordenes_compra_admin .ocl-table tr.row-orden-compra-admin,
#ordenes_compra_admin button.rw-kpi { transition: none !important; }
}
/* ============================ Modal: detalle de OC (solo lectura) ============================ */
#modalDetalleOrdenCompra .modal-body { background: var(--rw-surface-2); }
#modalDetalleOrdenCompra .ocm-hero { background: var(--rw-surface); margin-bottom: 12px; }
#modalDetalleOrdenCompra .ocm-hero-main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
#modalDetalleOrdenCompra .ocm-hero-icon {
flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 12px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: 1.05rem;
}
#modalDetalleOrdenCompra .ocm-hero-txt { min-width: 0; }
#modalDetalleOrdenCompra .ocm-hero-folio { font-size: 1.2rem; font-weight: 600; color: var(--rw-ink); letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
#modalDetalleOrdenCompra .ocm-hero-sub { margin-top: 2px; font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#modalDetalleOrdenCompra .ocm-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#modalDetalleOrdenCompra .ocm-hero-chips .rw-chip i { font-size: .68rem; }
#modalDetalleOrdenCompra .ocm-hero-total { text-align: right; }
#modalDetalleOrdenCompra .ocm-hero-eq { margin-top: 2px; font-size: var(--rw-fs-xs); color: var(--rw-muted); font-variant-numeric: tabular-nums; }
/* Línea de tiempo horizontal */
#modalDetalleOrdenCompra .ocm-steps {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0;
list-style: none; margin: 0 0 12px; padding: 14px 16px;
background: var(--rw-surface); border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg);
}
#modalDetalleOrdenCompra .ocm-step { position: relative; display: flex; align-items: flex-start; gap: 10px; padding-right: 12px; min-width: 0; }
#modalDetalleOrdenCompra .ocm-step + .ocm-step::before {
content: ""; position: absolute; left: -12px; right: auto; top: 12px; width: 0;
}
#modalDetalleOrdenCompra .ocm-step-dot {
flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; font-size: .62rem; background: var(--rw-surface-3); color: var(--rw-faint); border: 1px solid var(--rw-border);
}
#modalDetalleOrdenCompra .ocm-step.is-done .ocm-step-dot { background: var(--rw-green-soft); color: var(--rw-green-text); border-color: var(--rw-green-border); }
#modalDetalleOrdenCompra .ocm-step.is-rejected .ocm-step-dot { background: var(--rw-red-soft); color: var(--rw-red-text); border-color: var(--rw-red-border); }
#modalDetalleOrdenCompra .ocm-step-txt { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
#modalDetalleOrdenCompra .ocm-step-label { font-size: var(--rw-fs-sm); font-weight: 600; color: var(--rw-ink); line-height: 1.3; }
#modalDetalleOrdenCompra .ocm-step.is-pending .ocm-step-label { color: var(--rw-muted); font-weight: 500; }
#modalDetalleOrdenCompra .ocm-step-meta { font-size: var(--rw-fs-xs); color: var(--rw-faint); line-height: 1.35; font-variant-numeric: tabular-nums; }
/* Secciones */
#modalDetalleOrdenCompra .ocm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
#modalDetalleOrdenCompra .ocm-grid > .ocm-sec { margin: 0 !important; }
#modalDetalleOrdenCompra .ocm-sec + .ocm-sec { margin-top: 12px; }
#modalDetalleOrdenCompra .ocm-grid + .ocm-sec { margin-top: 0; }
#modalDetalleOrdenCompra .ocm-sec .rw-dl { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
#modalDetalleOrdenCompra .ocm-grid .rw-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modalDetalleOrdenCompra .ocm-dl-wide { grid-column: 1 / -1; }
#modalDetalleOrdenCompra .rw-modal-section-title .ocm-count { margin-left: auto; height: 22px; }
#modalDetalleOrdenCompra .ocm-link { color: var(--rw-accent); text-decoration: none; }
#modalDetalleOrdenCompra .ocm-link:hover { text-decoration: underline; }
#modalDetalleOrdenCompra .ocm-note { margin: 0 0 12px; }
#modalDetalleOrdenCompra .ocm-sub { margin: 14px 0 8px; font-size: var(--rw-fs-xs); font-weight: 500; color: var(--rw-muted); }
#modalDetalleOrdenCompra .ocm-sec > .ocm-sub:first-of-type { margin-top: 0; }
#modalDetalleOrdenCompra .ocm-empty-sm { padding: 16px; gap: 4px; font-size: var(--rw-fs-sm); }
#modalDetalleOrdenCompra .ocm-empty-sm > i { font-size: 1.1rem; height: auto; margin: 0; }
/* Artículos */
#modalDetalleOrdenCompra .ocm-items-wrap { overflow-x: auto; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); }
#modalDetalleOrdenCompra .ocm-items { width: 100%; min-width: 520px; margin: 0; }
#modalDetalleOrdenCompra .ocm-items th { padding: 8px 12px !important; border-bottom: 1px solid var(--rw-border) !important; }
#modalDetalleOrdenCompra .ocm-items td { padding: 10px 12px !important; border-bottom: 1px solid var(--rw-border-soft) !important; font-size: var(--rw-fs-sm); color: var(--rw-text); vertical-align: middle; background: transparent; }
#modalDetalleOrdenCompra .ocm-items tbody tr:last-child td { border-bottom: 0 !important; }
#modalDetalleOrdenCompra .ocm-items .rw-cell-sub { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
#modalDetalleOrdenCompra .ocm-item-desc { color: var(--rw-ink); font-weight: 500; }
#modalDetalleOrdenCompra .ocm-item-total { font-weight: 600; color: var(--rw-ink) !important; }
#modalDetalleOrdenCompra .ocm-totales { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 12px 0 0; }
#modalDetalleOrdenCompra .ocm-totales > div { display: flex; justify-content: space-between; gap: 24px; min-width: 240px; font-size: var(--rw-fs-sm); }
#modalDetalleOrdenCompra .ocm-totales dt { font-weight: 400; color: var(--rw-muted); }
#modalDetalleOrdenCompra .ocm-totales dd { margin: 0; color: var(--rw-ink-2); font-variant-numeric: tabular-nums; }
#modalDetalleOrdenCompra .ocm-totales .is-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--rw-border); font-size: var(--rw-fs-md); }
#modalDetalleOrdenCompra .ocm-totales .is-total dt, #modalDetalleOrdenCompra .ocm-totales .is-total dd { color: var(--rw-ink); font-weight: 600; }
#modalDetalleOrdenCompra .ocm-totales-usd dt, #modalDetalleOrdenCompra .ocm-totales-usd dd { font-size: var(--rw-fs-xs); }
/* Recepciones y archivos */
#modalDetalleOrdenCompra .ocm-recs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#modalDetalleOrdenCompra .ocm-rec { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); }
#modalDetalleOrdenCompra .ocm-rec-qty { flex: 0 0 auto; min-width: 64px; font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; font-size: var(--rw-fs-sm); }
#modalDetalleOrdenCompra .ocm-rec-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#modalDetalleOrdenCompra .ocm-rec-concepto { font-size: var(--rw-fs-sm); color: var(--rw-ink-2); }
#modalDetalleOrdenCompra .ocm-rec-meta { font-size: var(--rw-fs-xs); color: var(--rw-faint); }
#modalDetalleOrdenCompra .ocm-rec-com { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#modalDetalleOrdenCompra .ocm-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
#modalDetalleOrdenCompra .ocm-file-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
#modalDetalleOrdenCompra .ocm-file-meta { font-size: var(--rw-fs-xs); color: var(--rw-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modalDetalleOrdenCompra .ocm-file-go { flex: 0 0 auto; font-size: .7rem; color: var(--rw-faint); }
#modalDetalleOrdenCompra .ocm-file.is-img .rw-file-icon,
#modalDetalleOrdenCompra .ocm-file.is-otro .rw-file-icon { background: var(--rw-surface-3); color: var(--rw-ink-2); }
#modalDetalleOrdenCompra .ocm-file.is-xls .rw-file-icon,
#modalDetalleOrdenCompra .ocm-file.is-pago .rw-file-icon { background: var(--rw-green-soft); color: var(--rw-green-text); }
#modalDetalleOrdenCompra .ocm-file.is-doc .rw-file-icon,
#modalDetalleOrdenCompra .ocm-file.is-xml .rw-file-icon { background: var(--rw-accent-soft); color: var(--rw-accent); }
#modalDetalleOrdenCompra .ocm-file:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
/* Solicitud de edición de entrega */
#modalDetalleOrdenCompra .ocm-sol-ed { margin: 0 0 4px; }
#modalDetalleOrdenCompra .ocm-sol-ed-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#modalDetalleOrdenCompra .ocm-sol-ed-meta { font-size: var(--rw-fs-xs); opacity: .85; }
#modalDetalleOrdenCompra .ocm-sol-ed-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#modalDetalleOrdenCompra .ocm-sol-ed-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
/* Acciones */
#modalDetalleOrdenCompra .ocm-lock { margin: 12px 0 0; }
#modalDetalleOrdenCompra .ocm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
#modalDetalleOrdenCompra .ocm-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
#modalDetalleOrdenCompra .ocm-actions .btnDescargarOcPdfModal i { color: var(--rw-red-text); }
#modalDetalleOrdenCompra .ocm-actions .btnDescargarOcExcelModal i { color: var(--rw-green-text); }
@media (max-width: 991.98px) {
#modalDetalleOrdenCompra .ocm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
#modalDetalleOrdenCompra .modal-body { padding: 14px !important; }
#modalDetalleOrdenCompra .ocm-hero { padding: 14px; }
#modalDetalleOrdenCompra .ocm-hero-icon { display: none; }
#modalDetalleOrdenCompra .ocm-hero-total { text-align: left; width: 100%; padding-top: 10px; border-top: 1px solid var(--rw-border); }
#modalDetalleOrdenCompra .ocm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
#modalDetalleOrdenCompra .ocm-grid .rw-dl, #modalDetalleOrdenCompra .ocm-sec .rw-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modalDetalleOrdenCompra .ocm-files { grid-template-columns: 1fr; }
#modalDetalleOrdenCompra .ocm-totales > div { min-width: 0; width: 100%; }
#modalDetalleOrdenCompra .ocm-actions { flex-direction: column-reverse; }
#modalDetalleOrdenCompra .ocm-actions .btn { width: 100%; justify-content: center; }
}
/* ============================ Modales de acción de OC ============================ */
:is(#modalSolicitarAutorizacionOc, #modalRechazarOc, #modalMotivoBorradoAdmin) .ocx-note { margin: 0 0 14px; }
:is(#modalSolicitarAutorizacionOc, #modalRechazarOc, #modalMotivoBorradoAdmin) .ocx-label { margin-bottom: 6px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
:is(#modalSolicitarAutorizacionOc, #modalRechazarOc, #modalMotivoBorradoAdmin) .ocx-textarea { resize: vertical; min-height: 110px; }
:is(#modalSolicitarAutorizacionOc, #modalRechazarOc, #modalMotivoBorradoAdmin) .ocx-count { display: block; margin-top: 6px; text-align: right; font-size: var(--rw-fs-xs); color: var(--rw-faint); font-variant-numeric: tabular-nums; }
:is(#modalConfirmarAutorizacionTrasGuardar, #modalConfirmarPagoOc) .ocx-confirm { display: flex; align-items: flex-start; gap: 14px; }
:is(#modalConfirmarAutorizacionTrasGuardar, #modalConfirmarPagoOc) .ocx-confirm-icon {
flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 12px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: 1rem;
}
:is(#modalConfirmarAutorizacionTrasGuardar, #modalConfirmarPagoOc) .ocx-confirm-icon.is-ok { background: var(--rw-green-soft); color: var(--rw-green-text); }
:is(#modalConfirmarAutorizacionTrasGuardar, #modalConfirmarPagoOc) .ocx-confirm-title { font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); line-height: 1.3; }
:is(#modalConfirmarAutorizacionTrasGuardar, #modalConfirmarPagoOc) .ocx-confirm-text { margin: 4px 0 0; font-size: var(--rw-fs-sm); color: var(--rw-muted); line-height: 1.5; }
:is(#modalSolicitarAutorizacionOc, #modalRechazarOc, #modalMotivoBorradoAdmin, #modalConfirmarAutorizacionTrasGuardar, #modalConfirmarPagoOc, #modalHistorialOc) .modal-footer .btn { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 575.98px) {
:is(#modalSolicitarAutorizacionOc, #modalRechazarOc, #modalMotivoBorradoAdmin, #modalConfirmarAutorizacionTrasGuardar, #modalConfirmarPagoOc) .modal-footer { flex-direction: column-reverse; align-items: stretch; }
:is(#modalSolicitarAutorizacionOc, #modalRechazarOc, #modalMotivoBorradoAdmin, #modalConfirmarAutorizacionTrasGuardar, #modalConfirmarPagoOc) .modal-footer .btn { width: 100%; justify-content: center; margin: 0; }
}
/* Historial: línea de tiempo vertical */
#modalHistorialOc .och-list { list-style: none; margin: 0; padding: 0; }
#modalHistorialOc .och-item { position: relative; display: flex; gap: 14px; padding: 0 0 16px; }
#modalHistorialOc .och-item:last-child { padding-bottom: 0; }
#modalHistorialOc .och-item::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--rw-border); }
#modalHistorialOc .och-item:last-child::before { display: none; }
#modalHistorialOc .och-dot { position: relative; flex: 0 0 12px; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--rw-surface); border: 2px solid var(--rw-accent); }
#modalHistorialOc .och-item:first-child .och-dot { background: var(--rw-accent); }
#modalHistorialOc .och-body { flex: 1 1 auto; min-width: 0; padding: 10px 14px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface); }
#modalHistorialOc .och-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
#modalHistorialOc .och-accion { font-size: var(--rw-fs-sm); font-weight: 600; color: var(--rw-ink); }
#modalHistorialOc .och-fecha { font-size: var(--rw-fs-xs); color: var(--rw-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
#modalHistorialOc .och-detalle { margin-top: 3px; font-size: var(--rw-fs-sm); color: var(--rw-ink-2); line-height: 1.45; overflow-wrap: anywhere; }
#modalHistorialOc .och-user { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#modalHistorialOc .och-user i { font-size: .65rem; color: var(--rw-faint); }
/* ===== Secciones v2 · grupo F ===== */
/* ============================================================================
SECCIONES v2 · F — Reportes (admin #reportes) + modal #modalReporteComprobantes
Clases propias con prefijo .rep-
============================================================================ */
/* --- Selector de tipo --- */
#reportes .rep-type-selector { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 20px 0 16px; }
#reportes .rep-type-btn {
display: flex !important; align-items: center; gap: 10px; min-width: 0; min-height: 60px;
padding: 10px 12px !important; text-align: left;
background: var(--rw-surface) !important; border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-md, 12px) !important;
color: var(--rw-ink-2) !important; box-shadow: var(--rw-shadow-xs);
transition: border-color var(--rw-dur-fast, .15s) ease, box-shadow var(--rw-dur-fast, .15s) ease, background-color var(--rw-dur-fast, .15s) ease;
}
#reportes .rep-type-btn > i { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; font-size: .8rem; }
#reportes .rep-type-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#reportes .rep-type-name { font-size: var(--rw-fs-sm); font-weight: 600; color: var(--rw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#reportes .rep-type-desc { margin-top: 2px; font-size: var(--rw-fs-xs, 12px); font-weight: 400; color: var(--rw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#reportes .rep-type-btn:hover { border-color: var(--rw-border-strong) !important; box-shadow: var(--rw-shadow-hover); }
#reportes .rep-type-btn.active { border-color: var(--rw-accent) !important; box-shadow: 0 0 0 1px var(--rw-accent) inset !important; }
#reportes .rep-type-btn.active > i { background: var(--rw-accent-soft); color: var(--rw-accent); }
/* --- Filtros --- */
#reportes .rep-filtros { padding: 0 !important; overflow: hidden; }
#reportes .rep-filtros-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--rw-border-soft); }
#reportes .rep-filtros-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
#reportes .rep-filtros-icon, #reportes .rep-chart-icon { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--rw-surface-3); color: var(--rw-ink-2); font-size: .78rem; }
#reportes .rep-filtros-title { font-size: var(--rw-fs-lg); font-weight: 600; color: var(--rw-ink); letter-spacing: -0.01em; line-height: 1.25; }
#reportes .rep-filtros-sub { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#reportes .rep-filtros-presets { margin: 0 !important; flex-wrap: nowrap !important; }
#reportes .rep-preset-btn { white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
#reportes .rep-preset-btn:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 1px; }
#reportes .rep-filtros-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 12px 14px !important; padding: 16px 18px 4px; margin: 0 !important; }
#reportes .rep-filtro-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#reportes .rep-filtro-item label { margin: 0 !important; font-size: var(--rw-fs-xs, 12px) !important; font-weight: 500 !important; color: var(--rw-muted) !important; text-transform: none !important; letter-spacing: 0 !important; }
#reportes .rep-filtro-item .form-control, #reportes .rep-filtro-item .form-select { height: 36px; font-size: var(--rw-fs-sm); border-radius: var(--rw-r-sm, 8px); }
#reportes .rep-filtros-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px 18px !important; border-top: 1px solid var(--rw-border-soft); background: var(--rw-surface-2); }
#reportes .rep-btn-generar { display: inline-flex; align-items: center; gap: 8px; height: 36px; }
#reportes .rep-btn-generar:focus-visible, #reportes .rep-btn-excel:focus-visible, #reportes .rep-btn-pdf:focus-visible, #reportes .rep-type-btn:focus-visible { outline: 2px solid var(--rw-accent) !important; outline-offset: 2px; }
#reportes .rep-export-group { display: flex; align-items: center; gap: 8px; }
#reportes .rep-export-label { font-size: var(--rw-fs-xs, 12px); color: var(--rw-muted); margin-right: 2px; }
#reportes .rep-btn-excel, #reportes .rep-btn-pdf { display: inline-flex; align-items: center; gap: 7px; height: 36px; }
#reportes .rep-btn-excel:disabled, #reportes .rep-btn-pdf:disabled { opacity: .5; }
/* --- KPIs --- */
#reportes .rep-resumen.rw-kpis { margin-bottom: 16px; }
#reportes .rep-resumen .rep-kpi { padding: 16px 18px; box-shadow: var(--rw-shadow-xs); }
#reportes .rep-resumen .rep-kpi-value { font-size: 1.45rem; }
#reportes .rep-resumen.rw-kpis-5 .rep-kpi-value { font-size: 1.25rem; }
#reportes .rep-resumen .rw-kpi-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#reportes .rep-resumen .rep-kpi-warn .rep-kpi-value { color: var(--rw-red-text); }
#reportes .rep-is-loading { opacity: .45; pointer-events: none; transition: opacity .2s ease; }
/* --- Gráfica --- */
#reportes .rep-chart-wrap { padding: 0 !important; overflow: hidden; }
#reportes .rep-chart-head { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 14px 18px; border-bottom: 1px solid var(--rw-border-soft); }
#reportes .rep-chart-sub { font-variant-numeric: tabular-nums; }
#reportes .rep-chart-canvas { margin: 14px 18px 16px; height: 300px; }
/* --- Paneles de tabla --- */
#reportes .rep-tabla-panel.rw-panel { margin-bottom: 16px; }
#reportes .rep-tabla-head-main { min-width: 0; }
#reportes .rep-tabla-title i { width: 28px !important; height: 28px !important; flex: 0 0 28px; }
#reportes .rep-tabla-sub i { margin-right: 3px; font-size: .72rem; color: var(--rw-faint); }
#reportes .rep-tabla-scroll { overflow: auto; max-height: min(68vh, 620px); }
#reportes .rep-tabla-scroll:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: -2px; }
#reportes .rep-tabla { width: 100%; min-width: 100% !important; table-layout: auto; }
#reportes .rep-tabla thead th { padding: 10px 14px; background: var(--rw-surface-2) !important; }
#reportes .rep-tabla tbody td { padding: 11px 14px; white-space: nowrap; }
#reportes .rep-tabla td.rep-c-wide { white-space: normal; min-width: 190px; max-width: 280px; }
#reportes .rep-tabla td.rep-c-mid { white-space: normal; min-width: 120px; max-width: 170px; line-height: 1.35; }
#reportes .rep-tabla td.rep-c-strong, #reportes .rep-tabla tfoot td.rep-c-strong { font-weight: 600; color: var(--rw-ink); }
#reportes .rep-tabla .rw-cell-main { gap: 10px; }
#reportes .rep-tabla .rw-cell-title { white-space: normal; }
#reportes .rep-tabla td.rep-c-orden .rw-cell-title { white-space: nowrap; font-variant-numeric: tabular-nums; }
#reportes .rep-tabla .rw-cell-sub { margin-top: 1px; font-size: 12px; }
#reportes .rep-tabla .rw-avatar { flex-basis: 32px; width: 32px; height: 32px; font-size: .78rem; }
#reportes .rep-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
#reportes .rep-uuid { max-width: none; }
#reportes .rep-fecha { font-variant-numeric: tabular-nums; color: var(--rw-ink-2); }
#reportes .rep-row-nodeducible td { background: #FFF7F7 !important; }
#reportes .rep-row-nodeducible td:first-child { box-shadow: inset 3px 0 0 var(--rw-red-text); }
#reportes .rep-tabla tfoot td { position: sticky; bottom: 0; z-index: 1; padding: 12px 14px; background: #FAFAFB; border-top: 1px solid var(--rw-border); font-weight: 600; color: var(--rw-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
#reportes .rep-total-label { display: inline-flex; align-items: center; gap: 6px; }
#reportes .rep-total-label::before { content: "\03A3"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: 11px; }
/* Barra de avance / participación */
#reportes .rep-progress { display: flex; align-items: center; gap: 8px; min-width: 130px; }
#reportes .rep-progress-track { position: relative; flex: 1 1 auto; height: 6px; min-width: 60px; border-radius: 999px; background: var(--rw-surface-3); overflow: hidden; }
#reportes .rep-progress-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--rw-accent); }
#reportes .rep-progress--orange .rep-progress-fill { background: #E38B1B; }
#reportes .rep-progress--red .rep-progress-fill { background: var(--rw-red-text); }
#reportes .rep-progress-val { flex: 0 0 auto; min-width: 44px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--rw-ink-2); }
#reportes .rep-progress--red .rep-progress-val { color: var(--rw-red-text); font-weight: 600; }
/* Tablas fiscales */
#reportes .rep-fiscal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; align-items: start; }
@media (min-width: 1280px) {
#reportes .rep-fiscal-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
#reportes .rep-fiscal-grid > .rep-tabla-panel:only-child { grid-column: 1 / -1; }
}
/* Tarjetas (móvil) */
#reportes .rep-cards, #reportes .rep-cards-total { display: none; }
/* Estados vacío / carga */
#reportes .rep-empty { padding: 44px 16px; border: 1px dashed var(--rw-border); border-radius: var(--rw-r-lg); background: var(--rw-surface); }
#reportes .rep-empty strong { color: var(--rw-ink); font-weight: 600; }
#reportes .rep-loading .rep-tabla-title { color: var(--rw-muted) !important; font-weight: 500 !important; font-size: var(--rw-fs-sm) !important; }
#reportes .rep-loading .spinner-border { width: 14px; height: 14px; border-width: 2px; color: var(--rw-accent); }
#reportes .rep-skel { padding: 6px 18px 14px; }
#reportes .rep-skel-row { display: grid; grid-template-columns: 2fr 3fr 2fr 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--rw-border-soft); }
#reportes .rep-skel-row:last-child { border-bottom: 0; }
#reportes .rep-skel-row span { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #F2F2F4 0%, #E9E9EC 50%, #F2F2F4 100%); background-size: 200% 100%; animation: repSkel 1.2s ease-in-out infinite; }
@keyframes repSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (max-width: 1279.98px) {
#reportes .rep-type-desc { display: none; }
#reportes .rep-type-btn { min-height: 52px; }
}
@media (max-width: 1199.98px) {
#reportes .rep-type-selector { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#reportes .rep-type-btn > i { display: none !important; }
#reportes .rep-type-name { white-space: normal; }
}
@media (max-width: 991.98px) {
#reportes .rep-type-selector { display: flex; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; padding: 2px 1px 6px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
#reportes .rep-type-selector::-webkit-scrollbar { display: none; }
#reportes .rep-type-btn { flex: 0 0 auto; min-height: 44px; padding: 8px 12px !important; scroll-snap-align: start; }
#reportes .rep-type-btn > i { display: inline-flex !important; flex-basis: 26px; width: 26px; height: 26px; }
#reportes .rep-type-name { white-space: nowrap; }
#reportes .rep-type-btn:last-child { margin-right: 28px; }
}
@media (max-width: 767.98px) {
#reportes .rep-type-selector { margin: 14px -16px 12px; padding: 2px 16px 6px; }
#reportes .rep-filtros-top { padding: 12px 14px; }
#reportes .rep-filtros-heading { display: none; }
#reportes .rep-filtros-presets { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
#reportes .rep-preset-btn { padding: 6px 4px; text-align: center; }
#reportes .rep-filtros-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 14px 14px 2px; }
#reportes .rep-filtros-actions { flex-direction: column; align-items: stretch; padding: 12px 14px !important; }
#reportes .rep-btn-generar { justify-content: center; height: 40px; }
#reportes .rep-export-group { width: 100%; }
#reportes .rep-export-label { display: none; }
#reportes .rep-export-group > .btn { flex: 1 1 0; justify-content: center; }
#reportes .rep-resumen.rw-kpis-5 > .rep-kpi:last-child:nth-child(odd),
#reportes .rep-resumen.rw-kpis-3 > .rep-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
#reportes .rep-resumen .rep-kpi { padding: 13px 14px; }
#reportes .rep-resumen .rep-kpi-value, #reportes .rep-resumen.rw-kpis-5 .rep-kpi-value { font-size: 1.05rem; }
#reportes .rep-resumen .rw-kpi-sub { font-size: 12px; white-space: normal; }
#reportes .rep-chart-head { padding: 12px 14px; }
#reportes .rep-chart-canvas { margin: 12px 10px 12px 8px; height: 260px; }
#reportes .rep-tabla-head { padding: 12px 14px; }
#reportes .rep-tabla-head .rw-count { display: none; }
/* Tabla -> tarjetas */
#reportes .rep-tabla-scroll { display: none !important; }
#reportes .rep-cards { display: block; }
#reportes .rep-card { padding: 13px 14px; border-bottom: 1px solid var(--rw-border-soft); }
#reportes .rep-card.rep-row-nodeducible { background: #FFF7F7; box-shadow: inset 3px 0 0 var(--rw-red-text); }
#reportes .rep-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#reportes .rep-card-main { min-width: 0; flex: 1 1 auto; }
#reportes .rep-card-main .rw-avatar { flex-basis: 32px; width: 32px; height: 32px; font-size: .75rem; }
#reportes .rep-card-main .rw-cell-main { gap: 10px; }
#reportes .rep-card-amount { flex: 0 0 auto; font-weight: 600; color: var(--rw-ink); font-variant-numeric: tabular-nums; padding-top: 2px; }
#reportes .rep-card-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 10px 0 0 42px; }
#reportes .rep-card-dl > div { min-width: 0; }
#reportes .rep-card-dl > div.rep-cd-wide { grid-column: 1 / -1; }
#reportes .rep-card-dl dt { margin: 0 0 2px; font-size: 12px; font-weight: 400; color: var(--rw-muted); }
#reportes .rep-card-dl dd { margin: 0; font-size: var(--rw-fs-sm); color: var(--rw-ink-2); text-align: left !important; overflow-wrap: anywhere; }
#reportes .rep-card-dl .rw-cell-title { font-size: var(--rw-fs-sm); }
#reportes .rep-card-dl .rep-chips { flex-direction: row; flex-wrap: wrap; }
#reportes .rep-card-dl .rep-progress { min-width: 0; }
#reportes .rep-cards-total { display: block; padding: 12px 14px 14px; background: #FAFAFB; }
#reportes .rep-cards-total-title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--rw-fs-sm); font-weight: 600; color: var(--rw-ink); }
#reportes .rep-cards-total-title::before { content: "\03A3"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--rw-accent-soft); color: var(--rw-accent); font-size: 11px; }
#reportes .rep-cards-total dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
#reportes .rep-cards-total dt { font-size: 12px; font-weight: 400; color: var(--rw-muted); }
#reportes .rep-cards-total dd { margin: 0; font-weight: 600; color: var(--rw-ink); text-align: left !important; }
#reportes .rep-skel { padding: 4px 14px 10px; }
#reportes .rep-skel-row { grid-template-columns: 2fr 1fr; }
#reportes .rep-skel-row span:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
#reportes .rep-type-btn, #reportes .rep-preset-btn, #reportes .rep-is-loading { transition: none !important; }
#reportes .rep-skel-row span { animation: none; }
}
/* --- Modal: Generar reporte de comprobantes --- */
#modalReporteComprobantes .rep-modal-comp { max-width: 540px; }
#modalReporteComprobantes .rw-modal-section + .rw-modal-section { margin-top: 12px; }
#modalReporteComprobantes .form-label { font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); margin-bottom: 5px; }
#modalReporteComprobantes .form-text { font-size: 12px; color: var(--rw-muted); }
#modalReporteComprobantes .rep-mc-pdf i { color: var(--rw-red-text); }
#modalReporteComprobantes .modal-footer .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 575.98px) {
#modalReporteComprobantes .modal-footer { flex-direction: column-reverse; align-items: stretch; }
#modalReporteComprobantes .cp-footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#modalReporteComprobantes .modal-footer .btn { justify-content: center; }
}
/* Ajustes de ancho: en tablas densas el ícono solo aparece en las tarjetas móviles */
#reportes .rep-tabla--ordenes_compra .rw-avatar,
#reportes .rep-tabla--comprobantes .rw-avatar,
#reportes .rep-tabla--vehiculos .rw-avatar { display: none !important; }
#reportes .rep-tabla--vehiculos td.rep-c-wide, #reportes .rep-tabla--ordenes_compra td.rep-c-wide, #reportes .rep-tabla--comprobantes td.rep-c-wide { min-width: 170px; max-width: 250px; }
#reportes .rep-tabla--vehiculos td, #reportes .rep-tabla--vehiculos th { padding-left: 12px !important; padding-right: 12px !important; }
#reportes .rep-fiscal-grid { grid-template-columns: minmax(0, 1fr) !important; }
/* Tablet: la tabla desplaza dentro de su panel; la 1.ª columna queda fija como referencia */
@media (max-width: 1279.98px) {
#reportes .rep-tabla tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--rw-surface); box-shadow: inset -1px 0 0 var(--rw-border-soft); }
#reportes .rep-tabla thead th:first-child { left: 0; z-index: 3; box-shadow: inset -1px 0 0 var(--rw-border-soft); }
#reportes .rep-tabla tfoot td:first-child { left: 0; z-index: 2; box-shadow: inset -1px 0 0 var(--rw-border-soft); }
#reportes .rep-tabla tbody tr:hover td:first-child { background: var(--rw-surface-2); }
#reportes .rep-tabla td.rep-c-wide:first-child { min-width: 180px; max-width: 220px; }
}
@media (max-width: 767.98px) {
#reportes .rep-type-selector { scroll-padding-left: 16px; }
#reportes .rep-card-dl > div.rep-cd-estado { grid-column: 1 / -1; }
}
@media (max-width: 1279.98px) {
#reportes .rep-tabla .rw-avatar { display: none !important; }
#reportes .rep-tabla td.rep-c-wide:first-child { min-width: 200px; max-width: 240px; }
}
/* ===== Secciones v3 · grupo G ===== */
/* ============================================================================
SECCIONES v3 · G — Admin › Nómina › Gasto nómina
Ámbito: #nomina_gasto y sus modales (#ngImportModal, #ngRenombrarModal,
#ngAyudaModal, #ngEliminarModal). Clases propias: .ng-wb-, .ng-rb-, .ng-switch.
Rediseño de la barra de control de la semana, del filtro de periodo del
resumen, del panel de semanas capturadas y de los modales.
========================================================================= */
/* ------------------------------------------------- Barra: semana de captura */
#nomina_gasto .ng-weekbar {
margin: 0 0 16px;
background: var(--rw-surface);
border: 1px solid var(--rw-border);
border-radius: var(--rw-r-lg);
box-shadow: var(--rw-shadow-xs);
overflow: hidden;
}
#nomina_gasto .ng-wb-main {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 14px;
padding: 12px 14px;
}
#nomina_gasto .ng-wb-sub {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 14px;
padding: 10px 14px;
background: var(--rw-surface-2);
border-top: 1px solid var(--rw-border-soft);
}
/* Navegación « semana anterior · selector · semana siguiente » */
#nomina_gasto .ng-wb-nav { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
#nomina_gasto .ng-wb-arrow {
flex: 0 0 38px; width: 38px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
border: 1px solid var(--rw-border);
border-radius: var(--rw-r-md);
background: var(--rw-surface);
color: var(--rw-ink-2);
font-size: .78rem;
transition: background-color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease;
}
#nomina_gasto .ng-wb-arrow:hover { background: var(--rw-surface-2); border-color: var(--rw-border-strong); color: var(--rw-ink); }
#nomina_gasto .ng-wb-arrow:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
/* El selector: el sigue ahí (transparente, encima) para no
perder el teclado ni el calendario nativo; encima se lee la semana con letra. */
#nomina_gasto .ng-wb-picker {
position: relative;
flex: 0 1 auto;
min-width: 0;
display: flex; align-items: center; gap: 10px;
padding: 6px 12px;
border: 1px solid var(--rw-border);
border-radius: var(--rw-r-md);
background: var(--rw-surface);
transition: border-color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease;
}
#nomina_gasto .ng-wb-picker:hover { border-color: var(--rw-border-strong); }
#nomina_gasto .ng-wb-picker:focus-within { border-color: var(--rw-accent); box-shadow: 0 0 0 3px var(--rw-accent-ring); }
#nomina_gasto .ng-wb-cal {
flex: 0 0 30px; width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 9px;
background: var(--rw-accent-soft);
color: var(--rw-accent);
font-size: .78rem;
}
#nomina_gasto .ng-wb-texts { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#nomina_gasto .ng-wb-eyebrow { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#nomina_gasto .ng-wb-title {
font-size: var(--rw-fs-lg); font-weight: 600; color: var(--rw-ink);
letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
}
#nomina_gasto .ng-wb-caret { color: var(--rw-faint); font-size: .66rem; margin-left: 2px; }
#nomina_gasto input.ng-wb-date {
position: absolute; inset: 0;
width: 100% !important; height: 100% !important;
min-width: 0 !important; padding: 0 !important; margin: 0 !important;
border: 0 !important; background: transparent !important; box-shadow: none !important;
color: transparent !important;
opacity: 0; cursor: pointer;
}
/* El foco se dibuja en el contenedor (:focus-within), no en el input invisible. */
#nomina_gasto input.ng-wb-date:focus, #nomina_gasto input.ng-wb-date:focus-visible { outline: none !important; }
#nomina_gasto input.ng-wb-date::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
/* Chip de estado, total y guardar */
#nomina_gasto .ng-wb-chip { flex: 0 0 auto; }
#nomina_gasto .ng-wb-total {
display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
margin-left: auto; min-width: 0; line-height: 1.25;
}
#nomina_gasto .ng-wb-total-label { font-size: var(--rw-fs-xs); color: var(--rw-muted); white-space: nowrap; }
#nomina_gasto .ng-wb-total-value {
font-size: 1.15rem; font-weight: 600; color: var(--rw-ink);
letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#nomina_gasto .ng-wb-save { display: none; flex: 0 0 auto; }
#nomina_gasto .ng-wb-save[style*="flex"] { display: flex !important; }
#nomina_gasto .ng-btn-guardar { font-weight: 500; padding: 9px 18px; white-space: nowrap; }
/* Accesos rápidos */
#nomina_gasto .ng-wb-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
#nomina_gasto .ng-wb-qbtn {
display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 11px;
border: 1px solid var(--rw-border);
border-radius: 999px;
background: var(--rw-surface);
color: var(--rw-ink-2);
font-size: var(--rw-fs-sm); font-weight: 500;
white-space: nowrap;
transition: background-color var(--rw-dur-fast) ease, border-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease;
}
#nomina_gasto .ng-wb-qbtn i { color: var(--rw-faint); font-size: .72rem; }
#nomina_gasto .ng-wb-qbtn:hover:not(:disabled) { border-color: var(--rw-accent); background: var(--rw-accent-soft); color: var(--rw-accent); }
#nomina_gasto .ng-wb-qbtn:hover:not(:disabled) i { color: var(--rw-accent); }
#nomina_gasto .ng-wb-qbtn:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
#nomina_gasto .ng-wb-qbtn:disabled { opacity: .5; cursor: not-allowed; }
/* Interruptor "Mostrar proyectos inactivos" */
#nomina_gasto .ng-switch {
display: inline-flex; align-items: center; gap: 9px;
margin: 0; cursor: pointer; user-select: none;
font-size: var(--rw-fs-sm); color: var(--rw-ink-2);
}
#nomina_gasto .ng-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
#nomina_gasto .ng-switch-track {
flex: 0 0 36px; width: 36px; height: 20px;
position: relative; border-radius: 999px;
background: var(--rw-border-strong);
transition: background-color var(--rw-dur-fast) ease;
}
#nomina_gasto .ng-switch-thumb {
position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 20, .25);
transition: transform var(--rw-dur-fast) ease;
}
#nomina_gasto .ng-switch-input:checked + .ng-switch-track { background: var(--rw-accent); }
#nomina_gasto .ng-switch-input:checked + .ng-switch-track .ng-switch-thumb { transform: translateX(16px); }
#nomina_gasto .ng-switch-input:focus-visible + .ng-switch-track { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
#nomina_gasto .ng-switch-text { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
#nomina_gasto .ng-switch-thumb, #nomina_gasto .ng-wb-qbtn, #nomina_gasto .ng-wb-arrow,
#nomina_gasto .ng-wb-picker, #nomina_gasto .ng-preset-btn { transition: none !important; }
}
/* ------------------------------------------- Barra: periodo del resumen */
#nomina_gasto .ng-rangebar {
margin: 0 0 16px;
background: var(--rw-surface);
border: 1px solid var(--rw-border);
border-radius: var(--rw-r-lg);
box-shadow: var(--rw-shadow-xs);
overflow: hidden;
}
#nomina_gasto .ng-rb-top {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--rw-border-soft);
}
#nomina_gasto .ng-rb-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
#nomina_gasto .ng-rb-icon {
flex: 0 0 30px; width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 9px; background: var(--rw-surface-3); color: var(--rw-ink-2); font-size: .78rem;
}
#nomina_gasto .ng-rb-title { font-size: var(--rw-fs-lg); font-weight: 600; color: var(--rw-ink); letter-spacing: -0.01em; line-height: 1.25; }
#nomina_gasto .ng-rb-sub { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
#nomina_gasto .ng-rb-presets {
display: inline-flex; gap: 2px; padding: 3px;
background: var(--rw-surface-3); border-radius: 10px;
}
#nomina_gasto .ng-preset-btn {
padding: 5px 12px; border: 0; border-radius: 8px; background: transparent;
color: var(--rw-muted); font-size: var(--rw-fs-sm); font-weight: 500; white-space: nowrap;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease;
}
#nomina_gasto .ng-preset-btn:hover { background: rgba(255, 255, 255, .6); color: var(--rw-ink); }
#nomina_gasto .ng-preset-btn.active { background: var(--rw-surface); color: var(--rw-ink); box-shadow: 0 1px 2px rgba(16, 16, 20, .08), 0 0 0 1px var(--rw-border); }
#nomina_gasto .ng-preset-btn:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 1px; }
#nomina_gasto .ng-rb-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px 14px; padding: 16px 18px 4px;
}
#nomina_gasto .ng-rb-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#nomina_gasto .ng-rb-item label { margin: 0; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
#nomina_gasto .ng-rb-item .form-control { height: 36px; }
#nomina_gasto .ng-rb-actions {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
margin: 12px 18px 16px; padding-top: 14px;
border-top: 1px solid var(--rw-border-soft);
}
#nomina_gasto .ng-rb-export { display: none; align-items: center; gap: 8px; margin-left: auto; }
#nomina_gasto .ng-rb-export[style*="flex"] { display: flex !important; }
#nomina_gasto .ng-rb-export-label { font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#nomina_gasto .ng-rb-actions .btn { height: 36px; display: inline-flex; align-items: center; font-weight: 500; }
/* ------------------------------------------- Panel "Semanas capturadas" */
/* Gana a las reglas de la primera pasada (#nomina_gasto #ngSemanasGuardadas). */
#nomina_gasto #ngSemanasGuardadas.ng-semanas-panel { padding: 0 !important; }
#nomina_gasto #ngSemanasGuardadas .ng-semanas-head {
margin: 0 !important; font-size: inherit; font-weight: 400;
}
#nomina_gasto #ngSemanasGuardadas .ng-semanas-head .rw-panel-sub { margin: 2px 0 0; }
#nomina_gasto #ngSemanasGuardadas .ng-semanas-conteo {
height: auto; padding: 2px 9px; background: var(--rw-surface-3); color: var(--rw-ink-2);
}
#nomina_gasto .ng-semanas-panel .rw-panel-title i { color: var(--rw-muted); font-size: .85rem; margin-right: 2px; }
#nomina_gasto .ng-semanas-body { padding-top: 14px; }
#nomina_gasto .ng-semanas-body #ngSemanasAnios:empty { display: none; }
#nomina_gasto .ng-meses { max-height: 560px; }
#nomina_gasto .ng-mes-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#nomina_gasto .ng-mes-head { gap: 8px; }
#nomina_gasto .ng-mes-meta { gap: 8px; flex: 0 0 auto; }
#nomina_gasto .ng-week-row { grid-template-columns: minmax(0, 1fr) auto auto; }
#nomina_gasto .ng-week-total { flex: 0 0 auto; }
/* ------------------------------------------------------------- Modales */
#ngAyudaModal .ng-ayuda-p { margin: 0 0 10px; font-size: var(--rw-fs-sm); color: var(--rw-ink-2); line-height: 1.6; }
#ngAyudaModal .ng-ayuda-p:last-child, #ngAyudaModal .ng-ayuda-p.mb-0 { margin-bottom: 0; }
#ngAyudaModal .ng-ayuda-p strong { color: var(--rw-ink); font-weight: 600; }
#ngImportModal .rw-modal-section .ng-imp-steps { margin-bottom: 14px; }
#ngImportModal .rw-modal-section .ng-imp-actions { margin-bottom: 0; }
#ngRenombrarModal .ng-ren-dl { grid-template-columns: minmax(0, 1fr); }
#ngRenombrarModal .rw-modal-section .form-label { font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
#ngRenombrarModal .rw-modal-section .form-text { margin-top: 6px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
#ngEliminarModal .ng-del-note { margin: 12px 0 0; }
/* ------------------------------------------------------------- Móvil */
@media (max-width: 991.98px) {
#nomina_gasto .ng-wb-total { margin-left: 0; }
}
@media (max-width: 767.98px) {
#nomina_gasto .ng-wb-main { gap: 12px; padding: 14px; }
#nomina_gasto .ng-wb-nav { width: 100%; }
#nomina_gasto .ng-wb-picker { flex: 1 1 auto; }
#nomina_gasto .ng-wb-arrow { flex-basis: 44px; width: 44px; min-height: 48px; }
#nomina_gasto .ng-wb-chip { order: 1; }
#nomina_gasto .ng-wb-total {
order: 2; flex: 1 1 auto; flex-direction: row; align-items: baseline;
justify-content: space-between; margin-left: 0; width: 100%;
padding-top: 10px; border-top: 1px solid var(--rw-border-soft);
}
#nomina_gasto .ng-wb-total-value { font-size: 1.25rem; }
#nomina_gasto .ng-wb-save { order: 3; width: 100%; }
#nomina_gasto .ng-wb-save .btn { width: 100%; justify-content: center; min-height: 44px; }
#nomina_gasto .ng-wb-sub { flex-direction: column; align-items: stretch; padding: 12px 14px; }
#nomina_gasto .ng-wb-quick { width: 100%; }
#nomina_gasto .ng-wb-qbtn { flex: 1 1 auto; justify-content: center; min-height: 38px; }
#nomina_gasto .ng-switch { padding-top: 10px; border-top: 1px solid var(--rw-border-soft); }
#nomina_gasto .ng-rb-top { padding: 14px; }
#nomina_gasto .ng-rb-presets { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#nomina_gasto .ng-preset-btn { padding: 8px 10px; }
#nomina_gasto .ng-rb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 14px 2px; }
#nomina_gasto .ng-rb-actions { margin: 10px 14px 14px; flex-direction: column; align-items: stretch; }
#nomina_gasto .ng-rb-actions > .btn { width: 100%; justify-content: center; min-height: 42px; }
#nomina_gasto .ng-rb-export { margin-left: 0; }
#nomina_gasto .ng-rb-export-label { display: none; }
#nomina_gasto .ng-rb-export .btn { flex: 1 1 0; justify-content: center; min-height: 42px; }
#nomina_gasto .ng-semanas-body { padding-top: 12px; }
}
@media (max-width: 480px) {
#nomina_gasto .ng-wb-title { font-size: var(--rw-fs-md); }
#nomina_gasto .ng-wb-qbtn { font-size: var(--rw-fs-xs); padding: 0 9px; }
}
/* --------------------------------------------------- Ajustes finos */
/* Resumen: que el desglose por proyecto quepa sin recortar el % del total. */
#nomina_gasto .ng-res-proy th, #nomina_gasto .ng-res-proy td { padding: 10px 10px !important; }
#nomina_gasto .ng-res-proy th:first-child, #nomina_gasto .ng-res-proy td:first-child { padding-left: 16px !important; }
#nomina_gasto .ng-res-proy th:last-child, #nomina_gasto .ng-res-proy td:last-child { padding-right: 16px !important; }
#nomina_gasto .ng-res-proy .ng-res-proyecto { min-width: 150px; }
#nomina_gasto .ng-pct { gap: 6px; }
#nomina_gasto .ng-pct-bar { width: 32px; }
@media (max-width: 1399.98px) {
#nomina_gasto .ng-res-proy .ng-pct-bar { display: none; }
}
/* KPIs: en móvil la tarjeta impar sobrante ocupa el ancho completo. */
@media (max-width: 767.98px) {
#nomina_gasto .ng-acum > .rw-kpi:last-child:nth-child(odd),
#nomina_gasto .ng-cards > .rw-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Barra de semana en móvil: que el título no se recorte. */
@media (max-width: 575.98px) {
#nomina_gasto .ng-wb-arrow { flex-basis: 40px; width: 40px; }
#nomina_gasto .ng-wb-picker { padding: 6px 10px; gap: 8px; }
#nomina_gasto .ng-wb-cal { flex-basis: 26px; width: 26px; height: 26px; font-size: .7rem; }
#nomina_gasto .ng-wb-caret { display: none; }
#nomina_gasto .ng-wb-title { font-size: var(--rw-fs-md); }
}
/* Tablet: si "Guardar semana" baja de renglón, que quede alineado a la derecha. */
@media (min-width: 768px) and (max-width: 1299.98px) {
#nomina_gasto .ng-wb-save { margin-left: auto; }
}
/* ===== Secciones v3 · grupo H ===== */
/* ============================================================================
SECCIONES v2 · H — Presupuesto por proveedor
Ámbito: pestaña :is(#presupuesto_proveedor, #obraAdminTab-proveedores) (Admin › Gestión › Control de obras)
y su modal de desglose #obraProvDetalleModal. Clases propias con prefijo .pp-
============================================================================ */
/* --- KPIs de la pestaña --- */
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-kpis { margin-bottom: 16px; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-kpis[hidden] { display: none !important; }
/* --- Panel y encabezado (título + buscador + agregar) --- */
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-panel { padding-bottom: 14px; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-panel-head { align-items: flex-end; margin-bottom: 14px; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-panel-heading { min-width: 0; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-tools {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-search {
position: relative; display: flex; align-items: center; margin: 0; min-width: 210px;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-search > i {
position: absolute; left: 11px; font-size: .75rem; color: var(--rw-faint); pointer-events: none;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-search-input {
width: 100%; height: 34px; padding: 0 12px 0 30px;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-sm);
background: var(--rw-surface); color: var(--rw-ink);
font-size: var(--rw-fs-sm); line-height: 1;
transition: border-color var(--rw-dur-fast) ease, box-shadow var(--rw-dur-fast) ease;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-search-input::placeholder { color: var(--rw-faint); }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-search-input:focus {
outline: none; border-color: var(--rw-accent); box-shadow: 0 0 0 3px var(--rw-accent-soft);
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-search-input:disabled { background: var(--rw-surface-2); color: var(--rw-faint); }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-search-input::-webkit-search-cancel-button { cursor: pointer; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-add { display: flex; align-items: center; gap: 6px; min-width: 0; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-add-select {
width: auto; min-width: 180px; max-width: 260px; height: 34px;
border-color: var(--rw-border) !important; font-size: var(--rw-fs-sm) !important;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-add .ts-wrapper { min-width: 180px; max-width: 260px; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-add-btn {
display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
white-space: nowrap; font-size: var(--rw-fs-sm);
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-add-btn i { font-size: .75em; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-note-wrap .obra-note { margin-bottom: 14px; }
/* --- Lista de proveedores --- */
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .pp-row {
grid-template-columns: minmax(150px, 1fr) 142px 124px 118px 132px auto 32px;
gap: 14px;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .obra-row-head > div:nth-child(2) { text-align: left; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .obra-row-head > div:nth-child(5),
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .obra-row-head > div:nth-child(6) { text-align: left; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .pp-row[hidden] { display: none !important; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-prov { display: block; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-prov .rw-cell-title { font-size: var(--rw-fs-md); overflow-wrap: anywhere; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-meta .rw-mono { height: 20px; font-size: 11px; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-tag {
display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
border-radius: 999px; background: var(--rw-surface-3);
font-size: 11px; font-weight: 500; color: var(--rw-ink-2); white-space: nowrap;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-tag-warn { background: var(--rw-orange-soft); color: var(--rw-orange-text); }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-tag-muted { background: var(--rw-surface-2); color: var(--rw-faint); border: 1px solid var(--rw-border); }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-input .obra-money .form-control { height: 34px; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-fact .pp-cell-sub {
display: block; margin-top: 2px; font-size: 11px; color: var(--rw-faint); white-space: nowrap;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-avance { min-width: 0; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-avance .obra-pct { flex: 0 0 48px; font-size: var(--rw-fs-xs); }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-estado { display: flex; justify-content: flex-start; min-width: 0; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-acciones { justify-self: end; }
/* --- Barra de guardado (igual que "Capturar presupuesto") --- */
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-savebar[hidden] { display: none !important; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-savebar-totales { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-savebar-sec strong { font-size: 1rem !important; color: var(--rw-ink-2) !important; }
/* --- Estados vacío / carga / error --- */
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-empty,
#obraProvDetalleModal .pp-empty { padding: 34px 16px; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .pp-empty { border-top: 1px solid var(--rw-border-soft); }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .pp-empty[hidden] { display: none !important; }
#obraProvDetalleModal .pp-sec .pp-empty { padding: 22px 12px; font-size: var(--rw-fs-sm); }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-empty-error > i,
#obraProvDetalleModal .pp-empty-error > i { color: var(--rw-red) !important; }
.pp-spinner {
width: 20px; height: 20px; margin-bottom: 6px; border-radius: 50%;
border: 2px solid var(--rw-border); border-top-color: var(--rw-accent);
animation: pp-spin 700ms linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.pp-spinner { animation-duration: 2s; }
}
/* ============================================================================
Modal de desglose del proveedor
============================================================================ */
#obraProvDetalleModal .modal-body { background: var(--rw-surface-2); }
#obraProvDetalleModal .pp-detalle { display: block; }
#obraProvDetalleModal .pp-hero { margin-bottom: 10px; }
#obraProvDetalleModal .pp-hero-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
#obraProvDetalleModal .pp-hero-avatar { flex: 0 0 40px; width: 40px; height: 40px; font-size: var(--rw-fs-sm); }
#obraProvDetalleModal .pp-hero-name {
font-size: var(--rw-fs-lg); font-weight: 600; color: var(--rw-ink); line-height: 1.25; overflow-wrap: anywhere;
}
#obraProvDetalleModal .pp-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#obraProvDetalleModal .pp-hero-saldo { text-align: right; min-width: 0; }
#obraProvDetalleModal .pp-hero-bar {
display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 2px;
}
#obraProvDetalleModal .pp-hero-bar .obra-bar { flex: 1 1 auto; height: 6px !important; }
#obraProvDetalleModal .pp-hero-bar .obra-pct { flex: 0 0 56px; }
#obraProvDetalleModal .pp-dl { margin-bottom: 14px; }
#obraProvDetalleModal .pp-dl .rw-dl-value { font-variant-numeric: tabular-nums; }
#obraProvDetalleModal .pp-dl-sub { display: block; margin-top: 2px; font-size: var(--rw-fs-xs); font-weight: 400; color: var(--rw-faint); }
#obraProvDetalleModal .pp-sec .rw-modal-section-title { justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
#obraProvDetalleModal .pp-sec-extra { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
/* Tablas del desglose */
#obraProvDetalleModal .pp-table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
#obraProvDetalleModal .pp-table {
width: 100%; margin: 0; border-collapse: separate; border-spacing: 0;
font-size: var(--rw-fs-sm); font-variant-numeric: tabular-nums;
}
#obraProvDetalleModal .pp-table thead th {
padding: 8px 10px; text-align: left;
background: var(--rw-surface-2) !important; border-bottom: 1px solid var(--rw-border) !important;
font-size: var(--rw-fs-xs) !important; font-weight: 500 !important; color: var(--rw-muted) !important;
text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap;
}
#obraProvDetalleModal .pp-table thead th:first-child { border-top-left-radius: var(--rw-r-sm); }
#obraProvDetalleModal .pp-table thead th:last-child { border-top-right-radius: var(--rw-r-sm); }
#obraProvDetalleModal .pp-table tbody td {
padding: 10px; border-bottom: 1px solid var(--rw-border-soft); color: var(--rw-ink-2); vertical-align: middle;
}
#obraProvDetalleModal .pp-table tbody tr:last-child td { border-bottom: 0; }
#obraProvDetalleModal .pp-table .rw-num { text-align: right; white-space: nowrap; }
#obraProvDetalleModal .pp-table .pp-td-accion { text-align: right; width: 44px; }
#obraProvDetalleModal .pp-folio { display: block; font-weight: 500; color: var(--rw-ink); }
#obraProvDetalleModal .pp-uuid {
display: block; margin-top: 2px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10.5px; color: var(--rw-faint); overflow-wrap: anywhere;
}
/* Entregas */
#obraProvDetalleModal .pp-entregas { display: flex; flex-direction: column; gap: 10px; }
#obraProvDetalleModal .pp-entrega {
border: 1px solid var(--rw-border); border-radius: var(--rw-r-md);
background: var(--rw-surface-2); padding: 12px 14px;
}
#obraProvDetalleModal .pp-entrega-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
#obraProvDetalleModal .pp-entrega-meta { font-size: var(--rw-fs-xs); color: var(--rw-faint); }
#obraProvDetalleModal .pp-entrega-lineas { list-style: none; margin: 10px 0 0; padding: 0; }
#obraProvDetalleModal .pp-entrega-lineas li {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding: 6px 0; border-top: 1px solid var(--rw-border-soft);
font-size: var(--rw-fs-sm); color: var(--rw-ink-2);
}
#obraProvDetalleModal .pp-entrega-lineas li:first-child { border-top: 0; }
#obraProvDetalleModal .pp-entrega-lineas strong {
font-weight: 600; color: var(--rw-ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
#obraProvDetalleModal .pp-entrega-nota {
margin-top: 8px; font-size: var(--rw-fs-xs); color: var(--rw-muted); line-height: 1.5;
}
/* Remisiones */
#obraProvDetalleModal .pp-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
/* ============================================================================
Responsive
============================================================================ */
@media (max-width: 1399.98px) {
/* Sin columna de Estado: el chip se muestra bajo el nombre cuando hace falta. */
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .pp-row {
grid-template-columns: minmax(130px, 1fr) 130px 116px 112px 120px 32px;
gap: 12px;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .obra-row-head > div:nth-child(6) { display: none; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-estado { display: none; }
}
@media (max-width: 1199.98px) {
/* Tarjeta por proveedor: una sola columna, sin scroll horizontal. */
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-panel { padding: 14px; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-panel-head { align-items: flex-start; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-tools { width: 100%; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-search { flex: 1 1 100%; min-width: 0; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-add { flex: 1 1 100%; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-add-select,
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-add .ts-wrapper { flex: 1 1 auto; min-width: 0; max-width: none; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows {
border: 0; border-radius: 0; overflow: visible;
display: flex; flex-direction: column; gap: 10px;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .obra-row-head { display: none !important; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .pp-row:not(.obra-row-head) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px 12px !important;
padding: 14px !important;
border: 1px solid var(--rw-border) !important;
border-radius: var(--rw-r-md);
background: var(--rw-surface) !important;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-prov { grid-column: 1 / -1; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-input { grid-column: 1 / -1; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-avance { grid-column: 1 / -1; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-estado { display: flex; grid-column: 1 / 2; align-items: center; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-acciones { grid-column: 2 / 3; justify-self: end; align-self: center; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows [data-label]::before {
content: attr(data-label); display: block; margin-bottom: 3px;
font-size: 11px; font-weight: 500; color: var(--rw-faint); text-align: left;
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-estado[data-label]::before { display: none; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-avance[data-label]::before { flex: 1 0 100%; margin-bottom: 0; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .obra-cell-num {
text-align: left; font-size: var(--rw-fs-md);
}
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-avance { flex-wrap: wrap; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-savebar-totales { gap: 16px; }
}
@media (max-width: 767.98px) {
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-savebar { padding: 12px; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-savebar .btn { flex: 1 1 100%; justify-content: center; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-savebar-totales { width: 100%; justify-content: space-between; gap: 10px; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-savebar-totales .obra-savebar-total { flex-direction: column; align-items: flex-start; gap: 0; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-rows .pp-row:not(.obra-row-head) { padding: 12px !important; }
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-cell-prov .rw-avatar { flex-basis: 30px; width: 30px; height: 30px; }
#obraProvDetalleModal .pp-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
#obraProvDetalleModal .pp-hero-saldo { text-align: left; }
#obraProvDetalleModal .pp-sec-extra { margin-left: 0; }
#obraProvDetalleModal .rw-modal-section { padding: 14px; }
#obraProvDetalleModal .pp-files { grid-template-columns: 1fr; }
#obraProvDetalleModal .pp-table { font-size: var(--rw-fs-xs); }
#obraProvDetalleModal .pp-table thead th,
#obraProvDetalleModal .pp-table tbody td { padding: 8px; }
}
/* ===== Secciones v3 · grupo I ===== */
/* ============================================================================
SECCIONES v2 · I — Panel IT: Control de equipos y Gestión de usuarios
Ámbito: #control_equipos, #usuarios (panel IT) y sus modales
(#iteqModal, #iteqBitacoraModal, #modalEquipo, #modalAsignacion,
#modalMantenimiento, #modalLicencia). Clases propias: .ite-* / .itu-*
============================================================================ */
/* --- Encabezado y acciones de sección --- */
:is(#control_equipos, #usuarios) .ite-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:is(#control_equipos, #usuarios) > .card-container > .spa-section-head { padding-bottom: 20px !important; }
/* --- KPIs --- */
#control_equipos .ite-kpis, #usuarios .itu-kpis { margin: 0 0 18px !important; }
/* --- Pestañas internas --- */
#control_equipos .ite-tabs { margin: 0 0 18px !important; }
#control_equipos .ite-pane { display: none; }
#control_equipos .ite-pane.active { display: block; }
#control_equipos .ite-pane-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin: 0 0 14px;
}
#control_equipos .ite-pane-sub { margin: 0; font-size: var(--rw-fs-sm); color: var(--rw-muted); max-width: 560px; }
#control_equipos .ite-pane-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#control_equipos .ite-pane-tools .ite-select { width: 220px; }
/* --- Barra de filtros --- */
#control_equipos .ite-toolbar {
display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 0 0 14px !important;
}
:is(#control_equipos, #usuarios) .ite-search { position: relative; flex: 1 1 300px; min-width: 0; }
:is(#control_equipos, #usuarios) .ite-search > i {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--rw-faint); font-size: .8rem; pointer-events: none;
}
:is(#control_equipos, #usuarios) .ite-search .form-control {
height: 38px; padding-left: 34px !important;
background: var(--rw-surface-2) !important; border-color: var(--rw-border) !important;
font-size: var(--rw-fs-md) !important; border-radius: var(--rw-r-md) !important;
}
:is(#control_equipos, #usuarios) .ite-search .form-control:focus { background: var(--rw-surface) !important; }
#control_equipos .ite-toolbar .ite-select { flex: 0 0 200px; height: 38px; }
#control_equipos .ite-check {
display: inline-flex !important; align-items: center; gap: 7px; margin: 0 !important;
height: 38px; padding: 0 12px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md);
background: var(--rw-surface); font-size: var(--rw-fs-sm); color: var(--rw-ink-2); cursor: pointer;
white-space: nowrap;
}
#control_equipos .ite-check input { accent-color: var(--rw-accent); margin: 0; }
#usuarios .itu-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
/* --- Panel y tabla --- */
:is(#control_equipos, #usuarios) .ite-panel { margin-bottom: 0; }
:is(#control_equipos, #usuarios) .ite-panel .rw-panel-head { border-bottom: 1px solid var(--rw-border); }
:is(#control_equipos, #usuarios) .ite-table { width: 100%; margin: 0 !important; }
:is(#control_equipos, #usuarios) .ite-table th {
padding: 10px 16px !important; border-bottom: 1px solid var(--rw-border) !important;
}
:is(#control_equipos, #usuarios) .ite-table td {
padding: 12px 16px !important; vertical-align: middle !important;
border-bottom: 1px solid var(--rw-border-soft) !important;
font-size: var(--rw-fs-md) !important; color: var(--rw-text) !important; background: transparent !important;
}
:is(#control_equipos, #usuarios) .ite-table tbody tr:last-child td { border-bottom: 0 !important; }
:is(#control_equipos, #usuarios) .ite-table tbody tr:hover td { background: var(--rw-surface-2) !important; }
:is(#control_equipos, #usuarios) .ite-table .rw-cell-main { min-width: 190px; }
:is(#control_equipos, #usuarios) .ite-table .rw-cell-title { font-size: var(--rw-fs-md); }
:is(#control_equipos, #usuarios) .ite-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
:is(#control_equipos, #usuarios) .ite-strong { font-weight: 500; color: var(--rw-ink); line-height: 1.3; }
#control_equipos .ite-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 240px; }
#control_equipos .ite-clamp {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; max-width: 320px;
}
#control_equipos .ite-clave { max-width: 180px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 20px; }
:is(#control_equipos, #usuarios) .ite-foot-info { font-size: var(--rw-fs-sm); color: var(--rw-muted); }
:is(#control_equipos, #usuarios) .ite-loading { gap: 10px; color: var(--rw-muted); font-size: var(--rw-fs-sm); }
:is(#control_equipos, #usuarios) .ite-loading > i { margin: 0; }
/* Barra de uso de licencias */
#control_equipos .ite-uso { display: flex; flex-direction: column; gap: 5px; min-width: 96px; max-width: 140px; }
#control_equipos .ite-uso-txt { font-size: var(--rw-fs-sm); color: var(--rw-ink); font-variant-numeric: tabular-nums; }
#control_equipos .ite-uso-bar { display: block; height: 5px; border-radius: 999px; background: var(--rw-surface-3); overflow: hidden; }
#control_equipos .ite-uso-fill { display: block; height: 100%; border-radius: 999px; background: var(--rw-accent); }
#control_equipos .ite-uso-fill.is-green { background: var(--rw-green); }
#control_equipos .ite-uso-fill.is-orange { background: var(--rw-orange); }
#control_equipos .ite-uso-fill.is-red { background: var(--rw-red); }
/* --- Menú de acciones de usuarios --- */
#usuarios .ite-hidden-select {
position: absolute !important; width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important; overflow: hidden !important;
clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
#usuarios .ite-user-menu { border-radius: var(--rw-r-md); font-size: var(--rw-fs-sm); padding: 6px; min-width: 210px; }
#usuarios .ite-user-menu .dropdown-header { font-size: var(--rw-fs-xs); color: var(--rw-muted); padding: 6px 10px 4px; }
#usuarios .ite-user-menu .dropdown-item { display: flex; align-items: center; gap: 9px; border-radius: 8px; padding: 7px 10px; }
#usuarios .ite-user-menu .dropdown-item i { width: 16px; text-align: center; color: var(--rw-muted); }
#usuarios .ite-user-menu .dropdown-item.active { background: var(--rw-accent-soft); color: var(--rw-accent); }
#usuarios .ite-user-menu .dropdown-item.active i { color: var(--rw-accent); }
/* --- Tarjetas (móvil / tablet) --- */
:is(#control_equipos, #usuarios) .ite-mcard { gap: 12px !important; }
:is(#control_equipos, #usuarios) .ite-mcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
:is(#control_equipos, #usuarios) .ite-mcard-head .rw-cell-main { flex: 1 1 auto; min-width: 0; }
:is(#control_equipos, #usuarios) .ite-mcard-head .rw-chip { flex: 0 0 auto; }
:is(#control_equipos, #usuarios) .ite-kv { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid var(--rw-border-soft); }
:is(#control_equipos, #usuarios) .ite-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; font-size: var(--rw-fs-sm); }
:is(#control_equipos, #usuarios) .ite-kv dt { margin: 0; font-weight: 400; color: var(--rw-muted); white-space: nowrap; }
:is(#control_equipos, #usuarios) .ite-kv dd { margin: 0; text-align: right; color: var(--rw-ink); min-width: 0; }
:is(#control_equipos, #usuarios) .ite-kv dd .ite-chips { justify-content: flex-end; }
:is(#control_equipos, #usuarios) .ite-kv dd .ite-stack { align-items: flex-end; }
:is(#control_equipos, #usuarios) .ite-kv dd .ite-uso { max-width: none; margin-left: auto; }
:is(#control_equipos, #usuarios) .ite-mcard-foot {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding-top: 10px; border-top: 1px solid var(--rw-border-soft);
}
:is(#control_equipos, #usuarios) .ite-mcard-foot:only-child,
:is(#control_equipos, #usuarios) .ite-mcard-foot .rw-actions { margin-left: auto; }
/* Filas planas dentro del panel (sin tarjeta dentro de tarjeta) */
@media (max-width: 1279.98px) {
:is(#control_equipos, #usuarios) .ite-panel .spa-desktop-table { display: none !important; }
:is(#control_equipos, #usuarios) .ite-panel .spa-mobile-list {
display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important;
background: transparent !important; border: 0 !important;
}
:is(#control_equipos, #usuarios) .ite-panel .spa-mobile-card {
padding: 14px 18px !important; margin: 0 !important;
border: 0 !important; border-bottom: 1px solid var(--rw-border-soft) !important; border-radius: 0 !important;
box-shadow: none !important; background: var(--rw-surface) !important; transform: none !important;
}
:is(#control_equipos, #usuarios) .ite-panel .spa-mobile-card:last-child { border-bottom: 0 !important; }
}
@media (max-width: 767.98px) {
:is(#control_equipos, #usuarios) .ite-panel .spa-mobile-card { padding: 14px !important; }
#control_equipos .ite-toolbar .ite-select,
#control_equipos .ite-check,
#control_equipos .ite-pane-tools .ite-select,
#control_equipos .ite-pane-tools .btn { flex: 1 1 100%; width: 100%; }
#control_equipos .ite-pane-head { align-items: stretch; }
#control_equipos .ite-pane-head > .btn { width: 100%; }
:is(#control_equipos, #usuarios) .ite-head-actions,
:is(#control_equipos, #usuarios) .ite-head-actions > .btn { width: 100%; }
}
/* ---------------- Modales ---------------- */
.ite-modal .modal-content { border-radius: var(--rw-r-lg); }
.ite-modal .modal-body { background: var(--rw-surface-2); }
.ite-modal .rw-modal-section + .rw-modal-section { margin-top: 12px; }
.ite-modal .form-label { margin-bottom: 6px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
.ite-modal .ite-help { margin-top: 6px; font-size: var(--rw-fs-xs); color: var(--rw-muted); }
.ite-modal .ite-opt { font-size: var(--rw-fs-xs); font-weight: 400; color: var(--rw-muted); }
.ite-modal .ite-input-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.ite-modal .form-check-label { font-size: var(--rw-fs-sm); color: var(--rw-ink-2); }
/* Compartido con (filas) */
#iteqModal .iteq-compartidos { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
#iteqModal .iteq-comp-fila { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 36px; gap: 8px; }
#iteqModal .iteq-comp-fila .btn {
width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--rw-border) !important; border-radius: var(--rw-r-sm) !important;
background: var(--rw-surface) !important; color: var(--rw-muted) !important;
}
#iteqModal .iteq-comp-fila .btn:hover { background: var(--rw-red-soft) !important; color: var(--rw-red-text) !important; border-color: var(--rw-red-border) !important; }
#iteqModal .iteq-compartidos:empty { display: none; }
/* Bitácora */
#iteqBitacoraModal .modal-body { background: var(--rw-surface-2); }
#iteqBitacoraModal .ite-bit-hero { background: var(--rw-surface); align-items: flex-start; }
#iteqBitacoraModal .ite-bit-hero-value { font-size: 1.15rem; margin-bottom: 6px; }
#iteqBitacoraModal .ite-bit-dl { margin-bottom: 4px; }
#iteqBitacoraModal .rw-sec-title { margin: 18px 0 10px; }
#iteqBitacoraModal .iteq-bit-lista {
list-style: none; margin: 0; padding: 14px 16px; position: relative;
background: var(--rw-surface); border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg);
}
#iteqBitacoraModal .iteq-bit-lista::before {
content: ''; position: absolute; left: 31px; top: 24px; bottom: 24px; width: 1px; background: var(--rw-border);
}
#iteqBitacoraModal .iteq-bit-item {
position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px;
padding: 9px 0; font-size: var(--rw-fs-md);
}
#iteqBitacoraModal .iteq-bit-ico {
width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: var(--rw-surface); border: 1px solid var(--rw-border); color: var(--rw-muted);
font-size: .72rem; z-index: 1;
}
#iteqBitacoraModal .iteq-bit-alta .iteq-bit-ico { background: var(--rw-green-soft); border-color: var(--rw-green-border); color: var(--rw-green-text); }
#iteqBitacoraModal .iteq-bit-transferencia .iteq-bit-ico { background: var(--rw-orange-soft); border-color: var(--rw-orange-border); color: var(--rw-orange-text); }
#iteqBitacoraModal .iteq-bit-carta .iteq-bit-ico { background: var(--rw-red-soft); border-color: var(--rw-red-border); color: var(--rw-red-text); }
#iteqBitacoraModal .iteq-bit-compartido .iteq-bit-ico { background: var(--rw-accent-soft); border-color: var(--rw-accent-border); color: var(--rw-accent); }
#iteqBitacoraModal .iteq-bit-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
#iteqBitacoraModal .iteq-bit-head strong { font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); }
#iteqBitacoraModal .ite-bit-detalle { margin-top: 2px; font-size: var(--rw-fs-sm); color: var(--rw-muted); line-height: 1.5; }
#iteqBitacoraModal .iteq-muted { color: var(--rw-faint); font-size: var(--rw-fs-xs); }
@media (max-width: 575.98px) {
#iteqModal .iteq-comp-fila { grid-template-columns: minmax(0, 1fr) 36px; }
#iteqModal .iteq-comp-fila .iteq-comp-rol { grid-column: 1 / 2; }
#iteqBitacoraModal .iteq-bit-lista { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
#control_equipos .ite-pane.active { animation: none !important; }
:is(#control_equipos, #usuarios) .ite-table tbody tr,
:is(#control_equipos, #usuarios) .ite-mcard { transition: none !important; }
}
/* Anchos mínimos de columnas con texto largo */
#control_equipos #iteqContainer .ite-table td:nth-child(3),
#control_equipos #iteqContainer .ite-table th:nth-child(3) { min-width: 210px; }
/* ===== Secciones v3 · grupo J ===== */
/* ============================================================================
SECCIONES v2 · J — Panel IT: Gestión › Aprobaciones y Gestión › Notificaciones
Ámbito: #aprobadores, #aprobadorModal, #notificaciones. Clases propias con
prefijo .apr- (aprobaciones) y .ntf- (notificaciones).
============================================================================ */
/* ---------- Encabezado de sección (mismas piezas que el panel admin) ---------- */
:is(#aprobadores, #notificaciones) .spa-section-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin: 0 0 18px;
}
:is(#aprobadores, #notificaciones) .spa-section-info { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
:is(#aprobadores, #notificaciones) .spa-section-title { margin: 0 !important; font-size: 1.25rem !important; font-weight: 600 !important; letter-spacing: -0.02em; color: var(--rw-ink) !important; }
:is(#aprobadores, #notificaciones) .spa-section-subtitle { margin: 4px 0 0; font-size: var(--rw-fs-md); color: var(--rw-muted); }
:is(#aprobadores, #notificaciones) :is(.apr-head-actions, .ntf-head-actions) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ===========================================================================
1 · APROBACIONES
=========================================================================== */
#aprobadores .apr-panel { margin-bottom: 16px; }
#aprobadores .apr-panel .rw-panel-head { align-items: flex-start; }
#aprobadores .apr-list { display: flex; flex-direction: column; }
#aprobadores .apr-row {
display: grid; align-items: center; gap: 12px 16px;
grid-template-columns: minmax(200px, 1.3fr) minmax(170px, 1.2fr) 146px 136px 40px;
padding: 12px 18px;
border-top: 1px solid var(--rw-border-soft);
transition: background-color var(--rw-dur-fast) ease;
}
#aprobadores .apr-list > .apr-row:first-child { border-top: 0; }
#aprobadores .apr-row:hover { background: var(--rw-surface-2); }
#aprobadores .apr-row.is-on .rw-cell-title { font-weight: 600; }
#aprobadores .apr-row-id { min-width: 0; }
#aprobadores .apr-row-id .rw-cell-sub { overflow-wrap: anywhere; }
#aprobadores .apr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#aprobadores .apr-chips .rw-chip > i { font-size: 10px; opacity: .85; }
#aprobadores .apr-field-label {
display: block; margin-bottom: 4px;
font-size: var(--rw-fs-xs); color: var(--rw-muted); line-height: 1.2;
}
/* Campo de límite: $ pegado al número, tabular-nums */
.apr-limite-input { display: flex; align-items: stretch; min-width: 0; }
.apr-limite-input .apr-limite-sign {
display: inline-flex; align-items: center; padding: 0 9px;
border: 1px solid var(--rw-border); border-right: 0;
border-radius: var(--rw-r-sm) 0 0 var(--rw-r-sm);
background: var(--rw-surface-3); color: var(--rw-muted);
font-size: var(--rw-fs-sm);
}
.apr-limite-input input.form-control {
min-width: 0; border-radius: 0 var(--rw-r-sm) var(--rw-r-sm) 0 !important;
font-variant-numeric: tabular-nums; text-align: right;
}
.apr-limite-input--sm input.form-control { height: 34px; padding: 0 9px; font-size: var(--rw-fs-sm); }
.apr-limite-input input.form-control:disabled { background: var(--rw-surface-2); color: var(--rw-faint); }
/* Interruptor de la fila */
#aprobadores .apr-switch { display: flex; align-items: center; gap: 8px; padding-left: 2.6em; margin: 0; min-height: 34px; }
#aprobadores .apr-switch .form-check-input { margin-left: -2.6em; margin-top: 0; width: 2.1em; height: 1.15em; cursor: pointer; }
#aprobadores .apr-switch .form-check-label { font-size: var(--rw-fs-sm); color: var(--rw-ink-2); cursor: pointer; white-space: nowrap; }
#aprobadores .apr-row-acciones { justify-content: flex-end; }
/* Casillas que conserva el JS al guardar (se editan desde el modal) */
#aprobadores .apr-store { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#aprobadores .apr-limite-off { display: block; font-size: var(--rw-fs-sm); color: var(--rw-faint); line-height: 1.3; }
#aprobadores .apr-panel--resto .apr-row { background: transparent; }
#aprobadores .apr-panel--resto .rw-avatar { font-weight: 600; }
#aprobadores .rw-empty .btn { margin-top: 4px; }
/* ---------- Modal de permisos ---------- */
#aprobadorModal .apr-modal-hero { align-items: center; }
#aprobadorModal .apr-modal-hero .rw-avatar { flex-basis: 40px; width: 40px; height: 40px; font-size: var(--rw-fs-sm); }
#aprobadorModal .apr-modal-hero .rw-cell-title { font-size: var(--rw-fs-lg); font-weight: 600; }
#aprobadorModal .apr-opt {
display: flex; align-items: flex-start; gap: 12px; width: 100%;
margin: 0; padding: 12px 14px;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-md);
background: var(--rw-surface); cursor: pointer;
transition: border-color var(--rw-dur-fast) ease, background-color var(--rw-dur-fast) ease;
}
#aprobadorModal .apr-opt + .apr-opt { margin-top: 10px; }
#aprobadorModal .apr-opt:hover { border-color: var(--rw-border-strong); }
#aprobadorModal .apr-opt:has(input:checked) { border-color: var(--rw-accent-border); background: var(--rw-accent-soft); }
#aprobadorModal .apr-opt:has(input:focus-visible) { outline: 2px solid var(--rw-accent); outline-offset: 2px; }
#aprobadorModal .apr-opt.is-off { opacity: .55; }
#aprobadorModal .apr-opt > .form-check-input { flex: 0 0 auto; margin: 2px 0 0; width: 1.05em; height: 1.05em; cursor: pointer; }
#aprobadorModal .apr-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#aprobadorModal .apr-opt-title { font-size: var(--rw-fs-md); font-weight: 500; color: var(--rw-ink); }
#aprobadorModal .apr-opt-sub { font-size: var(--rw-fs-sm); color: var(--rw-muted); line-height: 1.45; }
#aprobadorModal .apr-limite-field {
margin: 10px 0; padding: 12px 14px;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface-2);
transition: opacity var(--rw-dur-fast) ease;
}
#aprobadorModal .apr-limite-field.is-off { opacity: .55; }
#aprobadorModal .apr-limite-field .form-label { margin-bottom: 6px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
#aprobadorModal .apr-limite-field .apr-limite-input { max-width: 260px; }
#aprobadorModal .apr-field-hint { margin: 6px 0 0; font-size: var(--rw-fs-xs); color: var(--rw-faint); }
#aprobadorModal .apr-field-hint--top { margin: -4px 0 10px; }
/* ===========================================================================
2 · NOTIFICACIONES
=========================================================================== */
#notificaciones .ntf-transporte .rw-panel-body { padding-top: 14px; }
#notificaciones .ntf-transporte-info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
#notificaciones .ntf-transporte-info > .rw-chip { align-self: flex-start; }
#notificaciones .ntf-transporte-dl { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
#notificaciones .ntf-test-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
#notificaciones .ntf-test-field { flex: 1 1 320px; min-width: 0; }
#notificaciones .ntf-test-field .form-label { margin-bottom: 6px; font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
#notificaciones .ntf-test-btn { flex: 0 0 auto; }
#notificaciones .ntf-grupo { margin-bottom: 16px; }
#notificaciones .ntf-grupo .rw-panel-head { align-items: flex-start; }
#notificaciones .ntf-items { display: flex; flex-direction: column; }
#notificaciones .ntf-item { border-top: 1px solid var(--rw-border-soft); }
#notificaciones .ntf-items > .ntf-item:first-child { border-top: 0; }
#notificaciones .ntf-item-head {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 14px 18px 10px;
}
#notificaciones .ntf-item-icon {
flex: 0 0 34px; width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; background: var(--rw-surface-3); color: var(--rw-muted);
font-size: .8rem;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease;
}
#notificaciones .ntf-item.is-on .ntf-item-icon { background: var(--rw-accent-soft); color: var(--rw-accent); }
#notificaciones .ntf-item-info { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#notificaciones .ntf-item-title { font-size: var(--rw-fs-md); font-weight: 600; color: var(--rw-ink); line-height: 1.3; }
#notificaciones .ntf-item-desc { font-size: var(--rw-fs-sm); color: var(--rw-muted); line-height: 1.45; }
#notificaciones .ntf-item-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
#notificaciones .ntf-por-evento > i { font-size: 10px; }
#notificaciones .ntf-item-body { padding: 0 18px 16px 64px; }
#notificaciones .ntf-item-largo { margin: 0 0 10px; font-size: var(--rw-fs-sm); color: var(--rw-faint); line-height: 1.5; }
/* Interruptores */
#notificaciones .ntf-switch { display: flex; align-items: center; gap: 8px; padding-left: 2.6em; margin: 0; min-height: 28px; }
#notificaciones .ntf-switch .form-check-input { margin-left: -2.6em; margin-top: 0; width: 2.1em; height: 1.15em; cursor: pointer; }
#notificaciones .ntf-switch .form-check-label { font-size: var(--rw-fs-sm); color: var(--rw-ink-2); cursor: pointer; white-space: nowrap; }
#notificaciones .ntf-eventos {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px;
margin: 0 0 12px; padding: 12px 14px;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface-2);
}
#notificaciones .ntf-evento .form-check-label { white-space: normal; }
/* Nota de aprobadores con límite */
#notificaciones .ntf-limites { margin: 0 0 12px; }
#notificaciones .ntf-limites-list { margin: 6px 0 0; padding-left: 18px; }
#notificaciones .ntf-limites-list li { margin: 2px 0; }
/* Destinatarios */
#notificaciones .ntf-dest { padding: 12px 14px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-md); background: var(--rw-surface); }
#notificaciones .ntf-dest-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#notificaciones .ntf-dest-label { font-size: var(--rw-fs-sm); font-weight: 500; color: var(--rw-ink-2); }
#notificaciones .ntf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#notificaciones .ntf-chips-vacio { font-size: var(--rw-fs-sm); color: var(--rw-faint); }
#notificaciones .ntf-chip {
display: inline-flex; align-items: center; gap: 4px;
height: 26px; padding: 0 4px 0 10px;
border: 1px solid var(--rw-border); border-radius: 999px;
background: var(--rw-surface-2); color: var(--rw-ink-2);
font-size: var(--rw-fs-xs); line-height: 1; max-width: 100%;
}
#notificaciones .ntf-chip-x {
flex: 0 0 18px; width: 18px; height: 18px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 50%; background: transparent; color: var(--rw-faint);
font-size: 10px; cursor: pointer;
transition: background-color var(--rw-dur-fast) ease, color var(--rw-dur-fast) ease;
}
#notificaciones .ntf-chip-x:hover { background: var(--rw-red-soft); color: var(--rw-red-text); }
#notificaciones .ntf-chip-x:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 1px; }
#notificaciones .ntf-add { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
#notificaciones .ntf-add-btn { white-space: nowrap; }
/* Barra de guardado */
#notificaciones .ntf-canales { padding-bottom: 6px; }
#notificaciones .ntf-savebar {
position: sticky; bottom: 0; z-index: 5;
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
margin-top: 4px; padding: 12px 16px;
border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg);
background: var(--rw-surface); box-shadow: 0 -2px 10px rgba(16, 16, 20, .05);
}
#notificaciones .ntf-savebar-text { display: flex; align-items: center; gap: 8px; font-size: var(--rw-fs-sm); color: var(--rw-muted); min-width: 0; }
#notificaciones .ntf-savebar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#notificaciones .ntf-kpi-txt { font-size: 1.1rem; overflow-wrap: anywhere; }
/* ===========================================================================
3 · RESPONSIVE
=========================================================================== */
@media (max-width: 1199.98px) {
#aprobadores .apr-row { grid-template-columns: minmax(180px, 1.2fr) minmax(150px, 1fr) 130px 128px 40px; gap: 10px 12px; }
}
@media (max-width: 991.98px) {
#aprobadores .apr-row {
grid-template-columns: minmax(0, 1fr) 140px 40px;
grid-template-areas: "id limite acciones" "alcance alcance alcance" "switch switch switch";
row-gap: 10px;
}
#aprobadores .apr-row-id { grid-area: id; }
#aprobadores .apr-row-alcance { grid-area: alcance; }
#aprobadores .apr-row-limite { grid-area: limite; }
#aprobadores .apr-row-switch { grid-area: switch; }
#aprobadores .apr-row-acciones { grid-area: acciones; }
#notificaciones .ntf-item-body { padding-left: 18px; }
#notificaciones .ntf-add { grid-template-columns: minmax(0, 1fr) auto; }
#notificaciones .ntf-add select { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
:is(#aprobadores, #notificaciones) .spa-section-head { gap: 12px; margin-bottom: 14px; }
:is(#aprobadores, #notificaciones) .spa-section-title { font-size: 1.1rem !important; }
:is(#aprobadores, #notificaciones) :is(.apr-head-actions, .ntf-head-actions) { width: 100%; }
:is(#aprobadores, #notificaciones) :is(.apr-head-actions, .ntf-head-actions) .btn { flex: 1 1 auto; justify-content: center; }
#aprobadores .apr-row {
grid-template-columns: minmax(0, 1fr) 40px;
grid-template-areas: "id acciones" "alcance alcance" "limite limite" "switch switch";
padding: 14px;
}
#aprobadores .apr-row-limite .apr-limite-input { max-width: 190px; }
#aprobadores .apr-switch { min-height: 0; }
#notificaciones .ntf-item-head { padding: 14px 14px 10px; }
#notificaciones .ntf-item-actions { width: 100%; margin-left: 0; justify-content: space-between; }
#notificaciones .ntf-item-body { padding: 0 14px 14px; }
#notificaciones .ntf-eventos { grid-template-columns: 1fr; }
#notificaciones .ntf-dest { padding: 12px; }
#notificaciones .ntf-add { grid-template-columns: 1fr; }
#notificaciones .ntf-add-btn { width: 100%; }
#notificaciones .ntf-canales { padding-bottom: 6px; }
#notificaciones .ntf-savebar { padding: 12px 14px; }
#notificaciones .ntf-savebar-actions { width: 100%; margin-left: 0; }
#notificaciones .ntf-savebar-actions .btn { flex: 1 1 auto; justify-content: center; }
#aprobadorModal .apr-opt { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
#aprobadores .apr-row,
#aprobadores .apr-limite-field,
#notificaciones .ntf-item-icon,
#notificaciones .ntf-chip-x,
#aprobadorModal .apr-opt { transition: none !important; }
}
/* ===== Ajustes tanda 4 · grupo K ===== */
/* ============================================================================
K · Órdenes de compra (admin) › Listado + componente de filtro "alf-*"
---------------------------------------------------------------------------
1) Columna "Entrega" del listado (chip verde / naranja / neutro) y ajuste de
anchos para que la tabla siga cabiendo con una columna más.
2) Estados del botón "Filtro" y de los botones del popover (componente
global: afecta a todas las secciones que usan [data-alf-bar]).
============================================================================ */
/* ---------------------------------------------------------------------------
1 · COLUMNA "ENTREGA"
--------------------------------------------------------------------------- */
#ordenes_compra_admin .ocl-table th.ocl-col-entrega,
#ordenes_compra_admin .ocl-table td.ocl-col-entrega {
width: 1%;
white-space: nowrap;
}
#ordenes_compra_admin .ocl-chip-ent {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
padding: 0 9px;
font-size: 11.5px;
font-weight: 500;
white-space: nowrap;
}
#ordenes_compra_admin .ocl-chip-ent i { font-size: 0.7rem; line-height: 1; }
/* El chip neutro necesita un poco más de contraste que el gris por defecto
para que "Pendiente" se lea como un estado y no como texto apagado. */
#ordenes_compra_admin .ocl-chip-ent--pendiente {
background: var(--rw-surface-3, #F2F2F5) !important;
border-color: var(--rw-border-strong) !important;
color: var(--rw-ink-2) !important;
}
#ordenes_compra_admin .ocl-chip-ent--pendiente i { color: var(--rw-muted); }
/* Orden rechazada o cancelada: la entrega no aplica. */
#ordenes_compra_admin .ocl-ent-na {
font-size: var(--rw-fs-sm);
color: var(--rw-faint) !important;
}
/* Una columna más obliga a repartir el ancho: se recorta lo elástico
(proyecto / proveedor) y se aprieta levemente el padding de la tabla, sin
tocar los tamaños de letra. */
#ordenes_compra_admin .ocl-table th,
#ordenes_compra_admin .ocl-table td { padding-left: 10px !important; padding-right: 10px !important; }
#ordenes_compra_admin .ocl-table th:first-child,
#ordenes_compra_admin .ocl-table td:first-child { padding-left: 18px !important; }
#ordenes_compra_admin .ocl-table th:last-child,
#ordenes_compra_admin .ocl-table td:last-child { padding-right: 18px !important; }
#ordenes_compra_admin .ocl-col-proy { min-width: 124px; max-width: 190px; }
#ordenes_compra_admin .ocl-col-prov { min-width: 134px; max-width: 200px; }
#ordenes_compra_admin .ocl-col-estado { width: 1%; min-width: 126px; }
/* Entre 1360 y 1500 px el solicitante ya solo aporta el avatar: se oculta para
dejarle aire a Proyecto / Proveedor / Entrega (el nombre sigue estando en la
celda de la orden). */
@media (max-width: 1499.98px) {
#ordenes_compra_admin .ocl-table .ocl-col-sol { display: none; }
#ordenes_compra_admin .ocl-sol-inline { display: block !important; }
}
/* --- Tarjetas (tablet y móvil): estado y entrega juntos arriba a la derecha --- */
#ordenes_compra_admin .ocl-card-chips {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
#ordenes_compra_admin .ocl-card-chips .ocl-chip-ent { height: 22px; font-size: 11px; }
#ordenes_compra_admin .ocl-card-chips .ocl-ent-na { font-size: var(--rw-fs-xs); }
@media (max-width: 400px) {
/* En pantallas muy estrechas los dos chips se apilan en vez de empujar el
folio: así no aparece scroll horizontal. */
#ordenes_compra_admin .ocl-card-chips { flex-direction: column; align-items: flex-end; gap: 5px; }
}
/* ---------------------------------------------------------------------------
2 · COMPONENTE DE FILTRO (global) — botón "Filtro" y acciones del popover
Lenguaje actual: bordes suaves, violeta #6E5BE6 como acento, anillo de foco
y transiciones de 150 ms. Sin azules viejos ni sombras duras de color.
--------------------------------------------------------------------------- */
.alf-filter-btn {
gap: 7px !important;
min-height: 30px !important;
padding: 4px 11px !important;
border: 1px solid var(--rw-border-strong, #DEDEE3) !important;
border-radius: 8px !important;
background: var(--rw-surface, #fff) !important;
color: var(--rw-ink-2, #2B2B31) !important;
font-weight: 500 !important;
box-shadow: none !important;
transition:
background-color 150ms ease,
border-color 150ms ease,
color 150ms ease,
box-shadow 150ms ease !important;
}
.alf-filter-btn svg {
color: var(--rw-muted, #71717A);
transition: color 150ms ease;
}
.alf-filter-btn:hover {
background: var(--rw-surface-2, #F7F7F8) !important;
border-color: #CFCFD6 !important;
color: var(--rw-ink, #1A1A1E) !important;
}
.alf-filter-btn:hover svg { color: var(--rw-ink-2, #2B2B31); }
/* Pulsación: respuesta inmediata, sin "hundido" de sombra interior. */
.alf-filter-btn:active {
background: #EDEDF0 !important;
border-color: #C9C9D1 !important;
transition-duration: 60ms !important;
}
/* Anillo de foco violeta (sustituye al outline genérico, que se recortaba
contra el campo de búsqueda). */
.alf-filter-btn:focus,
.alf-filter-btn:focus-visible {
outline: none !important;
outline-offset: 0 !important;
border-color: var(--rw-accent, #6E5BE6) !important;
box-shadow: 0 0 0 3px var(--rw-accent-ring, rgba(110, 91, 230, 0.18)) !important;
}
/* Panel abierto: el botón se queda marcado en violeta suave. */
.alf-filter-btn[aria-expanded="true"] {
background: var(--rw-accent-soft, #F1EFFE) !important;
border-color: var(--rw-accent-border, #D8D2FB) !important;
color: var(--rw-accent-hover, #5B48D6) !important;
}
.alf-filter-btn[aria-expanded="true"] svg { color: var(--rw-accent, #6E5BE6); }
/* Con filtros aplicados. */
.alf-filter-btn.has-filters {
background: var(--rw-accent-soft, #F1EFFE) !important;
border-color: var(--rw-accent-border, #D8D2FB) !important;
color: var(--rw-accent-hover, #5B48D6) !important;
}
.alf-filter-btn.has-filters svg { color: var(--rw-accent, #6E5BE6); }
.alf-filter-btn.has-filters:hover {
background: #E9E5FD !important;
border-color: #C9C0F7 !important;
}
.alf-filter-btn.has-filters:active { background: #E2DCFB !important; }
.alf-badge {
background: var(--rw-accent, #6E5BE6) !important;
color: #fff !important;
font-weight: 600 !important;
font-variant-numeric: tabular-nums;
box-shadow: none !important;
}
/* --- Botones del popover ("Limpiar" / "Aplicar") --- */
.alf-pop-foot .alf-btn,
.alf-btn {
transition:
background-color 150ms ease,
border-color 150ms ease,
color 150ms ease,
box-shadow 150ms ease !important;
}
.alf-btn:focus,
.alf-btn:focus-visible {
outline: none !important;
outline-offset: 0 !important;
}
.alf-btn-ghost:focus-visible {
border-color: var(--rw-accent, #6E5BE6) !important;
box-shadow: 0 0 0 3px var(--rw-accent-ring, rgba(110, 91, 230, 0.18)) !important;
}
.alf-btn-ghost:active {
background: #EDEDF0 !important;
border-color: #C9C9D1 !important;
transition-duration: 60ms !important;
}
/* Sin la sombra violeta dura del tema antiguo. */
.alf-btn-primary:hover {
box-shadow: var(--rw-shadow-btn, inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(16, 16, 20, 0.24)) !important;
}
.alf-btn-primary:active {
background: #18181B !important;
border-color: #18181B !important;
transition-duration: 60ms !important;
}
.alf-btn-primary:focus-visible {
box-shadow:
var(--rw-shadow-btn, inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(16, 16, 20, 0.24)),
0 0 0 3px var(--rw-accent-ring, rgba(110, 91, 230, 0.18)) !important;
}
@media (prefers-reduced-motion: reduce) {
.alf-filter-btn,
.alf-filter-btn svg,
.alf-btn { transition: none !important; }
}
/* ===== Ajustes tanda 4 · grupo L ===== */
/* ============================================================================
REPORTES · barra compacta de "Periodo y filtros" (agente L)
Sustituye el panel alto con rejilla de selects por una sola barra:
[ presets de periodo ] [ rango de fechas ] [ Filtros ▾ n ] ... [ Generar ] [ Excel ] [ PDF ]
+ fila de chips con los filtros activos.
============================================================================ */
#reportes .rep-bar {
margin: 0 0 16px;
}
#reportes .rep-bar-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 8px 10px;
background: var(--rw-surface, #fff);
border: 1px solid var(--rw-border, #EBEBEE);
border-radius: var(--rw-r-lg, 14px);
box-shadow: var(--rw-shadow-xs, 0 1px 2px rgba(16,16,20,.04));
}
/* ── Presets de periodo (control segmentado) ───────────────────────────── */
#reportes .rep-bar .rep-filtros-presets {
display: inline-flex;
gap: 2px;
margin: 0 !important;
padding: 3px;
background: var(--rw-surface-3, #F4F4F6);
border-radius: 10px;
flex-wrap: nowrap !important;
max-width: 100%;
}
#reportes .rep-bar .rep-preset-btn {
padding: 5px 9px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--rw-muted, #71717A);
font-size: var(--rw-fs-sm, 13px);
font-weight: 500;
white-space: nowrap;
transition: background-color .15s ease, color .15s ease;
}
#reportes .rep-bar .rep-preset-btn:hover {
background: rgba(255, 255, 255, .7);
color: var(--rw-ink, #18181B);
}
#reportes .rep-bar .rep-preset-btn.active {
background: var(--rw-surface, #fff);
color: var(--rw-ink, #18181B);
box-shadow: 0 1px 2px rgba(16, 16, 20, .08), 0 0 0 1px var(--rw-border, #EBEBEE);
}
#reportes .rep-bar .rep-preset-btn:focus-visible {
outline: 2px solid var(--rw-accent, #6E5BE6);
outline-offset: 1px;
}
/* ── Rango de fechas ───────────────────────────────────────────────────── */
#reportes .rep-rango {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 10px;
border: 1px solid var(--rw-border, #EBEBEE);
border-radius: 10px;
background: var(--rw-surface, #fff);
min-width: 0;
}
#reportes .rep-rango > i {
color: var(--rw-muted, #71717A);
font-size: .76rem;
flex: 0 0 auto;
}
#reportes .rep-rango input[type="date"] {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
height: 30px;
min-height: 0 !important;
width: 106px;
min-width: 0;
font-size: 12.5px;
color: var(--rw-ink, #18181B);
font-variant-numeric: tabular-nums;
}
#reportes .rep-rango input[type="date"]:focus {
outline: none;
color: var(--rw-accent-hover, #5B49D6);
}
#reportes .rep-rango:focus-within {
border-color: var(--rw-accent, #6E5BE6);
box-shadow: 0 0 0 3px rgba(110, 91, 230, .12);
}
#reportes .rep-rango-sep {
color: var(--rw-muted, #71717A);
font-size: .8rem;
flex: 0 0 auto;
}
/* ── Botón "Filtros" + desplegable ─────────────────────────────────────── */
#reportes .rep-pop-wrap {
position: relative;
display: inline-flex;
}
#reportes .rep-filtro-btn {
position: static !important;
transform: none !important;
height: 34px;
min-height: 34px;
padding: 0 12px;
border-radius: 10px;
font-size: var(--rw-fs-sm, 13px);
font-weight: 500;
}
#reportes .rep-filtro-btn[aria-expanded="true"] {
border-color: var(--rw-border-strong, #D8D8DE) !important;
background: var(--rw-surface-2, #FAFAFB) !important;
color: var(--rw-ink, #18181B) !important;
}
#reportes .rep-filtro-btn.has-filters {
background: var(--rw-accent-soft, #F1EEFE) !important;
border-color: var(--rw-accent-border, #D9D1FA) !important;
color: var(--rw-accent-hover, #5B49D6) !important;
}
#reportes .rep-filtro-btn:focus-visible {
outline: 2px solid var(--rw-accent, #6E5BE6);
outline-offset: 2px;
}
#reportes .rep-pop {
width: min(560px, calc(100vw - 40px));
padding: 16px;
}
#reportes .rep-pop .alf-pop-head {
margin-bottom: 12px;
font-size: var(--rw-fs-lg, 15px);
font-weight: 600;
}
#reportes .rep-pop .alf-pop-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
}
#reportes .rep-pop .alf-field-label {
font-size: var(--rw-fs-xs, 12px);
color: var(--rw-muted, #71717A);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
/* ── Acciones (generar + exportar) a la derecha de la barra ────────────── */
#reportes .rep-bar-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex-wrap: wrap;
}
#reportes .rep-bar .rep-btn-generar {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 13px;
border: 0;
border-radius: 10px;
background: var(--rw-accent, #6E5BE6);
color: #fff;
font-size: var(--rw-fs-sm, 13px);
font-weight: 500;
white-space: nowrap;
}
#reportes .rep-bar .rep-btn-generar:hover {
background: var(--rw-accent-hover, #5B49D6);
color: #fff;
}
#reportes .rep-bar .rep-export-group {
display: inline-flex;
align-items: center;
gap: 6px;
}
#reportes .rep-bar .rep-btn-excel,
#reportes .rep-bar .rep-btn-pdf {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 11px;
border: 1px solid var(--rw-border, #EBEBEE);
border-radius: 10px;
background: var(--rw-surface, #fff);
color: var(--rw-ink-2, #3F3F46);
font-size: var(--rw-fs-sm, 13px);
font-weight: 500;
white-space: nowrap;
}
#reportes .rep-bar .rep-btn-excel:hover:not(:disabled),
#reportes .rep-bar .rep-btn-pdf:hover:not(:disabled) {
border-color: var(--rw-border-strong, #D8D8DE);
background: var(--rw-surface-2, #FAFAFB);
color: var(--rw-ink, #18181B);
}
#reportes .rep-bar .rep-btn-excel:disabled,
#reportes .rep-bar .rep-btn-pdf:disabled {
opacity: .5;
cursor: not-allowed;
}
#reportes .rep-bar .rep-btn-excel i { color: #16794C; }
#reportes .rep-bar .rep-btn-pdf i { color: #C0392B; }
#reportes .rep-bar .rep-btn-excel:disabled i,
#reportes .rep-bar .rep-btn-pdf:disabled i { color: var(--rw-muted, #71717A); }
#reportes .rep-bar .rep-btn-generar:focus-visible,
#reportes .rep-bar .rep-btn-excel:focus-visible,
#reportes .rep-bar .rep-btn-pdf:focus-visible {
outline: 2px solid var(--rw-accent, #6E5BE6) !important;
outline-offset: 2px;
}
/* ── Chips de filtros activos ──────────────────────────────────────────── */
#reportes .rep-chips {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
align-items: center;
flex-wrap: wrap !important;
gap: 6px;
margin-top: 8px;
}
#reportes .rep-chips[hidden] { display: none !important; }
#reportes .rep-chip {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 260px;
padding: 3px 4px 3px 9px;
border: 1px solid var(--rw-border, #EBEBEE);
border-radius: 999px;
background: var(--rw-surface-2, #FAFAFB);
font-size: var(--rw-fs-xs, 12px);
line-height: 1.5;
}
#reportes .rep-chip-k { color: var(--rw-muted, #71717A); }
#reportes .rep-chip-v {
color: var(--rw-ink, #18181B);
font-weight: 500;
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#reportes .rep-chip-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--rw-muted, #71717A);
font-size: 14px;
line-height: 1;
transition: background-color .15s ease, color .15s ease;
}
#reportes .rep-chip-x:hover {
background: var(--rw-surface-3, #F4F4F6);
color: var(--rw-ink, #18181B);
}
#reportes .rep-chip-x:focus-visible,
#reportes .rep-chips-clear:focus-visible {
outline: 2px solid var(--rw-accent, #6E5BE6);
outline-offset: 1px;
}
#reportes .rep-chips-clear {
border: 0;
background: transparent;
padding: 3px 6px;
border-radius: 7px;
color: var(--rw-accent, #6E5BE6);
font-size: var(--rw-fs-xs, 12px);
font-weight: 500;
}
#reportes .rep-chips-clear:hover {
background: var(--rw-accent-soft, #F1EEFE);
color: var(--rw-accent-hover, #5B49D6);
}
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
#reportes .rep-bar-actions { margin-left: 0; }
}
@media (max-width: 767.98px) {
#reportes .rep-bar-row { padding: 8px; gap: 8px; }
#reportes .rep-bar .rep-filtros-presets {
flex: 1 1 100%;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
#reportes .rep-bar .rep-filtros-presets::-webkit-scrollbar { display: none; }
#reportes .rep-bar .rep-preset-btn { flex: 0 0 auto; scroll-snap-align: start; }
#reportes .rep-rango { flex: 1 1 100%; justify-content: space-between; }
#reportes .rep-rango input[type="date"] { width: auto; flex: 1 1 0; }
#reportes .rep-pop-wrap { flex: 1 1 100%; }
#reportes .rep-filtro-btn { width: 100%; justify-content: center; }
#reportes .rep-bar-actions { flex: 1 1 100%; }
#reportes .rep-bar .rep-btn-generar { flex: 1 1 100%; justify-content: center; }
#reportes .rep-bar .rep-export-group { flex: 1 1 100%; }
#reportes .rep-bar .rep-btn-excel,
#reportes .rep-bar .rep-btn-pdf { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 575.98px) {
#reportes .rep-pop { width: 100%; }
#reportes .rep-pop .alf-pop-grid { grid-template-columns: 1fr; }
#reportes .rep-chip { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
#reportes .rep-bar *,
#reportes .rep-pop { transition: none !important; }
}
/* ===== Ajustes tanda 4 · grupo M ===== */
/* ============================================================================
SECCIONES v4 · M — Admin › Gestión › Presupuesto por proveedor
Ámbito: #presupuesto_proveedor (encabezado, barra de herramientas, KPIs,
panel de lista, barra de guardado y estados) + repaso del modal
#obraProvDetalleModal desde esta sección.
El rediseño de la lista y del modal ya vive en app-theme.css acotado con
:is(#presupuesto_proveedor, #obraAdminTab-proveedores) .pp-*; aquí solo se
resuelve el markup propio de la sección y su encaje con el panel admin.
============================================================================ */
/* --- Encabezado de la sección --- */
#presupuesto_proveedor > .card-container > .spa-section-head { padding-bottom: 18px !important; }
#presupuesto_proveedor .spa-section-subtitle { max-width: 760px; }
/* --- Barra de herramientas (obra · buscar · agregar) --- */
#presupuesto_proveedor .pp-toolbar {
display: grid;
grid-template-columns: minmax(280px, 1.15fr) minmax(200px, 1fr) minmax(300px, 1.1fr);
align-items: end;
gap: 12px;
margin: 0 0 14px;
padding: 14px 16px;
border: 1px solid var(--rw-border);
border-radius: var(--rw-r-lg);
background: var(--rw-surface);
box-shadow: var(--rw-shadow-xs);
}
#presupuesto_proveedor .pp-field { display: flex; flex-direction: column; min-width: 0; }
#presupuesto_proveedor .pp-field > .spa-filter-label {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--rw-fs-xs) !important;
color: var(--rw-muted) !important;
margin-bottom: 6px !important;
}
#presupuesto_proveedor .pp-field > .spa-filter-label > i { font-size: .8em; color: var(--rw-faint); }
/* Selector de obra: es el filtro principal de la pantalla. */
#presupuesto_proveedor .pp-field-obra > .spa-filter-label {
font-weight: 600 !important;
color: var(--rw-ink-2) !important;
}
#presupuesto_proveedor .pp-field-obra > .spa-filter-label > i { color: var(--rw-accent); }
#presupuesto_proveedor .pp-field-obra .pp-obra-select,
#presupuesto_proveedor .pp-field-obra .ts-wrapper .ts-control {
min-height: 42px !important;
border-color: var(--rw-border-strong) !important;
font-size: var(--rw-fs-md) !important;
font-weight: 500;
color: var(--rw-ink) !important;
border-radius: var(--rw-r-md) !important;
}
#presupuesto_proveedor .pp-field-obra .ts-wrapper { width: 100%; }
/* Una sola línea: así los tres campos quedan a la misma altura. */
#presupuesto_proveedor .pp-field-obra .ts-wrapper.single .ts-control {
flex-wrap: nowrap; overflow: hidden; padding-right: 30px !important;
}
#presupuesto_proveedor .pp-field-obra .ts-wrapper.single .ts-control > .item {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
#presupuesto_proveedor .pp-field-obra .ts-wrapper.has-items .ts-control { border-color: var(--rw-accent) !important; }
#presupuesto_proveedor .pp-field-obra .ts-wrapper .ts-control input::placeholder { color: var(--rw-faint); }
/* Buscador */
#presupuesto_proveedor .pp-field-buscar .pp-search { width: 100%; min-width: 0; }
#presupuesto_proveedor .pp-search-input {
height: 42px !important; min-height: 42px !important;
padding: 0 12px 0 32px !important;
border-radius: var(--rw-r-md) !important;
}
#presupuesto_proveedor .pp-search > i { left: 13px; }
/* Agregar proveedor no listado */
#presupuesto_proveedor .pp-agregar { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
#presupuesto_proveedor .pp-agregar .pp-add-select,
#presupuesto_proveedor .pp-agregar .ts-wrapper {
flex: 1 1 auto; min-width: 0; max-width: none; width: auto;
}
#presupuesto_proveedor .pp-agregar .pp-add-select,
#presupuesto_proveedor .pp-agregar .ts-wrapper .ts-control {
min-height: 42px !important; height: auto !important;
border-radius: var(--rw-r-md) !important;
font-size: var(--rw-fs-sm) !important;
}
#presupuesto_proveedor .pp-add-btn {
flex: 0 0 auto; height: auto !important; min-height: 42px; border-radius: var(--rw-r-md) !important;
}
/* Aspecto "en espera" mientras no hay obra elegida (no roto: atenuado y claro). */
#presupuesto_proveedor .pp-search-input:disabled,
#presupuesto_proveedor .pp-add-select:disabled {
background: var(--rw-surface-2) !important;
border-color: var(--rw-border) !important;
color: var(--rw-faint) !important;
cursor: not-allowed;
}
#presupuesto_proveedor .pp-agregar .ts-wrapper.disabled { opacity: 1; }
#presupuesto_proveedor .pp-agregar .ts-wrapper.disabled .ts-control {
background: var(--rw-surface-2) !important;
border-color: var(--rw-border) !important;
color: var(--rw-faint) !important;
box-shadow: none !important;
cursor: not-allowed;
}
#presupuesto_proveedor .pp-add-btn:disabled {
opacity: 1; background: var(--rw-surface-2) !important;
border-color: var(--rw-border) !important; color: var(--rw-faint) !important;
box-shadow: none !important; cursor: not-allowed;
}
#presupuesto_proveedor .pp-field-buscar:has(.pp-search-input:disabled) > .spa-filter-label,
#presupuesto_proveedor .pp-field-agregar:has(.pp-add-btn:disabled) > .spa-filter-label {
color: var(--rw-faint) !important;
}
/* --- Nota explicativa: compacta y plegable (abierta en escritorio) --- */
#presupuesto_proveedor .pp-note {
display: block;
margin: 0 0 14px;
padding: 9px 12px;
font-size: var(--rw-fs-xs);
line-height: 1.5;
color: var(--rw-muted);
}
#presupuesto_proveedor .pp-note-sum {
display: flex; align-items: center; gap: 9px;
list-style: none; cursor: pointer; color: var(--rw-ink-2); font-weight: 500;
}
#presupuesto_proveedor .pp-note-sum::-webkit-details-marker { display: none; }
#presupuesto_proveedor .pp-note-sum > i { font-size: .95em; color: var(--rw-muted); }
#presupuesto_proveedor .pp-note-sum::after {
content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
margin-left: auto; font-size: .7em; color: var(--rw-faint);
transition: transform var(--rw-dur-fast) ease;
}
#presupuesto_proveedor .pp-note[open] .pp-note-sum::after { transform: rotate(180deg); }
#presupuesto_proveedor .pp-note-sum:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; border-radius: 6px; }
#presupuesto_proveedor .pp-note-body { margin-top: 7px; padding-left: 22px; }
#presupuesto_proveedor .pp-note strong { font-weight: 600; color: var(--rw-ink-2); }
@media (prefers-reduced-motion: reduce) {
#presupuesto_proveedor .pp-note-sum::after { transition: none; }
}
/* --- KPIs --- */
#presupuesto_proveedor .pp-kpis { margin: 0 0 14px; }
#presupuesto_proveedor .pp-kpis .rw-kpi { padding: 14px 15px; }
#presupuesto_proveedor .pp-kpis .rw-kpi-value { font-size: 1.3rem; }
#presupuesto_proveedor .pp-kpis .rw-kpi-sub { overflow-wrap: anywhere; }
/* --- Panel de la lista --- */
#presupuesto_proveedor .pp-panel { margin-bottom: 0; padding-bottom: 0; }
#presupuesto_proveedor .pp-panel-head { align-items: center; margin-bottom: 0; }
#presupuesto_proveedor .pp-panel-title i { font-size: .85em; color: var(--rw-faint); }
/* La lista va pegada al panel: sin tarjeta dentro de tarjeta. */
#presupuesto_proveedor .pp-rows {
border: 0 !important; border-radius: 0 !important; overflow: visible;
}
#presupuesto_proveedor .pp-rows .obra-row:first-child { border-top: 0; }
#presupuesto_proveedor .pp-rows .obra-row-head { border-radius: 0; }
#presupuesto_proveedor #ppBody > .pp-empty { padding: 44px 16px; }
/* --- Barra de guardado (totales + guardar, sin duplicar el botón) --- */
#presupuesto_proveedor .pp-savebar { margin-top: 14px; }
/* En escritorio la barra cierra la lista; abajo de 1200 se vuelve pegajosa
para no perder "Guardar" al capturar montos en móvil. */
@media (min-width: 1200px) { #presupuesto_proveedor .pp-savebar { position: static; } }
#presupuesto_proveedor .pp-savebar[hidden] { display: none !important; }
#presupuesto_proveedor .pp-savebar-totales { display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap; }
#presupuesto_proveedor .pp-savebar-sec strong { font-size: 1rem !important; color: var(--rw-ink-2) !important; }
#presupuesto_proveedor .pp-savebar .btn-primary { min-height: 40px; }
/* --- Estados: vacío / cargando / error --- */
#presupuesto_proveedor .pp-retry { margin-top: 12px; }
#presupuesto_proveedor .pp-empty-error > i { color: var(--rw-red) !important; background: var(--rw-red-soft) !important; }
#presupuesto_proveedor .pp-loading .pp-spinner { margin-bottom: 2px; }
/* --- Modal de desglose visto desde esta sección --- */
#obraProvDetalleModal .pp-retry { margin-top: 12px; }
#obraProvDetalleModal .pp-detalle > .rw-modal-section + .rw-modal-section { margin-top: 12px; }
#obraProvDetalleModal .pp-hero {
padding: 14px 16px; border: 1px solid var(--rw-border); border-radius: var(--rw-r-lg);
background: var(--rw-surface);
}
#obraProvDetalleModal .pp-hero-bar { margin: 10px 2px 14px; }
/* ============================================================================
Responsive
============================================================================ */
@media (max-width: 1399.98px) {
#presupuesto_proveedor .pp-toolbar { grid-template-columns: minmax(240px, 1fr) minmax(180px, .9fr); }
#presupuesto_proveedor .pp-field-agregar { grid-column: 1 / -1; }
}
@media (max-width: 1199.98px) {
/* Las filas se vuelven tarjetas: el panel deja de ser una caja para no
anidar tarjeta dentro de tarjeta. */
#presupuesto_proveedor .pp-panel {
border: 0 !important; background: transparent !important; box-shadow: none !important;
border-radius: 0; overflow: visible;
}
#presupuesto_proveedor .pp-panel-head { padding: 0 2px 10px; border-bottom: 0; }
#presupuesto_proveedor #ppBody > .pp-empty {
border: 1px dashed var(--rw-border-strong); border-radius: var(--rw-r-lg); background: var(--rw-surface);
}
}
@media (max-width: 1023.98px) {
#presupuesto_proveedor .pp-toolbar { grid-template-columns: 1fr 1fr; padding: 12px; }
#presupuesto_proveedor .pp-field-obra { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
#presupuesto_proveedor .pp-toolbar { grid-template-columns: 1fr; gap: 10px; }
#presupuesto_proveedor .pp-field-buscar,
#presupuesto_proveedor .pp-field-agregar { grid-column: 1 / -1; }
#presupuesto_proveedor .pp-agregar { flex-wrap: wrap; }
#presupuesto_proveedor .pp-agregar .pp-add-select,
#presupuesto_proveedor .pp-agregar .ts-wrapper { flex: 1 1 100%; }
#presupuesto_proveedor .pp-add-btn { flex: 1 1 100%; justify-content: center; }
#presupuesto_proveedor .pp-note { font-size: 11.5px; padding: 9px 11px; }
#presupuesto_proveedor .pp-kpis .rw-kpi-value { font-size: 1.15rem; }
#presupuesto_proveedor .pp-savebar { padding: 12px !important; gap: 10px; }
#presupuesto_proveedor .pp-savebar-totales { width: 100%; justify-content: space-between; gap: 12px; }
#presupuesto_proveedor .pp-savebar-totales .obra-savebar-total { flex-direction: column; align-items: flex-start; gap: 0; }
#presupuesto_proveedor .pp-savebar .btn { flex: 1 1 100%; justify-content: center; }
}