/* =====================================================================
   SmartLogis: identidad visual del CRM.
   Se carga después de styles.css y de marca/tokens/tokens.css.
   Solo cambia colores, fondos, bordes, letra, esquinas y sombras:
   nada de tamaños, márgenes, rellenos ni acomodo.
   ===================================================================== */

/* ---------- variables del CRM → tokens de la marca ---------- */
:root {
  --bg: var(--surface-100);
  --surface: var(--surface-raised);
  --surface-2: var(--surface-100);
  --border-strong: var(--border-control);
  --text: var(--ink);
  --muted: var(--ink-muted);
  --primary: var(--brand);
  --primary-hover: var(--brand-strong);
  --primary-soft: var(--brand-soft);
  --success: var(--ai);
  --success-soft: var(--ai-soft);
  --warning: var(--warn);
  --warning-soft: var(--warn-soft);
  --pm-none: var(--ink-muted);
  --radius: var(--radius-md);
  --shadow: var(--shadow-card);
  --shadow-lg: var(--shadow-pop);
  /* Pantalla de entrada: Azul Aduana oscuro en claro, tinta profunda en oscuro. */
  --deep-bg: var(--brand-strong);
  /* Menú lateral: papel claro en modo claro; tinta profunda en modo oscuro. */
  --side-bg: var(--surface-raised);
  --side-fg: var(--ink);
  --side-muted: var(--ink-muted);
  --side-hover: var(--surface-100);
  --side-active-bg: var(--brand-soft);
  --side-active-fg: var(--brand);
  --side-line: var(--border);
  /* Enlaces: un azul más claro que el de los botones, para que se note qué se puede abrir.
     Mezcla el Azul Aduana con el azul de la marca en modo oscuro (#6FA8DC); contraste 4.9:1 sobre blanco. */
  --link: color-mix(in srgb, var(--brand) 45%, #6FA8DC);
  --top: var(--side-bg);
  --top-2: var(--side-hover);
  --top-text: var(--side-muted);
  /* Texto sobre un color de estado (verde, ámbar oscuro, rojo, azul): blanco en claro, oscuro en modo oscuro. */
  --on-status: var(--surface-raised);
  /* Bordes de hover y fondos suaves derivados de la marca. */
  --brand-line: color-mix(in srgb, var(--brand) 40%, var(--border));
  --hover-soft: color-mix(in srgb, var(--brand-soft) 55%, var(--surface-raised));
  --fill-soft: color-mix(in srgb, var(--border) 45%, var(--surface-raised));
  font-family: var(--font-sans);
  /* Misma altura de línea que tenía Segoe UI, para que nada cambie de alto con las letras nuevas. */
  line-height: 1.33;
  color: var(--text);
}
[data-theme="dark"] {
  --deep-bg: var(--surface-deep);
  --side-bg: var(--surface-deep);
  --side-fg: var(--on-deep);
  --side-muted: color-mix(in srgb, var(--on-deep) 72%, var(--side-bg));
  --side-hover: color-mix(in srgb, var(--on-deep) 8%, var(--side-bg));
  --side-active-bg: color-mix(in srgb, var(--on-deep) 14%, var(--side-bg));
  --side-active-fg: var(--on-deep);
  --side-line: color-mix(in srgb, var(--on-deep) 14%, var(--side-bg));
  --link: var(--brand);
  --violet: #B4A0F0;
  --violet-soft: #2A2350;
  color-scheme: dark;
}
[data-theme="light"] { color-scheme: light; }

body { background: var(--bg); }

/* ---------- tipografía ---------- */
.page-head h1, .detail-head h1, .form-head h1, .card-head h2, .card-head h3, .modal-head h3, .auth-card h1,
.pm-card-top h3, .section-title, .brand, .pd-company, .pd-title h1 { font-family: var(--font-display); }
.page-head h1, .detail-head h1, .form-head h1, .auth-card h1, .brand { font-weight: 700; }
/* Datos: importes, cantidades y cifras en IBM Plex Mono. */
.num, .kpi .v, table.grid td.right, table.totals td + td, .pd-items td.right, .cal .day .num { font-family: var(--font-mono); }

/* ---------- enlaces ---------- */
a, .linklike { color: var(--link); }

/* ---------- botones y controles ---------- */
.btn { border-color: var(--border); background: var(--surface-raised); }
.btn:hover { background: var(--surface-100); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn-group .btn.active { border-color: var(--brand-line); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local],
input[type=tel], input[type=search], select, textarea { background: var(--surface-raised); border-color: var(--border-control); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 28%, transparent); }
.btn:focus-visible, .top-btn:focus-visible, .side-nav a:focus-visible, button.side-h:focus-visible, .linklike:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--focus);
}
.pill { background: var(--fill-soft); color: var(--ink-muted); border-radius: var(--radius-pill); }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }

