/* ============================================================
LegalSkatt — Panel Interno
Identidad de marca (legalskatt.cl / tema Salient):
Azul #4862ae · Naranja #f18e11 · Cyan #2AC4EA · Rosa #ff1053
Fuentes: Montserrat (títulos) + Open Sans (texto)
Soporta modo claro y oscuro vía variables (data-theme en ).
============================================================ */
:root {
/* Marca (constantes en ambos modos) */
--blue: #4862ae;
--blue-dark: #3a4f8c;
--orange: #f18e11;
--orange-dark: #d97a06;
--cyan: #2ac4ea;
--pink: #ff1053;
}
/* ---------- MODO CLARO (default) ---------- */
:root, [data-theme="light"] {
--bg: #f6f7f9;
--surface: #ffffff;
--surface-2: #f7f8fa;
--sidebar: #ffffff;
--ink: #2b2f37;
--muted: #565d6b;
--faint: #6c727e;
--line: #e6e8ee;
--blue-soft: #eef1f8;
--blue-soft-border: #d5ddf0;
--orange-soft: #fef3e2;
--orange-soft-border: #f6d9b0;
--hover: #fafbfc;
--logo-bg: transparent;
--input-bg: #f6f7f9;
--shadow: 0 1px 2px rgba(16,24,40,.04);
}
/* ---------- MODO OSCURO ---------- */
[data-theme="dark"] {
--bg: #0f141b;
--surface: #171e27;
--surface-2: #1c242f;
--sidebar: #141a22;
--ink: #e7ebf0;
--muted: #a7b0bd;
--faint: #828c9a;
--line: #2a333f;
--blue-soft: #1e2836;
--blue-soft-border: #2f3e57;
--orange-soft: #33260f;
--orange-soft-border: #5a4318;
--hover: #1e2632;
--logo-bg: #ffffff; /* el logo es JPG con fondo blanco */
--input-bg: #1c242f;
--shadow: 0 1px 2px rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
/* Accesibilidad (usuarias 50+): base un poco más grande y piso de legibilidad.
Sube todo el texto en rem ~6% y evita el texto minúsculo fijo (9-13px). */
html { font-size: 17px; }
.text-\[9px\], .text-\[10px\], .text-\[11px\] { font-size: 12.5px !important; }
.text-\[12px\], .text-\[13px\] { font-size: 13.5px !important; }
body {
font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif;
color: var(--ink);
background: var(--bg);
transition: background 200ms, color 200ms;
}
h1, h2, h3, h4, .font-display, .section-title, .kpi-value {
font-family: "Montserrat", "Open Sans", sans-serif;
}
.kpi-value { font-weight: 700; }
.section-title { font-weight: 600; }
/* Utilidades ligadas a variables (reemplazan hex hardcodeados) */
.app-bg { background: var(--bg); }
.surface { background: var(--surface); }
.t-ink { color: var(--ink); }
.t-muted { color: var(--muted); }
.t-faint { color: var(--faint); }
.bd-line { border-color: var(--line); }
/* ---------- Sidebar ---------- */
.sidebar { background: var(--sidebar); border-right: 1px solid var(--line); }
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.logo-wrap { background: var(--logo-bg); border-radius: 6px; padding: 2px 4px; }
.nav-group-label {
font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--faint); padding: 0 0.75rem; margin-bottom: 0.4rem;
}
.nav-item {
display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem;
border-radius: 0.5rem; font-size: 0.875rem; color: var(--muted); cursor: pointer;
transition: all 120ms; position: relative; border-left: 3px solid transparent;
}
.nav-item:hover { background: var(--blue-soft); color: var(--blue); }
.nav-item.active {
background: var(--orange-soft); color: var(--orange); font-weight: 600; border-left-color: var(--orange);
}
[data-theme="dark"] .nav-item.active { color: #f7a53a; }
.nav-item .nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item .badge-soon {
margin-left: auto; font-size: 10.5px;
background: var(--blue-soft); color: var(--blue); padding: 1px 7px; border-radius: 9999px; font-weight: 600;
}
[data-theme="dark"] .nav-item .badge-soon { color: #8fa6e0; }
/* Servicios adicionales — badges sobrios (mismo lenguaje visual del resto del panel) */
.badge-addon {
display: inline-flex; align-items: center; gap: 0.28rem;
font-size: 11px; font-weight: 600;
background: var(--blue-soft); color: var(--blue);
border: 1px solid var(--blue-soft-border);
padding: 2px 9px; border-radius: 9999px;
}
[data-theme="dark"] .badge-addon { color: #8fa6e0; }
.badge-avail {
display: inline-flex; align-items: center; gap: 0.28rem;
font-size: 11px; font-weight: 600;
background: rgba(15,118,110,.12); color: #0f766e;
padding: 2px 9px; border-radius: 9999px;
}
[data-theme="dark"] .badge-avail { color: #5eead4; background: rgba(94,234,212,.12); }
/* ---------- Cards / inputs ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--shadow); }
.inp { background: var(--input-bg); border: 1px solid var(--line); color: var(--ink); }
.inp:focus { outline: none; box-shadow: 0 0 0 2px rgba(72,98,174,.35); border-color: transparent; }
/* ---------- Selects con la marca (chevron azul propio, sin flecha genérica del sistema) ---------- */
select.inp {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
padding-right: 2.3rem !important;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.7rem center;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
select.inp:hover { border-color: var(--blue); }
select.inp:focus {
outline: none; border-color: transparent;
box-shadow: 0 0 0 2px rgba(72,98,174,.35);
background-image: url("data:image/svg+xml;utf8,");
}
[data-theme="dark"] select.inp {
background-image: url("data:image/svg+xml;utf8,");
}
/* La lista desplegada hereda los colores del panel (Chrome/Edge lo respetan) */
select.inp option { background: var(--surface); color: var(--ink); padding: 6px 10px; }
select.inp option:checked { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
/* ---------- Dropdown propio de la marca (botón + lista, reemplaza al select nativo) ---------- */
.sel-btn {
display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem;
text-align: left; cursor: pointer;
background-image: none !important; padding-right: 0.75rem !important;
transition: border-color .15s ease, box-shadow .15s ease;
}
.sel-btn:hover { border-color: var(--blue); }
.sel-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(72,98,174,.35); border-color: transparent; }
.sel-btn .sel-chevron { color: var(--blue); flex-shrink: 0; transition: transform .15s ease, color .15s ease; }
.sel-btn.open { border-color: var(--orange); }
.sel-btn.open .sel-chevron { transform: rotate(180deg); color: var(--orange); }
[data-theme="dark"] .sel-btn .sel-chevron { color: #8fa6e0; }
.sel-pop {
position: fixed; z-index: 90; overflow: auto;
background: var(--surface); border: 1px solid var(--line); border-radius: 0.6rem;
box-shadow: 0 12px 34px rgba(15,20,27,.22); padding: 4px;
animation: selin .12s ease;
}
@keyframes selin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sel-opt {
display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
padding: 8px 11px; border-radius: 0.45rem; font-size: 14px; color: var(--ink); cursor: pointer;
}
.sel-opt:hover { background: var(--blue-soft); color: var(--blue); }
.sel-opt.sel-selected { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.sel-opt.sel-empty { color: var(--faint); }
.sel-opt.sel-empty:hover { color: var(--blue); }
/* ---------- Buttons ---------- */
.btn { font-size: 0.8rem; font-weight: 600; padding: 0.5rem 0.85rem; border-radius: 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; transition: all 120ms; border: 1px solid transparent; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-dark); }
.btn-ghost { background: var(--surface); color: var(--blue); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); background: var(--blue-soft); }
.btn-danger { background: var(--pink); color: #fff; }
.btn-danger:hover { background: #d90d46; }
/* Diálogo de confirmación propio (nada de "el sitio dice…" del navegador) */
.dlg-in { animation: dlgin .14s ease; }
@keyframes dlgin { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
/* toggle tema */
.theme-toggle { color: var(--muted); }
.theme-toggle:hover { color: var(--orange); background: var(--hover); }
/* ---------- Views ---------- */
.view-enter { animation: view-in 260ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ---------- Tables ---------- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; padding: 0.65rem 1rem; border-bottom: 1px solid var(--line); }
.data-table td { padding: 0.85rem 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.data-table tbody tr:hover { background: var(--hover); }
/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 9999px; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.badge-ok { background: rgba(16,185,129,.15); color: #10b981; }
.badge-pending { background: rgba(245,158,11,.15); color: #d9880b; }
.badge-late { background: rgba(255,16,83,.13); color: var(--pink); }
.badge-blue { background: var(--blue-soft); color: var(--blue); }
[data-theme="dark"] .badge-blue { color: #8fa6e0; }
.badge-orange { background: var(--orange-soft); color: var(--orange); }
.badge-gray { background: var(--line); color: var(--muted); }
/* ---------- Pipeline ---------- */
.pipeline-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: 0.6rem; }
.pipeline-card { background: var(--surface); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.7rem 0.8rem; cursor: grab; box-shadow: var(--shadow); }
.pipeline-card:hover { border-color: var(--orange); box-shadow: 0 2px 8px -4px rgba(241,142,17,0.4); }
/* soft panels (info boxes) */
.panel-blue { background: var(--blue-soft); border: 1px solid var(--blue-soft-border); }
.panel-orange { background: var(--orange-soft); border: 1px solid var(--orange-soft-border); }
.panel-pink { background: rgba(255,16,83,.1); border: 1px solid rgba(255,16,83,.3); }
/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 4px; opacity:.5; }