/* ===================================================================== PROYECTO AGENTE — DESIGN SYSTEM (única fuente de verdad) --------------------------------------------------------------------- - Tokens claros/oscuros vía [data-theme] en . - Componentes unificados: botones, inputs, panel, pill, modal, toast, tabla responsive. - Alias de compatibilidad para el CSS heredado de las consolas (admin/team/asesoria usaban --bg, --txt, --panel, --accent #5b8cff…). ===================================================================== */ /* ---------- TOKENS: TEMA OSCURO (por defecto) ---------- */ :root, [data-theme="dark"] { /* Superficies */ --ds-bg: #090d16; /* fondo app */ --ds-surface: #111827; /* paneles, sidebar */ --ds-surface-2: #1b212e; /* inputs, hover, paneles secundarios */ --ds-line: #232c3a; /* bordes */ /* Texto */ --ds-text: #f1f5f9; --ds-text-soft: #9aa6b8; --ds-text-muted: #6b7280; /* Marca / acento (ÚNICO en toda la plataforma) */ --ds-accent: #4f46e5; --ds-accent-hover: #4338ca; --ds-accent-soft: rgba(79, 70, 229, 0.12); --ds-accent-2: #36d399; /* éxito / online */ /* Semánticos */ --ds-warn: #f4b740; --ds-danger: #f06363; --ds-on-accent: #ffffff; /* Forma */ --ds-radius: 14px; --ds-radius-sm: 9px; --ds-radius-pill: 999px; --ds-shadow: 0 8px 30px rgba(0,0,0,.45); --ds-shadow-sm: 0 2px 10px rgba(0,0,0,.35); --ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ---------- TOKENS: TEMA CLARO ---------- */ [data-theme="light"] { --ds-bg: #f6f8fc; --ds-surface: #ffffff; --ds-surface-2: #eef2f8; --ds-line: #e2e8f0; --ds-text: #0f172a; --ds-text-soft: #475569; --ds-text-muted: #94a3b8; --ds-accent: #4f46e5; --ds-accent-hover: #4338ca; --ds-accent-soft: rgba(79, 70, 229, 0.08); --ds-accent-2: #16a34a; --ds-warn: #d97706; --ds-danger: #dc2626; --ds-on-accent: #ffffff; --ds-shadow: 0 8px 30px rgba(15,23,42,.12); --ds-shadow-sm: 0 2px 10px rgba(15,23,42,.08); } /* ---------- ALIAS DE COMPATIBILIDAD ---------- El CSS heredado del chat (style.css) y de las consolas usa estos nombres. Los reapuntamos a los tokens canónicos para que TODO herede la paleta única y el tema, sin reescribir cada regla antigua. */ :root, [data-theme] { /* chat (style.css) */ --bg-app: var(--ds-bg); --bg-sidebar: var(--ds-surface); --bg-panel: var(--ds-surface); --bg-input: var(--ds-surface-2); --border-color: var(--ds-line); --text-primary: var(--ds-text); --text-secondary:var(--ds-text-soft); --text-muted: var(--ds-text-muted); --accent: var(--ds-accent); --accent-hover: var(--ds-accent-hover); --accent-light: var(--ds-accent-soft); /* consolas (admin/team/asesoria) */ --bg: var(--ds-bg); --panel: var(--ds-surface); --panel2: var(--ds-surface-2); --line: var(--ds-line); --txt: var(--ds-text); --muted: var(--ds-text-muted); --accent2:var(--ds-accent-2); --warn: var(--ds-warn); --danger: var(--ds-danger); --radius: var(--ds-radius); } /* ===================================================================== COMPONENTES UNIFICADOS ===================================================================== */ *{box-sizing:border-box} .ds-scope, .ds-scope *{ font-family: var(--ds-font); } /* ---------- BOTONES (sistema único) ---------- Soporta las clases del chat (.btn-primary) y de las consolas (.btn, .btn-ghost, .btn-warn, .btn-danger, .btn-sm). */ .btn, .btn-primary, .btn-ghost, .btn-warn, .btn-danger { font-family: var(--ds-font); cursor: pointer; border: 1px solid transparent; border-radius: var(--ds-radius-sm); padding: 9px 16px; font-weight: 600; font-size: 13.5px; line-height: 1.1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s, background .15s, border-color .15s, transform .05s; white-space: nowrap; } .btn:active, .btn-primary:active, .btn-ghost:active, .btn-warn:active, .btn-danger:active { transform: translateY(1px); } .btn, .btn-primary { background: var(--ds-accent); color: var(--ds-on-accent); } .btn:hover, .btn-primary:hover { background: var(--ds-accent-hover); } .btn-ghost { background: var(--ds-surface-2); color: var(--ds-text); border-color: var(--ds-line); } .btn-ghost:hover { border-color: var(--ds-accent); color: var(--ds-text); } .btn-ghost.active { border-color: var(--ds-accent); color: var(--ds-text); background: var(--ds-accent-soft); } .btn-warn { background: var(--ds-warn); color: #1a1300; } .btn-warn:hover { filter: brightness(1.08); } .btn-danger { background: var(--ds-danger); color: #fff; } .btn-danger:hover { filter: brightness(1.08); } .btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; } button:disabled, .btn:disabled, .btn-primary:disabled { opacity:.5; cursor:not-allowed; } /* ---------- INPUTS ---------- */ .ds-scope input:not([type="checkbox"]):not([type="radio"]), .ds-scope select, .ds-scope textarea, input.form-input { font-family: var(--ds-font); background: var(--ds-surface-2); color: var(--ds-text); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); padding: 9px 11px; font-size: 13.5px; width: 100%; } .ds-scope input:focus, .ds-scope select:focus, .ds-scope textarea:focus { outline: none; border-color: var(--ds-accent); } .ds-scope textarea { resize: vertical; min-height: 70px; } .ds-scope label:not(.form-label):not(.chk) { display:block; font-size:12px; color:var(--ds-text-soft); margin:0 0 5px 2px; } .ds-scope .field { margin-bottom: 12px; } .ds-scope .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; } /* ---------- PANEL / CARD ---------- */ .panel { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 20px; margin-bottom: 20px; } .panel h3 { font-size:15px; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; } /* ---------- PILL / BADGE ---------- */ .pill { display:inline-block; padding:3px 10px; border-radius:var(--ds-radius-pill); font-size:11px; font-weight:700; } .pill.active { background: rgba(54,211,153,.15); color: var(--ds-accent-2); } .pill.suspended { background: rgba(244,183,64,.15); color: var(--ds-warn); } .pill.cancelled, .pill.archived { background: rgba(240,99,99,.15); color: var(--ds-danger); } /* ---------- MODAL ---------- */ .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index: 200; padding: 16px; animation: ds-fade .15s ease; } @keyframes ds-fade { from{opacity:0} to{opacity:1} } .modal { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 26px; width: 460px; max-width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--ds-shadow); } .modal h3 { margin-bottom: 18px; font-size: 17px; } .modal .row { display:flex; gap:10px; margin-top:18px; justify-content:flex-end; } .chk { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ds-text); margin-bottom:8px; } .chk input { width:auto; } /* ---------- TOAST ---------- */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--ds-surface-2); color: var(--ds-text); border: 1px solid var(--ds-accent-2); padding: 13px 18px; border-radius: 8px; z-index: 300; box-shadow: var(--ds-shadow); font-size: 13.5px; animation: ds-toast-in .2s ease; } .toast.err { border-color: var(--ds-danger); } @keyframes ds-toast-in { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} } /* ---------- TABLA RESPONSIVE (única) ---------- */ .ds-scope table { width:100%; border-collapse:collapse; font-size:13px; } .ds-scope th { text-align:left; color:var(--ds-text-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:9px 10px; border-bottom:1px solid var(--ds-line); } .ds-scope td { padding:11px 10px; border-bottom:1px solid var(--ds-line); } .ds-scope tr:last-child td { border-bottom:none; } .ds-scope tr:hover td { background:var(--ds-surface-2); } .ds-scope .muted { color:var(--ds-text-muted); } .ds-scope .row-actions { white-space:nowrap; display:flex; gap:6px; flex-wrap:wrap; } /* Tabla → tarjetas en móvil (patrón ÚNICO) */ @media (max-width: 760px) { .ds-scope input:not([type="checkbox"]):not([type="radio"]), .ds-scope select, .ds-scope textarea, input.form-input { font-size: 16px; } /* anti-zoom iOS */ .ds-scope .grid2 { grid-template-columns: 1fr; } .ds-scope .modal { width: 94vw; padding: 20px; } .ds-scope table, .ds-scope thead, .ds-scope tbody, .ds-scope tr, .ds-scope td { display:block; width:100%; } .ds-scope thead { position:absolute; left:-9999px; } .ds-scope tr { background:var(--ds-surface-2); border:1px solid var(--ds-line); border-radius:12px; margin-bottom:12px; padding:12px 14px; } .ds-scope tr:hover td { background:transparent; } .ds-scope td { border:none !important; padding:6px 0; display:flex; justify-content:space-between; align-items:center; gap:14px; text-align:right; min-width:0; } .ds-scope td::before { content: attr(data-label); color:var(--ds-text-muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; text-align:left; flex:0 0 38%; } .ds-scope td > * { min-width:0; overflow-wrap:anywhere; } .ds-scope tr td:first-child { flex-direction:column; align-items:flex-start; text-align:left; gap:2px; padding-bottom:10px; margin-bottom:6px; border-bottom:1px solid var(--ds-line) !important; } .ds-scope tr td:first-child::before { flex:none; margin-bottom:2px; } .ds-scope td[data-label=""]::before { content:none; } .ds-scope td.row-actions { flex-wrap:wrap; gap:8px; border-top:1px solid var(--ds-line) !important; margin-top:8px; padding-top:12px; justify-content:flex-start; } .ds-scope td.row-actions .btn-sm { flex:1 1 auto; min-width:90px; text-align:center; padding:8px 10px; } } /* ---------- HELPERS ---------- */ .hidden { display:none !important; } .live-dot { width:8px; height:8px; border-radius:50%; background:var(--ds-accent-2); display:inline-block; box-shadow:0 0 6px var(--ds-accent-2); animation:ds-pulse 1.6s infinite; } @keyframes ds-pulse { 0%,100%{opacity:1} 50%{opacity:.35} } /* ---------- BUSCADOR DE LISTA (reutilizable, PA.searchBarHTML) ---------- */ .list-search { display:flex; align-items:center; gap:9px; background:var(--ds-surface-2); border:1px solid var(--ds-line); border-radius:var(--ds-radius-sm); padding:9px 12px; margin-bottom:14px; color:var(--ds-text-muted); } .list-search:focus-within { border-color:var(--ds-accent); } .list-search input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--ds-text); font-size:13.5px; font-family:var(--ds-font); padding:0; } .list-search input::placeholder { color:var(--ds-text-muted); } .list-search-count { font-size:11.5px; color:var(--ds-text-muted); white-space:nowrap; } /* ---------- COMBOBOX BUSCABLE (PA.combo, reutilizable) ---------- */ .pa-combo { position:relative; } .pa-combo-trigger { width:100%; display:flex; align-items:center; gap:8px; background:var(--ds-surface-2); color:var(--ds-text); border:1px solid var(--ds-line); border-radius:var(--ds-radius-sm); padding:9px 11px; font-size:13.5px; font-family:var(--ds-font); cursor:pointer; text-align:left; } .pa-combo-trigger:hover, .pa-combo-trigger.open { border-color:var(--ds-accent); } .pa-combo-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; } .pa-combo-label.pa-combo-empty { color:var(--ds-text-soft); font-weight:500; } .pa-combo-caret { flex:0 0 auto; color:var(--ds-text-muted); transition:transform .15s; } .pa-combo-trigger.open .pa-combo-caret { transform:rotate(180deg); } .pa-combo-pop { position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:300; background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:var(--ds-radius-sm); box-shadow:var(--ds-shadow); overflow:hidden; display:flex; flex-direction:column; } .pa-combo-pop[hidden] { display:none; } .pa-combo-search { display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--ds-line); color:var(--ds-text-muted); } .pa-combo-search input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--ds-text); font-size:13px; font-family:var(--ds-font); } .pa-combo-list { max-height:280px; overflow-y:auto; padding:5px; } .pa-combo-item { display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:var(--ds-radius-sm); cursor:pointer; } .pa-combo-item.hl { background:var(--ds-surface-2); } .pa-combo-item.active { background:var(--ds-accent-soft); } .pa-combo-iname { flex:1 1 auto; min-width:0; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pa-combo-isub { font-size:11px; color:var(--ds-text-muted); } .pa-combo-check { color:var(--ds-accent); font-weight:700; flex:0 0 auto; } .pa-combo-empty-r { padding:16px 12px; text-align:center; color:var(--ds-text-muted); font-size:12.5px; }