/* ---------- menú lateral ----------
   Inicio y cada sección van como renglones con ícono. Las opciones de una sección cuelgan de una
   línea vertical (la "ruta" del isotipo) y la opción activa lleva el nodo ámbar sobre esa línea. */
.sidebar { border-right: 1px solid var(--side-line); }
.brand { color: var(--side-fg); border-bottom-color: transparent; }
.side-nav a { color: var(--side-fg); border-radius: var(--radius-md); }
.side-nav a svg { opacity: 1; }
.side-nav a:hover { background: var(--side-hover); color: var(--side-fg); }
.side-nav a.active { background: var(--side-active-bg); color: var(--side-active-fg); font-weight: 600; }
button.side-h { font-size: inherit; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--side-fg);
  gap: 12px; padding: 8px 10px; margin: 2px 0 0; border-radius: var(--radius-md); }
button.side-h:hover { color: var(--side-fg); background: var(--side-hover); }
button.side-h svg:not(.chev) { flex: none; }
button.side-h .chev { color: var(--side-muted); transform: rotate(90deg); }
.side-group.open > .side-h .chev { transform: rotate(-90deg); }
.side-group:not(.open):has(a.active) > .side-h { color: var(--side-active-fg); }
.side-items { position: relative; margin: 2px 0 6px 18px; padding-left: 10px; border-left: 2px solid var(--side-line); }
.side-items a { color: var(--side-muted); padding: 7px 10px; position: relative; overflow: visible; }
.side-items a svg { display: none; }
.side-items a.active::before { content: ""; position: absolute; left: -16px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--accent); }
.side-collapse { border-top-color: var(--side-line); color: var(--side-muted); }
.side-collapse:hover { color: var(--side-fg); }
body.nav-collapsed .side-h { border-top-color: var(--side-line); }
/* Menú contraído (solo íconos, en computadora): sin línea ni nodo, y vuelven los íconos de cada opción. */
@media (min-width: 801px) {
  body.nav-collapsed button.side-h { font-size: 0; padding: 8px 0 4px; margin: 6px 6px 0; border-radius: 0; }
  body.nav-collapsed button.side-h svg { display: none; }
  body.nav-collapsed .side-items { margin: 0; padding-left: 0; border-left: 0; }
  body.nav-collapsed .side-items a { padding: 9px 0; overflow: hidden; }
  body.nav-collapsed .side-items a svg { display: block; }
  body.nav-collapsed .side-items a.active::before { display: none; }
}
/* En el teléfono el menú siempre se ve completo, aunque en la computadora esté contraído. */
@media (max-width: 800px) {
  body.nav-collapsed button.side-h { font-size: inherit; padding: 8px 10px; margin: 2px 0 0; border-top: 0; }
  body.nav-collapsed .side-items a { padding: 7px 10px; }
}

/* ---------- barra superior ---------- */
.topbar { background: var(--surface-raised); border-bottom-color: var(--border); }
.top-btn:hover { background: var(--surface-100); color: var(--ink); }
/* Crear nuevo: la llamada a la acción principal va en ámbar. */
.top-btn.plus { background: var(--accent); color: var(--on-accent); }
.top-btn.plus:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); color: var(--on-accent); }
.notif-count { background: var(--accent); color: var(--on-accent); }
.branch-tag { border-radius: var(--radius-pill); }

/* ---------- menús, tarjetas y ventanas ---------- */
.menu, .lookup-menu { background: var(--surface-raised); border-radius: var(--radius-md); }
.notif-menu .menu-head { background: var(--surface-raised); }
.menu a.notif.unread { background: var(--brand-soft); }
.card { border-radius: var(--radius-md); }
.modal { background: var(--surface-raised); border-radius: var(--radius-lg); }
.toast { background: var(--surface-deep); color: var(--on-deep); border: 1px solid var(--border); border-radius: var(--radius-md); }
.banner { color: var(--warn); }
.banner.info { background: var(--brand-soft); color: var(--brand); }

