/* ============================================================ QuickFix Tecnología — Estilos principales Dark / Light mode via [data-theme="light"] en ============================================================ */ /* ── Variables dark (default) ─────────────────────────────── */ :root { --bg: #0f172a; --surface: #1e293b; --surface2: #263348; --surface3: #2d3f5a; --border: #2e3f58; --border-soft: #1e2d42; --cyan: #06b6d4; --cyan-dim: rgba(6,182,212,0.12); --cyan-glow: rgba(6,182,212,0.25); --green: #10b981; --green-dim: rgba(16,185,129,0.12); --orange: #f59e0b; --orange-dim: rgba(245,158,11,0.12); --red: #f43f5e; --red-dim: rgba(244,63,94,0.12); --purple: #a78bfa; --purple-dim: rgba(167,139,250,0.12); --text: #e2e8f0; --text-mid: #94a3b8; --text-dim: #64748b; --shadow: 0 2px 12px rgba(0,0,0,0.3); --shadow-lg: 0 8px 30px rgba(0,0,0,0.5); --radius: 12px; --sidebar-bg: #0f172a; --sidebar-w: 240px; --mono: 'DM Mono', 'Courier New', monospace; --sans: 'DM Sans', 'Segoe UI', system-ui, sans-serif; } /* ── Variables light ──────────────────────────────────────── */ [data-theme="light"] { --bg: #eef2f7; --surface: #ffffff; --surface2: #e8edf5; --surface3: #dde4ef; --border: #c8d3e3; --border-soft: #d8e1ed; --cyan: #0891b2; --cyan-dim: rgba(8,145,178,0.1); --cyan-glow: rgba(8,145,178,0.2); --green: #059669; --green-dim: rgba(5,150,105,0.1); --orange: #d97706; --orange-dim: rgba(217,119,6,0.1); --red: #e11d48; --red-dim: rgba(225,29,72,0.1); --purple: #7c3aed; --purple-dim: rgba(124,58,237,0.1); --text: #0f1f35; --text-mid: #334155; --text-dim: #64748b; --shadow: 0 2px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 30px rgba(0,0,0,0.18); --sidebar-bg: #1e293b; } /* ── Reset ────────────────────────────────────────────────── */ * { box-sizing: border-box; } body { font-family: var(--sans); background: var(--bg); color: var(--text); margin: 0; } /* ── Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ── Sidebar ──────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--sidebar-bg); display: flex; flex-direction: column; z-index: 1000; transition: transform .3s; border-right: 1px solid rgba(255,255,255,0.05); } .sidebar-brand { padding: 22px 16px 18px; color: #fff; font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); font-family: var(--sans); } .sidebar-brand i { font-size: 1.4rem; color: var(--cyan); flex-shrink: 0; } .sidebar-brand-text { flex: 1; overflow: hidden; white-space: nowrap; transition: opacity .2s; } /* Btn colapsar sidebar */ .btn-sidebar-collapse { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: rgba(255,255,255,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; transition: all .2s; margin-left: auto; } .btn-sidebar-collapse:hover { background: rgba(255,255,255,0.1); color: #fff; } /* Sidebar colapsado — también reacciona al attr en html para evitar flash */ :root[data-sidebar-collapsed="1"] .sidebar, .sidebar.collapsed { width: 58px; } :root[data-sidebar-collapsed="1"] .main-content, .main-content.sidebar-collapsed { margin-left: 58px; } .sidebar.collapsed .sidebar-brand-text { opacity: 0; width: 0; } .sidebar.collapsed .sidebar-link-text { display: none; } .sidebar.collapsed #iconCollapse { transform: rotate(180deg); } .sidebar.collapsed .sidebar-link { justify-content: center; padding: 10px; } .sidebar.collapsed .sidebar-footer { align-items: center; } .sidebar.collapsed .btn-sidebar-collapse { margin-left: 0; } /* main-content se expande cuando sidebar está colapsado */ .main-content.sidebar-collapsed { margin-left: 58px; } .sidebar-nav { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; } .sidebar-link { color: rgba(255,255,255,0.6); text-decoration: none; padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: 0.875rem; transition: background .15s, color .15s; font-family: var(--sans); } .sidebar-link:hover { background: rgba(255,255,255,0.08); color: #fff; } .sidebar-link.active { background: var(--cyan); color: #fff; } .sidebar-link i { font-size: 1rem; width: 18px; text-align: center; } .sidebar-footer { padding: 14px 14px 18px; border-top: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); font-size: 0.82rem; display: flex; flex-direction: column; gap: 8px; } .sidebar-footer .user-info { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.7); } /* ── Contenido principal ───────────────────────────────────── */ .main-content { margin-left: var(--sidebar-w); height: 100vh; display: flex; flex-direction: column; overflow: hidden; } .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 20px; display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 100; } .content-body { padding: 16px 24px; flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } /* ── Page header ──────────────────────────────────────────── */ .page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; } .page-header h1 { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0; font-family: var(--sans); } /* ── KPI Cards ────────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: border-color .2s, background .2s; position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--kpi-color, var(--cyan)); opacity: 0; transition: opacity .2s; } .kpi-card:hover, .kpi-card.active { border-color: var(--kpi-color, var(--cyan)); } .kpi-card.active::before, .kpi-card:hover::before { opacity: 1; } .kpi-card .num { font-family: var(--mono); font-size: 1.3rem; font-weight: 600; color: var(--kpi-color, var(--cyan)); line-height: 1; } .kpi-card .lbl { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); font-weight: 600; margin-top: 2px; } .kpi-total { --kpi-color: var(--cyan); } .kpi-active { --kpi-color: var(--green); } .kpi-susp { --kpi-color: var(--text-dim); } .kpi-warn { --kpi-color: var(--orange); } .kpi-dead { --kpi-color: var(--red); } /* ── Toolbar ──────────────────────────────────────────────── */ .qf-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; } .qf-toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .qf-toolbar-right { display: flex; align-items: center; gap: 8px; } /* Search */ .qf-search { position: relative; } .qf-search input { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px 7px 32px; color: var(--text); font-family: var(--sans); font-size: clamp(0.7rem, 0.9vw, 0.83rem); width: clamp(130px, 15vw, 210px); outline: none; transition: border-color .2s, box-shadow .2s; } .qf-search input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-dim); } .qf-search input::placeholder { color: var(--text-dim); } .qf-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 0.82rem; pointer-events: none; } /* Btn filter tipo */ .btn-qf-filter { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: clamp(4px, 0.5vw, 7px) clamp(7px, 0.9vw, 12px); color: var(--text-mid); font-size: clamp(0.68rem, 0.85vw, 0.8rem); font-family: var(--sans); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all .15s; white-space: nowrap; } .btn-qf-filter:hover, .btn-qf-filter.active { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); } /* Btn primary */ .btn-qf-primary { background: var(--cyan); color: #0f172a; border: none; border-radius: 8px; padding: clamp(5px, 0.6vw, 8px) clamp(10px, 1.2vw, 16px); font-size: clamp(0.7rem, 0.88vw, 0.83rem); font-weight: 700; font-family: var(--sans); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .15s; white-space: nowrap; } .btn-qf-primary:hover { background: #22d3ee; transform: translateY(-1px); box-shadow: 0 4px 14px var(--cyan-glow); } /* Btn secundario */ .btn-qf-secondary { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; color: var(--text-mid); font-size: 0.82rem; font-family: var(--sans); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .15s; } .btn-qf-secondary:hover { border-color: var(--text-mid); color: var(--text); } /* ── Tabla clientes ───────────────────────────────────────── */ .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; flex: 1; display: flex; flex-direction: column; min-height: 0; } .table-scroll { overflow-x: auto; overflow-y: auto; flex: 1; min-height: 0; width: 100%; -webkit-overflow-scrolling: touch; } #modalReferidos .table-scroll { width: 100%; min-height: 60vh; } .qf-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-family: var(--sans); } .qf-table thead th { position: sticky; top: 0; z-index: 5; background: var(--surface2); color: var(--text-dim); font-size: 0.68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 11px 13px; border: 1px solid var(--border); white-space: nowrap; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .qf-table tbody tr { transition: background .12s; } .qf-table tbody td { border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; border-right: 1px solid var(--border) !important; } .qf-table tbody tr:last-child { border-bottom: none; } .qf-table tbody tr:hover { background: var(--surface2); } .qf-table tbody tr.fila-resaltada td, .qf-table tbody tr.fila-resaltada:hover td { background: rgba(6,182,212,.13) !important; outline: 2px solid var(--cyan); outline-offset: -2px; } /* Referido — indent visual con línea izquierda cyan */ .qf-table tbody tr.es-referido { background: rgba(6,182,212,0.025); } .qf-table tbody tr.es-referido td:first-child { border-left: 2px solid var(--cyan); padding-left: 14px; } .qf-table tbody tr.suspendido td { opacity: .6; } .qf-table tbody tr.suspendido td:first-child { border-left: 3px solid rgba(100,116,139,0.4); } .qf-table tbody td { padding: 10px 13px; vertical-align: middle; color: var(--text); text-align: center; } /* Celdas especiales */ .td-num { font-family: var(--mono); font-size: inherit; color: var(--text-dim); text-align: center; } .td-name .main { font-weight: 600; font-size: inherit; } .td-name .sub { font-size: 0.85em; color: var(--text-dim); margin-top: 1px; } .td-sub-ref { font-size: 0.85em; color: var(--purple); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .td-correo a { color: var(--text-mid); text-decoration: none; font-size: inherit; max-width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; } .td-correo a:hover { color: var(--cyan); } .td-fecha { font-family: var(--mono); font-size: inherit; color: var(--text-mid); white-space: nowrap; } .td-fecha .arrow { color: var(--text-dim); margin: 0 2px; font-size: 0.9em; } /* Subsidiario chip */ .sub-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--cyan-dim); border: 1px solid rgba(6,182,212,0.2); border-radius: 20px; padding: 2px 7px 2px 3px; font-size: inherit; color: var(--cyan); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .sub-chip .av { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--cyan); color: #0f172a; font-size: 0.75em; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .no-sub { color: var(--text-dim); font-size: inherit; } /* WhatsApp */ .wa-btn { display: inline-flex; align-items: center; gap: 3px; background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.2); border-radius: 5px; padding: 2px 6px; color: #25d366; font-size: inherit; text-decoration: none; transition: all .15s; white-space: nowrap; } .wa-btn:hover { background: rgba(37,211,102,0.2); color: #25d366; } /* Producto */ .prod-badge { background: var(--surface3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: inherit; color: var(--text-mid); white-space: nowrap; } /* Días */ .dias-badge { font-family: var(--mono); font-size: inherit; font-weight: 500; padding: 0.2em 0.45em; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-width: unset; } .dias-ok { background: var(--green-dim); color: var(--green); } .dias-warn { background: var(--orange-dim); color: var(--orange); } .dias-dead { background: var(--red-dim); color: var(--red); } .dias-susp { background: rgba(100,116,139,0.1); color: var(--text-dim); } /* Estado */ .estado-badge { font-size: inherit; font-weight: 700; letter-spacing: .04em; padding: 0.2em 0.5em; border-radius: 20px; text-transform: uppercase; display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; } .est-activo { background: var(--green-dim); color: var(--green); border: 1px solid rgba(16,185,129,0.2); } .est-warn { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(245,158,11,0.2); } .est-vencido { background: var(--red-dim); color: var(--red); border: 1px solid rgba(244,63,94,0.2); } .est-susp { background: rgba(100,116,139,0.08); color: var(--text-dim); border: 1px solid rgba(100,116,139,0.25); letter-spacing: .02em; } /* Etiquetas */ .tags-cell { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; } .tag { font-size: 0.9em; font-weight: 700; letter-spacing: .02em; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; white-space: nowrap; } /* Automáticas */ .tag-subsidiario { background: var(--cyan-dim); color: var(--cyan); border: 1px solid rgba(6,182,212,0.25); } .tag-referido { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(167,139,250,0.25); } .tag-vencido { background: var(--red-dim); color: var(--red); border: 1px solid rgba(244,63,94,0.2); } .tag-por-vencer { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(245,158,11,0.2); } /* Manuales — colores dinámicos via style="--tc:#hex;--tb:#hex" */ .tag-manual { background: var(--tb, rgba(99,102,241,0.1)); color: var(--tc, #818cf8); border: 1px solid var(--tc, #818cf8); border-opacity: 0.3; } /* Grupos de mes en tabla */ tr.mes-header td { background: var(--surface2) !important; color: var(--text-dim); font-size: clamp(0.55rem, 0.75vw, 0.7rem); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 8px 0; border-bottom: 1px solid var(--border); text-align: center; transition: background 0.2s ease; } /* mes-header sticky — desktop */ @media (min-width: 501px) { tr.mes-header td { position: sticky; top: 0; z-index: 4; } } /* Acciones */ .td-actions { display: flex; align-items: center; gap: 2px; justify-content: center; flex-wrap: nowrap; } .btn-act { width: 2.2em; height: 2.2em; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: inherit; /* hereda de la celda → escala con la tabla */ flex-shrink: 0; transition: all .12s; } /* Ícono dentro del btn — mismo tamaño que el texto de la celda */ .btn-act i { font-size: 1em; line-height: 1; } .btn-act:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); } .btn-act.d:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); } .btn-act.w:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-dim); } .btn-act.g:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); } .btn-refs { display: inline-flex; align-items: center; gap: 2px; background: var(--cyan-dim); border: 1px solid rgba(6,182,212,0.25); border-radius: 4px; padding: 2px 5px; font-size: inherit; color: var(--cyan); flex-shrink: 0; font-size: 0.72rem; cursor: pointer; transition: all .12s; white-space: nowrap; } .btn-refs:hover { background: var(--cyan-glow); } /* Empty / loading */ .td-empty { text-align: center; padding: 48px 14px !important; color: var(--text-dim); font-size: 0.85rem; } /* ── Modal ────────────────────────────────────────────────── */ .qf-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1050; padding: 20px; } .qf-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 840px; max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .qf-modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--surface); z-index: 1; } .qf-modal-header h5 { font-size: 0.95rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; margin: 0; } .qf-modal-header h5 .icon-wrap { width: 30px; height: 30px; background: var(--cyan-dim); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--cyan); font-size: 0.85rem; } .qf-modal-body { padding: 22px 24px; } .qf-modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: var(--surface); } /* Secciones del modal */ .modal-section { margin-bottom: 22px; } .modal-section:last-child { margin-bottom: 0; } .section-title { font-size: 0.66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan); font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Form grid */ .fg { display: grid; gap: 12px; } .fg-4 { grid-template-columns: repeat(4, 1fr); } .fg-3 { grid-template-columns: repeat(3, 1fr); } .fg-2 { grid-template-columns: repeat(2, 1fr); } .fg-1 { grid-template-columns: 1fr; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .form-group { display: flex; flex-direction: column; gap: 5px; } .form-group label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-family: var(--sans); } .form-group label .req { color: var(--red); margin-left: 2px; } .form-group input, .form-group select, .form-group textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--text); font-family: var(--sans); font-size: 0.84rem; outline: none; transition: border-color .18s, box-shadow .18s; width: 100%; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-dim); } .form-group input::placeholder { color: var(--text-dim); } .form-group select option { background: var(--surface); } .form-group textarea { resize: vertical; min-height: 68px; } .form-hint { font-size: 0.71rem; color: var(--text-dim); margin-top: 2px; } /* Alerta duplicado */ .alert-dup { background: var(--orange-dim); border: 1px solid rgba(245,158,11,0.25); border-radius: 7px; padding: 9px 12px; font-size: 0.8rem; color: var(--orange); display: flex; align-items: flex-start; gap: 8px; } /* Subsidiario search */ .sub-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; z-index: 20; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.35); max-height: 220px; overflow-y: auto; } .sub-result-item { padding: 9px 12px; cursor: pointer; display: flex; align-items: center; gap: 9px; transition: background .12s; border-bottom: 1px solid var(--border-soft); } .sub-result-item:last-child { border-bottom: none; } .sub-result-item:hover { background: var(--surface3); } .sub-result-av { width: 28px; height: 28px; border-radius: 50%; background: var(--cyan); color: #0f172a; font-size: 0.62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sub-result-info .sname { font-size: 0.84rem; font-weight: 600; color: var(--text); } .sub-result-info .smeta { font-size: 0.72rem; color: var(--text-dim); } /* Subsidiario seleccionado */ .sub-selected-box { display: flex; align-items: center; gap: 9px; background: var(--cyan-dim); border: 1px solid rgba(6,182,212,0.22); border-radius: 8px; padding: 8px 11px; } .sub-selected-box .sname { font-size: 0.84rem; font-weight: 600; color: var(--cyan); } .sub-selected-box .smeta { font-size: 0.72rem; color: var(--text-dim); } .btn-rm-sub { margin-left: auto; width: 22px; height: 22px; border-radius: 5px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: color .12s; } .btn-rm-sub:hover { color: var(--red); } /* Tags selector en modal */ .tags-selector { display: flex; flex-wrap: wrap; gap: 6px; } .tag-toggle { padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: all .15s; font-family: var(--sans); } .tag-toggle:hover { border-color: var(--text-mid); color: var(--text); } .tag-toggle.selected { background: var(--tb, var(--cyan-dim)); color: var(--tc, var(--cyan)); border-color: var(--tc, var(--cyan)); } .tag-toggle-new { border-style: dashed; color: var(--text-dim); } .tag-toggle-new:hover { border-color: var(--cyan); color: var(--cyan); } /* Nota etiquetas auto */ .etq-auto-hint { font-size: 0.72rem; color: var(--text-dim); margin-top: 8px; line-height: 1.5; } /* ── Dark/Light toggle btn ────────────────────────────────── */ .btn-theme { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-mid); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: all .15s; } .btn-theme:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); } /* ── Cards genéricas (dashboard, paneles) ──────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .card-header { background: var(--surface2); border-bottom: 1px solid var(--border); padding: 13px 18px; border-radius: var(--radius) var(--radius) 0 0; font-size: 0.9rem; font-weight: 600; } /* ── Stat cards (dashboard) ───────────────────────────────── */ .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 5px; border-left: 3px solid transparent; } .stat-card.stat-blue { border-color: var(--cyan); } .stat-card.stat-green { border-color: var(--green); } .stat-card.stat-orange { border-color: var(--orange); } .stat-card.stat-red { border-color: var(--red); } .stat-icon { font-size: 1.5rem; opacity: .85; } .stat-card.stat-blue .stat-icon { color: var(--cyan); } .stat-card.stat-green .stat-icon { color: var(--green); } .stat-card.stat-orange .stat-icon { color: var(--orange); } .stat-card.stat-red .stat-icon { color: var(--red); } .stat-value { font-size: 1.9rem; font-weight: 800; line-height: 1; font-family: var(--mono); } .stat-label { font-size: 0.78rem; color: var(--text-mid); font-weight: 500; } /* ── Login ────────────────────────────────────────────────── */ .login-body { min-height: 100vh; background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); display: flex; align-items: center; justify-content: center; padding: 20px; } .login-container { width: 100%; max-width: 400px; } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 38px 34px; box-shadow: var(--shadow-lg); } .login-header { text-align: center; margin-bottom: 26px; } .login-icon { font-size: 2.8rem; color: var(--cyan); display: block; margin-bottom: 10px; } .login-header h2 { font-weight: 800; color: var(--text); margin: 0 0 4px; font-size: 1.35rem; } /* ── DataTables override ──────────────────────────────────── */ div.dataTables_wrapper { color: var(--text); } /* Fila top: selector + info en una línea */ div.dt-top { display: flex; align-items: center; gap: 16px; padding: 6px 0 8px; flex-wrap: wrap; } div.dt-top .dataTables_length, div.dt-top .dataTables_info { margin: 0 !important; float: none !important; } div.dt-top .dataTables_length label { display: flex !important; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-dim); margin: 0; white-space: nowrap; } div.dt-top .dataTables_length select { display: inline-block !important; width: auto !important; } div.dt-top .dataTables_info { font-size: .82rem; color: var(--text-dim); white-space: nowrap; } /* Fila bot: info + paginación */ div.dt-bot { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 4px; flex-wrap: wrap; gap: 8px; } div.dt-bot .dataTables_info, div.dt-bot .dataTables_paginate { margin: 0 !important; float: none !important; } div.dataTables_wrapper div.dataTables_filter input, div.dataTables_wrapper div.dataTables_length select { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; font-size: 0.82rem; color: var(--text); outline: none; } div.dataTables_wrapper div.dataTables_filter input:focus { border-color: var(--cyan); } div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate { font-size: 0.8rem; color: var(--text-mid); } div.dataTables_wrapper .paginate_button { border-radius: 6px !important; color: var(--text-mid) !important; border: 1px solid transparent !important; } div.dataTables_wrapper .paginate_button:hover { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--text) !important; } div.dataTables_wrapper .paginate_button.current, div.dataTables_wrapper .paginate_button.current:hover { background: var(--cyan) !important; border-color: var(--cyan) !important; color: #0f172a !important; font-weight: 700; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 992px) { .sidebar { transform: translateX(-100%); } .sidebar.sidebar-open { transform: translateX(0); } .main-content { margin-left: 0; } .kpi-grid { grid-template-columns: repeat(3, 1fr); } /* Overlay al abrir sidebar */ .sidebar.sidebar-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: -1; } } @media (max-width: 480px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .content-body { padding: 16px 14px; } } /* ── Android / Móvil — KPIs y toolbar fijos, cards con scroll ─ */ @media (max-width: 500px) { /* KPIs sticky arriba del todo */ .kpi-grid { position: sticky; top: 0; z-index: 60; background: var(--bg); padding-top: 8px; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } /* Toolbar sticky debajo de KPIs */ .qf-toolbar-sticky { position: sticky; top: 0; z-index: 50; background: var(--bg); margin-bottom: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); } /* Contenedor de cards — scroll horizontal */ #gridCards { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; padding: 4px 8px 12px; scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); position: relative; } /* Fade derecho para indicar scroll */ #gridCards::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; opacity: 0.7; } /* Scrollbar en WebKit (Android Chrome) */ #gridCards::-webkit-scrollbar { height: 4px; } #gridCards::-webkit-scrollbar-track { background: var(--bg); } #gridCards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* Cards — mejor estilo */ .cliente-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; padding: 12px !important; min-width: 280px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); margin-bottom: 8px; } .cliente-card:last-child { margin-bottom: 0; } /* Separadores de mes en cards */ #gridCards > div:not(.cliente-card) { font-size: 0.65rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--text-dim) !important; padding: 6px 2px !important; border-bottom: 1px solid var(--border) !important; margin-top: 6px !important; margin-bottom: 4px !important; position: sticky; left: 0; right: 0; background: var(--bg); z-index: 10; } } /* ── Toolbar sticky ──────────────────────────────────────── */ .qf-toolbar-sticky { position: sticky; top: 0; z-index: 50; background: var(--bg); padding: 10px 0; margin-bottom: 10px; border-bottom: 1px solid var(--border); } /* ── Tabla responsive móvil ───────────────────────────────── */ @media (max-width: 900px) { .content-body { padding: 10px 8px; } .kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; } .kpi-card { padding: 8px 10px; } .kpi-card .num { font-size: 1.2rem; } .kpi-card .lbl { font-size: 0.58rem; } .qf-toolbar { flex-direction: column; gap: 8px; } .qf-toolbar-left { flex-wrap: wrap; gap: 5px; } .qf-toolbar-right { justify-content: flex-end; } .qf-search input { width: 150px; } .page-header h1 { font-size: 1rem; } .page-header h1 i { display: none; } } /* ── Modal responsive móvil ───────────────────────────────── */ @media (max-width: 700px) { /* Modal ocupa toda la pantalla */ .modal-dialog { margin: 0 !important; max-width: 100% !important; } .modal-content, .modal-content[style] { border-radius: 0 !important; min-height: 100vh; border: none !important; } /* Header y footer sticky */ .qf-modal-header { padding: 12px 14px 10px !important; position: sticky; top: 0; z-index: 10; } .qf-modal-body { padding: 14px 14px !important; } .qf-modal-footer { padding: 12px 14px !important; position: sticky; bottom: 0; z-index: 10; } /* Grids del formulario */ .fg-4 { grid-template-columns: 1fr 1fr !important; } .fg-3 { grid-template-columns: 1fr 1fr !important; } .fg-2 { grid-template-columns: 1fr 1fr !important; } /* Contrato: tipo full ancho, fechas en 2 col */ .fg-contrato { grid-template-columns: 1fr 1fr !important; } .fg-contrato .form-group:nth-child(1) { grid-column: span 2; } .span-2, .span-3, .span-4 { grid-column: span 2 !important; } /* Secciones más compactas */ .modal-section { margin-bottom: 16px; } .section-title { font-size: 0.62rem; margin-bottom: 10px; } /* Inputs más chicos */ .form-group input, .form-group select, .form-group textarea { font-size: 0.82rem !important; padding: 8px 10px !important; } .form-group label { font-size: 0.65rem !important; } .form-hint { font-size: 0.67rem; } /* Tags selector */ .tags-selector { gap: 5px; } .tag-toggle { font-size: 0.65rem; padding: 4px 8px; } /* Botones en modal */ .btn-qf-primary, .btn-qf-secondary { font-size: 0.8rem; padding: 8px 16px; } /* Info panel actual */ #infoPanelActual { padding: 8px 10px; font-size: 0.78rem; } /* Subsidiario seleccionado */ .sub-selected-box { padding: 7px 10px; } .sub-selected-box .sname { font-size: 0.8rem; } /* Alerta duplicado */ .alert-dup { padding: 8px 10px; font-size: 0.76rem; } /* Botón N° cliente */ #btnBuscarNumeroCliente, #btnLimpiarNumeroCliente { width: 34px; height: 34px; } /* Etiquetas auto hint */ .etq-auto-hint { font-size: 0.67rem; } } /* ── Tabla — 100% responsiva, misma info en cualquier ancho ─ */ .table-wrap { overflow: hidden; } .table-scroll { overflow-x: auto; overflow-y: auto; width: 100%; } #tablaClientes { width: 100% !important; table-layout: fixed; /* anchos fijos en % — se encogen con la ventana */ } /* Anchos de columna en % — suman 100% */ #tablaClientes th:nth-child(1) { width: 3%; } /* N°Panel */ #tablaClientes th:nth-child(2) { width: 4%; } /* N°Cliente */ #tablaClientes th:nth-child(3) { width: 9%; } /* Nombre */ #tablaClientes th:nth-child(4) { width: 13%; } /* Correo */ #tablaClientes th:nth-child(5) { width: 8%; } /* Período */ #tablaClientes th:nth-child(6) { width: 4%; } /* Días */ #tablaClientes th:nth-child(7) { width: 7%; } /* Sub */ #tablaClientes th:nth-child(8) { width: 7%; } /* Etiquetas */ #tablaClientes th:nth-child(9) { width: 14%; } /* WA */ #tablaClientes th:nth-child(10) { width: 6%; } /* Producto */ #tablaClientes th:nth-child(11) { width: 10%; } /* Estado */ #tablaClientes th:nth-child(12) { width: 10%; } /* Acciones */ /* Texto trunca en todas las celdas — no desborda */ #tablaClientes thead th, #tablaClientes tbody td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Nombre, Correo, Etiquetas — texto izquierda, parten en líneas */ #tablaClientes tbody td:nth-child(3), #tablaClientes tbody td:nth-child(4), #tablaClientes tbody td:nth-child(8) { white-space: normal; word-break: break-word; overflow: visible; text-align: left !important; } /* Escalar fuente y padding con el ancho de ventana usando clamp */ #tablaClientes { font-size: clamp(0.55rem, 0.9vw, 0.83rem); } #tablaClientes thead th { font-size: clamp(0.48rem, 0.75vw, 0.7rem); padding: clamp(4px, 0.6vw, 11px) clamp(3px, 0.5vw, 13px); letter-spacing: 0; } #tablaClientes tbody td { padding: clamp(4px, 0.55vw, 10px) clamp(3px, 0.5vw, 13px); } /* Todo hereda de #tablaClientes font-size — nada fijo aquí */ #tablaClientes .estado-badge { font-size: inherit !important; padding: 0.2em 0.5em; display: inline-flex; align-items: center; line-height: 1; } #tablaClientes .dias-badge { font-size: inherit !important; padding: 0.2em 0.45em; min-width: unset; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } #tablaClientes .prod-badge { font-size: inherit !important; padding: 0.1em 0.4em; } #tablaClientes .sub-chip { font-size: inherit !important; max-width: 100%; } #tablaClientes .sub-chip .av { width: 1.4em; height: 1.4em; font-size: 0.75em !important; } #tablaClientes .tag { font-size: 0.9em !important; padding: 0.1em 0.4em; } #tablaClientes .wa-btn { font-size: inherit !important; padding: 0.2em 0.4em; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3em; overflow: visible; max-width: none; } #tablaClientes .td-correo a { font-size: inherit !important; max-width: none; overflow: visible; white-space: normal; word-break: break-all; } #tablaClientes .td-fecha { font-size: inherit !important; white-space: normal; overflow: visible; } #tablaClientes .no-sub { font-size: inherit !important; } #tablaClientes .btn-act { width: 2em; height: 2em; font-size: inherit !important; } #tablaClientes .btn-act i { font-size: 1em !important; } #tablaClientes .btn-refs { font-size: 0.95em !important; padding: 0.1em 0.4em; white-space: nowrap; } #tablaClientes .td-actions { gap: 0.2em; flex-wrap: nowrap; } /* Toolbar responsiva */ @media (max-width: 992px) { .content-body { padding: 10px; } .qf-toolbar { flex-direction: column; gap: 8px; } .qf-toolbar-left { flex-wrap: wrap; gap: 6px; } .qf-toolbar-right { justify-content: flex-end; } .kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .kpi-card .num { font-size: 1.2rem; } .page-header h1 { font-size: 1rem; } } @media (max-width: 768px) { .content-body { padding: 8px 6px; } .kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; } .kpi-card { padding: 8px; } .kpi-card .num { font-size: 1rem; } .page-header h1 { font-size: 0.9rem; } .page-header h1 i { display: none; } } /* ── Bootstrap override — forzar tema sobre variables ─────── */ body { background: var(--bg) !important; color: var(--text) !important; } /* Topbar y sidebar */ .topbar { background: var(--surface) !important; border-color: var(--border) !important; } /* Botón copiar inline */ .btn-copy-inline { border: none; background: none; color: var(--text-dim); cursor: pointer; padding: 2px 4px; border-radius: 4px; line-height: 1; transition: color .15s; flex-shrink: 0; } .btn-copy-inline:hover { color: var(--cyan); } .btn-copy-inline .bi-check2 { color: #22c55e; } /* Modal referidos — tamaño ajustado al contenido */ #modalReferidos .modal-dialog { max-width: 95vw !important; width: auto !important; margin: 40px auto !important; } #modalReferidos .modal-content { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 16px !important; max-height: 85vh !important; height: auto !important; display: flex !important; flex-direction: column !important; } #modalReferidos .qf-modal-body { overflow-y: auto !important; flex: 1 !important; min-height: 0 !important; padding: 0 !important; } #modalReferidos .qf-table { width: 100% !important; } /* Modal Bootstrap → nuestro tema */ .modal-content { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .modal-header, .modal-footer { background: var(--surface) !important; border-color: var(--border) !important; } .modal-body { background: var(--surface) !important; } /* Inputs y selects dentro del modal */ .modal-body input, .modal-body select, .modal-body textarea { background: var(--bg) !important; border-color: var(--border) !important; color: var(--text) !important; } .modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus { border-color: var(--cyan) !important; box-shadow: 0 0 0 3px var(--cyan-dim) !important; } .modal-body input::placeholder { color: var(--text-dim) !important; } /* Tabla */ .table-wrap { background: var(--surface) !important; border-color: var(--border) !important; } .qf-table { background: transparent !important; color: var(--text) !important; } .qf-table thead th { background: var(--surface2) !important; color: var(--text-dim) !important; border: 1px solid var(--border) !important; } .qf-table tbody td { background: transparent; color: var(--text) !important; border: 1px solid var(--border) !important; } .qf-table tbody tr.mes-header td { background: var(--surface2) !important; color: var(--text-dim) !important; } .qf-table tbody tr:hover td { background: var(--surface2) !important; } .qf-table tbody tr.es-referido { background: rgba(6,182,212,0.025) !important; } .qf-table tbody tr.suspendido td { opacity: .6; } .qf-table tbody tr.suspendido td:first-child { border-left: 3px solid rgba(100,116,139,0.4); } /* Cards */ .card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .card-header { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--text) !important; } /* KPI cards */ .kpi-card { background: var(--surface) !important; border-color: var(--border) !important; } .kpi-card.active, .kpi-card:hover { background: var(--surface2) !important; } /* DataTables wrapper */ .dataTables_wrapper { background: transparent !important; color: var(--text) !important; } table.dataTable thead th, table.dataTable thead td { background: var(--surface2) !important; color: var(--text-dim) !important; border-color: var(--border) !important; } table.dataTable tbody tr { background: transparent; } table.dataTable tbody tr.mes-header td { background: var(--surface2) !important; color: var(--text-dim) !important; } table.dataTable tbody tr:hover { background: var(--surface2) !important; } table.dataTable tbody td { color: var(--text) !important; border-color: var(--border-soft) !important; } /* Dropdown Bootstrap */ .dropdown-menu { background: var(--surface2) !important; border-color: var(--border) !important; } .dropdown-item { color: var(--text-mid) !important; } .dropdown-item:hover, .dropdown-item.active { background: var(--cyan-dim) !important; color: var(--cyan) !important; } /* Spinner */ .spinner-border { color: var(--cyan) !important; }