/*
* Sistema de tema UX — EsencialGPS / Sucursal Virtual
* Prefijo: --ux-* (para no colisionar con Bootstrap, FontAwesome, etc.)
* Activación: (o sin atributo = claro)
* Reutilizable en cualquier vista de sv_esencial.
*/
/* ==========================================================================
Paleta CLARO — "Frost x Slate": celeste gris elegante, texto azul petróleo.
Ningún elemento queda en blanco puro; todo respira con un tinte azulado.
========================================================================== */
:root {
--ux-bg: #E6EEF5; /* fondo general: celeste gris ambiente */
--ux-surface: #F4F8FB; /* cards, topbar, inputs (celeste casi blanco) */
--ux-surface-alt: #DBE5EF; /* hovers, zebras, headers de tabla */
--ux-border: #C1CEDB; /* bordes con tinte azulado sutil */
--ux-border-strong: #96A9BC; /* bordes enfatizados */
--ux-text: #253548; /* azul petróleo profundo (reemplaza negro) */
--ux-text-muted: #516579; /* texto secundario (labels, descriptions) */
--ux-text-subtle: #7A8DA0; /* texto de ayuda, metadata */
--ux-primary: #106BA0;
--ux-primary-dark: #0b4d75;
--ux-primary-soft: #D7E7F4;
--ux-primary-ghost: rgba(16,107,160,0.10);
--ux-primary-ring: rgba(16,107,160,0.28);
--ux-accent: #EB800E;
--ux-accent-dark: #b5630a;
--ux-accent-soft: #FCE4C0;
--ux-soft-text: #8a5a00;
--ux-muted: #5A7288;
--ux-shadow: rgba(37,53,72,0.10); /* sombra con tinte azul */
--ux-scrollbar: #96A9BC;
--ux-scrollbar-hover:#106BA0;
}
[data-theme="dark"] {
--ux-bg: #0f1b2a;
--ux-surface: #15263a;
--ux-surface-alt: #1e3352;
--ux-border: #2a4468;
--ux-border-strong: #3c5a7e;
--ux-text: #e8eef5;
--ux-text-muted: #a8b4c5;
--ux-text-subtle: #7a8aa0;
--ux-primary: #5CB7E8;
--ux-primary-dark: #3a95c8;
--ux-primary-soft: #1a3a5c;
--ux-primary-ghost: rgba(92,183,232,0.12);
--ux-primary-ring: rgba(92,183,232,0.35);
--ux-accent: #FF8C2E;
--ux-accent-dark: #d96a10;
--ux-accent-soft: #3a2a0e;
--ux-soft-text: #FFD06A;
--ux-muted: #8a96aa;
--ux-shadow: rgba(0,0,0,0.35);
--ux-scrollbar: #2a4468;
--ux-scrollbar-hover:#5CB7E8;
}
/* Transición global suave al cambiar tema */
html.ux-theming,
html.ux-theming body,
html.ux-theming *,
html.ux-theming *::before,
html.ux-theming *::after {
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
}
/* Scope del modo: aplica al html y body desde el primer paint, sin necesidad
de que el JS agregue clases. Esto evita el flash blanco→oscuro al recargar. */
html[data-theme],
html[data-theme] body {
background-color: var(--ux-bg);
color: var(--ux-text);
}
/* Mantener compatibilidad con la clase legacy ux-enabled */
body.ux-enabled {
background: var(--ux-bg);
color: var(--ux-text);
}
/* Toggle del tema (botón en el sidebar) */
.ux-theme-toggle {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ux-surface-alt);
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ux-accent);
cursor: pointer;
font-size: 12px;
padding: 0;
transition: background 0.15s, color 0.15s, transform 0.25s;
}
.ux-theme-toggle:hover {
background: var(--ux-primary-soft);
transform: rotate(18deg);
}
.ux-theme-toggle:focus { outline: 2px solid var(--ux-primary); outline-offset: 2px; }
.ux-theme-toggle .icon-sun { display: inline; }
.ux-theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .ux-theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .ux-theme-toggle .icon-moon { display: inline; color: var(--ux-soft-text); }
/* Ajuste fino: imágenes con leve dimming en dark para no quemar retinas */
[data-theme="dark"] .v2-screenshot-frame img {
opacity: 0.92;
transition: opacity 0.2s ease;
}
[data-theme="dark"] .v2-screenshot-frame img:hover { opacity: 1; }
/* ============================================================== */
/* FASE 1 — Integración global del tema */
/* ============================================================== */
/* --- Fuente moderna Inter, se carga por @import para no tocar cada layout --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
html.ux-font-modern,
html.ux-font-modern body {
font-family: 'Inter', 'Nunito', 'Segoe UI', Arial, sans-serif;
font-feature-settings: 'ss01', 'cv11';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Transiciones globales suaves (hover, focus, cambio de tema).
Se aplican a todas las páginas del sitio cuando el tema está activo. */
body.ux-enabled a,
body.ux-enabled button,
body.ux-enabled .btn,
body.ux-enabled .nav-link,
body.ux-enabled .dropdown-item,
body.ux-enabled .card,
body.ux-enabled input,
body.ux-enabled textarea,
body.ux-enabled select {
transition: background-color .18s ease, color .18s ease, border-color .18s ease,
box-shadow .18s ease, transform .18s ease;
}
/* ============================================================== */
/* Slider day/night (toggle global — reemplaza al botón circular) */
/* */
/* HTML esperado: */
/* */
/* ============================================================== */
.ux-theme-switch {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 28px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
vertical-align: middle;
}
.ux-theme-switch:focus { outline: none; }
.ux-theme-switch:focus-visible .ux-theme-switch-track {
box-shadow: 0 0 0 3px var(--ux-primary-ghost);
}
.ux-theme-switch-track {
position: relative;
display: block;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #fff1d6 0%, #fff1d6 50%, #e8f0fa 50%, #e8f0fa 100%);
border: 1px solid var(--ux-border);
border-radius: 14px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
transition: background .35s ease, border-color .25s ease, box-shadow .25s ease;
overflow: hidden;
}
[data-theme="dark"] .ux-theme-switch-track {
background: linear-gradient(90deg, #1a2a3e 0%, #1a2a3e 50%, #0c1826 50%, #0c1826 100%);
border-color: var(--ux-border-strong);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
/* Iconos estáticos en los extremos (decorativos, marcan el extremo "sol" y "luna").
Compatible con Font Awesome 5 y 6 (ambas familias soportan el mismo unicode). */
.ux-theme-switch-track::before,
.ux-theme-switch-track::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
font-weight: 900;
font-style: normal;
font-size: 10px;
line-height: 1;
pointer-events: none;
transition: opacity .25s ease;
-webkit-font-smoothing: antialiased;
}
.ux-theme-switch-track::before {
content: "\f185"; /* fa-sun */
left: 7px;
color: var(--ux-accent);
opacity: 1;
}
.ux-theme-switch-track::after {
content: "\f186"; /* fa-moon */
right: 7px;
color: var(--ux-soft-text);
opacity: 0.55;
}
[data-theme="dark"] .ux-theme-switch-track::before { opacity: 0.55; }
[data-theme="dark"] .ux-theme-switch-track::after { opacity: 1; }
.ux-theme-switch-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: var(--ux-accent);
border-radius: 50%;
color: #fff;
font-size: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
transition: left .32s cubic-bezier(.4,0,.2,1),
background .32s ease,
transform .15s ease;
z-index: 1;
}
[data-theme="dark"] .ux-theme-switch-thumb {
left: calc(100% - 24px);
background: var(--ux-primary);
}
.ux-theme-switch:hover .ux-theme-switch-thumb {
transform: scale(1.06);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.ux-theme-switch:active .ux-theme-switch-thumb {
transform: scale(0.95);
}
/* Iconos dentro del thumb — solo se ve el que corresponde al modo actual */
.ux-theme-switch-thumb .icon-sun,
.ux-theme-switch-thumb .icon-moon {
position: absolute;
transition: opacity .2s ease, transform .25s ease;
}
.ux-theme-switch-thumb .icon-sun { opacity: 1; transform: rotate(0deg); }
.ux-theme-switch-thumb .icon-moon { opacity: 0; transform: rotate(-30deg); }
[data-theme="dark"] .ux-theme-switch-thumb .icon-sun { opacity: 0; transform: rotate(30deg); }
[data-theme="dark"] .ux-theme-switch-thumb .icon-moon { opacity: 1; transform: rotate(0deg); }
/* Variante compacta para navbar angosta (40×22 en vez de 56×28) */
.ux-theme-switch.ux-theme-switch-sm {
width: 44px;
height: 22px;
}
.ux-theme-switch.ux-theme-switch-sm .ux-theme-switch-thumb {
width: 18px;
height: 18px;
font-size: 8px;
}
.ux-theme-switch.ux-theme-switch-sm .ux-theme-switch-track::before,
.ux-theme-switch.ux-theme-switch-sm .ux-theme-switch-track::after {
font-size: 8px;
}
[data-theme="dark"] .ux-theme-switch.ux-theme-switch-sm .ux-theme-switch-thumb {
left: calc(100% - 20px);
}
/* ============================================================== */
/* FASE 2B — Acentos naranja en tipografía (selectivos) */
/* ============================================================== */
/* Brand de la navbar: "SV - 2026 v1.1" y similares se ven en naranja
para ganar personalidad sin invadir la paleta azul del resto. */
body.ux-enabled .navbar-brand,
body.ux-enabled .navbar-laravel .navbar-brand {
color: var(--ux-accent) !important;
font-weight: 600;
letter-spacing: 0.2px;
}
body.ux-enabled .navbar-brand:hover {
color: var(--ux-accent-dark) !important;
}
/* h1 principal del contenido — resalta en naranja.
No toca h2/h3 para no chocar con el esquema del manual v2 (que los
pinta en primary). */
body.ux-enabled h1:not(.manual-v2):not([class*="v2-"]) {
color: var(--ux-accent);
font-weight: 600;
}
/* Headers de dropdown ("Centro de Alertas", etc.) */
body.ux-enabled .dropdown-header {
color: var(--ux-accent) !important;
font-weight: 700;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.4px;
}
/* Badges con conteos (alertas) — aro naranja suave */
body.ux-enabled .badge-counter {
background: var(--ux-accent) !important;
color: #fff !important;
border: 2px solid var(--ux-bg);
border-radius: 10px;
padding: 2px 6px;
font-weight: 700;
font-size: 10px;
}
/* Iconos fa dentro de los dropdowns heredan naranja al hacer hover */
body.ux-enabled .dropdown-item:hover > i.fa,
body.ux-enabled .dropdown-item:hover > i.fas,
body.ux-enabled .dropdown-item:hover > i.far {
color: var(--ux-accent) !important;
transition: color .18s ease;
}
/* Clase helper: cualquier elemento puede recibir color accent.
Uso: ... */
.ux-text-accent { color: var(--ux-accent) !important; }
.ux-text-primary { color: var(--ux-primary) !important; }
.ux-text-muted { color: var(--ux-text-muted) !important; }
/* Links en texto largo dentro del contenido principal: subrayado naranja */
body.ux-enabled main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover {
color: var(--ux-accent);
text-decoration-color: var(--ux-accent);
}
/* ============================================================== */
/* FASE 2 — Overrides de Bootstrap / SB Admin 2 */
/* (para que el dark mode pinte también topbar, cards, tablas) */
/* ============================================================== */
/* Topbar (.bg-white + .topbar) — usa surface para destacar del bg ambiente */
body.ux-enabled nav.topbar,
body.ux-enabled .topbar.bg-white,
body.ux-enabled nav.bg-white {
background-color: var(--ux-surface) !important;
border-bottom: 1px solid var(--ux-border);
}
/* Dropdowns: menús y headers */
body.ux-enabled .dropdown-menu {
background-color: var(--ux-surface);
border: 1px solid var(--ux-border);
color: var(--ux-text);
}
body.ux-enabled .dropdown-item {
color: var(--ux-text);
}
body.ux-enabled .dropdown-item:hover,
body.ux-enabled .dropdown-item:focus {
background-color: var(--ux-primary-soft);
color: var(--ux-primary);
}
body.ux-enabled .dropdown-divider {
border-top-color: var(--ux-border);
}
/* Iconos de navbar (campanita, usuario) — gris neutral que se adapta */
body.ux-enabled .navbar .nav-link,
body.ux-enabled .navbar .nav-link i {
color: var(--ux-text-muted);
transition: color .18s ease;
}
body.ux-enabled .navbar .nav-link:hover,
body.ux-enabled .navbar .nav-link:hover i {
color: var(--ux-primary);
}
/* Texto del nombre de usuario en navbar (clase de SB Admin 2) */
body.ux-enabled .text-gray-600,
body.ux-enabled .text-gray-700 {
color: var(--ux-text-muted) !important;
}
body.ux-enabled .text-gray-400,
body.ux-enabled .text-gray-500 {
color: var(--ux-text-subtle) !important;
}
body.ux-enabled .text-gray-300,
body.ux-enabled .text-gray-200 {
color: var(--ux-border-strong) !important;
}
/* Inputs / selects */
body.ux-enabled .form-control,
body.ux-enabled input.form-control,
body.ux-enabled textarea.form-control,
body.ux-enabled select.form-control {
background-color: var(--ux-surface);
border-color: var(--ux-border);
color: var(--ux-text);
}
body.ux-enabled .form-control:focus {
background-color: var(--ux-surface);
border-color: var(--ux-primary);
color: var(--ux-text);
box-shadow: 0 0 0 0.2rem var(--ux-primary-ring);
}
body.ux-enabled .form-control.bg-light {
background-color: var(--ux-surface) !important;
}
/* Tablas Bootstrap */
body.ux-enabled .table {
color: var(--ux-text);
}
body.ux-enabled .table thead th {
background-color: var(--ux-surface-alt);
border-bottom-color: var(--ux-border-strong);
color: var(--ux-text);
}
body.ux-enabled .table td,
body.ux-enabled .table th {
border-top-color: var(--ux-border);
}
body.ux-enabled .table-striped tbody tr:nth-of-type(odd) {
background-color: var(--ux-surface);
}
body.ux-enabled .table-hover tbody tr:hover {
background-color: var(--ux-primary-soft);
color: var(--ux-text);
}
/* Cards (home, dashboard) — usan surface para que destaquen sobre el bg ambiente */
body.ux-enabled .card {
background-color: var(--ux-surface);
border-color: var(--ux-border);
color: var(--ux-text);
}
body.ux-enabled .card-header {
background-color: var(--ux-surface);
border-bottom-color: var(--ux-border);
}
body.ux-enabled .card-footer {
background-color: var(--ux-surface);
border-top-color: var(--ux-border);
}
/* Alertas */
body.ux-enabled .alert-primary {
background-color: var(--ux-primary-soft);
border-color: var(--ux-primary);
color: var(--ux-primary);
}
/* Divisor visual de la topbar (SB Admin 2) */
body.ux-enabled .topbar-divider {
border-right: 1px solid var(--ux-border);
}
/* Icon-circle de alertas */
body.ux-enabled .icon-circle.bg-primary {
background-color: var(--ux-primary) !important;
}
/* Shadow de la topbar: más suave en dark */
[data-theme="dark"] body.ux-enabled .shadow,
[data-theme="dark"] body.ux-enabled nav.topbar {
box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
/* Scrollbars finos y temáticos (webkit) */
body.ux-enabled ::-webkit-scrollbar { width: 10px; height: 10px; }
body.ux-enabled ::-webkit-scrollbar-track { background: var(--ux-surface); }
body.ux-enabled ::-webkit-scrollbar-thumb {
background: var(--ux-border-strong);
border-radius: 5px;
border: 2px solid var(--ux-surface);
}
body.ux-enabled ::-webkit-scrollbar-thumb:hover {
background: var(--ux-primary);
}
/* ============================================================== */
/* FASE 3 — Pulido visual: jumbotron, selects, iconos, efectos */
/* ============================================================== */
/* ---------- Jumbotron temático (home de bienvenida) ---------- */
body.ux-enabled .jumbotron,
body.ux-enabled .ux-jumbotron {
background: linear-gradient(135deg, var(--ux-surface) 0%, var(--ux-primary-soft) 100%);
color: var(--ux-text);
border: 1px solid var(--ux-border);
border-radius: 16px;
box-shadow: 0 4px 16px var(--ux-shadow);
padding: 2rem 2.5rem;
}
[data-theme="dark"] body.ux-enabled .jumbotron,
[data-theme="dark"] body.ux-enabled .ux-jumbotron {
background: linear-gradient(135deg, var(--ux-surface) 0%, var(--ux-surface-alt) 100%);
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
body.ux-enabled .ux-jumbotron-title,
body.ux-enabled .jumbotron h1 {
color: var(--ux-primary);
font-weight: 600;
}
body.ux-enabled .jumbotron .lead,
body.ux-enabled .ux-jumbotron .lead {
color: var(--ux-text-subtle);
}
/* ---------- Cards con hover lift ---------- */
body.ux-enabled .card {
border-radius: 12px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.ux-enabled .card.box-shadow,
body.ux-enabled .card.mb-4 {
box-shadow: 0 2px 8px var(--ux-shadow);
}
body.ux-enabled .card.box-shadow:hover,
body.ux-enabled .card.mb-4:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px var(--ux-shadow);
border-color: var(--ux-primary);
}
body.ux-enabled .card .card-header {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
font-weight: 600;
}
body.ux-enabled .pricing-card-title i,
body.ux-enabled .pricing-card-title .fa,
body.ux-enabled .pricing-card-title .fas,
body.ux-enabled .pricing-card-title .far {
transition: color .2s ease, transform .3s ease;
}
body.ux-enabled .card:hover .pricing-card-title i,
body.ux-enabled .card:hover .pricing-card-title .fa,
body.ux-enabled .card:hover .pricing-card-title .fas,
body.ux-enabled .card:hover .pricing-card-title .far {
color: var(--ux-accent) !important;
transform: scale(1.08) rotate(-4deg);
}
/* ---------- Botones Bootstrap: radius + hover lift ---------- */
body.ux-enabled .btn {
border-radius: 8px;
transition: background-color .18s ease, border-color .18s ease,
color .18s ease, box-shadow .2s ease, transform .1s ease;
}
body.ux-enabled .btn:hover { transform: translateY(-1px); }
body.ux-enabled .btn:active { transform: translateY(0); }
/* btn-outline-primary: temático y animado */
body.ux-enabled .btn-outline-primary {
border: 1.5px solid var(--ux-primary) !important;
color: var(--ux-primary) !important;
background: transparent !important;
}
body.ux-enabled .btn-outline-primary:hover,
body.ux-enabled .btn-outline-primary:focus {
background: var(--ux-primary) !important;
color: #fff !important;
box-shadow: 0 3px 10px var(--ux-primary-ring);
}
/* btn-esencial (naranja): mantiene color pero con lift */
body.ux-enabled .btn-esencial:hover {
box-shadow: 0 3px 10px rgba(235,128,14,0.4);
}
/* ---------- Bootstrap-select (el botón .btn.dropdown-toggle.btn-light) ---------- */
body.ux-enabled .bootstrap-select > .btn.dropdown-toggle,
body.ux-enabled .bootstrap-select > .btn.dropdown-toggle.btn-light,
body.ux-enabled .bootstrap-select > .btn.dropdown-toggle.bs-placeholder,
body.ux-enabled button.btn.dropdown-toggle.btn-light {
background-color: var(--ux-surface) !important;
border: 1px solid var(--ux-border) !important;
color: var(--ux-text) !important;
box-shadow: none !important;
transition: border-color .15s ease, background-color .15s ease;
}
body.ux-enabled .bootstrap-select > .btn.dropdown-toggle:hover,
body.ux-enabled .bootstrap-select > .btn.dropdown-toggle:focus,
body.ux-enabled .bootstrap-select.show > .btn.dropdown-toggle {
border-color: var(--ux-primary) !important;
background-color: var(--ux-surface-alt) !important;
box-shadow: 0 0 0 0.2rem var(--ux-primary-ring) !important;
}
body.ux-enabled .bootstrap-select.bs-placeholder > .btn.dropdown-toggle,
body.ux-enabled .bs-placeholder {
color: var(--ux-text-subtle) !important;
}
body.ux-enabled .bootstrap-select .dropdown-menu {
background-color: var(--ux-surface);
border: 1px solid var(--ux-border);
box-shadow: 0 4px 18px var(--ux-shadow);
}
body.ux-enabled .bootstrap-select .dropdown-menu li a,
body.ux-enabled .bootstrap-select .dropdown-menu li a span.text {
color: var(--ux-text);
}
body.ux-enabled .bootstrap-select .dropdown-menu li a:hover,
body.ux-enabled .bootstrap-select .dropdown-menu li.selected a {
background-color: var(--ux-primary-soft) !important;
color: var(--ux-primary) !important;
}
/* Flecha del dropdown - fallback si se ve raro */
body.ux-enabled .bootstrap-select > .btn.dropdown-toggle:after,
body.ux-enabled .bootstrap-select > .btn.dropdown-toggle .caret {
color: var(--ux-text-muted);
}
/* Selects nativos (sin bootstrap-select) */
body.ux-enabled select.form-control,
body.ux-enabled select:not(.ux-theme-switch):not(.bootstrap-select) {
background-color: var(--ux-bg);
border: 1px solid var(--ux-border);
color: var(--ux-text);
border-radius: 6px;
padding: 6px 10px;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.ux-enabled select.form-control:focus,
body.ux-enabled select:focus {
border-color: var(--ux-primary);
box-shadow: 0 0 0 0.2rem var(--ux-primary-ring);
outline: none;
}
/* ---------- Iconos con acabado "pro" (escalado + peso) ---------- */
/* Los FontAwesome se agrandan ligeramente y toman un color consistente.
Los iconos grandes de las cards del home lucen más impresionantes. */
body.ux-enabled .pricing-card-title {
font-size: 3rem;
}
body.ux-enabled .pricing-card-title i {
font-size: 1em;
color: var(--ux-border-strong);
text-shadow: 0 2px 4px var(--ux-shadow);
}
/* Iconos de dropdown (sidebar, menus) con entrada suave */
body.ux-enabled .dropdown-item i.fa,
body.ux-enabled .dropdown-item i.fas,
body.ux-enabled .dropdown-item i.far {
transition: transform .2s ease, color .2s ease;
}
body.ux-enabled .dropdown-item:hover i.fa,
body.ux-enabled .dropdown-item:hover i.fas,
body.ux-enabled .dropdown-item:hover i.far {
transform: translateX(2px);
}
/* ---------- Alertas Bootstrap (éxito, error, info) ---------- */
body.ux-enabled .alert {
border-radius: 10px;
border: 1px solid transparent;
padding: 12px 18px;
animation: ux-fade-slide-in .35s ease both;
}
body.ux-enabled .alert-success {
background-color: rgba(40, 180, 100, 0.12);
border-color: rgba(40, 180, 100, 0.35);
color: #1a7f4a;
}
[data-theme="dark"] body.ux-enabled .alert-success {
color: #7ee0a5;
background-color: rgba(40, 180, 100, 0.18);
}
body.ux-enabled .alert-danger {
background-color: rgba(220, 80, 80, 0.12);
border-color: rgba(220, 80, 80, 0.35);
color: #b63434;
}
[data-theme="dark"] body.ux-enabled .alert-danger {
color: #f5a5a5;
background-color: rgba(220, 80, 80, 0.2);
}
/* ---------- Animaciones globales ---------- */
@keyframes ux-fade-slide-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ux-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Cards del home con entrada escalonada */
body.ux-enabled .card-deck .card {
animation: ux-fade-slide-in .4s ease both;
}
body.ux-enabled .card-deck .card:nth-child(1) { animation-delay: .05s; }
body.ux-enabled .card-deck .card:nth-child(2) { animation-delay: .15s; }
body.ux-enabled .card-deck .card:nth-child(3) { animation-delay: .25s; }
body.ux-enabled .card-deck .card:nth-child(4) { animation-delay: .35s; }
/* Jumbotron entrada */
body.ux-enabled .jumbotron,
body.ux-enabled .ux-jumbotron {
animation: ux-fade-slide-in .4s ease both;
}
/* Focus general más elegante */
body.ux-enabled *:focus-visible:not(.ux-theme-switch):not(.ux-theme-switch *) {
outline: 2px solid var(--ux-primary);
outline-offset: 2px;
border-radius: 3px;
}
/* Sweet Alert en oscuro (si la app lo usa) */
[data-theme="dark"] body.ux-enabled .swal2-popup {
background-color: var(--ux-surface);
color: var(--ux-text);
}
/* Badge del counter en navbar (naranja) — ya existía, refuerzo animación */
body.ux-enabled .badge-counter {
animation: ux-badge-pulse 2s ease-in-out infinite;
}
@keyframes ux-badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* ============================================================== */
/* DASHBOARD — Home moderno con stat cards + quick actions */
/* ============================================================== */
.ux-dashboard {
padding: 0 1rem 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* Banner de bienvenida (extiende el jumbotron) */
.ux-dashboard-banner .ux-dashboard-banner-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.ux-dashboard-banner .ux-dashboard-banner-art {
font-size: 64px;
color: var(--ux-primary);
opacity: 0.35;
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
border-radius: 50%;
background: var(--ux-primary-soft);
flex-shrink: 0;
transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.ux-dashboard-banner:hover .ux-dashboard-banner-art {
transform: rotate(-8deg) scale(1.05);
opacity: 0.5;
}
.ux-dashboard-subtitle {
color: var(--ux-text-subtle);
font-size: 13px;
margin: 8px 0 0;
text-transform: capitalize;
}
.ux-dashboard-subtitle i {
margin-right: 6px;
color: var(--ux-accent);
}
@media (max-width: 640px) {
.ux-dashboard-banner .ux-dashboard-banner-art {
display: none;
}
}
/* Grid de stat cards */
.ux-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
margin-top: 1.5rem;
}
/* Stat card: accesos rápidos con icono grande y color por categoría */
.ux-stat-card {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 20px 22px;
background: var(--ux-surface);
border: 1px solid var(--ux-border);
border-radius: 14px;
text-decoration: none !important;
color: var(--ux-text);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s;
overflow: hidden;
animation: ux-fade-slide-in .4s ease both;
}
/* Borde dinámico en hover con el color de la card */
.ux-stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 4px;
background: var(--stat-color, var(--ux-primary));
opacity: 0;
transition: opacity .22s ease;
}
.ux-stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px var(--ux-shadow);
border-color: var(--stat-color, var(--ux-primary));
color: var(--ux-text) !important;
}
.ux-stat-card:hover::before { opacity: 1; }
.ux-stat-card:nth-child(1) { animation-delay: .05s; }
.ux-stat-card:nth-child(2) { animation-delay: .1s; }
.ux-stat-card:nth-child(3) { animation-delay: .15s; }
.ux-stat-card:nth-child(4) { animation-delay: .2s; }
.ux-stat-card:nth-child(5) { animation-delay: .25s; }
.ux-stat-card:nth-child(6) { animation-delay: .3s; }
/* Ícono circular con el color de la card */
.ux-stat-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--stat-color, var(--ux-primary)) 14%, transparent);
color: var(--stat-color, var(--ux-primary));
font-size: 22px;
transition: transform .3s cubic-bezier(.4,0,.2,1), background .22s;
}
.ux-stat-card:hover .ux-stat-icon {
transform: scale(1.08) rotate(-5deg);
background: color-mix(in srgb, var(--stat-color, var(--ux-primary)) 22%, transparent);
}
/* Meta: label arriba chico, título abajo más grande */
.ux-stat-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.ux-stat-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--stat-color, var(--ux-primary));
margin-bottom: 3px;
}
.ux-stat-title {
font-size: 15px;
font-weight: 600;
color: var(--ux-text);
line-height: 1.3;
}
/* Flecha que aparece al hover */
.ux-stat-arrow {
color: var(--ux-text-subtle);
font-size: 14px;
opacity: 0;
transform: translateX(-6px);
transition: opacity .22s ease, transform .22s ease, color .22s;
}
.ux-stat-card:hover .ux-stat-arrow {
opacity: 1;
transform: translateX(0);
color: var(--stat-color, var(--ux-primary));
}
/* Fallback si color-mix no está soportado (Safari viejo, etc.) */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
.ux-stat-icon {
background: var(--ux-primary-soft);
}
}
/* Quick actions: fila de botones secundarios */
.ux-quick-actions {
margin-top: 2rem;
}
.ux-section-title {
color: var(--ux-text-muted);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 12px;
}
.ux-section-title i {
color: var(--ux-accent);
margin-right: 6px;
}
.ux-quick-actions-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ux-quick-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--ux-surface);
border: 1px solid var(--ux-border);
border-radius: 10px;
color: var(--ux-text);
font-size: 13px;
font-weight: 500;
text-decoration: none !important;
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .1s;
}
.ux-quick-btn i { color: var(--ux-text-muted); transition: color .18s; font-size: 13px; }
.ux-quick-btn:hover {
background: var(--ux-primary-soft);
border-color: var(--ux-primary);
color: var(--ux-primary);
transform: translateY(-1px);
}
.ux-quick-btn:hover i { color: var(--ux-primary); }
.ux-quick-btn.ux-quick-btn-muted:hover {
background: var(--ux-accent-soft);
border-color: var(--ux-accent);
color: var(--ux-soft-text);
}
.ux-quick-btn.ux-quick-btn-muted:hover i { color: var(--ux-accent); }
/* ============================================================== */
/* Fixes puntuales de componentes Bootstrap que seguían claros */
/* ============================================================== */
/* Breadcrumb: aplica desde el primer paint (sin depender de ux-enabled) */
html[data-theme] .breadcrumb,
body.ux-enabled .breadcrumb {
background-color: var(--ux-surface-alt);
border: 1px solid var(--ux-border);
border-radius: 10px;
color: var(--ux-text-muted);
}
html[data-theme] .breadcrumb a,
body.ux-enabled .breadcrumb a {
color: var(--ux-primary);
text-decoration: none;
font-weight: 500;
}
html[data-theme] .breadcrumb a:hover,
body.ux-enabled .breadcrumb a:hover {
color: var(--ux-primary-dark);
text-decoration: underline;
}
html[data-theme] .breadcrumb-item.active,
html[data-theme] .breadcrumb-item + .breadcrumb-item::before,
body.ux-enabled .breadcrumb-item.active,
body.ux-enabled .breadcrumb-item + .breadcrumb-item::before {
color: var(--ux-text-subtle);
}
/* Alerts de todos los tipos */
body.ux-enabled .alert-info {
background-color: var(--ux-primary-soft);
border-color: var(--ux-primary);
color: var(--ux-primary);
}
[data-theme="dark"] body.ux-enabled .alert-info {
color: #9ecbe8;
}
body.ux-enabled .alert-warning {
background-color: var(--ux-accent-soft);
border-color: var(--ux-accent);
color: var(--ux-soft-text);
}
body.ux-enabled .alert-light,
body.ux-enabled .alert-secondary {
background-color: var(--ux-surface-alt);
border-color: var(--ux-border);
color: var(--ux-text);
}
/* Utilidades de background Bootstrap */
body.ux-enabled .bg-light,
body.ux-enabled .form-control.bg-light {
background-color: var(--ux-surface-alt) !important;
color: var(--ux-text) !important;
}
body.ux-enabled .bg-secondary {
background-color: var(--ux-surface-alt) !important;
color: var(--ux-text) !important;
}
/* text-muted de Bootstrap */
body.ux-enabled .text-muted {
color: var(--ux-text-muted) !important;
}
body.ux-enabled .text-info {
color: var(--ux-primary) !important;
}
/* Títulos h2/h4/h5 sin regla específica — que usen el text */
body.ux-enabled h2:not([class*="v2-"]):not(.ux-jumbotron-title),
body.ux-enabled h4:not([class*="v2-"]),
body.ux-enabled h5:not([class*="v2-"]):not(.ux-section-title) {
color: var(--ux-text);
}
/* Bordes tipo .border-light, .border-primary (de Bootstrap) */
body.ux-enabled .border,
body.ux-enabled .border-light {
border-color: var(--ux-border) !important;
}
body.ux-enabled .border-primary {
border-color: var(--ux-primary) !important;
}
/* Custom del proyecto: .bg-soft-orange (accent soft) */
body.ux-enabled .bg-soft-orange {
background-color: var(--ux-accent-soft) !important;
}
/* ============================================================== */
/* Overlay neutro durante cambio de tema — evita flash blanco */
/* ============================================================== */
/* El theme.js ya agrega `ux-theming` durante 300ms al hacer toggle.
Aprovechamos esa ventana para mostrar un overlay neutro que
amortigua el flash. */
html.ux-theming::after {
content: '';
position: fixed;
inset: 0;
background: #8494A8; /* gris azulado neutro, a medio camino */
z-index: 99998;
pointer-events: none;
animation: ux-theme-cloak .28s ease;
mix-blend-mode: normal;
opacity: 0;
}
@keyframes ux-theme-cloak {
0% { opacity: 0; }
40% { opacity: 0.45; }
60% { opacity: 0.45; }
100% { opacity: 0; }
}
/* Reducir intensidad para usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
html.ux-theming::after {
animation-duration: .15s;
}
html.ux-theming * {
transition-duration: .05s !important;
}
}
/* ============================================================== */
/* Pre-paint: aplica un color de fondo dinámico al html/body antes */
/* de que cargue el CSS, evitando el flash blanco inicial. */
/* (complementa el script pre-paint que ya corre en los layouts) */
/* ============================================================== */
html { background-color: var(--ux-bg); }
[data-theme="dark"] { background-color: #0f1b2a; }
/* ============================================================== */
/* FASE 4 — Inputs especializados: date, file, tablas de datos */
/* ============================================================== */
/* ---------- Inputs de fecha / hora / datetime / month / week ---------- */
body.ux-enabled input[type="date"],
body.ux-enabled input[type="time"],
body.ux-enabled input[type="datetime-local"],
body.ux-enabled input[type="month"],
body.ux-enabled input[type="week"] {
background-color: var(--ux-surface);
border: 1px solid var(--ux-border);
color: var(--ux-text);
border-radius: 8px;
padding: 8px 12px;
font-family: inherit;
font-size: 13px;
transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
color-scheme: light; /* ayuda a los pickers nativos en claro */
}
[data-theme="dark"] body.ux-enabled input[type="date"],
[data-theme="dark"] body.ux-enabled input[type="time"],
[data-theme="dark"] body.ux-enabled input[type="datetime-local"],
[data-theme="dark"] body.ux-enabled input[type="month"],
[data-theme="dark"] body.ux-enabled input[type="week"] {
color-scheme: dark; /* hace que el popup del calendario también sea dark */
}
body.ux-enabled input[type="date"]:hover,
body.ux-enabled input[type="time"]:hover,
body.ux-enabled input[type="datetime-local"]:hover,
body.ux-enabled input[type="month"]:hover,
body.ux-enabled input[type="week"]:hover {
border-color: var(--ux-border-strong);
}
body.ux-enabled input[type="date"]:focus,
body.ux-enabled input[type="time"]:focus,
body.ux-enabled input[type="datetime-local"]:focus,
body.ux-enabled input[type="month"]:focus,
body.ux-enabled input[type="week"]:focus {
border-color: var(--ux-primary);
box-shadow: 0 0 0 3px var(--ux-primary-ring);
outline: none;
}
/* Icono del calendar picker nativo: invertir en dark para que se vea */
body.ux-enabled input[type="date"]::-webkit-calendar-picker-indicator,
body.ux-enabled input[type="time"]::-webkit-calendar-picker-indicator,
body.ux-enabled input[type="datetime-local"]::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.7;
filter: none;
transition: opacity .15s, transform .15s;
}
body.ux-enabled input[type="date"]::-webkit-calendar-picker-indicator:hover,
body.ux-enabled input[type="time"]::-webkit-calendar-picker-indicator:hover,
body.ux-enabled input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
transform: scale(1.1);
}
[data-theme="dark"] body.ux-enabled input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] body.ux-enabled input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] body.ux-enabled input[type="datetime-local"]::-webkit-calendar-picker-indicator {
filter: invert(1) hue-rotate(180deg) brightness(1.2);
}
/* ---------- Inputs de archivo: botón personalizado ---------- */
body.ux-enabled input[type="file"] {
background: var(--ux-surface);
border: 1px dashed var(--ux-border);
border-radius: 10px;
padding: 6px 10px;
color: var(--ux-text);
font-family: inherit;
font-size: 12.5px;
width: 100%;
max-width: 100%;
cursor: pointer;
transition: border-color .2s ease, background-color .2s ease;
/* El nombre del archivo seleccionado (o "Ningún archivo seleccionado")
se trunca con ellipsis en vez de cortarse a mitad de palabra. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-flex;
align-items: center;
min-height: 38px;
box-sizing: border-box;
}
body.ux-enabled input[type="file"]:hover {
border-color: var(--ux-primary);
background: var(--ux-primary-soft);
}
body.ux-enabled input[type="file"]:focus {
outline: none;
border-color: var(--ux-primary);
border-style: solid;
box-shadow: 0 0 0 3px var(--ux-primary-ring);
}
/* Botón del picker (el "Browse..." nativo) — compacto para que quepa bien */
body.ux-enabled input[type="file"]::-webkit-file-upload-button,
body.ux-enabled input[type="file"]::file-selector-button {
background: var(--ux-primary);
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 12px;
margin-right: 10px;
font-family: inherit;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: background-color .18s ease, transform .1s ease;
flex-shrink: 0; /* el botón no se achica si el nombre de archivo es largo */
}
body.ux-enabled input[type="file"]::-webkit-file-upload-button:hover,
body.ux-enabled input[type="file"]::file-selector-button:hover {
background: var(--ux-primary-dark);
transform: translateY(-1px);
}
body.ux-enabled input[type="file"]::-webkit-file-upload-button:active,
body.ux-enabled input[type="file"]::file-selector-button:active {
transform: translateY(0);
}
/* En contenedores muy estrechos (ej. col-md-8 en tablet), permite wrap interno */
@media (max-width: 768px) {
body.ux-enabled input[type="file"] {
font-size: 11.5px;
}
body.ux-enabled input[type="file"]::-webkit-file-upload-button,
body.ux-enabled input[type="file"]::file-selector-button {
padding: 5px 10px;
font-size: 11px;
margin-right: 8px;
}
}
/* ---------- Data tables mejoradas ---------- */
body.ux-enabled .table {
color: var(--ux-text);
background-color: transparent;
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 4px var(--ux-shadow);
}
body.ux-enabled .table thead {
background: var(--ux-surface-alt);
}
body.ux-enabled .table thead th {
background-color: var(--ux-surface-alt);
color: var(--ux-text);
border: none;
border-bottom: 2px solid var(--ux-border-strong);
padding: 12px 14px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
body.ux-enabled .table tbody td,
body.ux-enabled .table tbody th {
padding: 11px 14px;
vertical-align: middle;
border-top: 1px solid var(--ux-border);
background-color: var(--ux-surface);
}
body.ux-enabled .table tbody tr:first-child td,
body.ux-enabled .table tbody tr:first-child th {
border-top: none;
}
/* Striped */
body.ux-enabled .table-striped tbody tr:nth-of-type(odd) td {
background-color: var(--ux-bg);
}
body.ux-enabled .table-striped tbody tr:nth-of-type(even) td {
background-color: var(--ux-surface);
}
/* Hover */
body.ux-enabled .table-hover tbody tr {
transition: background-color .15s ease;
}
body.ux-enabled .table-hover tbody tr:hover td,
body.ux-enabled .table-hover tbody tr:hover th {
background-color: var(--ux-primary-soft) !important;
color: var(--ux-text);
}
/* Bordered: bordes sutiles en vez del color negro default */
body.ux-enabled .table-bordered,
body.ux-enabled .table-bordered th,
body.ux-enabled .table-bordered td {
border-color: var(--ux-border);
}
/* Wrapper: agrega scroll horizontal en móvil */
body.ux-enabled .table-responsive {
border-radius: 10px;
-webkit-overflow-scrolling: touch;
}
/* Paginación de Laravel / Bootstrap */
body.ux-enabled .pagination {
gap: 4px;
}
body.ux-enabled .pagination .page-item .page-link,
body.ux-enabled .pagination li a,
body.ux-enabled .pagination li span {
background-color: var(--ux-surface);
border: 1px solid var(--ux-border);
color: var(--ux-primary);
border-radius: 6px !important;
margin: 0 2px;
padding: 6px 12px;
min-width: 34px;
text-align: center;
transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s;
font-size: 13px;
font-weight: 500;
}
body.ux-enabled .pagination .page-item .page-link:hover,
body.ux-enabled .pagination li a:hover {
background-color: var(--ux-primary-soft);
border-color: var(--ux-primary);
color: var(--ux-primary);
transform: translateY(-1px);
}
body.ux-enabled .pagination .page-item.active .page-link,
body.ux-enabled .pagination li.active span,
body.ux-enabled .pagination li.active a {
background-color: var(--ux-primary);
border-color: var(--ux-primary);
color: #fff !important;
font-weight: 700;
}
body.ux-enabled .pagination .page-item.disabled .page-link,
body.ux-enabled .pagination li.disabled span,
body.ux-enabled .pagination li.disabled a {
background-color: var(--ux-surface-alt);
color: var(--ux-text-subtle);
border-color: var(--ux-border);
cursor: not-allowed;
}
/* Filas destacadas dentro de tablas (.bg-soft-orange en ticket.leer, etc.) */
body.ux-enabled .table .bg-soft-orange td,
body.ux-enabled .table tr.bg-soft-orange td {
background-color: var(--ux-accent-soft) !important;
border-top-color: var(--ux-accent);
}
[data-theme="dark"] body.ux-enabled .table .bg-soft-orange td,
[data-theme="dark"] body.ux-enabled .table tr.bg-soft-orange td {
background-color: rgba(235, 128, 14, 0.14) !important;
color: var(--ux-soft-text);
}
/* Iconos dentro de tablas (acciones de edit/delete) */
body.ux-enabled .table tbody a.btn,
body.ux-enabled .table tbody button.btn {
padding: 4px 10px;
font-size: 12px;
}
body.ux-enabled .table tbody a:not(.btn),
body.ux-enabled .table tbody button:not(.btn) {
color: var(--ux-primary);
transition: color .15s ease;
}
body.ux-enabled .table tbody a:not(.btn):hover {
color: var(--ux-accent);
}
/* Forms en general con un respiro consistente */
body.ux-enabled label {
color: var(--ux-text);
font-weight: 500;
font-size: 13px;
margin-bottom: 6px;
}
body.ux-enabled .form-group {
margin-bottom: 16px;
}
body.ux-enabled .form-control::placeholder {
color: var(--ux-text-subtle);
opacity: 0.8;
}
/* ============================================================== */
/* Form Card profesional (.ux-form-card) — usado en /planes/create */
/* ============================================================== */
.ux-form-wrapper {
max-width: 780px;
margin: 0 auto;
padding: 1rem 1.25rem 3rem;
}
.ux-form-card {
background: var(--ux-surface);
border: 1px solid var(--ux-border);
border-radius: 16px;
box-shadow: 0 4px 24px var(--ux-shadow);
overflow: hidden;
animation: ux-fade-slide-in .4s ease both;
}
/* Header con icono grande, eyebrow, título y subtítulo */
.ux-form-header {
display: flex;
align-items: center;
gap: 20px;
padding: 26px 28px;
background: linear-gradient(135deg, var(--ux-primary-soft) 0%, var(--ux-surface-alt) 100%);
border-bottom: 1px solid var(--ux-border);
}
.ux-form-header-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 16px;
background: var(--ux-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
box-shadow: 0 4px 12px rgba(16,107,160,0.3);
}
.ux-form-eyebrow {
color: var(--ux-accent);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.ux-form-title {
color: var(--ux-primary);
font-size: 22px;
font-weight: 700;
margin: 0 0 4px;
}
.ux-form-subtitle {
color: var(--ux-text-muted);
font-size: 13px;
margin: 0;
line-height: 1.5;
}
/* Body del form */
.ux-form {
padding: 26px 28px 28px;
display: flex;
flex-direction: column;
gap: 20px;
}
.ux-form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.ux-form-field > label {
color: var(--ux-text);
font-weight: 600;
font-size: 13px;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
}
.ux-form-help {
color: var(--ux-text-subtle);
font-weight: 400;
font-size: 11px;
}
.ux-form-help-block {
/* display: block para que el texto fluya inline naturalmente.
Antes era flex y cortaba y palabras en columnas. */
display: block;
color: var(--ux-text-subtle);
font-size: 11.5px;
margin-top: 2px;
line-height: 1.6;
}
.ux-form-help-block > i:first-child {
color: var(--ux-accent);
font-size: 11px;
margin-right: 5px;
vertical-align: baseline;
}
/* Fila de campos (neto / iva / total) */
.ux-form-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 640px) {
.ux-form-row {
grid-template-columns: 1fr;
}
}
/* Inputs dentro del form card */
.ux-form-card .form-control {
background-color: var(--ux-bg);
border: 1px solid var(--ux-border);
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
color: var(--ux-text);
transition: border-color .15s ease, box-shadow .15s ease, background .15s;
}
.ux-form-card .form-control:hover {
border-color: var(--ux-border-strong);
}
.ux-form-card .form-control:focus {
border-color: var(--ux-primary);
box-shadow: 0 0 0 3px var(--ux-primary-ring);
outline: none;
}
.ux-form-card textarea.form-control {
resize: vertical;
min-height: 80px;
font-family: inherit;
}
/* Input con prefijo (ej. signo $) */
.ux-input-prefix {
position: relative;
display: flex;
align-items: stretch;
}
.ux-input-prefix-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--ux-text-subtle);
font-weight: 600;
font-size: 14px;
pointer-events: none;
z-index: 1;
}
.ux-input-prefix .form-control {
padding-left: 28px;
width: 100%;
}
/* Variante "total" en naranja para destacar el resultado */
.ux-input-prefix-total .ux-input-prefix-icon {
color: var(--ux-accent);
}
.ux-input-total {
background: var(--ux-accent-soft) !important;
border-color: var(--ux-accent) !important;
color: var(--ux-soft-text) !important;
font-weight: 700 !important;
font-size: 15px !important;
}
[data-theme="dark"] .ux-input-total {
color: var(--ux-accent) !important;
}
.ux-input-readonly {
background-color: var(--ux-surface-alt) !important;
color: var(--ux-text-muted) !important;
cursor: default;
}
/* ============================================================== */
/* Select destacado en naranja (.ux-select-accent) */
/* ============================================================== */
.ux-select-accent {
position: relative;
display: flex;
align-items: stretch;
}
.ux-select-accent-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--ux-accent);
font-size: 14px;
pointer-events: none;
z-index: 1;
transition: transform .25s ease;
line-height: 1;
}
.ux-select-accent:hover .ux-select-accent-icon {
transform: translateY(-50%) rotate(180deg);
}
.ux-select-accent-chev {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--ux-accent);
font-size: 11px;
pointer-events: none;
transition: transform .2s ease;
line-height: 1;
}
.ux-select-accent select,
.ux-select-accent > select.form-control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: var(--ux-accent-soft) !important;
border: 1.5px solid var(--ux-accent) !important;
border-radius: 8px !important;
color: var(--ux-soft-text) !important;
font-weight: 600 !important;
font-size: 14px !important;
line-height: 1.4 !important;
padding: 12px 42px 12px 44px !important;
width: 100% !important;
height: auto !important;
min-height: 46px;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
transition: border-color .15s, background-color .15s, box-shadow .15s;
}
[data-theme="dark"] .ux-select-accent select,
[data-theme="dark"] .ux-select-accent > select.form-control {
color: var(--ux-soft-text) !important;
background-color: rgba(235, 128, 14, 0.15) !important;
}
.ux-select-accent select:hover {
background-color: var(--ux-accent-soft) !important;
border-color: var(--ux-accent-dark) !important;
}
.ux-select-accent select:focus {
outline: none;
border-color: var(--ux-accent-dark) !important;
box-shadow: 0 0 0 3px rgba(235,128,14,0.25) !important;
}
.ux-select-accent select option {
background: var(--ux-bg);
color: var(--ux-text);
font-weight: 500;
}
.ux-select-accent select option:disabled {
color: var(--ux-text-subtle);
font-style: italic;
}
/* ============================================================== */
/* Acciones del formulario (Cancelar / Grabar) */
/* ============================================================== */
.ux-form-actions {
display: flex;
gap: 12px;
align-items: center;
justify-content: flex-end;
padding-top: 8px;
border-top: 1px solid var(--ux-border);
margin-top: 4px;
padding-top: 18px;
}
.ux-btn-ghost {
background: transparent;
border: 1px solid var(--ux-border);
color: var(--ux-text-muted);
padding: 9px 18px;
border-radius: 8px;
font-weight: 500;
transition: background .15s, color .15s, border-color .15s;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 7px;
}
.ux-btn-ghost:hover {
background: var(--ux-surface-alt);
color: var(--ux-text);
border-color: var(--ux-border-strong);
}
.ux-btn-ghost i { font-size: 11px; }
.ux-btn-primary {
background: var(--ux-primary) !important;
border: 1px solid var(--ux-primary) !important;
color: #fff !important;
padding: 9px 22px !important;
border-radius: 8px !important;
font-weight: 600;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 6px rgba(16,107,160,0.25);
transition: background .15s, box-shadow .2s, transform .1s !important;
}
.ux-btn-primary:hover {
background: var(--ux-primary-dark) !important;
box-shadow: 0 4px 14px rgba(16,107,160,0.4);
}
.ux-btn-primary i { font-size: 12px; }
/* Responsive: acciones en columna en mobile */
@media (max-width: 480px) {
.ux-form-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.ux-btn-ghost, .ux-btn-primary {
justify-content: center;
}
}
/* ============================================================== */
/* RESTAURADAS — Botones, headers, readonly, empty, info-tip */
/* ============================================================== */
.ux-btn-secondary {
background: var(--ux-primary-soft) !important;
border: 1px solid color-mix(in srgb, var(--ux-primary) 40%, transparent) !important;
color: var(--ux-primary) !important;
padding: 9px 18px !important;
border-radius: 8px !important;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none !important;
transition: background .15s, border-color .15s, transform .1s, box-shadow .2s;
}
.ux-btn-secondary:hover {
background: color-mix(in srgb, var(--ux-primary) 18%, transparent) !important;
border-color: var(--ux-primary) !important;
color: var(--ux-primary) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--ux-primary-ring);
}
.ux-btn-secondary i { font-size: 12px; }
.ux-btn-danger-soft {
color: #b63434 !important;
border: 1px solid color-mix(in srgb, #b63434 30%, transparent);
background: color-mix(in srgb, #b63434 6%, transparent);
padding: 8px 16px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 600;
text-decoration: none !important;
transition: background .15s, border-color .15s, color .15s;
}
.ux-btn-danger-soft:hover {
background: color-mix(in srgb, #b63434 14%, transparent) !important;
border-color: #b63434 !important;
color: #b63434 !important;
}
[data-theme="dark"] .ux-btn-danger-soft {
color: #f5a5a5 !important;
border-color: color-mix(in srgb, #f5a5a5 30%, transparent);
background: color-mix(in srgb, #b63434 14%, transparent);
}
[data-theme="dark"] .ux-btn-danger-soft:hover { color: #f5a5a5 !important; }
.ux-form-header-payments {
background: linear-gradient(135deg, color-mix(in srgb, #28b464 14%, var(--ux-surface)) 0%, var(--ux-surface-alt) 100%) !important;
}
.ux-form-header-payments .ux-form-header-icon { background: #28b464 !important; box-shadow: 0 4px 12px rgba(40,180,100,0.35) !important; }
.ux-form-header-support {
background: linear-gradient(135deg, color-mix(in srgb, var(--ux-accent) 14%, var(--ux-surface)) 0%, var(--ux-surface-alt) 100%) !important;
}
.ux-form-header-support .ux-form-header-icon { background: var(--ux-accent) !important; box-shadow: 0 4px 12px rgba(235,128,14,0.35) !important; }
.ux-form-header-users .ux-form-header-icon, .ux-form-header-admin .ux-form-header-icon { background: var(--ux-primary) !important; }
.ux-form-wrapper-wide { max-width: 960px; }
.ux-readonly-box {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--ux-surface-alt);
border: 1px solid var(--ux-border);
border-left: 3px solid var(--ux-primary);
border-radius: 8px;
color: var(--ux-text);
font-size: 14px;
}
.ux-readonly-box i { color: var(--ux-primary); font-size: 14px; }
.ux-readonly-box strong { color: var(--ux-text); font-weight: 600; }
.ux-empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 48px 24px;
background: var(--ux-surface);
border: 1px dashed var(--ux-border);
border-radius: 14px;
gap: 6px;
margin-top: 16px;
}
.ux-empty-icon { font-size: 56px; color: var(--ux-text-subtle); margin-bottom: 8px; opacity: 0.5; }
.ux-empty-state h3 { color: var(--ux-text); font-size: 18px; font-weight: 700; margin: 0; }
.ux-empty-state p { color: var(--ux-text-muted); font-size: 13.5px; max-width: 480px; margin: 4px 0 16px; }
body.ux-enabled .table thead th i { color: var(--ux-accent); margin-right: 6px; font-size: 11px; opacity: 0.7; }
.ux-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--ux-surface-alt);
color: var(--ux-primary);
text-decoration: none !important;
transition: background .15s, color .15s, transform .1s;
}
.ux-icon-btn:hover { background: var(--ux-primary-soft); color: var(--ux-primary); transform: translateY(-1px); }
.ux-pagination-wrapper { display: flex; justify-content: center; margin-top: 16px; }
.ux-info-tip {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: var(--ux-primary-soft);
border: 1px solid var(--ux-primary);
border-left-width: 4px;
border-radius: 10px;
color: var(--ux-text);
margin-top: 16px;
}
.ux-info-tip-icon {
flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
background: var(--ux-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
}
.ux-info-tip-content { font-size: 13px; line-height: 1.55; color: var(--ux-text-muted); }
.ux-info-tip-content strong { color: var(--ux-primary); font-weight: 700; margin-right: 4px; }
.ux-info-tip-warning { background: color-mix(in srgb, var(--ux-accent) 12%, var(--ux-surface)); border-color: var(--ux-accent); }
.ux-info-tip-warning .ux-info-tip-icon { background: var(--ux-accent); }
.ux-info-tip-warning .ux-info-tip-content strong { color: var(--ux-accent); }
.ux-info-tip-link {
display: inline-flex; align-items: center; gap: 6px;
margin-left: 8px; color: var(--ux-primary);
font-weight: 600; text-decoration: none;
}
.ux-info-tip-link:hover { color: var(--ux-primary-dark); text-decoration: underline; }
.ux-info-tip-warning .ux-info-tip-link { color: var(--ux-accent); }
.ux-info-tip-warning .ux-info-tip-link:hover { color: var(--ux-accent-dark); }
/* ============================================================== */
/* /miplan — celdas y total */
/* ============================================================== */
.ux-plan-link {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: var(--ux-primary-soft);
border: 1px solid var(--ux-primary);
color: var(--ux-primary);
border-radius: 8px;
font-weight: 600; font-size: 13px;
cursor: pointer;
transition: background .15s, color .15s, transform .1s, box-shadow .2s;
}
.ux-plan-link:hover {
background: var(--ux-primary);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--ux-primary-ring);
}
.ux-plan-link i { font-size: 11px; }
.ux-plan-link-eye {
margin-left: 4px;
opacity: 0.55;
color: var(--ux-accent);
transition: opacity .15s, color .15s, transform .15s;
}
.ux-plan-link:hover .ux-plan-link-eye { opacity: 1; color: #fff; transform: scale(1.15); }
.ux-cell-num { font-weight: 700; font-size: 14px; color: var(--ux-text); font-variant-numeric: tabular-nums; }
.ux-cell-money { font-weight: 600; font-size: 13.5px; color: var(--ux-text); font-variant-numeric: tabular-nums; }
.ux-cell-money-strong { font-weight: 700; color: var(--ux-primary); font-size: 14.5px; }
.ux-cell-discount {
display: inline-block; padding: 3px 10px;
background: color-mix(in srgb, var(--ux-accent) 15%, transparent);
color: var(--ux-accent);
border-radius: 999px;
font-size: 12px; font-weight: 700;
}
.ux-cell-zero { color: var(--ux-text-subtle); font-style: italic; }
.ux-plan-foot {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 14px;
padding: 18px 24px 22px;
border-top: 1px solid var(--ux-border);
background: linear-gradient(180deg, var(--ux-surface) 0%, var(--ux-surface-alt) 100%);
}
.ux-plan-pay { display: inline-flex; align-items: center; gap: 14px; margin: 0; }
.ux-plan-total-box {
display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
padding: 8px 16px;
background: var(--ux-surface);
border: 1px solid var(--ux-border);
border-radius: 10px;
}
.ux-plan-total-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ux-text-muted); font-weight: 600; }
.ux-plan-total-value { font-size: 20px; font-weight: 700; color: var(--ux-accent); font-variant-numeric: tabular-nums; }
.ux-plan-modal .modal-content { background: var(--ux-surface); border: 1px solid var(--ux-border); border-radius: 14px; color: var(--ux-text); }
.ux-plan-modal .modal-header, .ux-plan-modal .modal-footer { border-color: var(--ux-border); background: var(--ux-surface-alt); }
.ux-plan-modal .modal-title { color: var(--ux-primary); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.ux-plan-modal .modal-title i { color: var(--ux-accent); }
.ux-plan-modal-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--ux-border); gap: 12px; }
.ux-plan-modal-row:last-of-type { border-bottom: none; }
.ux-plan-modal-label { color: var(--ux-text-muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.ux-plan-modal-label i { color: var(--ux-accent); font-size: 11px; }
.ux-plan-modal-value { color: var(--ux-text); font-weight: 600; font-size: 13.5px; }
.ux-plan-modal-price { color: var(--ux-primary); font-weight: 700; font-size: 16px; }
.ux-plan-modal-detail { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ux-border); }
.ux-plan-modal-detail p { margin-top: 6px; color: var(--ux-text-muted); font-size: 13px; line-height: 1.55; }
/* ============================================================== */
/* Tickets — datatable + conversación */
/* ============================================================== */
body.ux-enabled .ux-ticket-row { transition: background-color .15s; }
body.ux-enabled .ux-ticket-row-pending td,
body.ux-enabled .ux-ticket-row-pending th { background-color: rgba(235,128,14,0.04) !important; }
[data-theme="dark"] body.ux-enabled .ux-ticket-row-pending td,
[data-theme="dark"] body.ux-enabled .ux-ticket-row-pending th { background-color: rgba(235,128,14,0.06) !important; }
body.ux-enabled .table-hover tbody tr.ux-ticket-row-pending:hover td,
body.ux-enabled .table-hover tbody tr.ux-ticket-row-pending:hover th { background-color: rgba(235,128,14,0.1) !important; }
.ux-ticket-row-num { color: var(--ux-text-subtle); font-weight: 600; font-size: 13px; }
.ux-ticket-slug {
background: var(--ux-surface-alt); border: 1px solid var(--ux-border);
color: var(--ux-text-muted); font-size: 11px; padding: 2px 8px; border-radius: 4px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ux-ticket-title-link {
display: inline-flex; align-items: center; gap: 8px;
color: var(--ux-primary); font-weight: 600;
text-decoration: none !important;
transition: color .15s, transform .1s;
}
.ux-ticket-title-link i { color: var(--ux-accent); font-size: 12px; }
.ux-ticket-title-link:hover { color: var(--ux-accent); transform: translateX(2px); }
.ux-ticket-row-user { display: flex; flex-direction: column; line-height: 1.3; }
.ux-ticket-row-user-name { color: var(--ux-text); font-weight: 600; font-size: 13px; }
.ux-ticket-row-user-email { color: var(--ux-text-subtle); font-size: 11px; }
.ux-ticket-row-subject { display: inline-flex; flex-direction: column; line-height: 1.35; }
.ux-ticket-row-preview { color: var(--ux-text-subtle); font-size: 11.5px; font-weight: 400; }
.ux-ticket-row-date {
display: inline-flex; align-items: center; gap: 6px;
color: var(--ux-text-muted); font-size: 12px;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ux-ticket-row-date i { color: var(--ux-text-subtle); font-size: 11px; }
.ux-ticket-status {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.4px;
}
.ux-ticket-status i { font-size: 8px; }
.ux-ticket-status-open {
background: color-mix(in srgb, var(--ux-accent) 14%, transparent);
color: var(--ux-accent);
border: 1px solid color-mix(in srgb, var(--ux-accent) 35%, transparent);
}
.ux-ticket-status-closed {
background: color-mix(in srgb, #28b464 14%, transparent);
color: #1a7f4a;
border: 1px solid color-mix(in srgb, #28b464 35%, transparent);
}
[data-theme="dark"] .ux-ticket-status-closed { color: #7ee0a5; }
.ux-ticket-page { max-width: 880px; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
.ux-ticket-header {
display: flex; justify-content: space-between; align-items: center;
gap: 16px; flex-wrap: wrap;
background: var(--ux-surface); border: 1px solid var(--ux-border);
border-radius: 14px; padding: 18px 22px; margin-bottom: 18px;
}
.ux-ticket-header-left { display: flex; align-items: center; gap: 16px; }
.ux-ticket-header-icon {
width: 50px; height: 50px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 20px; flex-shrink: 0;
}
.ux-ticket-icon-open { background: var(--ux-accent); }
.ux-ticket-icon-closed { background: var(--ux-text-subtle); }
.ux-ticket-title { color: var(--ux-primary); font-size: 18px; font-weight: 700; margin: 4px 0 6px; }
.ux-ticket-meta { color: var(--ux-text-muted); font-size: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ux-ticket-sep { color: var(--ux-text-subtle); }
.ux-ticket-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.ux-ticket-msg { display: flex; gap: 12px; }
.ux-ticket-msg-admin { flex-direction: row-reverse; }
.ux-ticket-avatar {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
background: var(--ux-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700;
}
.ux-ticket-msg-admin .ux-ticket-avatar { background: var(--ux-accent); }
.ux-ticket-bubble {
flex: 1; background: var(--ux-surface); border: 1px solid var(--ux-border);
border-radius: 12px; padding: 12px 16px; min-width: 0;
}
.ux-ticket-msg-admin .ux-ticket-bubble {
background: color-mix(in srgb, var(--ux-accent) 6%, var(--ux-surface));
border-color: color-mix(in srgb, var(--ux-accent) 25%, transparent);
}
.ux-ticket-bubble-head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 10px; flex-wrap: wrap; margin-bottom: 6px; padding-bottom: 6px;
border-bottom: 1px dashed var(--ux-border);
}
.ux-ticket-bubble-author { display: inline-flex; align-items: center; gap: 8px; color: var(--ux-text); font-size: 13px; }
.ux-ticket-author-email { color: var(--ux-text-subtle); font-size: 11px; }
.ux-ticket-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px; border-radius: 999px;
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.4px;
}
.ux-ticket-badge-admin {
background: color-mix(in srgb, var(--ux-accent) 18%, transparent);
color: var(--ux-accent);
border: 1px solid color-mix(in srgb, var(--ux-accent) 40%, transparent);
}
.ux-ticket-time { color: var(--ux-text-subtle); font-size: 11px; display: inline-flex; gap: 5px; }
.ux-ticket-content { color: var(--ux-text); font-size: 13.5px; line-height: 1.55; word-break: break-word; }
.ux-ticket-reply {
background: var(--ux-surface); border: 1px solid var(--ux-border);
border-radius: 14px; padding: 16px 18px;
}
.ux-ticket-reply-header { display: flex; align-items: center; gap: 8px; color: var(--ux-primary); font-weight: 700; margin-bottom: 10px; }
.ux-ticket-reply-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.ux-ticket-reply-hint { color: var(--ux-text-muted); font-size: 12px; }
.ux-ticket-closed-banner {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; background: var(--ux-surface-alt);
border: 1px solid var(--ux-border); border-radius: 12px;
color: var(--ux-text-muted); font-size: 13px;
}
.ux-ticket-closed-banner i { color: #28b464; font-size: 18px; }
.ux-ticket-reopen { color: var(--ux-primary); font-weight: 600; }
.ux-ticket-back { display: flex; justify-content: space-between; margin-top: 18px; gap: 10px; flex-wrap: wrap; }
/* ============================================================== */
/* /alert — Centro de alertas */
/* ============================================================== */
body.ux-enabled .ux-alert-row { transition: background-color .15s; }
body.ux-enabled .ux-alert-row-unread td,
body.ux-enabled .ux-alert-row-unread th { background-color: color-mix(in srgb, var(--ux-primary) 5%, transparent) !important; }
[data-theme="dark"] body.ux-enabled .ux-alert-row-unread td,
[data-theme="dark"] body.ux-enabled .ux-alert-row-unread th { background-color: color-mix(in srgb, var(--ux-primary) 10%, transparent) !important; }
body.ux-enabled .table-hover tbody tr.ux-alert-row-unread:hover td,
body.ux-enabled .table-hover tbody tr.ux-alert-row-unread:hover th { background-color: color-mix(in srgb, var(--ux-primary) 12%, transparent) !important; }
.ux-alert-dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 10px; }
.ux-alert-dot-unread {
background: color-mix(in srgb, var(--ux-primary) 15%, transparent);
color: var(--ux-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ux-primary) 10%, transparent);
animation: ux-alert-pulse 2.4s ease-in-out infinite;
}
.ux-alert-dot-read { background: color-mix(in srgb, #28b464 14%, transparent); color: #28b464; }
[data-theme="dark"] .ux-alert-dot-read { background: color-mix(in srgb, #38d47b 18%, transparent); color: #38d47b; }
@keyframes ux-alert-pulse {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ux-primary) 10%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ux-primary) 18%, transparent); }
}
.ux-alert-link {
display: inline-flex; align-items: center; gap: 10px;
color: var(--ux-text);
text-decoration: none !important;
font-weight: 500;
transition: color .15s, transform .1s;
}
.ux-alert-link > i { color: var(--ux-primary); font-size: 14px; flex-shrink: 0; }
.ux-alert-link:hover { color: var(--ux-primary); transform: translateX(2px); }
.ux-alert-row-unread .ux-alert-link { color: var(--ux-primary); font-weight: 700; }
.ux-alert-subject { display: inline-flex; flex-direction: column; line-height: 1.35; max-width: 480px; }
/* ============================================================== */
/* /message_sucursal/{id} — lectura de mensaje */
/* ============================================================== */
.ux-msg-tipo-badge {
display: inline-flex; align-items: center; gap: 5px;
margin-left: 10px; padding: 3px 10px;
background: color-mix(in srgb, var(--ux-accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--ux-accent) 35%, transparent);
color: var(--ux-accent);
border-radius: 999px;
font-size: 11px; font-weight: 600;
}
.ux-msg-tipo-badge i { font-size: 9px; opacity: 0.85; }
.ux-msg-tipo-badge-inline { margin-left: 0; font-size: 11.5px; }
.ux-msg-body { padding: 26px 28px 28px; }
.ux-msg-content {
background: var(--ux-surface-alt);
border: 1px solid var(--ux-border);
border-radius: 12px;
padding: 22px 24px;
color: var(--ux-text);
font-size: 14.5px;
line-height: 1.65;
}
.ux-msg-content > *:first-child { margin-top: 0; }
.ux-msg-content > *:last-child { margin-bottom: 0; }
.ux-msg-content h1, .ux-msg-content h2, .ux-msg-content h3,
.ux-msg-content h4, .ux-msg-content h5, .ux-msg-content h6 {
color: var(--ux-primary); margin-top: 18px; margin-bottom: 10px; font-weight: 700;
}
.ux-msg-content p { margin: 10px 0; }
.ux-msg-content a { color: var(--ux-primary); text-decoration: underline; }
.ux-msg-content a:hover { color: var(--ux-primary-dark); }
.ux-msg-content ul, .ux-msg-content ol { padding-left: 20px; margin: 10px 0; }
.ux-msg-content blockquote {
margin: 12px 0; padding: 10px 14px;
border-left: 4px solid var(--ux-primary);
background: color-mix(in srgb, var(--ux-primary) 6%, transparent);
color: var(--ux-text-muted);
border-radius: 0 8px 8px 0;
font-style: italic;
}
.ux-msg-content code {
background: var(--ux-bg); color: var(--ux-accent);
padding: 2px 6px; border-radius: 4px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 12.5px;
}
.ux-msg-content img { max-width: 100%; height: auto; border-radius: 8px; }
.ux-msg-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
padding: 16px 28px 22px;
border-top: 1px solid var(--ux-border);
background: linear-gradient(180deg, var(--ux-surface) 0%, var(--ux-surface-alt) 100%);
}
.ux-msg-foot-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ============================================================== */
/* Bootstrap-select — polish del dropdown */
/* ============================================================== */
body.ux-enabled .bootstrap-select .dropdown-menu {
background-color: var(--ux-surface);
border: 1px solid var(--ux-border);
border-radius: 10px;
box-shadow: 0 12px 28px var(--ux-shadow);
padding: 6px;
z-index: 1080;
overflow: hidden;
}
body.ux-enabled .bootstrap-select.dropdown.show { z-index: 1080; }
body.ux-enabled .bootstrap-select .dropdown-menu .inner {
max-height: 280px !important;
overflow-y: auto;
border-radius: 6px;
}
body.ux-enabled .bootstrap-select .dropdown-menu li a {
color: var(--ux-text);
padding: 8px 12px;
border-radius: 6px;
transition: background .12s, color .12s;
}
body.ux-enabled .bootstrap-select .dropdown-menu li a:hover,
body.ux-enabled .bootstrap-select .dropdown-menu li.selected a {
background-color: var(--ux-primary-soft) !important;
color: var(--ux-primary) !important;
}
body.ux-enabled .bootstrap-select .dropdown-menu li a:hover span.text,
body.ux-enabled .bootstrap-select .dropdown-menu li.selected a span.text {
color: var(--ux-primary) !important;
}
body.ux-enabled .bootstrap-select .bs-searchbox { padding: 6px 8px 8px; }
body.ux-enabled .bootstrap-select .bs-searchbox .form-control {
background-color: var(--ux-surface-alt);
border: 1px solid var(--ux-border);
color: var(--ux-text);
border-radius: 8px;
height: 36px;
padding: 6px 12px;
}
body.ux-enabled .bootstrap-select .bs-searchbox .form-control:focus {
border-color: var(--ux-primary);
box-shadow: 0 0 0 0.2rem var(--ux-primary-ring);
outline: none;
}
body.ux-enabled .bootstrap-select > .btn.dropdown-toggle,
body.ux-enabled button.btn.dropdown-toggle.btn-light {
background-color: var(--ux-surface) !important;
border: 1px solid var(--ux-border) !important;
color: var(--ux-text) !important;
border-radius: 8px;
min-height: 42px;
padding: 8px 14px;
}
body.ux-enabled .bootstrap-select.bs-placeholder > .btn.dropdown-toggle { color: var(--ux-text-subtle) !important; }
.ux-impersonate-banner {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 22px;
background: linear-gradient(90deg,
rgba(235, 128, 14, 0.16) 0%,
rgba(235, 128, 14, 0.08) 50%,
rgba(235, 128, 14, 0.04) 100%);
border-bottom: 2px solid var(--ux-accent);
color: var(--ux-text);
font-size: 13px;
flex-wrap: wrap;
}
[data-theme="dark"] .ux-impersonate-banner {
background: linear-gradient(90deg,
rgba(235, 128, 14, 0.22) 0%,
rgba(235, 128, 14, 0.12) 50%,
rgba(235, 128, 14, 0.06) 100%);
}
/* Icono circular naranja */
.ux-impersonate-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--ux-accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
box-shadow: 0 3px 10px rgba(235, 128, 14, 0.35);
}
/* Texto: eyebrow arriba + frase abajo */
.ux-impersonate-text {
display: flex;
flex-direction: column;
line-height: 1.3;
min-width: 0;
}
.ux-impersonate-eyebrow {
color: var(--ux-accent);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
margin-bottom: 2px;
}
.ux-impersonate-user {
color: var(--ux-text);
font-size: 13.5px;
font-weight: 500;
}
.ux-impersonate-user strong {
color: var(--ux-accent);
font-weight: 700;
}
/* Bloque de acciones empujado a la derecha */
.ux-impersonate-actions {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* Select de cambio de sección */
.ux-impersonate-select {
appearance: none;
-webkit-appearance: none;
background: var(--ux-surface);
color: var(--ux-text);
border: 1px solid color-mix(in srgb, var(--ux-accent) 35%, transparent);
border-radius: 8px;
padding: 8px 32px 8px 12px;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
min-height: 36px;
}
.ux-impersonate-select:hover { border-color: var(--ux-accent); }
.ux-impersonate-select:focus {
outline: none;
border-color: var(--ux-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ux-accent) 25%, transparent);
}
/* Botón "Salir del modo vista" */
.ux-impersonate-exit {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
background: var(--ux-accent);
color: #fff !important;
border: 1px solid var(--ux-accent);
border-radius: 8px;
font-size: 12.5px;
font-weight: 600;
text-decoration: none !important;
box-shadow: 0 2px 6px rgba(235, 128, 14, 0.3);
transition: background .15s, box-shadow .2s, transform .1s, border-color .15s;
min-height: 36px;
}
.ux-impersonate-exit:hover {
background: var(--ux-accent-dark);
border-color: var(--ux-accent-dark);
box-shadow: 0 4px 12px rgba(235, 128, 14, 0.45);
transform: translateY(-1px);
color: #fff !important;
}
.ux-impersonate-exit i { font-size: 11px; }
/* Responsive */
@media (max-width: 768px) {
.ux-impersonate-banner {
padding: 10px 14px;
gap: 12px;
}
.ux-impersonate-actions {
margin-left: 0;
width: 100%;
justify-content: flex-end;
}
}
@media (max-width: 480px) {
.ux-impersonate-banner {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.ux-impersonate-actions {
flex-direction: column;
align-items: stretch;
}
.ux-impersonate-select,
.ux-impersonate-exit {
width: 100%;
justify-content: center;
}
.ux-impersonate-exit span { display: inline; }
}
/* ============================================================== */
/* /obj_user — Tarjetas de dispositivos GPS */
/* ============================================================== */
.ux-obj-page { max-width: 1280px; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
.ux-obj-header {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.ux-obj-title {
color: var(--ux-primary); font-size: 22px; font-weight: 700;
margin: 4px 0; display: inline-flex; align-items: center; gap: 10px;
}
.ux-obj-title i { color: var(--ux-accent); }
.ux-obj-subtitle { color: var(--ux-text-muted); margin: 0; font-size: 13.5px; }
.ux-obj-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 18px;
}
.ux-obj-card {
background: var(--ux-surface);
border: 1px solid var(--ux-border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 10px var(--ux-shadow);
transition: transform .22s, box-shadow .22s, border-color .22s;
display: flex;
flex-direction: column;
}
.ux-obj-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px var(--ux-shadow);
border-color: var(--ux-primary);
}
.ux-obj-card-head {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px;
background: linear-gradient(135deg, var(--ux-primary-soft) 0%, var(--ux-surface-alt) 100%);
border-bottom: 1px solid var(--ux-border);
}
.ux-obj-card-icon {
flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
background: var(--ux-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
box-shadow: 0 2px 6px rgba(16,107,160,0.3);
transition: transform .3s;
}
.ux-obj-card:hover .ux-obj-card-icon { transform: scale(1.05) rotate(-4deg); }
.ux-obj-card-title-wrap { flex: 1; min-width: 0; }
.ux-obj-card-title {
color: var(--ux-primary); font-size: 16px; font-weight: 700; margin: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ux-obj-card-counter { color: var(--ux-text-subtle); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.ux-obj-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
flex-shrink: 0;
}
.ux-obj-status i { font-size: 8px; }
.ux-obj-status-on {
background: rgba(40, 180, 100, 0.15);
color: #1a7f4a;
border: 1px solid rgba(40, 180, 100, 0.4);
}
[data-theme="dark"] .ux-obj-status-on { background: rgba(40, 180, 100, 0.18); color: #7ee0a5; }
.ux-obj-status-on i { color: #28b464; animation: ux-pulse-dot 2s ease-in-out infinite; }
.ux-obj-status-off { background: rgba(150, 160, 175, 0.15); color: var(--ux-text-muted); border: 1px solid var(--ux-border); }
.ux-obj-status-off i { color: var(--ux-text-subtle); }
@keyframes ux-pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; transform: scale(0.85); }
}
.ux-obj-data { list-style: none; padding: 14px 18px 8px; margin: 0; }
.ux-obj-data li {
display: grid;
grid-template-columns: 24px 1fr auto;
align-items: baseline; gap: 10px;
padding: 8px 0;
border-bottom: 1px dashed var(--ux-border);
font-size: 13px;
}
.ux-obj-data li:last-child { border-bottom: none; }
.ux-obj-data li i { color: var(--ux-primary); font-size: 13px; text-align: center; align-self: center; }
.ux-obj-data-label { color: var(--ux-text-muted); }
.ux-obj-data-value { color: var(--ux-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ux-obj-icon-move { color: #28b464 !important; }
.ux-obj-icon-stop { color: var(--ux-accent) !important; }
.ux-obj-params {
padding: 14px 18px 16px;
border-top: 1px solid var(--ux-border);
background: color-mix(in srgb, var(--ux-primary) 7%, var(--ux-surface));
}
[data-theme="dark"] .ux-obj-params { background: color-mix(in srgb, var(--ux-primary) 10%, var(--ux-surface)); }
.ux-obj-params-head {
display: flex; align-items: center; gap: 8px;
font-size: 11.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.6px;
color: var(--ux-primary);
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px dashed color-mix(in srgb, var(--ux-primary) 25%, transparent);
}
.ux-obj-params-head i { color: var(--ux-accent); font-size: 11px; }
.ux-obj-params-count {
margin-left: auto;
background: var(--ux-primary); color: #fff;
font-size: 10px; font-weight: 700;
padding: 2px 8px; border-radius: 999px;
text-transform: none; letter-spacing: 0;
}
.ux-obj-params-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ux-obj-param-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
background: var(--ux-surface-alt);
border: 1px solid var(--ux-border);
border-radius: 14px;
font-size: 11px;
color: var(--ux-text-muted);
max-width: 100%;
word-break: break-word;
line-height: 1.4;
transition: border-color .12s, color .12s;
}
.ux-obj-param-pill:hover { border-color: var(--ux-primary); color: var(--ux-text); }
.ux-obj-param-pill b { color: var(--ux-primary); font-weight: 700; white-space: nowrap; }
.ux-obj-empty {
display: inline-flex; align-items: center; gap: 6px;
color: var(--ux-text-subtle); font-style: italic; font-size: 12px;
padding: 4px 12px;
background: var(--ux-surface);
border: 1px dashed var(--ux-border);
border-radius: 8px;
}
/* Override global a la regla agresiva de css.css:
footer { position: absolute; bottom: 0; width: 100%; height: 40px; }
que rompía cualquier