/* ============================================================================ DataPOS · Sistema de diseño (rediseño) — Tailwind v4 + tokens ---------------------------------------------------------------------------- IMPORTANTE: NO usamos cascade layers. Las páginas legacy cargan Bootstrap 3 / Limitless SIN @layer, y en CSS los estilos sin-layer ganan SIEMPRE a los con-layer. Como app.css se carga ÚLTIMO, al quedar sin-layer gana por orden + especificidad. Importamos utilities sin preflight para no resetear legacy. Soporta tema claro/oscuro vía . ========================================================================== */ @import "tailwindcss/theme.css"; @import "tailwindcss/utilities.css"; /* Tokens de Tailwind mapeados a las CSS vars runtime → utilidades theme-aware */ @theme { --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-2: var(--surface-2); --color-elevated: var(--elevated); --color-ink: var(--ink); --color-muted: var(--muted); --color-primary: #266797; /* azul de marca DataPOS */ --color-primary-2: #2f86c9; --color-violet: #7c6cf5; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-brand: #cf7f33; /* naranja del logo */ --color-brand-navy: #1e3f5c; /* navy del logo */ --radius-card: 20px; --radius-btn: 14px; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* --------------------------------------------------------------------------- Tokens runtime por tema --------------------------------------------------------------------------- */ :root, [data-theme="dark"] { --bg: #0a0e17; --surface: #121a2b; --surface-2: #162033; --elevated: #1c2740; --border-soft: rgba(255,255,255,.06); --ink: #f8fafc; --muted: #8b95a8; --sidebar-bg: linear-gradient(180deg, #0c1322 0%, #0a0e17 100%); --sidebar-ink: #b7c0d4; --sidebar-border: rgba(255,255,255,.06); --topbar-bg: rgba(12,18,33,.7); --primary: #266797; --primary-2: #2f86c9; --violet: #7c6cf5; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --brand: #cf7f33; /* naranja del logo */ --brand-navy: #1e3f5c; /* navy del logo */ --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5); --shadow-glow: 0 8px 30px -6px rgba(38,103,151,.55); color-scheme: dark; } [data-theme="light"] { --bg: #f4f6fb; --surface: #ffffff; --surface-2: #f7f9fc; --elevated: #eef2f8; --border-soft: rgba(15,23,42,.09); --ink: #0f172a; --muted: #64748b; --sidebar-bg: #ffffff; --sidebar-ink: #475569; --sidebar-border: rgba(15,23,42,.08); --topbar-bg: rgba(255,255,255,.8); --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 10px 30px -16px rgba(15,23,42,.18); --shadow-glow: 0 8px 24px -8px rgba(38,103,151,.45); color-scheme: light; } body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } [x-cloak] { display: none !important; } /* =========================================================================== COMPONENTES DEL CHROME =========================================================================== */ /* ---- Layout shell ---- */ .dp-app { display: flex; min-height: 100vh; background: var(--bg); } .dp-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .dp-content { flex: 1; padding: 18px 32px 28px; min-width: 0; } .dp-footer { padding: 16px 32px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border-soft); } /* ---- Page header (solo breadcrumb; el título va en el topbar) ---- */ .dp-page-header { margin-bottom: 16px; } /* ---- Breadcrumb ---- */ .dp-breadcrumb { display: flex; align-items: center; gap: 8px; margin-top: 0; font-size: 13px; color: var(--muted); } .dp-breadcrumb a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .dp-breadcrumb a:hover { color: var(--ink); } .dp-breadcrumb__sep { opacity: .5; } .dp-breadcrumb__current { color: var(--ink); font-weight: 500; } /* ---- Sidebar ---- */ .dp-sidebar { width: 256px; flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .dp-sidebar__brand { display: flex; align-items: center; justify-content: center; height: 62px; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid var(--sidebar-border); } .dp-sidebar__brand img { height: 40px; width: auto; max-width: 100%; } .dp-logo--light { display: none; } .dp-logo--icon-dark, .dp-logo--icon-light { display: none; } [data-theme="light"] .dp-logo--dark { display: none; } [data-theme="light"] .dp-logo--light { display: inline-block; } /* Importes en tema claro: usar el azul/verde del calendario del tablero (mas oscuros que el celeste de dark) */ [data-theme="light"] .dp-page .datatable-ajax td.text-right, [data-theme="light"] .dp-page .tabla-impuestos td.text-right { color: #4076b2; } [data-theme="light"] .dp-page .datatable-ajax td.liq-acred { color: #16a34a !important; } /* Texto de las celdas de tabla: menos contraste para un look mas moderno (blanco apagado en dark, plomo en light) */ .dp-page .datatable-ajax tbody td { color: #d7dee8; vertical-align: middle !important; } [data-theme="light"] .dp-page .datatable-ajax tbody td { color: #374151; } /* select2 single dentro de filas de tabla (combos de estado): compacto y centrado, no tan redondeado */ .dp-page .datatable-ajax tbody .select2-container { vertical-align: middle; } .dp-page .datatable-ajax tbody .select2-container--default .select2-selection--single { height: 32px !important; min-height: 32px !important; border-radius: 8px !important; } .dp-page .datatable-ajax tbody .select2-selection--single .select2-selection__rendered { line-height: 32px !important; padding-left: 10px; } .dp-page .datatable-ajax tbody .select2-selection--single .select2-selection__arrow { height: 30px !important; } /* Boton de descarga (Swal export) - verde tipo Excel, global (el Swal se monta fuera de .dp-page) */ .dp-btn-excel { background: #1d8a4e !important; color: #fff !important; border: 0 !important; border-radius: 10px; font-weight: 600; } .dp-btn-excel:hover { background: #17703f !important; color: #fff !important; } .dp-btn-excel i { color: #fff !important; } /* ---- Sidebar colapsado (solo íconos) ---- */ .dp-collapsed .dp-sidebar { width: 74px; } .dp-collapsed .dp-sidebar__brand { padding: 18px 0; justify-content: center; } .dp-collapsed .dp-logo--dark, .dp-collapsed .dp-logo--light { display: none; } .dp-collapsed .dp-logo--icon-dark { display: block; height: 36px; width: auto; object-fit: contain; } [data-theme="light"].dp-collapsed .dp-logo--icon-dark { display: none; } [data-theme="light"].dp-collapsed .dp-logo--icon-light { display: block; height: 36px; width: auto; object-fit: contain; } .dp-collapsed .dp-nav { padding: 12px 10px; } .dp-collapsed .dp-nav__header { display: none; } .dp-collapsed .dp-nav__item { justify-content: center; padding: 12px 0; gap: 0; } .dp-collapsed .dp-nav__item span { display: none; } .dp-collapsed .dp-nav__item .icon-arrow-down22 { display: none; } .dp-collapsed .dp-nav__sub { display: none !important; } /* Tooltip de seccion al pasar el mouse (solo sidebar colapsado) */ .dp-collapsed .dp-sidebar { z-index: 50; } .dp-collapsed .dp-nav { overflow: visible; } .dp-collapsed .dp-nav__item { position: relative; } .dp-collapsed .dp-nav__item::after { content: attr(data-tip); position: absolute; left: calc(100% + 16px); top: 50%; transform: translateY(-50%) translateX(-8px) scale(.95); transform-origin: left center; background: var(--elevated); color: var(--ink); border: 1px solid var(--border-soft); border-radius: 11px; padding: 11px 17px; font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: var(--shadow-card); opacity: 0; pointer-events: none; z-index: 60; transition: opacity .2s ease, transform .22s cubic-bezier(.34,1.56,.64,1); } .dp-collapsed .dp-nav__item::before { content: ''; position: absolute; left: calc(100% + 5px); top: 50%; transform: translateY(-50%) translateX(-8px); border: 6px solid transparent; border-right-color: var(--elevated); filter: drop-shadow(-1px 0 0 var(--border-soft)); opacity: 0; pointer-events: none; z-index: 61; transition: opacity .2s ease, transform .22s cubic-bezier(.34,1.56,.64,1); } .dp-collapsed .dp-nav__item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } .dp-collapsed .dp-nav__item:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); } /* Submenu (Conciliar): titulo solo visible en el flyout colapsado */ .dp-nav__sub-title { display: none; } /* Flyout del submenu cuando la barra esta colapsada */ .dp-collapsed .dp-nav__group { position: relative; } /* el item principal del grupo NO muestra tooltip (usa el flyout) */ .dp-collapsed .dp-nav__group > .dp-nav__item::after, .dp-collapsed .dp-nav__group > .dp-nav__item::before { display: none !important; } .dp-collapsed .dp-nav__group .dp-nav__sub { display: flex !important; height: auto !important; overflow: visible !important; position: absolute; left: calc(100% + 12px); top: 0; z-index: 60; margin: 0; padding: 8px; border-left: 0; min-width: 210px; background: var(--elevated); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-8px) scale(.97); transform-origin: left center; transition: opacity .2s ease, transform .22s cubic-bezier(.34,1.56,.64,1); } /* puente invisible para no perder el hover en el gap */ .dp-collapsed .dp-nav__group .dp-nav__sub::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px; } .dp-collapsed .dp-nav__group:hover .dp-nav__sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0) scale(1); } .dp-collapsed .dp-nav__group .dp-nav__sub .dp-nav__item { justify-content: flex-start; padding: 9px 12px; gap: 10px; } .dp-collapsed .dp-nav__group .dp-nav__sub .dp-nav__item span { display: inline; } /* sin tooltip en las sub-opciones del flyout (ya muestran su propio texto) */ .dp-collapsed .dp-nav__sub .dp-nav__item::after, .dp-collapsed .dp-nav__sub .dp-nav__item::before { content: none !important; display: none !important; } .dp-sidebar__user { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sidebar-border); } .dp-sidebar__avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; background: var(--elevated); } .dp-sidebar__name { font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.2; } .dp-sidebar__meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; } .dp-nav { padding: 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; } .dp-nav__header { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 6px; font-weight: 600; } .dp-nav__item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--sidebar-ink); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .15s, color .15s; } .dp-nav__item i { font-size: 17px; width: 20px; text-align: center; opacity: .9; } .dp-nav__item:hover { background: var(--elevated); color: var(--ink); } .dp-nav__item.is-active { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; box-shadow: var(--shadow-glow); } .dp-nav__item.is-active i { opacity: 1; } .dp-nav__sub { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 2px 16px; padding-left: 14px; border-left: 1px solid var(--border-soft); } .dp-nav__sub .dp-nav__item { padding: 9px 12px; font-size: 13px; } /* ---- Topbar ---- */ .dp-topbar { height: 62px; flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 0 26px; background: var(--topbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 30; } .dp-topbar > * { flex: 0 0 auto; } .dp-topbar__spacer { flex: 1 1 auto; } .dp-topbar__title { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-iconbtn { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--elevated); color: var(--muted); border: 1px solid var(--border-soft); cursor: pointer; transition: color .15s, background .15s; font-size: 17px; } .dp-iconbtn:hover { color: var(--ink); } /* ---- Dropdown de usuario (Alpine) ---- */ .dp-userbtn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 6px; border-radius: 12px; background: var(--elevated); border: 1px solid var(--border-soft); color: var(--ink); cursor: pointer; font-size: 14px; } .dp-userbtn img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; } .dp-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .01em; text-transform: uppercase; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 45%, transparent); } .dp-userbtn__name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 16px; box-shadow: var(--shadow-card); padding: 8px; z-index: 50; } .dp-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14px; } .dp-menu a:hover { background: var(--elevated); } .dp-menu__sep { height: 1px; background: var(--border-soft); margin: 6px 4px; } /* ---- Card / botón del sistema nuevo (para páginas migradas) ---- */ .dp-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 22px; } .dp-btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 11px 20px; border-radius: var(--radius-btn); font-weight: 600; font-size: 14px; border: 0; cursor: pointer; text-decoration: none; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; } .dp-btn:hover { filter: brightness(1.06); } /* ---- SweetAlert: modal de token (moderno, theme-aware) ---- */ .dp-swal.swal2-popup { width: 400px !important; background: var(--surface); color: var(--ink); border: 1px solid var(--border-soft); border-radius: 22px; } .dp-swal .swal2-title { color: var(--ink); font-weight: 700; } .dp-token { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 6px 0 2px; } .dp-token__code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 40px; font-weight: 800; letter-spacing: 8px; white-space: nowrap; color: var(--ink); background: var(--elevated); border: 1px solid var(--border-soft); border-radius: 16px; padding: 16px 22px 16px 30px; line-height: 1; } .dp-token__copy { display: inline-flex; align-items: center; gap: 7px; background: var(--elevated); color: var(--ink); border: 1px solid var(--border-soft); border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 13px; cursor: pointer; } .dp-token__copy:hover { border-color: var(--primary); color: var(--primary); } .dp-token__bar { width: 100%; height: 8px; background: var(--elevated); border-radius: 999px; overflow: hidden; } .dp-token__bar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); border-radius: 999px; transition: width 1s linear; } .dp-token__time { font-size: 13px; color: var(--muted); } /* ---- SweetAlert: tema global dark/light (theme-aware, todos los diálogos) ---- */ .swal2-popup { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--border-soft); border-radius: 20px; } .swal2-title { color: var(--ink) !important; } .swal2-html-container, .swal2-content { color: var(--ink) !important; } .swal2-actions .swal2-styled { border-radius: 12px; box-shadow: none !important; font-weight: 600; } .swal2-close { color: var(--muted); } .swal2-close:hover { color: var(--ink); } .swal2-input, .swal2-textarea { background: var(--elevated); color: var(--ink); border: 1px solid var(--border-soft); border-radius: 12px; } /* =========================================================================== PÁGINAS MIGRADAS — estilos reutilizables (scopeados a .dp-page) Restyle de form-control, select2, DataTables y tablas. No toca legacy. =========================================================================== */ /* ---- Botones ---- */ .dp-btn--ghost { background: var(--elevated); color: var(--ink); border: 1px solid var(--border-soft); } .dp-btn--ghost:hover { filter: none; background: color-mix(in srgb, var(--elevated) 70%, var(--ink) 8%); } .dp-btn--danger { background: var(--danger); } .dp-btn--success { background: var(--success); } /* ---- Toolbar de tabla ---- */ .dp-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .dp-toolbar__spacer { flex: 1 1 auto; } /* ---- Formularios ---- */ .dp-form { max-width: 900px; } .dp-field { margin-bottom: 0; } .dp-field > label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 7px; } .dp-field .req { color: var(--danger); } .dp-form-actions { display: flex; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border-soft); } /* Secciones agrupadas */ .dp-form-section { margin-bottom: 26px; } .dp-form-section__title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; } .dp-form-section__title i { font-size: 15px; } .dp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; } .dp-field--full { grid-column: 1 / -1; } @media (max-width: 700px) { .dp-form-grid { grid-template-columns: 1fr; } } .dp-page .form-control { width: 100%; height: 38px; padding: 7px 14px; background: var(--elevated); color: var(--ink); border: 1px solid var(--border-soft); border-radius: 10px; font-size: 14px; transition: border-color .15s, box-shadow .15s; } .dp-page textarea.form-control { height: auto; min-height: 90px; } .dp-page .form-control::placeholder { color: var(--muted); opacity: .7; } .dp-page .form-control:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); } .dp-page label.error { color: var(--danger); font-size: 12px; margin-top: 5px; display: block; } .dp-page .form-control.error { border-color: var(--danger); } /* ---- select2 (v4) ---- */ .dp-page .select2-container { width: 100% !important; } .dp-page .select2-container--default .select2-selection--single { height: 38px; background: var(--elevated); border: 1px solid var(--border-soft); border-radius: 10px; display: flex; align-items: center; } .dp-page .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: normal; padding-left: 14px; } .dp-page .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); } /* select2 single: una sola flecha. El theme legacy dibuja un icono Icomoon en .select2-selection__arrow:after con color #fafafa (blanco) -> invisible en claro. Lo hacemos theme-aware (var(--muted)) y ocultamos el (triangulo) para no duplicar. */ .dp-page .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none !important; } .dp-page .select2-container--default .select2-selection--single .select2-selection__arrow:after { color: var(--ink) !important; } /* Select nativo del operador de importe (~ / = ...): chevron propio un poco mas adentro */ .dp-page select.dp-ope-importe-op { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 9px center; background-size: 13px; padding-right: 24px; } [data-theme="dark"] .dp-page select.dp-ope-importe-op { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmMWY1ZjkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNiA5bDYgNiA2LTYiLz48L3N2Zz4="); } [data-theme="light"] .dp-page select.dp-ope-importe-op { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwZjE3MmEiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNiA5bDYgNiA2LTYiLz48L3N2Zz4="); } /* select2 multiple: tags centrados verticalmente en la caja (no pegados arriba) */ .dp-page .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 30px; padding: 3px 8px; margin: 0; box-sizing: border-box; } /* botones de la toolbar de filtros: misma altura/redondeo que los inputs */ .dp-page .dp-ope-actions .btn { height: 38px; border-radius: 10px; } /* combo multiple (tarjetas): misma altura/redondeo reducidos (gana a los estilos por pagina) */ html .dp-page .select2-container--default .select2-selection--multiple { min-height: 38px; border-radius: 10px; } /* campo de busqueda inline compacto para que el combo no quede mas alto */ .dp-page .select2-selection--multiple .select2-search--inline .select2-search__field { margin-top: 0; padding-top: 0; padding-bottom: 0; height: 28px; line-height: 28px; } .dp-page .select2-selection--multiple .select2-selection__choice { margin: 0 !important; } .dp-page .select2-selection--multiple .select2-search--inline { margin: 0; } .select2-dropdown { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; } .select2-container--default .select2-results__option { color: var(--muted); font-weight: 400; } .select2-container--default .select2-results__group { font-weight: 600; color: var(--muted); font-size: 11px; letter-spacing: .03em; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: color-mix(in srgb, #4076b2 18%, transparent); color: var(--ink); } .select2-container--default .select2-results__option[aria-selected=true] { background: var(--elevated); } .select2-search--dropdown .select2-search__field { background: var(--elevated); color: var(--ink); border: 1px solid var(--border-soft); border-radius: 8px; } .select2-search--dropdown:after { color: var(--muted) !important; } /* ---- DataTables ---- */ .dp-page .dataTables_wrapper { color: var(--ink); } .dp-page .dataTables_filter { float: none; text-align: left; margin-bottom: 14px; } .dp-page .dataTables_filter label { color: var(--muted); font-weight: 600; font-size: 13px; } .dp-page .dataTables_filter input { margin-left: 8px; min-width: 260px; height: 42px; padding: 8px 14px; background: var(--elevated); color: var(--ink); border: 1px solid var(--border-soft); border-radius: 999px; font-size: 14px; } .dp-page .dataTables_filter input:focus { outline: 0; border-color: var(--primary); } /* Bootstrap collapse (.collapse.in) vs utilidad Tailwind .collapse (visibility:collapse): restaurar visibilidad al abrir */ .collapse.in { visibility: visible !important; } /* Popup detalle (tooltip) en tema oscuro: bordes en azul de importe + etiquetas mas claras */ [data-theme="dark"] .tooltipster-sidetip.tooltipster-light .tooltipster-box { border-color: rgba(64,118,178,.55); } [data-theme="dark"] .tooltipster-sidetip.tooltipster-light.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: rgba(64,118,178,.55); } [data-theme="dark"] .tooltipster-sidetip.tooltipster-light.tooltipster-left .tooltipster-arrow-border { border-left-color: rgba(64,118,178,.55); } [data-theme="dark"] .tooltipster-sidetip.tooltipster-light.tooltipster-right .tooltipster-arrow-border { border-right-color: rgba(64,118,178,.55); } [data-theme="dark"] .tooltipster-sidetip.tooltipster-light.tooltipster-top .tooltipster-arrow-border { border-top-color: rgba(64,118,178,.55); } [data-theme="dark"] .info-tooltip-item { border-bottom-color: rgba(64,118,178,.32); } [data-theme="dark"] .info-tooltip-header { border-bottom-color: rgba(64,118,178,.45); } [data-theme="dark"] .info-tooltip-label { color: #aab4c4; } /* Tablas con scrollX: que header y cuerpo llenen el ancho aunque no haya datos (evita columnas apretadas a la izquierda) */ .dp-page .dataTables_scrollHeadInner, .dp-page .dataTables_scrollHeadInner > table, .dp-page .dataTables_scrollBody > table { min-width: 100% !important; } .dp-page .datatable-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 6px; } .dp-page .dataTables_length { order: 0; margin-right: auto; } .dp-page .dataTables_length label { color: var(--muted); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; margin: 0; } .dp-page .dataTables_paginate { order: 1; float: none; text-align: right; padding-top: 0; } .dp-page .dataTables_info { color: var(--muted); font-size: 13px; order: 2; width: 100%; text-align: right; padding-top: 0; } .dp-page .dataTables_paginate .paginate_button { display: inline-block; min-width: 34px; text-align: center; padding: 6px 11px; margin-left: 4px; border-radius: 9px; color: var(--muted) !important; border: 1px solid transparent; cursor: pointer; font-size: 13px; } .dp-page .dataTables_paginate .paginate_button:hover { background: var(--elevated); color: var(--ink) !important; border-color: var(--border-soft); } .dp-page .dataTables_paginate .paginate_button.current { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff !important; } .dp-page .dataTables_paginate .paginate_button.disabled { opacity: .4; cursor: default; } .dp-page table.dataTable { width: 100% !important; border-collapse: collapse; } .dp-page table.dataTable thead th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 12px 12px; border-bottom: 1px solid var(--border-soft); } .dp-page table.dataTable tbody td { padding: 13px 12px; border-bottom: 1px solid var(--border-soft); color: var(--ink); font-size: 14px; } .dp-page table.dataTable tbody tr:hover { background: var(--elevated); } .dp-page table.dataTable thead .sorting:after, .dp-page table.dataTable thead .sorting_asc:after, .dp-page table.dataTable thead .sorting_desc:after { opacity: .4; } /* badges de estado */ .dp-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; } .dp-badge--ok { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); } .dp-badge--off { background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--muted); } .dp-page .fab, .dp-page .fas { font-size: 19px; } /* acciones por fila (editar/borrar) */ .dp-rowactions { display: inline-flex; gap: 8px; } .dp-rowactions a { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background .15s; } .dp-rowactions a.edit { color: var(--primary); } .dp-rowactions a.edit:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); } /* en dark el azul de marca queda muy oscuro sobre el fondo → usar el celeste de importes */ [data-theme="dark"] .dp-rowactions a.edit { color: rgb(100,189,245); } [data-theme="dark"] .dp-rowactions a.edit:hover { background: color-mix(in srgb, rgb(100,189,245) 16%, transparent); } .dp-rowactions a.del { color: var(--danger); } .dp-rowactions a.del:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); } /* ===== Badges/etiquetas dentro de tablas DataTables (marca, tipo, D/C, #) ===== */ /* Estilo moderno unificado: letra unica -> cuadrado; texto -> pill. El color lo aportan las clases bg-* de Limitless o el background-color inline del render. */ .dp-page table.dataTable td .label { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1; color: #fff; border: 0; vertical-align: middle; box-shadow: 0 1px 2px rgba(0,0,0,.18); } .dp-page table.dataTable td .label.ico-marca { padding: 0; width: 22px; margin-right: 8px; } /* Icono "i" de info (abre popup) en tablas de cruzar — chip clickeable */ .dp-page .dp-info-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; margin-right: 9px; font-size: 12px; font-style: normal; cursor: pointer; vertical-align: middle; background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent); transition: background .15s, transform .08s; } .dp-page .dp-info-ico:hover { background: color-mix(in srgb, var(--primary) 26%, transparent); } .dp-page .dp-info-ico:active { transform: scale(.92); } [data-theme="dark"] .dp-page .dp-info-ico { color: rgb(100,189,245); border-color: rgba(100,189,245,.40); background: rgba(100,189,245,.14); } [data-theme="dark"] .dp-page .dp-info-ico:hover { background: rgba(100,189,245,.26); } /* ---- Re-tema de componentes Bootstrap-3 legacy dentro de páginas migradas ---- */ .dp-page .panel, .dp-page .panel-flat { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .dp-page .panel-heading { display: none; } .dp-page .panel-body { padding: 24px; } .dp-page label, .dp-page .control-label { color: var(--muted); font-weight: 600; font-size: 13px; display: inline-block; margin-bottom: 7px; } .dp-page .panel.panel-flat .panel-body { padding: 28px; } /* gana a la regla de Limitless que pone padding-top:0 */ .dp-page form > .row { margin-bottom: 16px; } /* botones QR/token/borrar del colaborador: alinear con el input + menos redondeo + separación */ .dp-page #btnQR, .dp-page #btnToken, .dp-page #btnDeleteQR { margin-top: 33px !important; height: 44px !important; border-radius: 10px !important; } .dp-page #btnQR { margin-left: 14px !important; } .dp-page #btnToken, .dp-page #btnDeleteQR { margin-left: 8px !important; } .dp-page h1, .dp-page h2, .dp-page h3, .dp-page h4, .dp-page h5, .dp-page h6 { color: var(--ink); } /* eye toggle: centrado vertical y dentro del input (despejando el botón Validar) */ .dp-page .input-group .glyphicon-eye-open { top: 0; height: 44px; line-height: 44px; } .dp-page .input-group .glyphicon-eye-open:not(.mvIconEyes) { right: 128px; } .dp-page hr { border: 0; border-top: 1px solid var(--border-soft); } .dp-page .laColaborador { color: var(--ink); font-weight: 600; } /* feedback icon a la izquierda: restaurar el espacio para que no pise el texto */ .dp-page .has-feedback-left .form-control { padding-left: 42px; } .dp-page .has-feedback-left .form-control-feedback { left: 0; right: auto; top: 0; width: 42px; height: 44px; line-height: 44px; text-align: center; } .dp-page .btn { border-radius: var(--radius-btn); border: 0; font-weight: 600; font-size: 14px; padding: 9px 16px; box-shadow: none; } .dp-page .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; } .dp-page .btn-success { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; } .dp-page .btn-danger { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; } .dp-page .btn-default { background: var(--elevated); color: var(--ink); border: 1px solid var(--border-soft); } .dp-page .btn:hover { filter: brightness(1.06); } .dp-page .form-control-feedback { color: var(--muted); } /* Alerts (BS3) re-tematizadas: callout con acento a la izquierda */ .dp-page .alert { border-radius: 12px; border: 1px solid var(--border-soft); border-left-width: 3px; padding: 14px 16px; font-size: 13.5px; } /* info = teal (se diferencia del azul de inputs/primary) */ .dp-page .alert-info { background: color-mix(in srgb, #14b8a6 9%, var(--surface)); border-color: color-mix(in srgb, #14b8a6 30%, transparent); border-left-color: #14b8a6; color: var(--ink); } .dp-page .alert-info > i, .dp-page .alert-info .icon-info22 { color: #14b8a6; } .dp-page .alert-danger { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 32%, transparent); border-left-color: var(--danger); color: var(--ink); } .dp-page .alert-success { background: color-mix(in srgb, var(--success) 12%, var(--surface)); border-color: color-mix(in srgb, var(--success) 32%, transparent); border-left-color: var(--success); color: var(--ink); } .dp-page .alert strong { color: var(--ink); } .dp-page .alert .close { color: var(--muted); opacity: .8; } /* BS3 le saca el redondeo derecho a los inputs en input-group → forzar completo */ .dp-page .input-group .form-control { border-radius: var(--radius-btn) !important; } .dp-page .input-group-btn .btn { margin-left: 8px; } .dp-page .glyphicon-eye-open, .dp-page .glyphicon { color: var(--muted); cursor: pointer; } .dp-page .icon-cross { color: var(--danger); cursor: pointer; } /* tabla simple (ej. establecimientos en marca.html) */ .dp-page .panel table { width: 100%; } .dp-page .panel table thead th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--border-soft); } .dp-page .panel table tbody td { padding: 8px; border-bottom: 1px solid var(--border-soft); color: var(--ink); vertical-align: top; } /* labels/badges Bootstrap-3 */ .dp-page .label-success { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); padding: 4px 11px; border-radius: 999px; font-weight: 600; } .dp-page .label-default { background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--muted); padding: 4px 11px; border-radius: 999px; font-weight: 600; } /* =========================================================================== LOGIN (glassmorphism, siempre dark) =========================================================================== */ body.login-cover, body.login-container { background: radial-gradient(1100px 560px at 75% -12%, rgba(47,134,201,.30), transparent 60%), radial-gradient(820px 480px at 6% 114%, rgba(99,102,241,.16), transparent 55%), var(--bg) !important; min-height: 100vh; overflow: hidden; } /* Fondo aurora animado (blobs que derivan suave) */ body.login-cover::before, body.login-container::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; background: radial-gradient(38% 38% at 22% 28%, rgba(47,134,201,.40), transparent 62%), radial-gradient(34% 34% at 80% 74%, rgba(124,108,245,.28), transparent 62%), radial-gradient(30% 30% at 64% 16%, rgba(100,189,245,.20), transparent 60%), radial-gradient(26% 26% at 14% 82%, rgba(207,127,51,.12), transparent 60%); filter: blur(28px); animation: dpAurora 24s ease-in-out infinite alternate; } /* Grilla técnica sutil, desvanecida hacia los bordes */ body.login-cover::after, body.login-container::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 70%); mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 70%); } @keyframes dpAurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(3%, 2%, 0) scale(1.08); } 100% { transform: translate3d(-2%, 3%, 0) scale(1.04); } } @media (prefers-reduced-motion: reduce) { body.login-cover::before, body.login-container::before { animation: none; } } body.login-cover .page-content, body.login-container .page-content, body.login-cover .page-container, body.login-container .page-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; } body.login-cover .content, body.login-container .content { width: 100%; } .dp-login-card { width: 430px !important; max-width: 92vw; margin: 0 auto; background: rgba(18,26,43,.72) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.09) !important; border-radius: 24px !important; box-shadow: 0 30px 80px -28px rgba(0,0,0,.75) !important; overflow: hidden; } .dp-login-card .nav-tabs { border: 0 !important; display: flex; gap: 4px; padding: 12px 12px 0; background: transparent; } .dp-login-card .nav-tabs > li { float: none; flex: 1; margin: 0; } .dp-login-card .nav-tabs > li > a { border: 0 !important; border-radius: 10px; color: var(--muted); background: transparent !important; margin: 0; text-align: center; } .dp-login-card .nav-tabs > li.active > a { background: var(--elevated) !important; } .dp-login-card .nav-tabs > li > a h6 { margin: 0; font-size: 14px; font-weight: 700; color: inherit; } .dp-login-card .nav-tabs > li.active > a h6 { color: var(--ink); } .dp-login-card .panel-body { padding: 8px 30px 30px !important; background: transparent !important; } .dp-login-card .content-group { color: var(--ink); text-align: center; margin-bottom: 20px; font-size: 17px; font-weight: 700; } .dp-login-card .content-group small { color: var(--muted); font-weight: 400; font-size: 13px; } .dp-login-card .login-options label, .dp-login-card .help-block, .dp-login-card .checkbox label, .dp-login-card .content-divider { color: var(--muted); } .dp-login-card a, .dp-login-card .help-block a { color: var(--primary-2); cursor: pointer; } .dp-login__logo { display: block; margin: 16px auto 8px; height: 48px; } .dp-login__sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 18px; } .dp-login-card .content-divider span { background: #15203a; color: var(--muted); } .dp-login-card .checkbox label, .dp-login-card .checkbox-inline { color: var(--muted); } /* botones del login → gradiente de marca */ .dp-page .btn.bg-blue, .dp-page .btn.bg-indigo-400 { background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important; color: #fff !important; } /* modales del login en dark + buscador super-usuario */ .modal-content.login-form { background: var(--surface) !important; color: var(--ink); border: 1px solid var(--border-soft); border-radius: 18px; } .modal-content.login-form .content-group { color: var(--ink); } .modal-content.login-form .content-group small, .modal-content.login-form .text-muted { color: var(--muted) !important; } .dp-page #resultados-busqueda { background: var(--surface) !important; border-color: var(--border-soft) !important; } .dp-page .resultado-item { color: var(--ink) !important; border-color: var(--border-soft) !important; } .dp-page .resultado-item:hover { background: var(--elevated) !important; } .dp-page #cliente-seleccionado { background: var(--elevated) !important; } /* ---- daterangepicker (theme-aware) ---- */ .daterangepicker{ background:var(--surface) !important; border:1px solid var(--border-soft) !important; border-radius:14px !important; box-shadow:var(--shadow-card) !important; color:var(--ink) !important; font-family:inherit !important; } .daterangepicker:after, .daterangepicker:before{ display:none !important; } .daterangepicker .calendar-table, .daterangepicker .calendar, .daterangepicker .drp-calendar, .daterangepicker .ranges, .daterangepicker .calendar-table table, .daterangepicker .left, .daterangepicker .right{ background:transparent !important; border:0 !important; box-shadow:none !important; } .daterangepicker th, .daterangepicker td{ color:var(--ink) !important; } .daterangepicker th.month{ color:var(--ink) !important; font-weight:700 !important; } .daterangepicker th.available:hover, .daterangepicker td.available:hover{ background:var(--elevated) !important; } .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span{ border-color:var(--muted) !important; } .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date{ background:transparent !important; color:var(--muted) !important; opacity:.45 !important; } .daterangepicker td.in-range{ background:color-mix(in srgb, var(--primary) 16%, transparent) !important; color:var(--ink) !important; } .daterangepicker td.active, .daterangepicker td.active:hover{ background:var(--primary) !important; color:#fff !important; } .daterangepicker .form-control, .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect, .daterangepicker select.monthselect, .daterangepicker select.yearselect{ background:var(--elevated) !important; color:var(--ink) !important; border:1px solid var(--border-soft) !important; border-radius:8px !important; } .daterangepicker label, .daterangepicker .calendar-time{ color:var(--muted) !important; } .daterangepicker .applyBtn{ background:linear-gradient(135deg,var(--primary),var(--primary-2)) !important; color:#fff !important; border:0 !important; border-radius:10px !important; } .daterangepicker .cancelBtn{ background:var(--elevated) !important; color:var(--ink) !important; border:1px solid var(--border-soft) !important; border-radius:10px !important; } .daterangepicker .ranges li:hover{ background:var(--elevated) !important; } .daterangepicker .ranges li.active{ background:var(--primary) !important; color:#fff !important; } /* ---- Restyle del multiselect de comercios (plugin jQuery) ---- */ .dp-commerce { width: 250px; } .dp-commerce > select { display: none; } /* el plugin lo reemplaza */ .dp-commerce .btn-group { width: 100%; } .dp-commerce .multiselect-container { display: none; } .dp-commerce .btn-group.open .multiselect-container { display: block; } .dp-commerce .multiselect.btn, .dp-commerce button.multiselect { position: relative; width: 100%; height: 40px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--elevated) !important; color: var(--ink) !important; border: 1px solid var(--border-soft) !important; border-radius: 12px !important; padding: 0 34px 0 16px !important; line-height: 38px !important; font-size: 14px !important; box-shadow: none !important; } .dp-commerce .multiselect .caret { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); margin: 0 !important; float: none; } .dp-commerce .multiselect-container.dropdown-menu { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow-card); padding: 8px; margin-top: 6px; } .dp-commerce .multiselect-container > li > a { color: var(--ink); border-radius: 8px; padding: 6px 10px; } .dp-commerce .multiselect-container > li > a:hover, .dp-commerce .multiselect-container > li.active > a { background: var(--elevated); } .dp-commerce .multiselect-container .multiselect-filter .form-control { background: var(--elevated); color: var(--ink); border: 1px solid var(--border-soft); border-radius: 8px; } /* Dropdown Bootstrap legacy dentro de paginas migradas (ej: Exportar) */ .dp-page .dropdown-menu { background: var(--surface) !important; border: 1px solid var(--border-soft) !important; border-radius: 12px !important; box-shadow: var(--shadow-card) !important; padding: 6px !important; margin-top: 6px; } .dp-page .dropdown-menu > li > a { color: var(--ink) !important; border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; transition: background .15s, color .15s; } .dp-page .dropdown-menu > li > a > i { color: var(--muted); } .dp-page .dropdown-menu > li > a:hover, .dp-page .dropdown-menu > li > a:focus { background: var(--elevated) !important; color: var(--ink) !important; } .dp-page .dropdown-menu > li > a:hover > i { color: var(--primary); } .dp-page .dropdown-menu .divider { background: var(--border-soft); }