/* Lanio Admin — sistema de estilos del panel (control plane de Trazo CRM). Servido como asset estático (CSP-friendly, cacheable). Tema oscuro (default) y claro, conmutados por [data-theme] en . Estética de monitor de instancias: superficies por capas, bordes sutiles, sombras suaves, estados con halo, tipografía con números tabulares. */ /* ── Tokens de tema ───────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { color-scheme: dark; --bg:#0a0e15; --panel:#121a25; --elevate:#19222f; --input-bg:#0d1620; --line:#212c3b; --line-strong:#2e3a4c; --txt:#e7edf5; --muted:#8b98ab; --accent:#5b9dff; --accent-ink:#04122a; --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow:0 1px 2px rgba(0,0,0,.25), 0 8px 24px -10px rgba(0,0,0,.55); --ring:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } [data-theme="light"] { color-scheme: light; --bg:#f4f7fb; --panel:#ffffff; --elevate:#f3f6fa; --input-bg:#f8fafc; --line:#e5eaf1; --line-strong:#cfd8e3; --txt:#0f1828; --muted:#5d6b80; --accent:#2563eb; --accent-ink:#ffffff; --ok:#16a34a; --warn:#d97706; --bad:#dc2626; --shadow-sm:0 1px 2px rgba(15,23,42,.05); --shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 28px -10px rgba(15,23,42,.14); --ring:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } /* ── Base ─────────────────────────────────────────────────────────────────── */ * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--txt); font:14px/1.55 system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; } h1 { font-size:21px; font-weight:600; margin:0 0 18px; letter-spacing:-.02em; } h1 .muted { font-size:14px; font-weight:400; letter-spacing:0; } h2 { font-size:15px; font-weight:600; margin:26px 0 12px; letter-spacing:-.01em; } code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em; background:var(--input-bg); border:1px solid var(--line); border-radius:5px; padding:1px 6px; } main { max-width:1140px; margin:26px auto; padding:0 24px; } /* ── Topbar + navegación ──────────────────────────────────────────────────── */ header.topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 24px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; } @supports (backdrop-filter:blur(1px)) { header.topbar { background:color-mix(in srgb, var(--panel) 85%, transparent); backdrop-filter:saturate(150%) blur(10px); } } header.topbar .brand { font-weight:700; letter-spacing:.3px; display:flex; } .topbar-left { display:flex; align-items:center; gap:18px; } .topbar-right { display:flex; align-items:center; gap:12px; } .brand-logo { height:26px; width:auto; display:block; } .topnav { display:flex; gap:4px; } .topnav a { color:var(--muted); font-weight:500; font-size:13px; padding:6px 11px; border-radius:8px; transition:color .15s, background .15s; } .topnav a:hover { color:var(--txt); background:color-mix(in srgb, var(--txt) 7%, transparent); text-decoration:none; } .topnav a.active { color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); font-weight:600; } .nav-badge { background:var(--bad); color:#fff; border-radius:999px; padding:1px 7px; font-size:11px; font-weight:700; } .nav-toggle-cb { display:none; } .nav-toggle { display:none; cursor:pointer; font-size:20px; line-height:1; color:var(--txt); padding:2px 10px; border:1px solid var(--line-strong); border-radius:8px; user-select:none; } .theme-toggle { background:var(--input-bg); border:1px solid var(--line-strong); color:var(--txt); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:14px; line-height:1; transition:border-color .15s; } .theme-toggle:hover { border-color:var(--accent); } /* ── Tarjetas de métricas (stats) ─────────────────────────────────────────── */ .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:22px; } .stat { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow-sm); transition:border-color .15s; } .stat:hover { border-color:var(--line-strong); } .stat .n { font-size:30px; font-weight:700; line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .stat .l { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin-top:7px; } .stat.bad .n { color:var(--bad); } .stat.ok .n { color:var(--ok); } .stat.warn .n { color:var(--warn); } /* ── Cajas de panel ───────────────────────────────────────────────────────── */ .panel-box { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:18px; box-shadow:var(--shadow-sm); } .panel-box h2 { font-size:12px; margin:0 0 14px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:600; } /* ── Tablas ───────────────────────────────────────────────────────────────── */ .table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); } table { width:100%; border-collapse:collapse; background:var(--panel); border-radius:14px; overflow:hidden; font-size:13.5px; } .table-wrap table { border-radius:0; background:transparent; } thead th { text-align:left; padding:11px 16px; background:var(--elevate); color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--line); white-space:nowrap; } tbody td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle; } tbody tr { transition:background .12s; } tbody tr:hover td { background:color-mix(in srgb, var(--accent) 6%, transparent); } tbody tr:last-child td { border-bottom:none; } td strong { font-weight:600; } /* ── Paginación ───────────────────────────────────────────────────────────── */ .pager { display:flex; align-items:center; gap:12px; justify-content:center; margin-top:18px; } .pager-info { color:var(--muted); font-size:13px; } .pager-disabled { opacity:.4; cursor:default; } /* ── Botones ──────────────────────────────────────────────────────────────── */ .btn { display:inline-block; padding:8px 14px; border-radius:9px; border:1px solid var(--line-strong); background:var(--input-bg); color:var(--txt); cursor:pointer; font:inherit; font-weight:500; transition:border-color .15s, background .15s, transform .05s; } .btn:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, var(--input-bg)); text-decoration:none; } .btn:active { transform:translateY(1px); } .btn-primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; box-shadow:var(--shadow-sm); } .btn-primary:hover { background:color-mix(in srgb, var(--accent) 86%, #fff); border-color:transparent; } .btn-sm { padding:5px 11px; font-size:12.5px; border-radius:8px; } .inline-form { margin:0; display:inline; } /* ── Estados (badges / severidad / dots) ──────────────────────────────────── */ .badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; line-height:1.4; } .badge-active { background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); } .badge-past_due { background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn); } .badge-suspended { background:color-mix(in srgb, var(--bad) 16%, transparent); color:var(--bad); } .sev { display:inline-block; padding:3px 9px; border-radius:7px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; } .sev-critical { background:color-mix(in srgb, var(--bad) 22%, transparent); color:var(--bad); } .sev-high { background:color-mix(in srgb, var(--bad) 13%, transparent); color:var(--bad); } .sev-medium { background:color-mix(in srgb, var(--warn) 17%, transparent); color:var(--warn); } .sev-low { background:color-mix(in srgb, var(--muted) 18%, transparent); color:var(--muted); } .status-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; vertical-align:middle; } .status-up { background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); } .status-unknown { background:var(--muted); box-shadow:0 0 0 3px color-mix(in srgb, var(--muted) 20%, transparent); } .status-down { background:var(--bad); animation:lanio-pulse 1.8s ease-out infinite; } @keyframes lanio-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); } 70% { box-shadow:0 0 0 7px color-mix(in srgb, var(--bad) 0%, transparent); } 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--bad) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .status-down { animation:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); } } /* ── Formularios ──────────────────────────────────────────────────────────── */ form.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; max-width:100%; box-shadow:var(--shadow-sm); } .field { margin-bottom:16px; } .field label { display:block; margin-bottom:5px; color:var(--muted); font-weight:600; font-size:12.5px; } .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=date], .field select, .field textarea { width:100%; padding:9px 11px; background:var(--input-bg); border:1px solid var(--line-strong); border-radius:9px; color:var(--txt); font:inherit; transition:border-color .15s, box-shadow .15s; } .field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); } .field .hint { color:var(--muted); font-size:12px; margin-top:4px; } .field .err { color:var(--bad); font-size:12px; margin-top:4px; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color:var(--bad); } .row { display:flex; gap:16px; } .row > .field { flex:1; } .actions { display:flex; gap:10px; align-items:center; margin-top:8px; } .toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } /* ── Avisos (flash) ───────────────────────────────────────────────────────── */ .flash { padding:11px 15px; border-radius:11px; margin-bottom:16px; font-size:13.5px; border:1px solid transparent; } .flash-success { background:color-mix(in srgb, var(--ok) 13%, transparent); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent); } .flash-error { background:color-mix(in srgb, var(--bad) 13%, transparent); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 30%, transparent); } .flash-info { background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 30%, transparent); } .muted { color:var(--muted); } .warn-text { color:var(--warn); font-size:13px; } .steps { font-size:13px; color:var(--muted); margin:0 0 14px; padding-left:18px; } /* ── Notificaciones ───────────────────────────────────────────────────────── */ .notif { padding:13px 15px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; background:var(--panel); box-shadow:var(--shadow-sm); } .notif.unread { border-left:3px solid var(--accent); } .notif .meta { color:var(--muted); font-size:12px; } /* ── Auth (login / MFA) ───────────────────────────────────────────────────── */ .auth-wrap { max-width:392px; margin:56px auto; } .auth-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:30px; box-shadow:var(--shadow); } .auth-card h1 { font-size:19px; margin:0 0 4px; } .auth-card .sub { color:var(--muted); margin:0 0 22px; font-size:13px; } .auth-card .btn-primary { width:100%; text-align:center; padding:11px; } .qr { display:flex; justify-content:center; padding:12px; background:#fff; border-radius:12px; margin:0 auto 14px; width:max-content; } .qr svg { display:block; width:220px; height:220px; } .secret-box { font-family:ui-monospace,monospace; letter-spacing:2px; word-break:break-all; background:var(--input-bg); border:1px solid var(--line); border-radius:9px; padding:11px; text-align:center; } .codes { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-family:ui-monospace,monospace; background:var(--input-bg); border:1px solid var(--line); border-radius:10px; padding:14px; margin:12px 0; } .codes span { text-align:center; letter-spacing:1px; } /* ── Leyenda (gráficos) ───────────────────────────────────────────────────── */ .legend { display:flex; gap:16px; font-size:12px; color:var(--muted); margin-top:8px; flex-wrap:wrap; } .legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle; } /* ── Chips (selector de blocked_views) ────────────────────────────────────── */ .chips { display:flex; flex-direction:column; gap:12px; } .chips-group-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:6px; font-weight:600; } .chips-row { display:flex; flex-wrap:wrap; gap:6px; } .chip { background:var(--input-bg); border:1px solid var(--line-strong); color:var(--muted); border-radius:999px; padding:4px 12px; font:inherit; font-size:12px; line-height:1.5; cursor:pointer; transition:border-color .15s, color .15s; } .chip:hover { border-color:var(--accent); color:var(--txt); } .chip--on { background:color-mix(in srgb, var(--bad) 15%, transparent); border-color:color-mix(in srgb, var(--bad) 45%, transparent); color:var(--bad); font-weight:600; } .chip--on::after { content:" ×"; opacity:.75; } .chips-add { margin-top:2px; max-width:280px; padding:8px 11px; background:var(--input-bg); border:1px solid var(--line-strong); border-radius:9px; color:var(--txt); font:inherit; } .chips-add:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); } /* ── Responsive (móvil) ───────────────────────────────────────────────────── */ @media (max-width: 760px) { header.topbar { flex-wrap:wrap; gap:10px; padding:10px 16px; } .topbar-left { flex-wrap:wrap; gap:10px 14px; width:100%; } .nav-toggle { display:inline-block; } .topnav { display:none; width:100%; flex-direction:column; gap:2px; order:3; } .nav-toggle-cb:checked ~ .topnav { display:flex; } .topnav a { font-size:14px; padding:10px 12px; } main { margin:18px auto; padding:0 16px; } .toolbar { flex-wrap:wrap; gap:10px; } .row { flex-direction:column; gap:0; } form.card, .auth-wrap, .panel-box { max-width:100%; } /* Tablas con .table-cards → cada fila es una tarjeta con etiquetas. */ table.table-cards { border:none; background:transparent; font-size:14px; } table.table-cards thead { display:none; } table.table-cards tbody, table.table-cards tr, table.table-cards td { display:block; } table.table-cards tbody tr { background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow-sm); } table.table-cards tbody tr:hover td { background:transparent; } table.table-cards td { border:none; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:14px; text-align:right; padding:10px 15px; } table.table-cards td:last-child { border-bottom:none; } table.table-cards td::before { content:attr(data-label); color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; text-align:left; white-space:nowrap; } table.table-cards td:empty { display:none; } }