/* ============================================================================ * Sistema Medussa — Tokens canónicos de color (Tema 0) * * Fuente única de verdad para colores en TODO el sistema. * * USO: * color: var(--text-primary); * background: var(--bg-surface); * border: 1px solid var(--border-default); * * MECANISMO: * El atributo data-layout-mode="dark"|"light" vive en . * El toggle (ModeVisualBody.vue) lo cambia y persiste en BD. * Estas variables cambian automáticamente según el modo activo. * * EXCLUSIONES (módulos con tema fijo intencional): * - War Room (--wr-*): conservar su sistema actual hasta Tema 6 * - WhatsApp Panel: conservar #0b141a fijo hasta Tema 5 * - megafamilia.css (--mf-*): refactor a referencias globales en Tema 0.5 * * PLANTILLAS (item #333, Fase 2 — spec en docs/theming-fase2-spec-tokens.md): * data-layout-mode="light" | "dark" | "alto-contraste" * "alto-contraste" es plantilla NUEVA (sin consumidores todavía — nada en el * sistema escribe ese valor en el body; el selector de UI es Fase 3, diferida). * Acento de marca unificado aprobado por Irving para plantillas nuevas: #7dd3fc. * * Generado: 2026-06-09 — Tema 0 * ============================================================================ */ :root, [data-layout-mode="light"] { /* === Backgrounds === */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-surface: #f1f3f5; --bg-hover: #e9ecef; /* === Text === */ --text-primary: #212529; --text-secondary: #6c757d; /* === Borders & Effects === */ --border-default: #dee2e6; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08); /* === Accent (de marca) === */ --accent: var(--bs-primary, #556ee6); /* === Semantic === */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; } [data-layout-mode="dark"] { /* === Backgrounds — Paleta C (alto contraste: negro casi puro) === */ --bg-primary: #0A0A0A; /* fondo de página */ --bg-secondary: #141414; /* un tono arriba */ --bg-surface: #1A1A1A; /* tarjetas/paneles */ --bg-hover: #242424; /* hover */ /* === Text — Paleta C (blanco puro / gris casi blanco para legibilidad) === */ --text-primary: #FFFFFF; --text-secondary: #E0E0E0; /* === Borders & Effects === */ --border-default: #2A2A2A; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.5); /* === Accent (de marca) === */ --accent: var(--bs-primary, #6c84f7); /* === Semantic === */ --success: #34d399; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa; } [data-layout-mode="alto-contraste"] { /* === Backgrounds — negro/blanco puros, sin grises de baja diferenciación === */ --bg-primary: #000000; --bg-secondary: #0d0d0d; --bg-surface: #1a1a1a; --bg-hover: #2e2e2e; /* === Text === */ --text-primary: #ffffff; --text-secondary: #f0f0f0; /* === Borders & Effects — bordes marcados (accesibilidad) === */ --border-default: #6b6b6b; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.7); /* === Accent (de marca) — acento base unificado aprobado por Irving === */ --accent: #7dd3fc; /* === Semantic === */ --success: #4ade80; --warning: #ffd633; --danger: #ff6b6b; --info: #7dd3fc; } /* ============================================================ MegaFamilia Design System — Bootstrap 5 overlay Refactor Tema 0.5 — Patrón híbrido dark/light Categoría A: variables semánticas genéricas → referencian globales de dark-light-tokens.css (success/warning/danger/info). En light mode el shade cambia levemente (~10%); en dark heredan automáticamente la variante dark del sistema. Categoría B: colores de marca MegaFamilia (teal #0d9488, púrpura #7c3aed) y escala de grays Slate (--mf-gray-*). Mantienen sus valores originales en light. Variante dark agregada en este refactor. Categoría C: sombras — misma opacidad en light, mayor en dark. No-color: --mf-radius y --mf-radius-sm — sin variante dark. Los selectores CSS (.mf-*) abajo no fueron modificados. ============================================================ */ :root, [data-layout-mode="light"] { /* === Categoría A: semánticos → referencian globales === */ --mf-success: var(--success); --mf-warning: var(--warning); --mf-danger: var(--danger); --mf-info: var(--info); /* === Categoría B: colores de marca MegaFamilia (teal) === */ --mf-primary: #0d9488; --mf-primary-dark: #0f766e; --mf-primary-light: #ccfbf1; /* === Categoría B: colores de marca MegaFamilia (accent púrpura) === */ --mf-accent: #7c3aed; --mf-accent-light: #ede9fe; /* === Categoría B: escala de grays Slate (identidad visual MF) === */ --mf-gray-50: #f8fafc; --mf-gray-100: #f1f5f9; --mf-gray-200: #e2e8f0; --mf-gray-500: #64748b; --mf-gray-700: #334155; /* === Categoría C: sombras === */ --mf-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --mf-shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06); /* === No-color: geometría (sin variante dark) === */ --mf-radius: 12px; --mf-radius-sm: 8px; } [data-layout-mode="dark"] { /* Categoría A: se hereda automáticamente desde dark-light-tokens.css */ /* === Categoría B: colores de marca — versiones para fondo oscuro === */ /* Teal: se aclara ~15% para mantener legibilidad sobre bg-primary #1e2433 */ --mf-primary: #14b8a6; --mf-primary-dark: #0d9488; --mf-primary-light: rgba(13, 148, 136, 0.15); /* Accent púrpura: se aclara para legibilidad */ --mf-accent: #a78bfa; --mf-accent-light: rgba(124, 58, 237, 0.15); /* === Categoría B: escala de grays Slate → versiones dark === */ /* Los valores dark están alineados con los tokens globales para coherencia */ --mf-gray-50: #1e2433; /* bg-primary: fondo general de tarjetas/headers */ --mf-gray-100: #252836; /* bg-secondary: fondos alternativos, barras de progreso */ --mf-gray-200: #3a3d50; /* border-default: bordes y divisores */ --mf-gray-500: #adb5bd; /* text-secondary: etiquetas, texto muted */ --mf-gray-700: #cdd6f4; /* text-primary: texto de valor principal */ /* === Categoría C: sombras — más opacas en dark (fondos oscuros las absorben) === */ --mf-shadow: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.20); --mf-shadow-md: 0 4px 6px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.25); } /* ============================================================ Resto del CSS de MegaFamilia (selectores .mf-*) — sin tocar ============================================================ */ /* Page header */ .mf-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; } .mf-page-title { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--mf-gray-700); } .mf-page-icon { width: 40px; height: 40px; border-radius: var(--mf-radius-sm); background: linear-gradient(135deg, var(--mf-primary), var(--mf-primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(13,148,136,.35); } .mf-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* KPI grid */ .mf-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); gap: 1rem; margin-bottom: 1.5rem; } .mf-kpi { background: #fff; border: 1px solid var(--mf-gray-200); border-radius: var(--mf-radius); padding: 1rem 1.25rem; box-shadow: var(--mf-shadow); position: relative; overflow: hidden; } .mf-kpi::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--mf-kpi-color, var(--mf-primary)); border-radius: 4px 0 0 4px; } .mf-kpi-label { font-size: .72rem; font-weight: 700; color: var(--mf-gray-500); text-transform: uppercase; letter-spacing: .05em; } .mf-kpi-value { font-size: 1.9rem; font-weight: 800; color: var(--mf-gray-700); line-height: 1.1; margin: .2rem 0; } .mf-kpi-sub { font-size: .72rem; color: var(--mf-gray-500); } .mf-kpi-icon { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 2.2rem; opacity: .07; } .mf-kpi-primary { --mf-kpi-color: var(--mf-primary); } .mf-kpi-success { --mf-kpi-color: var(--mf-success); } .mf-kpi-warning { --mf-kpi-color: var(--mf-warning); } .mf-kpi-danger { --mf-kpi-color: var(--mf-danger); } .mf-kpi-accent { --mf-kpi-color: var(--mf-accent); } .mf-kpi-info { --mf-kpi-color: var(--mf-info); } /* Cards */ .mf-card { background: #fff; border: 1px solid var(--mf-gray-200); border-radius: var(--mf-radius); box-shadow: var(--mf-shadow); overflow: hidden; } .mf-card-header { padding: .875rem 1.25rem; border-bottom: 1px solid var(--mf-gray-200); font-weight: 700; font-size: .875rem; color: var(--mf-gray-700); background: var(--mf-gray-50); display: flex; align-items: center; justify-content: space-between; } .mf-card-body { padding: 1.25rem; } /* Tables */ .mf-table { width: 100%; border-collapse: collapse; font-size: .875rem; } .mf-table th { padding: .6rem 1rem; background: var(--mf-gray-50); border-bottom: 2px solid var(--mf-gray-200); font-weight: 700; color: var(--mf-gray-500); text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; white-space: nowrap; } .mf-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--mf-gray-200); color: var(--mf-gray-700); vertical-align: middle; } .mf-table tr:last-child td { border-bottom: 0; } .mf-table tr:hover td { background: var(--mf-gray-50); } /* Badges */ .mf-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 99px; font-size: .7rem; font-weight: 700; letter-spacing: .03em; } .mf-badge-primary { background: var(--mf-primary-light); color: var(--mf-primary-dark); } .mf-badge-success { background: #dcfce7; color: #166534; } .mf-badge-warning { background: #fef9c3; color: #854d0e; } .mf-badge-danger { background: #fee2e2; color: #991b1b; } .mf-badge-gray { background: var(--mf-gray-100); color: var(--mf-gray-500); } .mf-badge-accent { background: var(--mf-accent-light); color: var(--mf-accent); } .mf-badge-info { background: #e0f2fe; color: #0c4a6e; } /* Buttons */ .mf-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: var(--mf-radius-sm); font-size: .8rem; font-weight: 600; border: none; cursor: pointer; transition: all .15s; text-decoration: none; line-height: 1.4; } .mf-btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; } .mf-btn-primary { background: var(--mf-primary); color: #fff; } .mf-btn-primary:hover { background: var(--mf-primary-dark); color: #fff; } .mf-btn-outline { background: #fff; color: var(--mf-gray-700); border: 1px solid var(--mf-gray-200); } .mf-btn-outline:hover { background: var(--mf-gray-50); color: var(--mf-gray-700); } .mf-btn-danger { background: var(--mf-danger); color: #fff; } .mf-btn-danger:hover { background: #b91c1c; color: #fff; } .mf-btn-success { background: var(--mf-success); color: #fff; } .mf-btn-success:hover { background: #15803d; color: #fff; } .mf-btn-ghost { background: transparent; color: var(--mf-gray-500); border: 1px dashed var(--mf-gray-200); } .mf-btn-ghost:hover { border-color: var(--mf-primary); color: var(--mf-primary); background: var(--mf-primary-light); } .mf-btn-sm { padding: .3rem .65rem; font-size: .75rem; } /* Empty state */ .mf-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; color: var(--mf-gray-500); text-align: center; } .mf-empty i { font-size: 3rem; margin-bottom: 1rem; opacity: .25; } .mf-empty h6 { font-weight: 700; color: var(--mf-gray-700); margin-bottom: .3rem; } .mf-empty p { font-size: .85rem; margin: 0; max-width: 280px; } /* Filters bar */ .mf-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .65rem 1rem; background: var(--mf-gray-50); border-bottom: 1px solid var(--mf-gray-200); } .mf-filters .form-control, .mf-filters .form-select { font-size: .8rem; border-radius: var(--mf-radius-sm); border: 1px solid var(--mf-gray-200); min-width: 140px; } .mf-filters .form-control:focus, .mf-filters .form-select:focus { border-color: var(--mf-primary); box-shadow: 0 0 0 3px rgba(13,148,136,.15); } /* Pagination */ .mf-pagination { display: flex; justify-content: center; align-items: center; gap: .25rem; padding: .75rem 0; } .mf-pagination button { min-width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--mf-gray-200); background: #fff; font-size: .78rem; color: var(--mf-gray-700); cursor: pointer; display: flex; align-items: center; justify-content: center; } .mf-pagination button.active { background: var(--mf-primary); color: #fff; border-color: var(--mf-primary); } .mf-pagination button:disabled { opacity: .4; cursor: not-allowed; } /* Avatar */ .mf-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: #fff; flex-shrink: 0; } .mf-avatar-lg { width: 48px; height: 48px; font-size: 1.1rem; } .mf-profile-pill { display: flex; align-items: center; gap: .6rem; } .mf-profile-name { font-weight: 600; font-size: .875rem; line-height: 1.2; } .mf-profile-sub { font-size: .72rem; color: var(--mf-gray-500); } /* Bar chart */ .mf-bar-track { height: 8px; background: var(--mf-gray-100); border-radius: 99px; overflow: hidden; } .mf-bar-fill { height: 100%; background: var(--mf-primary); border-radius: 99px; transition: width .4s ease; } /* Spinner */ .mf-spin { animation: mf-rotation .8s linear infinite; display: inline-block; } @keyframes mf-rotation { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } /* Alert row */ .mf-alert-row { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--mf-gray-100); } .mf-alert-row:last-child { border-bottom: 0; } .mf-alert-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .875rem; flex-shrink: 0; } /* Kanban */ .mf-kanban { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; } @media(max-width:992px){ .mf-kanban { grid-template-columns: repeat(2,1fr); } } @media(max-width:576px){ .mf-kanban { grid-template-columns: 1fr; } } .mf-kanban-col { display: flex; flex-direction: column; gap: .5rem; } .mf-kanban-header { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border-radius: var(--mf-radius-sm); font-size: .8rem; font-weight: 700; margin-bottom: .25rem; } .mf-kanban-card { background: #fff; border: 1px solid var(--mf-gray-200); border-radius: var(--mf-radius-sm); padding: .75rem; box-shadow: var(--mf-shadow); font-size: .82rem; } .mf-kanban-card-title { font-weight: 600; margin-bottom: .25rem; color: var(--mf-gray-700); } .mf-kanban-card-sub { font-size: .72rem; color: var(--mf-gray-500); } /* Timeline */ .mf-timeline { list-style: none; padding: 0; margin: 0; } .mf-timeline li { display: flex; gap: .75rem; padding-bottom: 1rem; position: relative; } .mf-timeline li::before { content: ''; position: absolute; left: 15px; top: 28px; bottom: 0; width: 2px; background: var(--mf-gray-200); } .mf-timeline li:last-child::before { display: none; } .mf-timeline-dot { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .75rem; } .mf-timeline-body { flex: 1; } .mf-timeline-title { font-weight: 600; font-size: .85rem; color: var(--mf-gray-700); } .mf-timeline-time { font-size: .72rem; color: var(--mf-gray-500); } /* Tour button */ .mf-tour-btn { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 46px; height: 46px; border-radius: 50%; background: var(--mf-primary); color: #fff; border: none; font-size: 18px; box-shadow: 0 4px 12px rgba(13,148,136,.4); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s, box-shadow .2s; } .mf-tour-btn:hover { transform: scale(1.1); box-shadow: 0 6px 18px rgba(13,148,136,.5); } /* Screen time bar */ .mf-progress-bar { height: 6px; border-radius: 99px; background: var(--mf-gray-100); overflow: hidden; margin-top: .3rem; } .mf-progress-fill { height: 100%; border-radius: 99px; transition: width .4s; } .mf-scroll-x { overflow-x: auto; } .q-inner-loading { z-index: 999; } .row.q-color-picker__palette-rows { --bs-gutter-x: 0; } .q-notifications { z-index: 9999 !important; } .q-dialog__inner { z-index: 9998 !important; } .q-table__top { --bs-gutter-x: 0px !important; } .row > .q-table-control, .row > .q-table__control { width: auto !important; } .q-item__section.draggable { cursor: move; } .map-workspace-container { position: relative; width: 100%; height: 10000px; } .map-workspace-container .q-expansion-item__container .q-item { padding: 1px 8px; } .map-splitter { position: absolute; background-color: #e6e6e6; border-radius: 10px; border: 2px solid #333; cursor: move; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 10; } .map-client { position: absolute; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 10; width: 350px !important; border: 2px solid #333; } .map-splitter-header { background-color: #3b3b3b; color: white; padding: 2px; border-top-left-radius: 8px; border-top-right-radius: 8px; font-weight: bold; } .map-splitter-header .q-item__section--avatar, .map-device-header .q-item__section--avatar { padding-left: 3px !important; } .map-connections-overlay { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 20; height: 10000px; } .map-connection { stroke: #4a708b; stroke-width: 3; fill: none; cursor: pointer; pointer-events: visibleStroke; } .map-connection.green { stroke: rgb(152, 247, 152) !important; cursor: default !important; } .map-connection-destroy:hover { stroke: red; stroke-width: 5; } .map-device { position: absolute; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 10; } .map-connection.animate-right { animation: dash-move-right 1s linear infinite; stroke-dasharray: 15, 5; } .map-connection.animate-left { animation: dash-move-left 1s linear infinite; stroke-dasharray: 15, 5; } .map-port-active { animation: blink-and-pulse 1s infinite; z-index: 10; } .map-port-active::after { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 50%; background: rgba(74, 112, 139, 0.2); animation: aura-pulse 2s infinite; z-index: -1; } @keyframes blink-and-pulse { 0% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 0 0 rgba(74, 112, 139, 0.7), 0 0 10px 5px rgba(74, 112, 139, 0.5); } 50% { opacity: 0.5; transform: scale(1.15); box-shadow: 0 0 0 10px rgba(74, 112, 139, 0), 0 0 20px 10px rgba(74, 112, 139, 0.3); } 100% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 0 0 rgba(74, 112, 139, 0.7), 0 0 10px 5px rgba(74, 112, 139, 0.5); } } @keyframes aura-pulse { 0% { transform: scale(0.8); opacity: 0; } 50% { opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 112, 139, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(74, 112, 139, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 112, 139, 0); } } .animate-fade-in { animation: fadeIn 1s ease-in-out forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Estilos para el handle de redimensionamiento */ .col-resize-handle { position: absolute; top: 0; right: 2px; bottom: 0; width: 8px; cursor: col-resize; z-index: 10; } /* Opcional: feedback visual (una línea) al pasar el ratón */ .col-resize-handle:hover::before { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background-color: #000; } /* Cursor global al arrastrar */ .resizing-column { cursor: col-resize !important; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .form-field .q-field__after { padding-left: 8px !important; } .object-field .q-radio span.no-outline, .object-field .q-checkbox span.no-outline { display: none !important; } .object-field .q-radio__inner, .object-field .q-checkbox__inner { width: auto !important; } .q-field__control-container.row .q-field__label{ position: absolute !important; } .q-field__control-container.row .q-field__native { padding-left: 0px !important; } .input-select > .q-field__input, .input-select > .q-field__native { width: auto !important; } @charset "UTF-8"; .multiselect-native-select .btn-group { width: -webkit-fill-available; } .multiselect-native-select .btn-group button.multiselect.dropdown-toggle.custom-select { display: block; width: 100%; padding: 0.47rem 0.75rem; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .multiselect-native-select .btn-group .multiselect-container.dropdown-menu { max-height: 300px; overflow-y: auto; } small > i { font-size: 12px !important; } @media (max-width: 992px) { .main-content { margin-left: 0 !important; } body.sidebar-enable .vertical-menu { display: block; } } .cursor-pointer { cursor: pointer; } .custom-file-input.is-valid ~ .custom-file-label, .was-validated .custom-file-input:valid ~ .custom-file-label { border-color: #28a745; } .custom-file-input.is-valid:focus ~ .custom-file-label, .was-validated .custom-file-input:valid:focus ~ .custom-file-label { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } .custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(1.5em + 0.75rem + 2px); margin: 0; opacity: 0; } .custom-file-input:focus ~ .custom-file-label { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .custom-file-input:disabled ~ .custom-file-label, .custom-file-input[disabled] ~ .custom-file-label { background-color: #e9ecef; } .custom-file-input:lang(en) ~ .custom-file-label::after { content: "Browse"; } .custom-file-input ~ .custom-file-label[data-browse]::after { content: attr(data-browse); } .custom-file-label { position: absolute; top: 0; right: 0; left: 5px; z-index: 1; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; border: 1px solid #ced4da; border-radius: 0.25rem; } .custom-file-label::after { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; display: block; height: calc(1.5em + 0.75rem); padding: 0.375rem 0.75rem; line-height: 1.5; color: #495057; content: "Browse"; background-color: #e9ecef; border-left: inherit; border-radius: 0 0.25rem 0.25rem 0; } .table { font-size: 0.8rem !important; } .table > :not(caption) > * > * { padding: 0.2rem 0.2rem; } .q-table .q-table__bottom-item { margin-bottom: 0px !important; } label.q-field { margin-bottom: 0px !important; } .spl-card { position: relative; margin-bottom: 6px; border-radius: 8px; height: 96px; min-width: 186px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); } .spl-card-success { background-color: #43a047; } .spl-card-gray { background-color: #e0e0e0; } .spl-item-in-success { color: #fafafa; } .spl-item-in-gray { color: #000000; } .spl-card-left { height: 100%; float: left; margin: 0; width: 75%; display: inline-block; background-color: #fafafa; border-radius: 4px 0 0 4px; } .spl-card-primary { background-color: rgba(224, 224, 224, 0.1); width: 100%; height: 100%; border-radius: 8px 0 0 8px; } .spl-card-padding { padding-left: 16px; width: 100%; } .spl-card-text-center { width: 100%; text-align: center; } .spl-card-item-center { font-size: 18px; font-weight: 700; margin-top: 8px; } .spl-center-container { margin: 0; display: table; overflow: hidden; height: 100%; border-radius: 4px 0 0 4px; } .spl-center-content { display: table-cell; vertical-align: middle; } .spl-card-right { float: right; display: inline-block; margin: 0; border-radius: 0 8px 8px 0; height: 100%; width: 25%; } .td_network_ip_used_and_ping_ok { background-color: #ccffcc !important; } .td_network_ip_used_and_ping_ko { background-color: #ffcccc !important; } .td_network_ip_used_and_ping_nok { background-color: #ffffcc !important; } .spl-legend-primary { background-color: rgba(25, 118, 210, 0.1) !important; } .spl-legend-block-item-container { border-color: #fff; text-align: left; margin-bottom: 5px; margin-right: 0; } .spl-legend-item-gray { background-color: #e0e0e0; } .spl-legend-item-success { background-color: rgb(67, 160, 71); } .spl-legend-success { background-color: rgba(67, 160, 71, 0.2); } .spl-legend-warning { background-color: rgba(245, 124, 0, 0.2); } .spl-legend-danger { background-color: rgba(221, 44, 0, 0.2); } .spl-legend-item-success.spl-legend-block-item-icon { color: #fafafa; } .spl-legend-block-item-icon { text-align: center; width: 48px; height: 48px; border-radius: 6px; display: inline-block; color: #212121; } .spl-legend-block-item-label { height: 19px; font-size: 16px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; color: #212121; display: inline-block; } .spl-legend-item-icon { padding-top: 11px; padding-bottom: 11px; margin: 0; } .alert-gray { color: #563d7c; background-color: #f9f9f9; border-color: #fff; } /* Callout de aviso: sin fondo de color relleno; barra lateral izquierda ámbar (warning) + fondo neutro + texto legible. El color comunica el significado. (El modo oscuro se especializa en dark_mode.scss — Ajuste 4). */ .card-text-body { background-image: none; background-color: #f8f9fa; border: 1px solid #e9ecef; border-left: 4px solid #f59e0b; border-radius: 4px; } .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; } .card-text { flex: 1 1 auto; padding: 1.25rem 1.25rem; } a.list-group-item, button.list-group-item { color: #555; } .list-group-item { position: relative; display: block; padding: 10px 15px; background-color: #fff; border: 1px solid #ddd; } a { color: #337ab7; text-decoration: none; } .panel:not(.bootstrap-panel):hover { box-shadow: 0 2px 4px rgb(0 0 0/20%); } .panel:not(.bootstrap-panel) { border-radius: 0; border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .panel-default { border-color: #ddd; } .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; box-shadow: 0 1px 1px rgb(0 0 0/5%); } .pull-right { float: right !important; } .panel-heading { background: none; border-bottom: 0; text-transform: uppercase; font-weight: bold; } div.choices > .choices__inner { background-color: white !important; } .choices[data-type*=select-one] .choices__inner { padding-bottom: 0; } .choices { margin-bottom: 0px !important; } .choices[data-type*=select-one]:after { margin-top: 0px !important; } .drift-zoom-pane { bottom: 0 !important; height: 500px !important; top: auto !important; } [data-layout-mode=dark] .pace-done { background-color: #1A1A1A !important; } [data-layout-mode=dark] #page-topbar { background-color: #1A1A1A !important; } body[data-layout-mode=dark][data-sidebar=brand] .navbar-brand-box, body[data-layout-mode=dark][data-sidebar=brand] .vertical-menu, body[data-layout-mode=dark][data-sidebar=dark] .navbar-brand-box, body[data-layout-mode=dark][data-sidebar=dark] .vertical-menu { background-color: #1A1A1A !important; } [data-layout-mode=dark] .footer { background-color: #1A1A1A !important; } body[data-layout-mode=dark] .border, body[data-layout-mode=dark] .border-top, body[data-layout-mode=dark] .list-group-item, body[data-layout-mode=dark] .nav-tabs .nav-link.active, body[data-layout-mode=dark] .nav-tabs .nav-link.active:focus, body[data-layout-mode=dark] .nav-tabs .nav-link.active:hover, body[data-layout-mode=dark] .nav-tabs .nav-link:focus, body[data-layout-mode=dark] .nav-tabs .nav-link:hover, body[data-layout-mode=dark] .pagination .page-item.active .page-link, body[data-layout-mode=dark] .pagination .page-item.active .page-link:focus, body[data-layout-mode=dark] .pagination .page-item.active .page-link:hover, body[data-layout-mode=dark] .pagination .page-item .page-link:focus, body[data-layout-mode=dark] .pagination .page-item .page-link:hover, body[data-layout-mode=dark] .progress-bar, body[data-layout-mode=dark] .progress-bar-animated, body[data-layout-mode=dark] .progress-bar-striped { background-color: #1A1A1A !important; } [data-layout-mode=dark] a { color: #E0E0E0; } [data-layout-mode=dark] .fc .fc-daygrid-day-number { color: #5156be !important; } .fc-h-event .fc-event-main { color: #5156be !important; } body[data-layout-mode=dark] { background-color: #0A0A0A !important; } [data-layout-mode=dark] .card { background-color: #1A1A1A !important; } [data-layout-mode=dark] .card-header { background-color: #1A1A1A !important; } [data-layout-mode=dark] .card-body { background-color: #1A1A1A !important; } [data-layout-mode=dark] .q-pa-md .q-table__container .q-tab-panels { background-color: #1A1A1A !important; border: 1px solid #2A2A2A !important; color: #FFFFFF !important; } [data-layout-mode=dark] .q-card { background-color: #1A1A1A !important; border: 1px solid #2A2A2A !important; color: #FFFFFF !important; } [data-layout-mode=dark] .fullscreen { background-color: #1A1A1A !important; border: 1px solid #2A2A2A !important; color: #FFFFFF !important; } [data-layout-mode=dark] span { color: #FFFFFF !important; } [data-layout-mode=dark] .q-menu { background-color: #1A1A1A !important; border: 1px solid #2A2A2A !important; color: #FFFFFF !important; } [data-layout-mode=dark] .q-table__container { background-color: #1A1A1A !important; border: 1px solid #2A2A2A !important; color: #FFFFFF !important; } [data-layout-mode=dark] .customer-buttons-wrapper { background-color: #1A1A1A !important; } [data-layout-mode=dark] .panel { background-color: #1A1A1A !important; } [data-layout-mode=dark] .panel-default { background-color: #1A1A1A !important; } [data-layout-mode=dark] div.choices > .choices__inner { background-color: #141414 !important; } [data-layout-mode=dark] .multiselect-native-select .btn-group button.multiselect.dropdown-toggle.custom-select { background-color: #141414 !important; border: 1px solid #2A2A2A !important; color: #FFFFFF !important; } table.dataTable.table-striped > tbody > tr.even > * { box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05); } /* Formularios (Paleta C): el tema vendor (public/assets/css/app.min.css) hardcodea los inputs en dark con slate #363a38 y texto apagado #adb5bd → se quedaban en el look viejo, desalineados del negro puro y con la baja legibilidad que se quería corregir. Los alineamos aquí (mismo archivo central del tema oscuro). NO se tocan los form-check-input (checkbox/switch): conservan su acento al marcarse. */ [data-layout-mode=dark] .form-control, [data-layout-mode=dark] .form-select, [data-layout-mode=dark] .input-group-text { background-color: #141414 !important; border: 1px solid #2A2A2A !important; color: #FFFFFF !important; } [data-layout-mode=dark] .form-control::-moz-placeholder { color: #B0B0B0 !important; opacity: 1; } [data-layout-mode=dark] .form-control::placeholder { color: #B0B0B0 !important; opacity: 1; } /* ============================================================================ * AJUSTE 1 — Texto secundario más blanco en TODO el sistema * El vendor (app.min.css) pinta .text-muted en #858d98 (apagado). Lo subimos a * #E0E0E0 (casi blanco) de un golpe. Cubre labels, hints y descripciones. * ========================================================================== */ [data-layout-mode=dark] .text-muted, [data-layout-mode=dark] .text-secondary, [data-layout-mode=dark] small.text-muted, [data-layout-mode=dark] .form-text, [data-layout-mode=dark] .no-data, [data-layout-mode=dark] .comment-author { color: #E0E0E0 !important; } /* ============================================================================ * AJUSTE 2 — Badges de estado: texto blanco + línea de color abajo (sin fondo * de color). El color comunica el estado; el texto SIEMPRE se lee. Centralizado. * Cubre: Bootstrap .badge (.bg-*), badges de vendedor (.badge-*), factura * (.badge-invoice-). Los fondos de fila (.client- y tr. de estado) NO se tocan. * ========================================================================== */ [data-layout-mode=dark] .badge:not(.hdr-badge), [data-layout-mode=dark] .badge-Interno, [data-layout-mode=dark] .badge-Externo, [data-layout-mode=dark] .badge-Distribuidor, [data-layout-mode=dark] .badge-Activo, [data-layout-mode=dark] .badge-Inactivo, [data-layout-mode=dark] .badge-Bloqueado, [data-layout-mode=dark] [class*=badge-invoice-] { background-color: transparent !important; background-image: none !important; color: #FFFFFF !important; border: 0 !important; border-bottom: 2px solid #B0B0B0 !important; /* neutro por defecto; se especializa abajo */ border-radius: 0 !important; } /* Color de estado en la línea inferior (por variante) */ [data-layout-mode=dark] .badge-Interno { border-bottom-color: #03c3ec !important; } [data-layout-mode=dark] .badge-Externo { border-bottom-color: #696cff !important; } [data-layout-mode=dark] .badge-Distribuidor { border-bottom-color: #9aa7b5 !important; } [data-layout-mode=dark] .badge-Activo, [data-layout-mode=dark] .badge.bg-success, [data-layout-mode=dark] .badge-invoice-Pagada { border-bottom-color: #34d399 !important; } [data-layout-mode=dark] .badge-Inactivo, [data-layout-mode=dark] .badge.bg-warning, [data-layout-mode=dark] .badge-invoice-Parcialmente_Pagada { border-bottom-color: #fbbf24 !important; } [data-layout-mode=dark] .badge-Bloqueado, [data-layout-mode=dark] .badge.bg-danger, [data-layout-mode=dark] .badge-invoice-Borrador, [data-layout-mode=dark] .badge-invoice-Emitida, [data-layout-mode=dark] .badge-invoice-Vencida { border-bottom-color: #f87171 !important; } [data-layout-mode=dark] .badge.bg-primary { border-bottom-color: #6c84f7 !important; } [data-layout-mode=dark] .badge.bg-info { border-bottom-color: #60a5fa !important; } [data-layout-mode=dark] .badge.bg-secondary { border-bottom-color: #9aa7b5 !important; } /* ============================================================================ * AJUSTE 3 — Sidebar: módulo ACTIVO con línea inferior verde + texto blanco. * El activo lo marca window.__updateSidebarActiveLink (clase .active, re-corre * en navegación SPA). Aquí solo lo hacemos VISIBLE en modo oscuro. * ========================================================================== */ [data-layout-mode=dark] #sidebar-menu a.active { color: #FFFFFF !important; border-bottom: 2px solid #34d399 !important; border-radius: 0 !important; } /* Solo el TEXTO se fuerza a blanco; el icono conserva su color de módulo. */ [data-layout-mode=dark] #sidebar-menu a.active span { color: #FFFFFF !important; } /* ============================================================================ * AJUSTE 4 — Alertas / avisos / banners (bloques altos multilínea): BARRA * LATERAL izquierda del color semántico + fondo neutro + texto legible, en vez * de fondo de color relleno. En bloques altos el underline de abajo se ve raro * → aquí border-left estilo callout. Centralizado. * Cubre: Bootstrap .alert-*, Quasar .q-banner (bg-*), .card-text-body ("Hoy se * emitirá…"). Conserva el significado del color. * NO toca botones (.btn / .q-btn) — son acción y conservan su fondo. * ========================================================================== */ [data-layout-mode=dark] .alert, [data-layout-mode=dark] .q-banner, [data-layout-mode=dark] .card-text-body { background-color: #1A1A1A !important; background-image: none !important; color: #FFFFFF !important; border: 1px solid #2A2A2A !important; border-left: 4px solid #60a5fa !important; /* info por defecto */ } /* Color de la barra lateral por significado */ [data-layout-mode=dark] .alert-success, [data-layout-mode=dark] .q-banner.bg-positive, [data-layout-mode=dark] .q-banner.bg-success, [data-layout-mode=dark] .q-banner[class*=bg-green] { border-left-color: #34d399 !important; /* verde = éxito */ } [data-layout-mode=dark] .alert-warning, [data-layout-mode=dark] .q-banner.bg-warning, [data-layout-mode=dark] .q-banner[class*=bg-amber], [data-layout-mode=dark] .q-banner[class*=bg-orange], [data-layout-mode=dark] .card-text-body { border-left-color: #fbbf24 !important; /* ámbar = aviso */ } [data-layout-mode=dark] .alert-danger, [data-layout-mode=dark] .q-banner.bg-negative, [data-layout-mode=dark] .q-banner[class*=bg-red] { border-left-color: #f87171 !important; /* rojo = peligro */ } [data-layout-mode=dark] .alert-info, [data-layout-mode=dark] .alert-primary, [data-layout-mode=dark] .alert-secondary, [data-layout-mode=dark] .q-banner.bg-info, [data-layout-mode=dark] .q-banner.bg-primary { border-left-color: #60a5fa !important; /* azul = info */ } /* ============================================================================ * AJUSTE 5 — Cabeceras de sección con color (.card-header.bg-*): LÍNEA INFERIOR * fina del color + fondo neutro + texto legible, en vez de fondo relleno. * Cabecera = bloque bajo → el underline encaja (no barra lateral). * ========================================================================== */ [data-layout-mode=dark] .card-header[class*=bg-] { background-color: #1A1A1A !important; background-image: none !important; color: #FFFFFF !important; border-bottom: 2px solid #60a5fa !important; /* info por defecto */ } [data-layout-mode=dark] .card-header.bg-success, [data-layout-mode=dark] .card-header.bg-success-subtle { border-bottom-color: #34d399 !important; } [data-layout-mode=dark] .card-header.bg-warning, [data-layout-mode=dark] .card-header.bg-warning-subtle { border-bottom-color: #fbbf24 !important; } [data-layout-mode=dark] .card-header.bg-danger, [data-layout-mode=dark] .card-header.bg-danger-subtle { border-bottom-color: #f87171 !important; } [data-layout-mode=dark] .card-header.bg-info, [data-layout-mode=dark] .card-header.bg-info-subtle, [data-layout-mode=dark] .card-header.bg-primary { border-bottom-color: #60a5fa !important; } /* ============================================================================ * AJUSTE 6 — Badges/chips de Quasar con color (.q-badge / .q-chip con bg-*): * mismo tratamiento que los badges Bootstrap del Ajuste 2 (sin fondo relleno, * línea inferior del color). Cierra el hueco: el Ajuste 2 solo cubría .badge de * Bootstrap. Solo afecta los que llevan un bg-* de color (los neutros no se * tocan). NO toca .q-btn (botones) — conservan su color de acción. * ========================================================================== */ [data-layout-mode=dark] .q-badge[class*=bg-], [data-layout-mode=dark] .q-chip[class*=bg-] { background: transparent !important; color: #FFFFFF !important; border: 0 !important; border-bottom: 2px solid #B0B0B0 !important; /* neutro por defecto */ border-radius: 0 !important; } [data-layout-mode=dark] .q-badge.bg-positive, [data-layout-mode=dark] .q-badge.bg-success, [data-layout-mode=dark] .q-chip.bg-positive, [data-layout-mode=dark] .q-chip.bg-success { border-bottom-color: #34d399 !important; } [data-layout-mode=dark] .q-badge.bg-warning, [data-layout-mode=dark] .q-badge.bg-orange, [data-layout-mode=dark] .q-chip.bg-warning, [data-layout-mode=dark] .q-chip.bg-orange { border-bottom-color: #fbbf24 !important; } [data-layout-mode=dark] .q-badge.bg-negative, [data-layout-mode=dark] .q-badge.bg-red, [data-layout-mode=dark] .q-chip.bg-negative, [data-layout-mode=dark] .q-chip.bg-red { border-bottom-color: #f87171 !important; } [data-layout-mode=dark] .q-badge.bg-info, [data-layout-mode=dark] .q-badge.bg-primary, [data-layout-mode=dark] .q-chip.bg-info, [data-layout-mode=dark] .q-chip.bg-primary { border-bottom-color: #60a5fa !important; } .ticket-messages { padding: 0 14px 18px 14px; } .ticket-messages .message-block.admin { background-color: #fafafa; } .ticket-messages .message-block { position: relative; margin-bottom: 17px; padding: 12px 20px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 1px -1px rgba(0, 0, 0, 0.12); } .comment-heading { border-bottom: 1px solid #e0e0e0; padding-bottom: 12px; } .default-avatar.default_color--7 { background-color: #fff4a8 !important; } .comment-icon { float: left; z-index: 100; width: 34px; height: 34px; border-radius: 50%; text-align: center; font-size: 1.4em; color: #fff; background-color: #3f903f; margin-right: 12px; overflow: hidden; } .wrap_content_panel_info .ticket-messages .message-block .edit-message { margin-right: 5px; } .wrap_content_panel_info .ticket-messages .message-block .delete-message, .wrap_content_panel_info .ticket-messages .message-block .edit-message { font-size: 12px; color: #616161; } .default-avatar { display: inline-block; margin-right: 5px; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); text-align: center; } .default-avatar .default_avatar_letter_custom { color: rgba(0, 0, 0, 0.3); text-transform: uppercase; position: absolute; top: 13px; left: 30px; font-size: 15px; font-weight: 500; } .comment-title-wrapper { float: left; } .comment-title { margin: 0; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 16px; color: #212121; } .comment-author { color: #777; } .ticket-messages .ticket-message-body { padding: 12px 0 0; font-size: 13px; line-height: 1.38; color: #212121; border-top: 1px solid rgba(0, 0, 0, 0.2); } .ticket-messages .ticket-message-body { overflow: auto; } .ticket-messages .ticket-message-body p { margin: 0; } .ticket-messages .message-block .edit-message { font-size: 12px; color: #616161; } #tickets-thread { height: calc(100vh - 350px); overflow-y: scroll; } .panel { display: flex; flex-direction: column; } .seccion { border: 1px solid #d4d4d4; margin-bottom: 10px; padding: 10px; } .seccion h3 { font-size: 16px; } .item { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; } .item span { font-size: 14px; } .container-administration { display: flex; flex-direction: column; } .container-administration .item-administration { padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border-left: 1px solid; border-left-width: 0.25rem; border-radius: 0.25rem; } .container-administration .item-administration i { margin-right: 10px; } .markdown-content { max-width: 800px; margin: 0 auto; line-height: 1.6; font-size: 1rem; overflow-x: auto; } .markdown-content h1 { font-size: 2rem; font-weight: bold; margin-top: 1.5rem; margin-bottom: 1rem; } .markdown-content h2 { font-size: 1.5rem; font-weight: bold; margin-top: 1.2rem; margin-bottom: 1rem; } .markdown-content h3 { font-size: 1.25rem; font-weight: bold; margin-top: 1rem; margin-bottom: 1rem; } .markdown-content p { margin-bottom: 1rem; } .markdown-content ul, .markdown-content ol { margin-left: 1.5rem; margin-bottom: 1rem; } .markdown-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; } .markdown-content table th, .markdown-content table td { border: 1px solid #ddd; padding: 0.5rem; text-align: left; } .markdown-content table th { background-color: #f4f4f4; font-weight: bold; } .markdown-content table tr:nth-child(even) { background-color: #f9f9f9; } .markdown-content table tr:hover { background-color: #f1f1f1; } .markdown-content pre { background-color: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto; } .markdown-content code { font-family: monospace; background-color: #f5f5f5; padding: 2px 4px; border-radius: 4px; } .badge-Interno { background-color: #d7f5fc; border-color: #b3edf9; color: #03c3ec; padding: 0 15px; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } .badge-Externo { background-color: #e7e7ff; border-color: #d2d3ff; color: #696cff; padding: 0 15px; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } .badge-Distribuidor { background-color: #dcdfe1; border-color: #bdc2c8; color: #233446; padding: 0 15px; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } .badge-Activo { background-color: #dff7d3; border-color: #d4f5c3; color: #71dd37; padding: 0 15px; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } .badge-Inactivo { background-color: #fff2d6; border-color: #ffe6b3; color: #ffab00; padding: 0 15px; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } .badge-Bloqueado { background-color: #ffe0db; border-color: #ffc5bb; color: #ff3e1d; padding: 0 15px; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } .priority-medium { background-color: yellow; } .priority-low { background-color: blue; } .priority-high { background-color: red; } .status-task-new { background-color: blue; } .status-task-in-progress { background-color: yellow; } .status-task-done { background-color: green; } .a-event { background: linear-gradient(115deg, #28a745 25%, #34d058 49%, #34d058 46%, #28a745 73%); color: white; } .fc .fc-timegrid-slot { height: 2.5em !important; } .fc-event { margin: 0px !important; padding: 0px !important; } .event-task-day-week-grid { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .event_edit_task { display: flex; align-items: center; height: 100%; border-radius: 4px; padding: 5px; } .priority-indicator { width: 10px; margin-right: 5px; height: -webkit-fill-available; } .task-content { flex: 1; text-align: center; overflow: hidden; } .task-title, .task-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status-user { display: flex; gap: 5px; flex-direction: column; flex-wrap: wrap; justify-content: space-evenly; width: 6%; height: -webkit-fill-available; right: 10px; position: relative; } .status-circle, .user-circle { width: 15px; height: 15px; border-radius: 50%; display: inline-block; } .user-circle i { font-size: 0; } .img_legend_task { width: -webkit-fill-available; } .td_inventory_item_limit_hight { background-color: #ccffcc !important; } .td_inventory_item_limit_middle { background-color: #ffffcc !important; } .td_inventory_item_limit_low { background-color: #ffcccc !important; } .badge-invoice-Borrador, .badge-invoice-Emitida, .badge-invoice-Vencida { background-color: #ec1717; padding: 0 15px; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; color: #ffffff; cursor: pointer; } .badge-invoice-Pagada { background-color: #29cc97; padding: 0 15px; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; color: #ffffff; } .badge-invoice-Parcialmente_Pagada { background-color: #fd7e14; padding: 0 15px; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; color: #ffffff; cursor: pointer; } .board_task { display: flex; justify-content: space-between; } .column_task { background-color: #f9f9f9; border-radius: 5px; padding: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow-y: auto; } .column-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; background-color: #4285f4; } .column_task h2 { font-size: 18px; color: white; background-color: #4285f4; padding: 10px; margin: 0; border-radius: 5px 0 0 5px; flex-grow: 1; } .add-button { background-color: #4285f4; color: white; border: none; padding: 10px; font-size: 18px; cursor: pointer; border-radius: 0 5px 5px 0; margin-left: 10px; } .add-button:hover { background-color: #357ae8; } .dropdown_task { margin-left: 10px; position: relative; } .dropbtn_task { background-color: #4285f4; color: white; border: none; padding: 10px; font-size: 14px; cursor: pointer; border-radius: 5px; } .dropbtn_task:hover { background-color: #357ae8; } .task { background-color: #e7f0ff; margin: 10px 0; padding: 15px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); position: relative; } .task span { font-size: 14px; color: #666; position: absolute; top: 15px; right: 15px; } .task p { margin: 0; font-size: 16px; } .no-data { text-align: center; color: #999; margin-top: 20px; } .drop-target { height: 400px; width: 200px; min-width: 200px; background-color: gainsboro; } .drag-enter { outline-style: dashed; } .box { width: 100px; height: 100px; float: left; cursor: pointer; } @media only screen and (max-width: 500px) { .drop-target { height: 200px; width: 100px; min-width: 100px; background-color: gainsboro; } .box { width: 50px; height: 50px; } .box:nth-child(3) { clear: both; } } /* === Timeline Base === */ .timeline-wrapper { position: relative; margin-top: 4rem; } .timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: 3px; background-color: var(--bs-border-color, #e5e7eb); z-index: 0; } /* === Timeline Items === */ .timeline-item { position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4rem; } .timeline-item.flex-row { flex-direction: row; } .timeline-item.flex-row-reverse { flex-direction: row-reverse; } /* === Dot === */ .timeline-dot { z-index: 2; width: 20px; height: 20px; border-radius: 50%; background: var(--bs-body-bg); border: 6px solid var(--bs-primary); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.15); position: relative; transition: all 0.3s ease; } .timeline-item:hover .timeline-dot { background: var(--bs-primary); box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), 0.25); } /* === Card === */ .timeline-card { position: relative; background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color, #e5e7eb); border-radius: 1rem; padding: 2rem; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05); width: 400px; transition: all 0.35s ease; } .timeline-card h4 { color: var(--bs-body-color); font-weight: 700; margin-bottom: 0.75rem; transition: color 0.3s ease; } .timeline-card p { color: var(--bs-secondary-color, #6b7280); line-height: 1.5; transition: color 0.3s ease; } .timeline-card small { color: var(--bs-tertiary-color, #9ca3af); transition: color 0.3s ease; } /* === Hover Effect === */ .timeline-card:hover { transform: translateY(-5px); background: var(--bs-primary); box-shadow: 0 12px 24px rgba(var(--bs-primary-rgb), 0.35); border-color: var(--bs-primary); } .timeline-card:hover h4, .timeline-card:hover p, .timeline-card:hover small { color: #fff !important; } .timeline-card:hover .btn-outline-primary, .timeline-card:hover .btn-outline-secondary { color: var(--bs-primary); background-color: #fff; border-color: #fff; } .timeline-card:hover .btn-outline-primary:hover, .timeline-card:hover .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.85); } /* === Alternating Layout === */ .timeline-item.flex-row .timeline-card { margin-left: 2rem; } .timeline-item.flex-row-reverse .timeline-card { margin-right: 2rem; } .timeline-item.flex-row .timeline-dot { margin-left: calc(50% - 10px); } .timeline-item.flex-row-reverse .timeline-dot { margin-right: calc(50% - 10px); } /* === Responsive Mobile Layout === */ @media (max-width: 992px) { .timeline-line { left: 10px; transform: none; } .timeline-item { flex-direction: column !important; align-items: flex-start !important; margin-left: 2rem; } .timeline-card { width: 100%; margin: 1rem 0 0 1rem !important; } .timeline-dot { left: 0; margin: 0 !important; } } /* === Animation === */ .timeline-card { opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease forwards; } .timeline-item:nth-child(odd) .timeline-card { animation-delay: 0.1s; } .timeline-item:nth-child(even) .timeline-card { animation-delay: 0.25s; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } /* ============================================================ 🌓 Modo Oscuro (usa atributo del body data-layout-mode="dark") ============================================================ */ body[data-layout-mode=dark] .timeline-line { background-color: #2f2f2f; } body[data-layout-mode=dark] .timeline-card { background-color: #1c1c1e; border-color: #2a2a2d; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); } body[data-layout-mode=dark] .timeline-card h4 { color: #f3f4f6; } body[data-layout-mode=dark] .timeline-card p { color: #d1d5db; } body[data-layout-mode=dark] .timeline-card small { color: #E0E0E0; } body[data-layout-mode=dark] .timeline-dot { background: #1c1c1e; border: 6px solid var(--bs-primary); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.4); } /* Hover en modo oscuro */ body[data-layout-mode=dark] .timeline-card:hover { background: var(--bs-primary); box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); } body[data-layout-mode=dark] .timeline-card:hover h4, body[data-layout-mode=dark] .timeline-card:hover p, body[data-layout-mode=dark] .timeline-card:hover small { color: #fff !important; } body[data-layout-mode=dark] .timeline-card:hover .btn-outline-primary, body[data-layout-mode=dark] .timeline-card:hover .btn-outline-secondary { color: var(--bs-primary); background-color: #fff; border-color: #fff; } body[data-layout-mode=dark] .timeline-card:hover .btn-outline-primary:hover, body[data-layout-mode=dark] .timeline-card:hover .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.9); } div.image.resize { background-repeat: no-repeat; width: -webkit-fill-available; height: 400px; resize: both; overflow: auto; margin: 0 auto; background-size: contain; } .lds-roller { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px; } .lds-roller div:after { content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #1d7ad7; margin: -4px 0 0 -4px; } .loading-white .lds-roller div:after { background: white !important; } .lds-roller div:nth-child(1) { animation-delay: -0.036s; } .lds-roller div:nth-child(1):after { top: 63px; left: 63px; } .lds-roller div:nth-child(2) { animation-delay: -0.072s; } .lds-roller div:nth-child(2):after { top: 68px; left: 56px; } .lds-roller div:nth-child(3) { animation-delay: -0.108s; } .lds-roller div:nth-child(3):after { top: 71px; left: 48px; } .lds-roller div:nth-child(4) { animation-delay: -0.144s; } .lds-roller div:nth-child(4):after { top: 72px; left: 40px; } .lds-roller div:nth-child(5) { animation-delay: -0.18s; } .lds-roller div:nth-child(5):after { top: 71px; left: 32px; } .lds-roller div:nth-child(6) { animation-delay: -0.216s; } .lds-roller div:nth-child(6):after { top: 68px; left: 24px; } .lds-roller div:nth-child(7) { animation-delay: -0.252s; } .lds-roller div:nth-child(7):after { top: 63px; left: 17px; } .lds-roller div:nth-child(8) { animation-delay: -0.288s; } .lds-roller div:nth-child(8):after { top: 56px; left: 12px; } @keyframes lds-roller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Fix 2026-06-04: rightbar-overlay del tema Minia siempre oculto. */ .rightbar-overlay { display: none !important; } /* Fix 2026-06-05: SweetAlert2 siempre sobre cualquier componente Quasar, Bootstrap modal/offcanvas, HelpFloat, IaChatFloat, etc. Sin este override Swal aparece a z-index 1060 (sweetalert2.min.css), quedando detrás de q-notifications (9999), q-dialog__inner (9998), etc. */ .swal2-container { z-index: 999999 !important; } .swal2-backdrop-show { z-index: 999998 !important; } .w-fit-content { width: -moz-fit-content !important; width: fit-content !important; } .modal-dialog-slide-right { position: fixed; right: 0; margin: 0; height: 100%; width: 540px !important; } .modal-dialog-slide-right .modal-content { height: 100%; border-radius: 0; overflow-y: auto; } .modal-dialog-slide-right .modal-dialog { transform: translateX(100%); transition: transform 0.3s ease-out; height: 100%; } .modal.show .modal-dialog-slide-right .modal-dialog { transform: translateX(0); } .modal-body { overflow-y: auto; max-height: calc(100vh - 150px); padding: 15px; } @media (max-width: 500px) { .modal-dialog-slide-right { width: 100%; } .col-6.partial-class-field { flex: 0 0 100%; max-width: 100%; } } .f-right { float: right !important; } .f-left { float: left !important; } .btn-lightblue { background-color: #4e73df; color: #fff; } .text-lightblue { color: #4e73df; } [data-layout-mode=dark] .text-lightblue { color: #4e73df; } .btn-lightorange { background-color: #ffa726; color: #fff; } .text-lightorange { color: #ffa726; } [data-layout-mode=dark] .text-lightorange { color: #ffa726; } .btn-green-custom { background-color: #198754; color: #fff; } .text-green-custom { color: #198754; } [data-layout-mode=dark] .text-green-custom { color: #198754; } .btn-gray-custom { background-color: #566573; color: #fff; } [data-layout-mode=dark] .text-gray-custom { color: #566573; } .text-aqua-custom { color: #24C3C3; } .btn-aqua-custom { background-color: #24C3C3; color: #fff; } [data-layout-mode=dark] .text-aqua-custom { color: #24C3C3; } .q-table__bottom-item button { margin: 50px !important; } .pagination-btn { background-color: transparent; /* Color de fondo */ color: #616161; /* Color del icono */ border: none; /* Sin borde */ border-radius: 50%; /* Botones redondos */ width: 40px; /* Ancho del botón */ height: 40px; /* Altura del botón */ display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s; } .pagination-btn:disabled { background-color: #bdc3c7; /* Color de fondo deshabilitado */ cursor: not-allowed; } .pagination-btn:hover:not(:disabled) { background-color: #bdc3c7; /* Color de fondo al pasar el ratón */ } .pagination-btn i { font-size: 18px; /* Tamaño del icono */ } .pagination-text { margin: 0 16px; /* Ajusta el margen según sea necesario */ } .select_component_checkbox { margin-bottom: 400px !important; } .highlight-difference { background-color: #ffffcc; /* Color amarillo claro */ } .choices__list--dropdown { z-index: 9999 !important; } /* ============================================================================ * Iconos del sidebar con color de referencia por módulo (navegación visual). * * Feather renderiza como