/* ---------- tablas ---------- */
table.grid th { color: var(--ink-muted); }
table.grid tbody tr:hover { background: var(--hover-soft); }
table.grid tbody tr.selected { background: var(--brand-soft); }

/* ---------- kanban ---------- */
.kcol { background: var(--fill-soft); border-radius: var(--radius-md); }
.kcard { background: var(--surface-raised); border-radius: var(--radius-sm); }
.kcard:hover { border-color: var(--brand-line); }

/* ---------- fichas ---------- */
.rel-nav a:hover { background: var(--brand-soft); }
.fld .val.editable:hover { background: var(--hover-soft); }
.stagebar button { background: var(--fill-soft); color: var(--ink-muted); }
.stagebar button.done { background: var(--brand-soft); color: var(--brand); }
.stagebar button.current { background: var(--brand); color: var(--on-brand); }
.stagebar button.won { background: var(--ai); color: var(--on-ai); }
.stagebar button.lost { background: var(--danger); color: var(--on-status); }
.timeline li::before { background: var(--surface-raised); }
.timeline .chg, .frow > label { color: var(--ink-muted); }

/* ---------- indicadores y gráficas ---------- */
.kpi:hover, .pm-card:hover { border-color: var(--brand-line); }
.bar-track, .pm-progress { background: var(--fill-soft); }
.bar-row .num, .cols-chart .num { color: var(--ink-muted); }

/* ---------- calendario ---------- */
.cal { background: var(--surface-raised); }
.cal .day:hover { background: var(--hover-soft); }
.cal .day.other { background: var(--surface-100); color: color-mix(in srgb, var(--ink-muted) 70%, var(--surface-100)); }
.cal .day.today .num { background: var(--brand); color: var(--on-brand); }

/* ---------- entrada al CRM ---------- */
.auth-wrap { background: var(--deep-bg); }
.auth-card { background: var(--surface-raised); border-radius: var(--radius-lg); }
.auth-legal { color: color-mix(in srgb, var(--on-deep) 72%, var(--deep-bg)); }
.auth-legal a { color: var(--on-deep); }

/* ---------- Project Manager ---------- */
table.pm-table td.pm-status, .pm-status-btn, .pm-status-pop button, .pm-tag { color: var(--on-status); }
.pm-status-pop button.current { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-status) 70%, transparent); }
table.pm-table th.pm-drag, table.pm-table td.pm-drag { color: color-mix(in srgb, var(--ink-muted) 60%, var(--surface-raised)); }
.pm-table input:focus { background: var(--surface-raised); }
.pm-range { background: var(--deep-bg); color: var(--on-deep); }
.pm-chip a, .pm-chip button { color: var(--brand); }
.pm-chip button:hover { background: color-mix(in srgb, var(--brand) 15%, transparent); }

/* ---------- campañas ---------- */
.wizard-steps button span { background: var(--fill-soft); }
.wizard-steps button.active { border-color: var(--brand-line); }
.wizard-steps button.active span { background: var(--brand); color: var(--on-brand); }
.ed-area a[data-button] { background: var(--brand); color: var(--on-brand); border-radius: var(--radius-sm); }
.pv-frame-wrap { background: var(--surface-100); }
.switch span { background: var(--border-control); }

/* ---------- cotización imprimible: siempre en papel blanco, aun en modo oscuro ---------- */
.print-doc {
  --text: #0B1B2B; --muted: #4A5868; --primary: #12355B; --border: #DCD6CA; --border-strong: #8F887A;
  --surface: #FFFFFF; --surface-2: #F7F5F0; color-scheme: light;
  background: #FFFFFF; color: #0B1B2B;
}
.print-doc .pd-items th { background: #F7F5F0; border-bottom-color: #DCD6CA; }
.print-doc .pd-items td { border-bottom-color: #ECE7DD; }
@media print {
  :root[data-theme="dark"] {
    --brand: #12355B; --brand-strong: #0C2744; --brand-soft: #E1E9F2; --on-brand: #FFFFFF;
    --ai: #13796E; --ai-soft: #E3F2EF; --warn: #8A560E; --warn-soft: #FBEFD9; --danger: #B3261E; --danger-soft: #F8E3E1;
    --ink: #0B1B2B; --ink-muted: #4A5868; --surface-100: #F7F5F0; --surface-raised: #FFFFFF; --border: #DCD6CA; --border-control: #8F887A;
    color-scheme: light;
  }
}
.lookup-item.lookup-create { color: var(--link); }