/* MailControlHQ Admin — sistema de temas profesionales con CSS variables */ /* ------------------------------------------------------- */ /* Modo por defecto (light-pro). Cambia con [data-theme="..."] en */ /* ------------------------------------------------------- */ :root { --bg:#f6f8fb; --panel:#ffffff; --text:#0f172a; --muted:#64748b; --primary:#1d4ed8; /* azul corporativo */ --primary-2:#3b82f6; --accent:#0ea5e9; /* cyan para detalles */ --border:rgba(15,23,42,.10); --border-strong:rgba(15,23,42,.18); --shadow:0 8px 24px rgba(2,6,23,.06); --thead:#eef2f9; --badge-bg:#eaf2ff; --badge-bd:#d6e6ff; --badge-tx:#1d4ed8; --success-bg:#e8fbef; --success-bd:#c9f4d7; --success-tx:#0f5132; --warn-bg:#fff7e6; --warn-bd:#ffe0a6; --warn-tx:#8a5a00; --pre-bg:#f7f9fc; --pre-bd:var(--border); --pre-tx:#0f172a; } /* ---- Tema: sand (neutro cálido) ---- */ :root[data-theme="sand"] { --bg:#f7f6f3; --panel:#ffffff; --text:#1a1f2b; --muted:#6b7280; --primary:#8b5cf6; /* púrpura sobrio */ --primary-2:#7c3aed; --accent:#ea580c; /* naranja tenue */ --border:rgba(26,31,43,.12); --border-strong:rgba(26,31,43,.2); --shadow:0 8px 24px rgba(26,31,43,.06); --thead:#f3f1ed; --badge-bg:#f2ecff; --badge-bd:#e3d8ff; --badge-tx:#6d28d9; --success-bg:#eefbf3; --success-bd:#d7f5e0; --success-tx:#0f5132; --warn-bg:#fff6eb; --warn-bd:#ffe3c7; --warn-tx:#8a5a00; --pre-bg:#faf9f6; --pre-bd:var(--border); --pre-tx:#1a1f2b; } /* ---- Tema: cool (gris frío tech) ---- */ :root[data-theme="cool"] { --bg:#f4f6f8; --panel:#ffffff; --text:#0b1220; --muted:#5f6b7a; --primary:#0ea5e9; /* cyan */ --primary-2:#0284c7; --accent:#22c55e; /* verde sutil */ --border:rgba(11,18,32,.12); --border-strong:rgba(11,18,32,.2); --shadow:0 8px 24px rgba(11,18,32,.06); --thead:#eef3f7; --badge-bg:#e6f6ff; --badge-bd:#cfeeff; --badge-tx:#0369a1; --success-bg:#e8fbef; --success-bd:#c9f4d7; --success-tx:#065f46; --warn-bg:#fff6e6; --warn-bd:#ffe0a6; --warn-tx:#8a5a00; --pre-bg:#f5f8fb; --pre-bd:var(--border); --pre-tx:#0b1220; } /* ---- Tema: slate (slate elegante) ---- */ :root[data-theme="slate"] { --bg:#eef2f5; --panel:#ffffff; --text:#111827; --muted:#475569; --primary:#334155; /* slate profundo */ --primary-2:#1f2937; --accent:#6366f1; /* indigo */ --border:rgba(17,24,39,.12); --border-strong:rgba(17,24,39,.2); --shadow:0 8px 24px rgba(17,24,39,.07); --thead:#e9edf2; --badge-bg:#eef2ff; --badge-bd:#dde3ff; --badge-tx:#3730a3; --success-bg:#e8fbef; --success-bd:#c9f4d7; --success-tx:#065f46; --warn-bg:#fff6e6; --warn-bd:#ffe0a6; --warn-tx:#8a5a00; --pre-bg:#f3f5f8; --pre-bd:var(--border); --pre-tx:#111827; } /* ---- Tema: mint (pastel sutil) ---- */ :root[data-theme="mint"] { --bg:#f5fbf8; --panel:#ffffff; --text:#0f172a; --muted:#50606b; --primary:#10b981; /* verde menta */ --primary-2:#059669; --accent:#14b8a6; /* teal */ --border:rgba(15,23,42,.10); --border-strong:rgba(15,23,42,.18); --shadow:0 8px 24px rgba(2,6,23,.06); --thead:#ecfbf4; --badge-bg:#e6fff5; --badge-bd:#c9fce7; --badge-tx:#047857; --success-bg:#e7fcf1; --success-bd:#c8f6de; --success-tx:#065f46; --warn-bg:#fff7eb; --warn-bd:#ffe4c7; --warn-tx:#8a5a00; --pre-bg:#f3fbf7; --pre-bd:var(--border); --pre-tx:#0f172a; } /* ---- Tema: noir (oscuro ejecutivo) ---- */ :root[data-theme="noir"] { --bg:#0e1218; --panel:#121824; --text:#e6eaf1; --muted:#a7b1c2; --primary:#60a5fa; /* azul suave */ --primary-2:#93c5fd; --accent:#38bdf8; /* cyan */ --border:rgba(230,234,241,.10); --border-strong:rgba(230,234,241,.16); --shadow:0 10px 28px rgba(0,0,0,.35); --thead:#0f1522; --badge-bg:#0f2038; --badge-bd:#193255; --badge-tx:#93c5fd; --success-bg:#0f2a1e; --success-bd:#1f4b34; --success-tx:#7ee0a9; --warn-bg:#2a1e0f; --warn-bd:#4b351f; --warn-tx:#ffd79a; --pre-bg:#0d131f; --pre-bd:var(--border); --pre-tx:#e6eaf1; } /* ------------------------------------------------------- */ /* Estilos base reutilizando variables */ /* ------------------------------------------------------- */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0;background:var(--bg);color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; transition:background .2s,color .2s; } a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline} .btn{ border:1px solid var(--border); background:#f8fafc; color:var(--text); border-radius:10px; padding:8px 12px; cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s,transform .05s,color .15s; } .btn:hover{background:#eef2f7;border-color:var(--border-strong)} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--primary);border-color:var(--primary-2);color:#fff} .btn.primary:hover{background:var(--primary-2)} .btn.ghost{background:transparent;border-color:transparent;color:var(--primary)} .badge{ display:inline-block;background:var(--badge-bg);border:1px solid var(--badge-bd); color:var(--badge-tx);border-radius:999px;padding:4px 10px;font-size:12px } .success{background:var(--success-bg);border:1px solid var(--success-bd);color:var(--success-tx)} .warn{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-tx)} .card{ background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:var(--shadow) } .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px} @media (max-width:1000px){.grid{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}} @media (max-width:640px){.kpis{grid-template-columns:1fr}.inline{grid-template-columns:1fr}} .app-header{ display:flex;align-items:center;justify-content:space-between; padding:12px 16px;border-bottom:1px solid var(--border); background:color-mix(in oklab, var(--panel) 92%, transparent); backdrop-filter:saturate(130%) blur(6px); position:sticky;top:0;z-index:10; } .app-title{font-size:18px;margin:0} .app-main{padding:14px} .app-footer{color:var(--muted)} .table{width:100%;border-collapse:collapse} .table th,.table td{border-bottom:1px solid var(--border);padding:10px 8px;vertical-align:top} .table thead th{background:var(--thead);color:color-mix(in srgb, var(--text) 70%, #0000);font-weight:600} input,select,textarea{ width:100%;background:#fff;border:1px solid var(--border);color:var(--text); border-radius:10px;padding:10px 12px;transition:border-color .15s,box-shadow .15s,background .15s,color .15s } :root[data-theme="noir"] input, :root[data-theme="noir"] select, :root[data-theme="noir"] textarea{ background:#0f1522;color:#e6eaf1;border-color:var(--border) } input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--primary-2); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); } textarea{min-height:84px} .inline{display:grid;grid-template-columns:1fr 1fr;gap:8px} .kpi h4{margin:0 0 6px 0;font-size:13px;color:var(--muted);font-weight:600} .kpi .val{font-size:26px;font-weight:700} .kpi .trend{font-size:12px;color:var(--muted);margin-top:2px} pre{ background:var(--pre-bg);border:1px solid var(--pre-bd); border-radius:10px;padding:10px;max-height:260px;overflow:auto;color:var(--pre-tx) } /* helpers */ .mt-2{margin-top:8px}