/* ====================================================================== ultu.css -- ULTU Design System Estructura: 9 partes ordenadas por capas de responsabilidad PART 1 -- LEGACY (codigo heredado, a migrar) PART 2 -- VARIABLES + RESET (:root, *, body) PART 3 -- APP SHELL (cabecera, botonera, menu lateral) PART 4 -- COMPONENTES GLOBALES(spinners, inputs, grilla) PART 5 -- LOGIN PART 6 -- MI PERFIL PART 7 -- ADMINISTRACION PART 8 -- CLIENTES PART 9 -- PRESUPUESTOS (pendiente) ====================================================================== */ /* ====================================================================== PART 1 -- LEGACY Codigo heredado de cuerpo.css / estilos.css. Revisar y eliminar progresivamente. ====================================================================== */ /* ────────────────────────────────────────── ELEMENTOS A ELIMINAR O REUBICAR (EXTRAIDOS DE CUERPO.CSS DEPRECADO) ────────────────────────────────────────── */ /* Primero solo ELEMENTOS HTML a eliminar o reubicar */ iframe { display: block; border-style: none; } /*Ahora solo elementos de tipo ID a eliminar o reubicar*/ #cabecera { padding: 0; align-items: normal; margin-bottom: 0px; width: 98%; } #panelMenu { display: block; position: relative; } #iframeBotonera { border: 0px; margin: 0; } #datosDestacados { padding-top: 0.5rem; } #cuerpoPagina, #cuerpoSolapa { max-width: 100% !important; } #cabSistema, #divBarraDirecciones, #panelCuerpo, #panelSolapa { padding-left: 0px; } #cabSistema, #panelMenu, #divBarraDirecciones, #panelMenuSolapa, #panelCuerpo, #panelSolapa { margin-left: 0px; } #botonera, #botonerSolapa, #botoneraSubSolapa, #subBotonera, #subBotoneraSubSolapa, div.scrollableArea { position: relative; border: 0px; max-width: 100% !important; } /* Ahora elementos de "Clases" a eliminar o reubicar*/ .carousel-control-prev, .carousel-control-next { height: max-content; top: -1.5em; width: max-content; } .carousel-control-prev { padding-right: 1%; margin-right: 0%; left: initial; right: 50%; } .carousel-control-next { padding-left: 1%; margin-left: 0%; right: initial; left: 50%; } .carousel-control-prev-icon, .carousel-control-next-icon { padding: 0.8rem; background-color: #bbb; border: 1px solid #CCCCCC; box-shadow: 1px 1px 3px #CCC; border-radius: 6px; margin-top: 2.5rem; } .badge-ultu, .carousel-control-prev-icon:hover, .carousel-control-next-icon:hover { background-color: #60207E; } .badge-ultu { color: #fff; } .badge { font-size: 10px; } .badge-ultu:hover { color: #60207E; background-color: #fff; border: 1px solid #bbb; } .modal-body { position: relative; overflow-y: auto; } .modal-autoheight { position: relative; min-height: 100px !important; max-height: 2000px !important; max-width: 900px !important; height: auto !important; } .contenedor-dashboard { width: 95%; display: flex; justify-content: space-around; background-color: #fff; border: 1px solid #bbb; padding: 10px; border-radius: 5px; } .texto-titulo-dashboard { text-align: center; font-size: small; padding-bottom: 30px; } .grilla-titulo-dashboard { font-size: 20px; font-weight: none; color: #60207E; display: revert; } .elemento-superior-dashboard { width: 20%; padding-top: 5px; padding-bottom: 25px; /* Simplificar las propiedades de relleno */ background-color: #60207E; color: #fff; border: 1px solid #60207E; border-radius: 5px; font-size: 50px; font-weight: bold; display: flex; /* Establecer el contenedor como flexbox */ flex-direction: column; /* Columna principal para centrar verticalmente */ justify-content: center; /* Centrar verticalmente el contenido */ align-items: center; } .elemento-inferior-dashboard-bar { width: 50%; height: 400px; border: 1px solid black; text-align: center; align-items: center; } .elemento-inferior-dashboard-pie { width: 49%; height: 650px; border: 1px solid black; text-align: center; align-items: center; } .contenedor-dashboard-siniestro { width: 98%; display: flex; justify-content: space-between; background-color: #fff; border: 1px solid #bbb; padding: 10px; border-radius: 5px; } .elemento-superior-dashboard-siniestro { width: 15%; padding-top: 5px; padding-bottom: 50px; /* Simplificar las propiedades de relleno */ background-color: #60207E; color: #fff; border: 1px solid #60207E; border-radius: 5px; font-size: 50px; font-weight: bold; display: flex; /* Establecer el contenedor como flexbox */ flex-direction: column; /* Columna principal para centrar verticalmente */ justify-content: center; /* Centrar verticalmente el contenido */ align-items: center; } .elemento-inferior-dashboard-siniestro-bar { width: 50%; height: 600px; border: 1px solid black; text-align: center; align-items: center; } .elemento-inferior-dashboard-siniestro-pie { width: 50%; height: 1000px; border: 1px solid black; text-align: center; align-items: center; } /* ====================================================================== PART 2 -- VARIABLES GLOBALES + RESET BASE Design tokens (:root), reset universal (*), body base ====================================================================== */ /* ────────────────────────────────────────── VARIABLES GLOBALES :ROOT ────────────────────────────────────────── */ :root { /* Colores primarios */ --ultu-color-primary: #6C4FD1; --ultu-color-primary-light: #7B5FD9; --ultu-color-primary-dark: #5A3DBF; --ultu-color-primary-rgb: 108, 79, 209; /* Textos */ --ultu-text-base: #1a1a1a; --ultu-text-muted: #585858; --ultu-text-subtle: #888888; --ultu-text-faint: #adadad; --ultu-text-placeholder: #b8b8b8; --ultu-text-dim: #c3c3c3; /* Superficies y bordes */ --ultu-bg: #ecedf8; --ultu-surface: #f5f6fc; --ultu-surface-hover: #f0f1f9; --ultu-border: #eaecf5; --ultu-card-header-bg: #f5f5f5; --ultu-global-surface: #ebecf2; --ultu-border-global-grid: #d7d8de; /* Tintes del primario */ --ultu-primary-tint: #f7f4ff; --ultu-primary-border-hover: #c4b5f4; /* Gradientes primarios */ --ultu-gradient-primary: linear-gradient(135deg, #7B5FD9 0%, #5A3DBF 100%); --ultu-gradient-global-grid: #ebecf2; /* Radios */ --ultu-radius-sm: 8px; --ultu-radius-md: 12px; --ultu-radius-lg: 18px; --ultu-radius-card: 24px; /* Indicadores de carga */ --ultu-loading-track: rgba(var(--ultu-color-primary-rgb), 0.15); /* ── Sombras ───────────────────────────────────────────────── --ultu-shadow-color : purple derivado del brand (más oscuro que el primario) — úsalo en contenedores/cards. var(--ultu-color-primary-rgb) sigue usándose en botones/foco para que la sombra respete el color exacto del elemento. ──────────────────────────────────────────────────────────── */ --ultu-shadow-color: 80, 60, 150; /* Escala de elevación — contenedores, cards, popups */ --ultu-shadow-sm: 0 4px 16px rgba(var(--ultu-shadow-color), 0.08); --ultu-shadow-md: 0 8px 32px rgba(var(--ultu-shadow-color), 0.09), 0 2px 8px rgba(0, 0, 0, 0.04); --ultu-shadow-lg: 0 16px 48px rgba(var(--ultu-shadow-color), 0.16), 0 2px 8px rgba(0, 0, 0, 0.06); --ultu-shadow-xl: 0 24px 64px rgba(var(--ultu-shadow-color), 0.10), 0 4px 16px rgba(0, 0, 0, 0.05); /* Foco / ring interactivo */ --ultu-shadow-focus: 0 0 0 3px rgba(var(--ultu-color-primary-rgb), 0.12); /* Botones — usan el primario exacto, no --ultu-shadow-color */ --ultu-shadow-btn: 0 4px 14px rgba(var(--ultu-color-primary-rgb), 0.30); --ultu-shadow-btn-hover: 0 6px 20px rgba(var(--ultu-color-primary-rgb), 0.44); --ultu-shadow-btn-hero: 0 6px 22px rgba(var(--ultu-color-primary-rgb), 0.38); --ultu-shadow-btn-hero-hover: 0 8px 28px rgba(var(--ultu-color-primary-rgb), 0.48); /* ── Iconos SVG centralizados ── */ --ultu-icon-logo-menu: 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'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E"); --ultu-icon-mail-inbox: 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%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='2,4 12,13 22,4'/%3E%3C/svg%3E"); --ultu-icon-mail-sent: 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%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E"); --ultu-icon-mail-draft: 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 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E"); --ultu-icon-mail-archive: 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%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E"); --ultu-icon-cotizador: 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%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='8' y1='7' x2='16' y2='7'/%3E%3Cline x1='8' y1='11' x2='10' y2='11'/%3E%3Cline x1='14' y1='11' x2='16' y2='11'/%3E%3Cline x1='8' y1='15' x2='10' y2='15'/%3E%3Cline x1='14' y1='15' x2='16' y2='15'/%3E%3Cline x1='8' y1='19' x2='16' y2='19'/%3E%3C/svg%3E"); --ultu-icon-tasks: 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='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cline x1='9' y1='12' x2='15' y2='12'/%3E%3Cline x1='9' y1='16' x2='12' y2='16'/%3E%3C/svg%3E"); --ultu-icon-user-status: 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='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); --ultu-icon-helpdesk: 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='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z'/%3E%3Cpath d='M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E"); --ultu-icon-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E"); --ultu-icon-chevron-right: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); --ultu-icon-chevron-down: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --ultu-icon-refresh: 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%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E"); --ultu-icon-compose: 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='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'/%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'/%3E%3C/svg%3E"); --ultu-icon-calendar: 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%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); --ultu-icon-search: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); --ultu-icon-export: 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%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E"); --ultu-icon-user: 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%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); --ultu-icon-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); --ultu-icon-eye: 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='M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); --ultu-icon-eye-off: 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='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"); --ultu-icon-arrow-right: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); --ultu-icon-settings-gear: 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='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); --ultu-icon-users-group: 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='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); --ultu-icon-hierarchy: 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 x='1' y='1' width='9' height='6' rx='1.5'/%3E%3Crect x='7' y='9' width='10' height='6' rx='1.5'/%3E%3Crect x='14' y='17' width='9' height='6' rx='1.5'/%3E%3Cpath d='M10 4h3a2 2 0 0 1 2 2v1'/%3E%3Cpolyline points='13 5.5 15 7.5 17 5.5'/%3E%3Cpath d='M14 12h3a2 2 0 0 1 2 2v1'/%3E%3Cpolyline points='17 13.5 19 15.5 21 13.5'/%3E%3C/svg%3E"); --ultu-icon-dispatch: 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 2H5a2 2 0 0 0-2 2v13'/%3E%3Cpath d='M8 5h6l3 3v9a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3Cpath d='M14 5v3h3'/%3E%3Cline x1='10' y1='11' x2='15' y2='11'/%3E%3Cline x1='10' y1='14' x2='15' y2='14'/%3E%3Cpath d='M19 13l4 1.5v2.5c0 2-4 4-4 4s-4-2-4-4V14.5z'/%3E%3Cpolyline points='17.5 17 19 18.5 21.5 15.5'/%3E%3C/svg%3E"); --ultu-icon-login-key: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94'/%3E%3C/svg%3E"); --ultu-icon-text-lines: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='12' x2='14' y2='12'/%3E%3Cline x1='4' y1='18' x2='18' y2='18'/%3E%3C/svg%3E"); --ultu-icon-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3Cline x1='12' y1='12' x2='12' y2='17'/%3E%3Cline x1='9' y1='14.5' x2='15' y2='14.5'/%3E%3C/svg%3E"); --ultu-icon-info: 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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); --ultu-icon-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='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); --ultu-icon-close: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); /* ── Estados de usuario ── */ --ultu-color-status-available: #22c55e; --ultu-color-status-busy: #f59e0b; --ultu-color-status-absent: #94a3b8; --ultu-color-status-vacation: #3b82f6; /* ── Danger / requerido — formaliza los rojos sueltos que ya existían en .GrillaError y .gg-badge--no-activo, en vez de sumar un color nuevo ── */ --ultu-color-danger: #dc2626; --ultu-color-danger-bg: #fef2f2; --ultu-color-danger-border: #fca5a5; /* ── Series de gráficos (dashboards) — reutilizable en cualquier torta/área ── */ --ultu-chart-series-1: var(--ultu-color-primary); --ultu-chart-series-2: #9B7FE8; --ultu-chart-series-3: #E85FA0; --ultu-chart-series-4: #4FA8D1; --ultu-chart-series-muted: #D8D2F0; } /* ── Reset base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow-x: hidden; } /* ====================================================================== PART 3 -- APP SHELL -- LAYOUT GLOBAL #divBarraDirecciones, Cabecera, Botonera, p_menuLateral, Container Queries, lockWindow ====================================================================== */ /* ══════════════════════════════════════════════════════════════ BARRA DE DIRECCIONES, TRACKING DE NAVEGACIÓN — Área de navegación del sitio web SPA, sirve para volver atrás en el recorrido de las páginas que se fue visitando / linkeando está inmediatamente antes del Layout Global. ══════════════════════════════════════════════════════════════ */ #divBarraDirecciones { margin-top: 0.5rem; } /* ══════════════════════════════════════════════════════════════ LAYOUT GLOBAL — Área de contenido principal Wrapper que envuelve panelCuerpo + panelMenuSolapa + panelSolapa en cuerpo.php, inmediatamente después de #divBarraDirecciones. ══════════════════════════════════════════════════════════════ */ .ultu-content-area { padding: 10px 20px; } /* ══════════════════════════════════════════════════════════════ CABECERA / TOP NAVIGATION BAR ══════════════════════════════════════════════════════════════ */ /* Cuando la cabecera de la aplicación está presente el body adopta layout de bloque en lugar del flex centrado que usa el login. Esto hace que .ultu-ia-header ocupe el 100 % de su contenedor. */ body:has(#ultu-ia-cabecera) { display: block; } /* ── Top bar ── */ .ultu-ia-header { position: sticky; top: 0; z-index: 100; width: 100%; background: #ffffff; display: flex; align-items: center; justify-content: space-between; padding: 8px; min-height: 60px; flex-wrap: nowrap; container-type: inline-size; container-name: cabecera; } /* ── Brand / Logo ── */ .ultu-ia-header .ultu-ia-logo-sistema { display: flex; align-items: center; gap: 10px; max-width: 45%; flex-shrink: 1; min-width: 0; overflow: hidden; text-decoration: none; height: auto; margin-left: 15px; } .ultu-ia-logo-cia { max-height: 88px; width: auto; border-radius: 6px; flex-shrink: 0; } .ultu-ia-cabecera-titulo, .ultu-ia-text-leyenda { font-size: 0.88rem; font-weight: 600; color: var(--ultu-text-base); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* ── Right-side actions container ── */ .ultu-ia-datos-destacados { display: flex !important; align-items: center; gap: 10px; position: relative; flex-wrap: nowrap; flex-shrink: 0; } /* ── Bell loading spinner container ── Tamaño fijo para que no cause layout shift al alternar con #notificationIcon. visibility:hidden/visible en lugar de display:none/block garantiza que el espacio reservado nunca cambie y el popup de notificaciones no salte. ── */ .ultu-ia-bell-notices { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── Notification icon (trigger) ── min-width fijo para que el reemplazo de contenido vía AJAX no reduzca el ancho del elemento y desplace el popup. ── */ .ultu-ia-notification-icon { cursor: pointer; position: relative; display: flex; align-items: center; min-width: 46px; flex-shrink: 0; } /* ── Bell button chip ── */ .ultu-ia-hdr-bell-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 10px 5px; border-radius: var(--ultu-radius-md); background: var(--ultu-surface); border: 1.5px solid var(--ultu-border); transition: background .2s, border-color .2s, box-shadow .2s; min-width: 46px; user-select: none; } .ultu-ia-notification-icon:hover .ultu-ia-hdr-bell-btn { background: var(--ultu-primary-tint); border-color: var(--ultu-primary-border-hover); box-shadow: 0 2px 8px rgba(var(--ultu-color-primary-rgb), 0.14); } .ultu-ia-hdr-bell-icon { color: var(--ultu-color-primary); display: flex; align-items: center; line-height: 0; position: relative; } .ultu-ia-hdr-bell-icon--off { color: var(--ultu-text-placeholder); } /* Punto de aviso naranja superpuesto (reemplaza el que antes iba dentro del SVG) */ .ultu-ia-hdr-bell-dot { position: absolute; top: 3px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; } /* ══════════════════════════════════════════════════════════════ NOTIFICACIONES — Campana, popup, grilla, acciones ══════════════════════════════════════════════════════════════ */ /* ── Notification count badge ── */ .ultu-ia-badge, #cantNoticePend.ultu-ia-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 17px; padding: 0 5px; border-radius: 9px; font-size: 0.62rem; font-weight: 700; font-family: inherit; line-height: 1; } .ultu-ia-badge-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; } .ultu-ia-badge-secondary { background: #e4e6f4; color: var(--ultu-text-subtle); } /* ── Notifications popup panel ── */ .ultu-ia-popup-notice { position: absolute !important; top: calc(100% + 10px) !important; left: 0 !important; background: #ffffff !important; border: 1.5px solid var(--ultu-border) !important; border-radius: 16px !important; box-shadow: var(--ultu-shadow-lg) !important; z-index: 300 !important; min-width: 300px; max-width: 360px; overflow: hidden; margin: 0 !important; padding: 0 !important; float: none !important; } .ultu-ia-popup-notice .ultu-ia-card-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px 11px !important; background: var(--ultu-card-header-bg) !important; border-bottom: 1px solid var(--ultu-border) !important; border-radius: 0 !important; font-size: 0.7rem !important; font-weight: 700 !important; color: var(--ultu-text-base) !important; letter-spacing: 0.7px !important; text-transform: uppercase !important; } /* ── Cotización & Perfil inline cards ── */ .ultu-ia-card { background: #ffffff; border: 1.5px solid var(--ultu-border) !important; border-radius: 14px !important; box-shadow: var(--ultu-shadow-sm) !important; overflow: hidden; margin: 0 !important; align-self: stretch; display: flex; flex-direction: column; } .ultu-ia-card .ultu-ia-card-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 12px 7px !important; height: 34px; overflow: hidden; box-sizing: border-box; background: var(--ultu-card-header-bg) !important; border-bottom: 1px solid var(--ultu-border) !important; border-radius: 0 !important; font-size: 0.68rem !important; font-weight: 700 !important; color: var(--ultu-text-base) !important; letter-spacing: 0.7px !important; text-transform: uppercase !important; } .ultu-ia-card .ultu-ia-card-body { padding: 10px 12px !important; font-size: 0.78rem !important; color: var(--ultu-text-muted) !important; line-height: 1.00 !important; flex: 1 1 auto; } .ultu-ia-cotiz-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .ultu-ia-cotiz-row + .ultu-ia-cotiz-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ultu-surface-hover); } .ultu-ia-cotiz-lbl { font-weight: 700; color: var(--ultu-text-base); } /* ── Header refresh / icon button ── */ .ultu-ia-hdr-refresh-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--ultu-text-faint); padding: 4px 5px; border-radius: 6px; transition: color .2s, background .2s; line-height: 0; text-decoration: none !important; } .ultu-ia-hdr-refresh-btn:hover { color: var(--ultu-color-primary); background: var(--ultu-primary-tint); } /* ── Contenedores de íconos de refresh: tamaño fijo para evitar layout shift al alternar entre el SVG (13px) y el spinner reutilizado .ultu-ia-spinner-sm (16px) ── */ #loadUpCotizacionMoneda, #refreshNotices { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; } /* ── Profile card ── */ .ultu-ia-hdr-user-row { display: flex; align-items: center; gap: 8px; min-height: 21px; } .ultu-ia-hdr-user-lbl { display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 400; color: var(--ultu-text-faint); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 0; line-height: 0; } .ultu-ia-hdr-user-name { font-size: inherit; font-weight: 700; color: var(--ultu-text-base); text-transform: uppercase; letter-spacing: inherit; line-height: 1; } .ultu-ia-hdr-date { font-size: 0.78rem; color: var(--ultu-text-subtle); margin-bottom: 8px; } .ultu-ia-hdr-profile-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 6px; border-top: 1px solid var(--ultu-surface-hover); } .ultu-ia-datos-perfil a { color: var(--ultu-color-primary); font-size: 0.78rem; font-weight: 500; text-decoration: none; transition: opacity .2s; cursor: pointer; } .ultu-ia-datos-perfil a:hover { opacity: 0.75; text-decoration: none; } /* ── Mobile mini menu button ── */ .ultu-ia-btn-mini-mnu { display: none; } .ultu-ia-btn-mini-mnu a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--ultu-surface); border: 1.5px solid var(--ultu-border); border-radius: 10px; color: var(--ultu-color-primary); font-size: 0.8rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s; } .ultu-ia-btn-mini-mnu a:hover { background: var(--ultu-primary-tint); } .ultu-ia-mini-user-name { display: inline-block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #frmMenu { display: none; } /* ── Notice items table ── */ .ultu-ia-grilla-notice { width: 100%; border-collapse: collapse; display: block; max-height: 260px; overflow-y: auto; } .ultu-ia-grilla-notice::-webkit-scrollbar { width: 4px; } .ultu-ia-grilla-notice::-webkit-scrollbar-track { background: var(--ultu-surface); } .ultu-ia-grilla-notice::-webkit-scrollbar-thumb { background: #d4d2ee; border-radius: 2px; } .ultu-ia-grilla-texto-notice, .ultu-ia-grilla-texto-notice-leida { display: block; width: 100%; cursor: pointer; border-bottom: 1px solid var(--ultu-surface-hover); transition: background .12s; } .ultu-ia-grilla-texto-notice { background: #f5f4ff; } .ultu-ia-grilla-texto-notice-leida { background: #ffffff; } .ultu-ia-grilla-texto-notice:hover, .ultu-ia-grilla-texto-notice-leida:hover { background: var(--ultu-primary-tint); } .ultu-ia-grilla-texto-notice td, .ultu-ia-grilla-texto-notice-leida td { display: block; padding: 10px 14px; font-size: 0.82rem; } .ultu-ia-grilla-texto-notice td .float-left, .ultu-ia-grilla-texto-notice-leida td .float-left { float: none !important; display: block; } .ultu-ia-grilla-texto-notice td .float-left:first-child { font-size: 0.82rem; font-weight: 600; color: var(--ultu-text-base); line-height: 1.4; margin-bottom: 3px; } .ultu-ia-grilla-texto-notice-leida td .float-left:first-child { font-size: 0.82rem; font-weight: 400; color: var(--ultu-text-muted); line-height: 1.4; margin-bottom: 3px; } .ultu-ia-estilo-fecha-notice { font-size: 0.7rem !important; color: var(--ultu-text-faint) !important; float: none !important; display: block !important; } .ultu-ia-grilla-error { color: #dc2626; font-size: 0.82rem; padding: 10px 14px; display: block; } /* ── Notice actions bar ── */ .ultu-ia-notice-actions-wrap { display: flex; gap: 8px; justify-content: center; padding: 10px 14px 12px; border-top: 1px solid var(--ultu-border); background: var(--ultu-card-header-bg); } /* ── btnVioleta ── */ .ultu-ia-btn-violeta { padding: 4px 14px; background: var(--ultu-gradient-primary); color: #fff; border: none; border-radius: var(--ultu-radius-sm); font-size: 0.78rem; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: var(--ultu-shadow-btn); transition: transform .15s, box-shadow .2s; white-space: nowrap; } .ultu-ia-btn-violeta:hover { transform: translateY(-1px); box-shadow: var(--ultu-shadow-btn-hover); } .ultu-ia-btn-violeta:active { transform: translateY(0); } /* ── No notices empty state ── */ .ultu-ia-notice-empty { text-align: center; padding: 20px 16px; font-size: 0.82rem; color: var(--ultu-text-faint); } /* ══════════════════════════════════════════════════════════════ BOTONERA PRINCIPAL — Menú horizontal de navegación BEM: ultu-ia-botonera / ultu-ia-menu-pr / ultu-ia-menu-pr-link Reemplaza gradualmente los estilos de estilos.css: .btnMenuPr / .btnMenuPrSeleccionado / .menuPrincipal Mantiene las clases viejas en los elementos para compatibilidad con el JavaScript existente (actualizarcolor, seleccionomenu). ══════════════════════════════════════════════════════════════ */ /* ── botonera__track: contenedor externo del rail de navegación ── */ .ultu-ia-botonera-track { position: relative; width: 100%; border-bottom: 2px solid var(--ultu-color-primary); } /* ── botonera__surface: superficie visible con scroll CSS nativo ── */ .ultu-ia-botonera-surface { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,249,255,0.98) 100%); border-radius: var(--ultu-radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); padding: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } /* Scrollbar oculto — la navegación se hace con las flechas laterales */ .ultu-ia-botonera-surface::-webkit-scrollbar { display: none; } /* ── botonera__nav: fila flex de ítems ── */ .ultu-ia-botonera-nav { display: flex; align-items: stretch; gap: 2px; min-width: max-content; } /* ── menu-item: wrapper de cada ítem (neutros, sin visual propio) ── Sobreescribe float y altura de estilos.css para .menuPrincipal */ .ultu-ia-menu-item.menuPrincipal { float: none; min-width: 0; height: auto; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; border-radius: var(--ultu-radius-sm); flex: 0 0 auto; } /* ── menu-pr: el ítem en sí (wrapper del link + borde animado) ── Sobreescribe estilos visuales de .btnMenuPr y .btnMenuPrSeleccionado */ .ultu-ia-menu-pr.btnMenuPr, .ultu-ia-menu-pr.btnMenuPrSeleccionado { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; float: none; min-width: 0; width: auto; height: auto; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; border-radius: var(--ultu-radius-sm); position: relative; } /* Neutraliza el hover de estilos.css en .btnMenuPr:hover */ .ultu-ia-menu-pr.btnMenuPr:hover, .ultu-ia-menu-pr.btnMenuPrSeleccionado:hover { border: none; background: transparent; box-shadow: none; color: inherit; } /* ── menu-item--dropdown: ítem con submenú flotante ── */ .ultu-ia-menu-item-dropdown.menuPrincipal, .ultu-ia-menu-item-dropdown.ultu-ia-menu-pr.btnMenuPr, .ultu-ia-menu-item-dropdown.ultu-ia-menu-pr.btnMenuPrSeleccionado { min-width: 118px; } /* ── menu-pr__border: borde animado independiente del layout ── */ .ultu-ia-menu-pr-border { position: absolute; inset: 0; border-radius: var(--ultu-radius-sm); border: 1px solid transparent; pointer-events: none; transition: border-color .2s ease, box-shadow .2s ease; } /* ── menu-pr__link: área clickeable con visuales modernos ── */ .ultu-ia-menu-pr-link { position: relative; display: flex; align-items: center; justify-content: center; min-height: 26px; padding: 5px 8px; border-radius: var(--ultu-radius-sm); background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.04); color: var(--ultu-text-base); cursor: pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease; } .ultu-ia-menu-pr-link:hover { transform: translateY(-1px); background: linear-gradient(180deg, #ffffff 0%, #f1eeff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 20px rgba(var(--ultu-color-primary-rgb), 0.12); } .ultu-ia-menu-pr:hover .ultu-ia-menu-pr-border { border-color: #d7cff7; box-shadow: 0 0 0 3px rgba(var(--ultu-color-primary-rgb), 0.06); } /* ── menu-pr__label: texto del botón ── */ .ultu-ia-menu-pr-label { display: block; min-width: 0; font-size: 0.8rem; font-weight: 600; line-height: 1.2; color: inherit; white-space: nowrap; text-align: center; } .ultu-ia-menu-item-dropdown .ultu-ia-menu-pr-label { padding-right: 16px; } /* ── menu-pr__caret: flecha indicadora de dropdown (CSS puro) ── */ .ultu-ia-menu-pr-caret { position: absolute; top: 50%; right: 11px; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); opacity: 0.45; transition: opacity .2s ease, transform .2s ease; } .ultu-ia-menu-pr:hover .ultu-ia-menu-pr-caret { opacity: 0.8; } .ultu-ia-menu-item-dropdown[aria-expanded="true"] .ultu-ia-menu-pr-caret { transform: translateY(-50%) rotate(-135deg); opacity: 0.8; } /* ── menu-pr--selected: estado activo/seleccionado ── */ .ultu-ia-menu-pr-selected .ultu-ia-menu-pr-link { background: var(--ultu-gradient-primary); color: #ffffff; box-shadow: 0 12px 24px rgba(var(--ultu-color-primary-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .ultu-ia-menu-pr-selected .ultu-ia-menu-pr-border { border-color: rgba(90, 61, 191, 0.15); } .ultu-ia-menu-pr-selected .ultu-ia-menu-pr-caret { color: rgba(255, 255, 255, 0.82); opacity: 1; } .ultu-ia-menu-pr-selected:hover .ultu-ia-menu-pr-link { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(var(--ultu-color-primary-rgb), 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* ── dropdown flotante (submenú de Cobranzas, etc.) ── */ .ultu-ia-preview-dropdown { position: absolute; top: calc(100% - 6px); left: 0; min-width: 220px; background: #ffffff; border: 1px solid #e7e9f5; border-radius: 14px; box-shadow: var(--ultu-shadow-lg); padding: 5px; z-index: 25000; } .ultu-ia-preview-dropdown-list { display: grid; } .ultu-ia-preview-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 12px; border-radius: 10px; color: var(--ultu-text-base); font-size: 13px; font-weight: 500; background: transparent; cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease; } .ultu-ia-preview-dropdown-item:hover { background: #f5f3ff; color: var(--ultu-color-primary-dark); transform: translateX(1px); } /* Flecha decorativa en cada ítem del dropdown */ .ultu-ia-preview-dropdown-item::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: 0.38; flex: 0 0 auto; } /* ── botonera__arrow: zonas de scroll lateral con hover (reemplaza smoothDivScroll) ── */ .ultu-ia-botonera-arrow { position: absolute; top: 6px; bottom: 2px; width: 48px; z-index: 10; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .ultu-ia-botonera-arrow--left { left: 0; background: linear-gradient(to right, rgba(248,249,255,0.97) 55%, transparent 100%); border-radius: 18px 0 0 18px; } .ultu-ia-botonera-arrow--right { right: 0; background: linear-gradient(to left, rgba(248,249,255,0.97) 55%, transparent 100%); border-radius: 0 18px 18px 0; } /* Chevron CSS puro */ .ultu-ia-botonera-arrow::before { content: ''; display: block; width: 9px; height: 9px; border-right: 2.5px solid var(--ultu-color-primary); border-top: 2.5px solid var(--ultu-color-primary); transition: border-color .15s ease; } .ultu-ia-botonera-arrow--left::before { transform: rotate(-135deg); margin-left: 8px; } .ultu-ia-botonera-arrow--right::before { transform: rotate(45deg); margin-right: 8px; } .ultu-ia-botonera-arrow:hover::before { border-color: var(--ultu-color-primary-dark); } /* JS toggle: visible solo cuando hay contenido para scrollear en esa dirección */ .ultu-ia-botonera-arrow--visible { opacity: 1; pointer-events: auto; } #iframeBotonera, #botonera, #botoneraSubSolapa, #subBotonera { height: 44px !important; overflow: hidden; padding: initial; width: 100%; } /* Linea divisoria del 1er menú de solapas */ #iframeBotonera, #botonera { border-bottom: 3px solid var(--ultu-color-primary) !important; } /* Linea divisoria del 2do menú de solapas */ #botoneraSolapa { height: 44px; } /* ── Responsive de la botonera (sin escalones, solo ajustes finos) ── */ @container cabecera (max-width: 768px) { .ultu-ia-botonera-track { padding-top: 4px; } .ultu-ia-botonera-surface { border-radius: 16px; padding: 7px; } .ultu-ia-botonera-nav { gap: 7px; } .ultu-ia-menu-item.menuPrincipal, .ultu-ia-menu-pr.btnMenuPr, .ultu-ia-menu-pr.btnMenuPrSeleccionado { min-width: 0; } .ultu-ia-menu-item-dropdown.menuPrincipal, .ultu-ia-menu-item-dropdown.ultu-ia-menu-pr.btnMenuPr, .ultu-ia-menu-item-dropdown.ultu-ia-menu-pr.btnMenuPrSeleccionado { min-width: 108px; } .ultu-ia-menu-pr-link { min-height: 43px; padding: 4px 7px; } } /* ══════════════════════════════════════════════════════════════ MENÚ LATERAL — Panel de navegación vertical deslizable BEM: p_menuLateral__* Reemplaza: #menuLateral / #panelLateral de cuerpo.css (deprecado), .tituloLateral / .lineasTitulo / .divLateral / .EstiloMailLinkLateral / .EstiloMailActualizacion de estilos.css ══════════════════════════════════════════════════════════════ */ /* ── Tab / franja lateral (trigger de apertura) ── */ .p_menuLateral__tab { position: fixed !important; z-index: 2501; top: 0; left: 0; width: 20px; height: 115px; min-height: 60px; background: var(--ultu-gradient-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 0 var(--ultu-radius-sm) var(--ultu-radius-sm) 0; box-shadow: 3px 0 12px rgba(var(--ultu-color-primary-rgb), 0.30); transition: width .2s ease, box-shadow .2s ease; padding: 0; } .p_menuLateral__tab:hover { width: 26px; box-shadow: 5px 0 20px rgba(var(--ultu-color-primary-rgb), 0.45); } .p_menuLateral__tab-icon { color: rgba(255, 255, 255, 0.88); --ultu-icon-size: 13px; } /* Alert state: punto indicador + pulso de sombra */ .p_menuLateral__tab--alert { animation: p_menuLateral-pulse 1.8s ease-in-out infinite; position: relative; } .p_menuLateral__tab--alert::after { content: ''; position: absolute; top: 10px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ultu-color-status-busy); border: 2px solid #ffffff; } @keyframes p_menuLateral-pulse { 0%, 100% { box-shadow: 3px 0 12px rgba(var(--ultu-color-primary-rgb), 0.30); } 50% { box-shadow: 3px 0 24px rgba(var(--ultu-color-primary-rgb), 0.68); } } /* ── Panel expandido ── */ .p_menuLateral__panel { display: none; position: fixed !important; top: 0; left: 0; width: 200px; height: 100vh; background: #ffffff; z-index: 2500; overflow-y: auto; overflow-x: hidden; box-shadow: var(--ultu-shadow-lg); border-right: 1px solid var(--ultu-border); border-radius: 0 var(--ultu-radius-md) var(--ultu-radius-md) 0; } .p_menuLateral__panel::-webkit-scrollbar { width: 4px; } .p_menuLateral__panel::-webkit-scrollbar-track { background: var(--ultu-surface); } .p_menuLateral__panel::-webkit-scrollbar-thumb { background: rgba(var(--ultu-color-primary-rgb), 0.25); border-radius: 2px; } .p_menuLateral__panel { scrollbar-width: thin; scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface); } /* ── Logo del sistema ── */ .p_menuLateral__logo-wrap { display: flex; align-items: center; justify-content: center; padding: 20px 16px 14px; border-bottom: 1px solid var(--ultu-border); } .p_menuLateral__logo { max-width: 150px; height: auto; } /* ── Sección genérica ── */ .p_menuLateral__section { padding: 10px 12px; border-bottom: 1px solid var(--ultu-border); } /* ── Encabezado de sección con línea extensible ── */ .p_menuLateral__section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .p_menuLateral__section-title { font-size: 0.68rem; font-weight: 700; color: var(--ultu-text-subtle); letter-spacing: 0.9px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } /* Línea extensible — elemento explícito para permitir elementos a su derecha */ .p_menuLateral__section-line { flex: 1; height: 1px; background: var(--ultu-border); min-width: 10px; } /* ── Cuerpo de sección ── */ .p_menuLateral__section-body { display: flex; flex-direction: column; gap: 1px; } /* ── Ítem clickeable ── */ .p_menuLateral__item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--ultu-radius-sm); cursor: pointer; color: var(--ultu-text-muted); font-size: 0.82rem; font-weight: 500; line-height: 1.3; user-select: none; transition: background .15s ease, transform .12s ease, color .15s ease; } .p_menuLateral__item:hover { background: var(--ultu-primary-tint); color: var(--ultu-color-primary-dark); transform: translateX(2px); } .p_menuLateral__item--alert { color: var(--ultu-text-base); font-weight: 600; } /* ── Ícono del ítem ── */ .p_menuLateral__item-icon { flex-shrink: 0; color: var(--ultu-color-primary); opacity: 0.75; line-height: 0; transition: opacity .15s; } .p_menuLateral__item:hover .p_menuLateral__item-icon { opacity: 1; } /* ── Label del ítem ── */ .p_menuLateral__item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Badge de contador ── */ .p_menuLateral__item-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 17px; padding: 0 5px; border-radius: 9px; font-size: 0.62rem; font-weight: 700; line-height: 1; flex-shrink: 0; } .p_menuLateral__item-badge--warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: #ffffff; } .p_menuLateral__item-badge--secondary { background: #e4e6f4; color: var(--ultu-text-subtle); } /* ── Timestamp ── */ .p_menuLateral__timestamp { font-size: 0.68rem; color: var(--ultu-text-faint); padding: 5px 8px 2px; line-height: 1.4; } /* ── Fila de botones de acción ── */ .p_menuLateral__actions { display: flex; gap: 6px; padding: 8px 0 2px; flex-wrap: wrap; justify-content: center; } /* ── Estado del usuario: fila activa ── */ .p_menuLateral__estado-current { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--ultu-radius-sm); cursor: pointer; color: var(--ultu-text-muted); font-size: 0.82rem; font-weight: 500; user-select: none; transition: background .15s ease; } .p_menuLateral__estado-current:hover { background: var(--ultu-primary-tint); } /* ── Punto de color de estado ── */ .p_menuLateral__estado-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid rgba(0, 0, 0, 0.08); } .p_menuLateral__estado-dot--disponible { background: var(--ultu-color-status-available); } .p_menuLateral__estado-dot--ocupado { background: var(--ultu-color-status-busy); } .p_menuLateral__estado-dot--ausente { background: var(--ultu-color-status-absent); } .p_menuLateral__estado-dot--vacaciones { background: var(--ultu-color-status-vacation); } /* ── Chevron del estado ── */ .p_menuLateral__estado-chevron { display: inline-block; width: 14px; height: 14px; -webkit-mask: var(--ultu-icon-chevron-down) center / contain no-repeat; mask: var(--ultu-icon-chevron-down) center / contain no-repeat; background-color: var(--ultu-text-faint); flex-shrink: 0; margin-left: auto; transition: transform .2s ease; } .p_menuLateral__estado-current[aria-expanded="true"] .p_menuLateral__estado-chevron { transform: rotate(180deg); } /* ── Dropdown de opciones de estado ── */ .p_menuLateral__estado-dropdown { background: var(--ultu-surface); border: 1px solid var(--ultu-border); border-radius: var(--ultu-radius-sm); padding: 4px; margin: 0 4px 4px; } .p_menuLateral__estado-option { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 0.80rem; font-weight: 500; color: var(--ultu-text-muted); transition: background .12s ease, color .12s ease; } .p_menuLateral__estado-option:hover { background: var(--ultu-primary-tint); color: var(--ultu-color-primary-dark); } /* ── Link Help Desk ── */ .p_menuLateral__helpdesk-link { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--ultu-radius-sm); text-decoration: none; color: var(--ultu-text-muted); font-size: 0.82rem; font-weight: 500; transition: background .15s ease, color .15s ease, transform .12s ease; } .p_menuLateral__helpdesk-link:hover { background: var(--ultu-primary-tint); color: var(--ultu-color-primary-dark); transform: translateX(2px); text-decoration: none; } /* ── Header de Notificaciones (título + badge inline) ── */ .p_menuLateral__notif-header { flex-wrap: wrap; row-gap: 4px; } /* ── Selector de Cotizadores ── */ .p_menuLateral__select { width: 100%; padding: 4px 8px; border: 1.5px solid var(--ultu-border); border-radius: var(--ultu-radius-sm); background: var(--ultu-surface); font-size: 12px; font-family: inherit; color: var(--ultu-text-base); outline: none; cursor: pointer; transition: border-color .2s, box-shadow .2s; } .p_menuLateral__select:focus { border-color: var(--ultu-color-primary); box-shadow: var(--ultu-shadow-focus); background-color: #ffffff; } /* ── Pie del panel ── */ .p_menuLateral__footer { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px 16px; } .p_menuLateral__footer-logo { max-width: 100px; height: auto; opacity: 0.65; } .p_menuLateral__footer-copy { font-size: 0.70rem; color: var(--ultu-text-dim); } /* ══════════════════════════════════════════════════════════════ CONTAINER QUERIES — Cabecera adaptativa sin escalones fijos La campana de notificaciones SIEMPRE permanece visible. ══════════════════════════════════════════════════════════════ */ /* Paso 1: cuando la cabecera mide menos de 700px → ocultar Cotización */ @container cabecera (max-width: 700px) { .ultu-ia-destacado:not(.ultu-ia-datos-perfil) { display: none; } } /* Paso 2: cuando la cabecera mide menos de 500px → ocultar Perfil */ @container cabecera (max-width: 500px) { .ultu-ia-datos-perfil { display: none; } } /* ══════════════════════════════════════════════════════════════ OVERLAY DE CARGA (lockWindow) Solo posicionamiento — diseño y color vienen de .ultu-loader-shell y .ultu-ia-progress-bar respectivamente ══════════════════════════════════════════════════════════════ */ .lockWindow .ultu-loader-shell { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ====================================================================== PART 4 -- COMPONENTES GLOBALES REUTILIZABLES Spinners/loaders, inputs, buttons, panel consulta, iconos SVG, exportar, grilla-global ====================================================================== */ /* ────────────────────────────────────────── SPINNER DE CARGA GLOBAL ────────────────────────────────────────── */ #load { display: flex; justify-content: center; align-items: center; } .ultu-ia-spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ultu-loading-track); border-top-color: var(--ultu-color-primary); animation: ultu-spin 0.75s linear infinite; } @keyframes ultu-spin { to { transform: rotate(360deg); } } /* ── Spinner variants (reemplazan loadLogin.gif) ── */ .ultu-ia-spinner-sm { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ultu-loading-track); border-top-color: var(--ultu-color-primary); animation: ultu-spin 0.75s linear infinite; vertical-align: middle; } .ultu-ia-spinner-md { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--ultu-loading-track); border-top-color: var(--ultu-color-primary); animation: ultu-spin 0.75s linear infinite; vertical-align: middle; } /* ── Barra de progreso indeterminada (reemplaza cargando.gif) ── */ .ultu-ia-progress-bar { position: relative; width: 100%; height: 4px; background: var(--ultu-loading-track); border-radius: 2px; overflow: hidden; } .ultu-ia-progress-bar::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--ultu-color-primary); border-radius: 2px; animation: ultu-progress-slide 1.6s ease-in-out infinite; will-change: transform; } @keyframes ultu-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } .ultu-ia-progress-bar-sm { height: 2px; } /* ── Cápsula del overlay de carga ── */ .ultu-loader-shell { width: 100%; max-width: 320px; padding: 7px 9px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.05); } /* ────────────────────────────────────────── INPUT GLOBAL — input_global Campo de texto base del sistema. Altura fija 28px, borde suave #eaecf5, radio 8px. Hover y focus usan el color primario con sombra de anillo. Usar en cualquier del sistema. No aplica a del sistema: tanto los estáticos (input_globalSelect) como los cargados vía AJAX por los generadores de combos compartidos (agregarCombo.php, agregarComboRol.php, ComboEnEspera en utiles.php), que siempre emiten class="FormularioDatosCombo". ────────────────────────────────────────── */ .input_globalSelect, select.FormularioDatosCombo { height: 25px; padding: 0 22px 0 7px; font-size: 12px; color: var(--ultu-text-base); border: 1.5px solid var(--ultu-border); border-radius: var(--ultu-radius-sm); outline: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s, background .15s; appearance: none; -webkit-appearance: none; background-image: var(--ultu-icon-chevron-down); background-repeat: no-repeat; background-position: right 6px center; background-size: 13px; cursor: pointer; } /* width:100% solo para input_globalSelect: es la clase que vive dentro de grillas en columna (p_clientes__field) pensadas para ancho completo. FormularioDatosCombo a secas se usa también en layouts inline (ej. barra "Ordenar por" en barraGlobal__sort) donde el ancho debe seguir siendo el del contenido — forzar 100% ahí rompe el layout en una sola fila. */ .input_globalSelect { width: 100%; } .input_globalSelect:hover:not(:focus), select.FormularioDatosCombo:hover:not(:focus) { border-color: var(--ultu-primary-border-hover); } .input_globalSelect:focus, select.FormularioDatosCombo:focus { border-color: var(--ultu-primary-border-hover); box-shadow: var(--ultu-shadow-focus); background-color: #fff; } .input_globalSelect:disabled, select.FormularioDatosCombo:disabled, .input_globalSelect[disabled], select.FormularioDatosCombo[disabled] { background-color: var(--ultu-card-header-bg); color: var(--ultu-text-subtle); border-color: var(--ultu-border); cursor: not-allowed; opacity: 1; } /* ────────────────────────────────────────── COMBO GLOBAL — input_globalCombo / input_globalInlineCombo Wrappers div para combos . Acá solo quedan los ajustes de layout propios del wrapper flex (estirar el