/* =====================================================================
   IMPACTIA — Sistema de diseño
   · Tipografía: Inter (interfaz) y Montserrat (marca).
   · Color: neutros para el texto; el azul de marca solo para acciones, enlaces y lo activo.
   · Oscuro y claro comparten tokens: los módulos solo usan las variables.
   ===================================================================== */
:root,
:root[data-theme="dark"] {
  --bg: #0a0d14;
  --bg-grad: radial-gradient(1100px 520px at 0% -10%, rgba(77, 141, 255, .10), transparent 60%);
  --surface: #11151f;
  --surface-strong: #161b27;
  --surface-hover: #1c2232;
  --input-bg: #0d1119;
  --nav-bg: #0d1119;
  --border: #242b3b;
  --border-strong: #333c52;
  --text: #e8ebf1;
  --text-muted: #9aa3b5;
  --text-faint: #6b7487;
  --accent: #4d8dff;
  --accent-strong: #79a8ff;
  --accent-soft: rgba(77, 141, 255, .14);
  --on-accent: #ffffff;
  --danger: #f87171;
  --success: #34d399;
  --warning: #fbbf24;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f6fa;
  --bg-grad: radial-gradient(1100px 520px at 0% -10%, rgba(31, 95, 214, .06), transparent 60%);
  --surface: #ffffff;
  --surface-strong: #f6f8fb;
  --surface-hover: #eef2f8;
  --input-bg: #ffffff;
  --nav-bg: #ffffff;
  --border: #e3e8f0;
  --border-strong: #cfd6e3;
  --text: #0f172a;
  --text-muted: #5a6577;
  --text-faint: #8b94a6;
  --accent: #1f5fd6;
  --accent-strong: #174aad;
  --accent-soft: rgba(31, 95, 214, .09);
  --on-accent: #ffffff;
  --danger: #d32f2f;
  --success: #15803d;
  --warning: #b45309;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .07);
  color-scheme: light;
}
:root {
  --radius: 14px;
  --radius-sm: 10px;
  --header-h: 60px;
  --nav-w: 268px;
  --nav-w-collapsed: 72px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Montserrat", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg-grad), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3 { color: var(--text); letter-spacing: -.01em; }
a { color: var(--accent); }
::selection { background: var(--accent-soft); }

/* ===== Cabecera ===== */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: env(safe-area-inset-top) 16px 0;
  background: color-mix(in srgb, var(--nav-bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; }
.brand-mark {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--font-brand); font-weight: 800; font-size: 14px; letter-spacing: -.02em; color: #fff;
  background: linear-gradient(135deg, #3b7bff 0%, #1f4fc4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 8px rgba(31, 79, 196, .35);
}
.brand-name { font-family: var(--font-brand); font-weight: 800; font-size: 15px; letter-spacing: .12em; white-space: nowrap; }
.brand-name b { font-weight: 500; color: var(--text-muted); margin-left: .3em; }
.controls { display: flex; align-items: center; gap: 6px; }

.lang { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-strong); border: 1px solid var(--border); }
.lang button {
  appearance: none; border: 0; background: transparent; color: var(--text-muted);
  font: inherit; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 7px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.icon-btn {
  appearance: none; display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Usuario en la cabecera */
.user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 12px; margin-left: 4px; }
.avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.user-meta { display: grid; line-height: 1.15; }
.user-meta strong { font-size: 13px; font-weight: 600; color: var(--text); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta span { font-size: 11px; color: var(--text-muted); }

/* ===== Contenido ===== */
main {
  position: relative;
  max-width: 1240px; margin: 0 auto;
  padding: 24px 16px calc(32px + env(safe-area-inset-bottom));
}
body.has-shell main { max-width: none; padding: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

/* ===== Pantalla de acceso ===== */
body.is-login .brand { visibility: hidden; }
.login-screen {
  min-height: calc(100dvh - var(--header-h) - 60px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, 5vh, 48px); padding: 24px 0;
}
.hero { text-align: center; animation: hero-in .7s ease-out both; }
.hero-name {
  font-family: var(--font-brand); font-weight: 800;
  font-size: clamp(40px, 10vw, 92px); line-height: 1; letter-spacing: .08em; margin-right: -.08em;
  background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--accent) 70%, var(--text)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: clamp(10px, 1.6vw, 18px);
  font-family: var(--font-brand); font-weight: 500;
  font-size: clamp(13px, 2.2vw, 19px); letter-spacing: .62em; color: var(--accent);
}
.hero-sub span { margin-right: -.62em; }
.hero-sub::before, .hero-sub::after { content: ""; height: 1px; width: clamp(32px, 7vw, 72px); background: currentColor; opacity: .7; }
.hero-tagline { margin: 14px 0 0; color: var(--text-muted); font-size: 14px; letter-spacing: .02em; }
@keyframes hero-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.login { width: 100%; max-width: 400px; margin: 0 auto; padding: 28px; box-shadow: var(--shadow); animation: hero-in .7s .12s ease-out both; }
.login h1 { margin: 0 0 4px; font-size: 21px; font-weight: 700; }
.login p.sub { margin: 0 0 20px; color: var(--text-muted); font-size: 14px; }
.login-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; }

/* ===== Formularios ===== */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label, .field > span { font-size: 13px; font-weight: 500; color: var(--text-muted); }
input, select, textarea {
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 9px 12px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
input[type="file"] { padding: 7px 8px; }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
textarea { resize: vertical; line-height: 1.5; }

/* ===== Botones ===== */
.btn {
  appearance: none; border: 1px solid transparent; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .005em;
  padding: 10px 16px; border-radius: var(--radius-sm); width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:hover { background: var(--accent-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.small { width: auto; padding: 7px 12px; font-size: 13px; }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn.ghost:hover { background: var(--surface-hover); }
.btn.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); box-shadow: none; }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
a.btn { display: inline-block; text-decoration: none; text-align: center; }
.error { color: var(--danger); font-size: 14px; min-height: 1.4em; margin: 0 0 10px; }
.ok { color: var(--success); font-size: 13px; }

/* ===== Inicio ===== */
.welcome { margin: 0; font-size: clamp(24px, 4vw, 32px); font-weight: 700; letter-spacing: -.02em; }
.role-tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px;
}
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 20px; }
.grid .card h3 { margin: 0 0 6px; font-size: 15px; }
.grid .card p { margin: 0; color: var(--text-muted); font-size: 14px; }
.section-title { color: var(--text); font-size: 17px; font-weight: 650; margin: 4px 0 12px; letter-spacing: -.01em; }

/* ===== Tablas ===== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--surface-strong); white-space: nowrap; }
thead th:first-child { border-top-left-radius: 10px; }
thead th:last-child { border-top-right-radius: 10px; }
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: var(--surface-hover); }
tbody tr:last-child td { border-bottom: 0; }
td input, td select { padding: 6px 8px; min-width: 120px; }

@media (max-width: 640px) {
  table, thead, tbody, tr, td { display: block; }
  thead { display: none; }
  tr { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--surface); }
  tbody tr:hover { background: var(--surface); }
  td { border: 0; padding: 6px 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: center; overflow-wrap: anywhere; }
  td input, td select { min-width: 0; }
  td::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; }
}

.loading { text-align: center; margin-top: 20vh; color: var(--text-muted); }

/* ===== Estructura: menú lateral + contenido ===== */
.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); align-items: start; min-height: calc(100dvh - var(--header-h)); }
body.nav-collapsed .shell { grid-template-columns: var(--nav-w-collapsed) minmax(0, 1fr); }
.content {
  min-width: 0; width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 26px clamp(16px, 3vw, 36px) calc(48px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start;
}

.sidebar {
  position: sticky; top: var(--header-h); height: calc(100dvh - var(--header-h));
  display: flex; flex-direction: column;
  background: var(--nav-bg); border-right: 1px solid var(--border);
  padding: 14px 10px 10px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.sidebar nav { flex: 1; }
.nav-group + .nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.nav-title { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); padding: 6px 10px 6px; }
.sidebar a, .nav-area summary {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 9px; min-height: 36px;
  color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background-color .12s ease, color .12s ease;
}
.sidebar a svg, .nav-area summary svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.sidebar a:hover, .nav-area summary:hover { background: var(--surface-hover); color: var(--text); }
.sidebar a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar a[aria-current="page"] svg { opacity: 1; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-area summary { list-style: none; cursor: pointer; user-select: none; font-weight: 600; color: var(--text); }
.nav-area summary::-webkit-details-marker { display: none; }
.nav-area summary::after {
  content: ""; width: 7px; height: 7px; margin-right: 3px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; opacity: .55;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.nav-area[open] summary::after { transform: rotate(45deg); }
.nav-area > a { padding-left: 14px; margin-left: 18px; border-left: 1px solid var(--border); border-radius: 0 9px 9px 0; }
.nav-area > a[aria-current="page"] { border-left-color: var(--accent); }

/* Menú plegado: solo iconos */
body.nav-collapsed .sidebar { padding-left: 8px; padding-right: 8px; }
body.nav-collapsed .sidebar a { justify-content: center; padding: 9px 0; }
body.nav-collapsed .nav-label, body.nav-collapsed .nav-title, body.nav-collapsed .nav-legal, body.nav-collapsed .nav-badge { display: none; }
body.nav-collapsed .nav-group + .nav-group { margin-top: 8px; padding-top: 8px; }
body.nav-collapsed .nav-icon-badge { display: block; }
.nav-icon-badge { display: none; position: absolute; top: 4px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sidebar a { position: relative; }

.nav-backdrop { position: fixed; inset: var(--header-h) 0 0 0; z-index: 19; background: rgba(5, 8, 14, .55); backdrop-filter: blur(2px); }

/* Tablet y móvil: el menú es un cajón que se desliza */
@media (max-width: 1023px) {
  .shell, body.nav-collapsed .shell { display: block; }
  .sidebar {
    position: fixed; z-index: 20; top: var(--header-h); bottom: 0; left: 0; height: auto;
    width: min(300px, 86vw); transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: var(--shadow); padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-collapsed .sidebar a { justify-content: flex-start; padding: 8px 10px; }
  body.nav-collapsed .nav-label, body.nav-collapsed .nav-title, body.nav-collapsed .nav-legal { display: revert; }
}

/* Barra inferior (móvil): lo que más se usa a un toque */
.bottom-bar { display: none; }
@media (max-width: 860px) {
  .bottom-bar {
    position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--nav-bg) 92%, transparent);
    backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--border);
  }
  .bottom-bar a, .bottom-bar button {
    appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer;
    display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border-radius: 10px;
    color: var(--text-muted); text-decoration: none; font-size: 11px; font-weight: 600; position: relative;
  }
  .bottom-bar svg { width: 22px; height: 22px; }
  .bottom-bar [aria-current="page"] { color: var(--accent); }
  .bottom-bar .nav-badge { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; }
  body.has-shell .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Cabecera de Inicio: fecha, saludo y accesos rápidos */
.page-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 4px 0 6px; }
.page-hero-date { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.page-hero-sub { margin: 6px 0 0; color: var(--text-muted); font-size: 14.5px; max-width: 620px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-actions .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; }
.quick-actions svg { width: 16px; height: 16px; }

/* Buscador global */
.search-trigger {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  height: 36px; padding: 0 8px 0 10px; min-width: 220px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-strong); color: var(--text-faint); font: inherit; font-size: 13px;
  transition: border-color .15s ease, color .15s ease;
}
.search-trigger svg { width: 16px; height: 16px; }
.search-trigger:hover { border-color: var(--border-strong); color: var(--text-muted); }
.search-trigger-label { flex: 1; text-align: left; }
kbd {
  font: 600 11px/1 var(--font); padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted);
}
@media (max-width: 900px) { .search-trigger { min-width: 0; width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; } .search-trigger-label, .search-trigger kbd { display: none; } .search-trigger svg { width: 19px; height: 19px; } }
.search-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; justify-items: center; align-items: start;
  padding: max(8vh, 16px) 12px 16px; background: rgba(5, 8, 14, .55); backdrop-filter: blur(3px);
  animation: fade-in .12s ease-out;
}
@keyframes fade-in { from { opacity: 0; } }
.search-box {
  width: min(640px, 100%); max-height: min(70vh, 640px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  animation: hero-in .16s ease-out;
}
.search-head { display: flex; align-items: center; gap: 10px; padding: 4px 16px; border-bottom: 1px solid var(--border); color: var(--text-faint); }
.search-head svg { width: 19px; height: 19px; flex: none; }
.search-input { border: 0; background: transparent; padding: 14px 0; font-size: 16px; box-shadow: none !important; }
.search-input:focus { border: 0; }
.search-results { overflow-y: auto; padding: 8px; flex: 1; }
.search-group + .search-group { margin-top: 6px; }
.search-group-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 8px 10px 4px; }
.search-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.search-item.active { background: var(--accent-soft); }
.search-ico { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-strong); color: var(--text-muted); border: 1px solid var(--border); }
.search-item.active .search-ico { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.search-ico svg { width: 17px; height: 17px; }
.search-text { flex: 1; min-width: 0; display: grid; }
.search-text strong { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-text span { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-go { color: var(--text-faint); opacity: 0; font-size: 13px; }
.search-item.active .search-go { opacity: 1; }
.search-empty { padding: 28px 12px; text-align: center; color: var(--text-muted); }
.search-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-faint); }
.search-foot kbd { margin-right: 2px; }
@media (max-width: 640px) { .search-foot { display: none; } .search-overlay { padding-top: 10px; } .search-box { max-height: 85vh; } }

/* Rutas comerciales */
.pro-planner { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .pro-planner { grid-template-columns: minmax(0, 1fr); } }
.pro-side { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 1100px) { .pro-side { position: static; } }
.pro-map { height: 520px; }
.pro-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; font-size: 12.5px; }
.pro-est-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 8px; flex-wrap: wrap; }
.pro-stop-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; max-height: 360px; overflow-y: auto; }
.pro-stop-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-strong); }
.pro-stop-list .link-btn { font-size: 16px; padding: 0 4px; }
.pro-stop-list .link-btn:disabled { opacity: .3; cursor: default; }
.pro-stop-name { flex: 1; min-width: 0; display: grid; font-size: 14px; font-weight: 600; }
.pro-stop-name small { font-weight: 400; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #1f5fd6; color: #fff; }
.pro-num.done { background: var(--success); }
.pro-num.skip { background: var(--text-faint); }
.pro-missing { margin-top: 10px; }
.pro-missing summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--warning); }
.pro-missing ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
.pro-missing li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.pro-osm-results { margin-top: 10px; }
.pro-osm-list { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 4px; max-height: 300px; overflow-y: auto; font-size: 13.5px; }
.pro-route-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pro-route-map { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 1023px) { .pro-route-grid { grid-template-columns: minmax(0, 1fr); } .pro-route-grid > .pro-route-map { order: -1; position: static; } .pro-route-map .pro-map { height: 300px; } }
.pro-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.pro-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.pro-visit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pro-visit { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-strong); display: grid; gap: 8px; scroll-margin-top: calc(var(--header-h) + 16px); }
.pro-visit.is-done { background: transparent; }
.pro-visit-head { display: flex; gap: 12px; align-items: flex-start; }
.pro-visit-id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pro-contact { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.pro-contact a { text-decoration: none; }
.pro-visit-done { display: grid; gap: 4px; }
.pro-visit-done:empty { display: none; }
.pro-photo img { max-width: 220px; max-height: 160px; border-radius: 10px; border: 1px solid var(--border); margin-top: 4px; }
.pro-visit-form { display: grid; gap: 8px; }
.pro-visit-form .field { margin-bottom: 0; }
.pro-outcomes { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-out { padding: 7px 12px; font-size: 13px; }

/* Campana de notificaciones */
.bell-btn { position: relative; }
.bell-count {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--nav-bg);
}
.bell-btn.ring svg { animation: bell-ring .7s ease; transform-origin: 50% 10%; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.notif-panel {
  position: fixed; z-index: 55; width: min(400px, calc(100vw - 16px)); max-height: min(70vh, 560px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  animation: hero-in .14s ease-out;
}
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.notif-head strong { font-size: 15px; }
.notif-head .link-btn:disabled { color: var(--text-faint); cursor: default; text-decoration: none; }
.notif-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.notif-item:hover { background: var(--surface-hover); }
.notif-item.unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.notif-item.unread:hover { background: var(--accent-soft); }
.notif-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-strong); color: var(--text-muted); }
.notif-ico svg { width: 17px; height: 17px; }
.notif-ico.tone-good { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.notif-ico.tone-warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.notif-ico.tone-bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.notif-ico.tone-info { color: var(--accent); }
.notif-text { flex: 1; min-width: 0; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.4; }
.notif-item.unread .notif-text > span { font-weight: 600; }
.notif-text time { font-size: 12px; color: var(--text-faint); }
.notif-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; }
.notif-empty { padding: 34px 16px; text-align: center; color: var(--text-muted); }
.notif-empty-ico svg { width: 30px; height: 30px; opacity: .45; }
.notif-foot { padding: 10px 16px; border-top: 1px solid var(--border); }

/* Mi perfil */
.user-chip { text-decoration: none; color: inherit; transition: background-color .15s ease; }
.user-chip:hover { background: var(--surface-hover); }
.profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.profile-id { display: grid; gap: 4px; min-width: 0; }
.profile-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } }
.pass-strength { display: flex; align-items: center; gap: 10px; margin: -4px 0 10px; }
.pass-meter { flex: 0 0 160px; height: 6px; border-radius: 999px; background: var(--surface-strong); overflow: hidden; border: 1px solid var(--border); }
.pass-meter span { display: block; height: 100%; width: 0; transition: width .2s ease, background-color .2s ease; }
.pass-meter[data-level="1"] span { width: 25%; background: var(--danger); }
.pass-meter[data-level="2"] span { width: 50%; background: var(--warning); }
.pass-meter[data-level="3"] span { width: 75%; background: var(--accent); }
.pass-meter[data-level="4"] span { width: 100%; background: var(--success); }
.profile-legal { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.profile-legal li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Pie del menú: plegar y enlaces legales */
.nav-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.nav-collapse {
  appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; color: var(--text-faint); font-size: 13px; font-weight: 500;
}
.nav-collapse svg { width: 18px; height: 18px; flex: none; }
.nav-collapse:hover { background: var(--surface-hover); color: var(--text); }
body.nav-collapsed .nav-collapse { justify-content: center; padding: 9px 0; }
@media (max-width: 1023px) { .nav-collapse { display: none; } }
@media (min-width: 1024px) { #navToggle { display: none; } }
.nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
@media (max-width: 720px) { .user-meta { display: none; } .brand-name { display: none; } }
@media (max-width: 380px) { .lang button { padding: 4px 7px; } }

/* Inicio por áreas */
.home-area + .home-area { margin-top: 28px; }
.area-title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.crumb { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }

/* Matriz de accesos: fila de título de cada área */
.matrix .area-row th { padding-top: 18px; font-size: 12px; color: var(--accent); background: transparent; border-bottom: 2px solid var(--border); }
@media (max-width: 640px) {
  .matrix .area-row { border: 0; padding: 12px 0 0; margin: 0; background: transparent; }
  .matrix .area-row th { display: block; padding: 4px 0; border: 0; }
}

/* Tarjetas-enlace del inicio */
.link-card { text-decoration: none; color: inherit; display: block; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.link-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-1px); box-shadow: var(--shadow); }
.content .grid { margin-bottom: 0; }

/* Cabecera de tarjeta con título + acción */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.card-head .section-title { margin: 0; }
.search { max-width: 280px; }

.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.center { text-align: center; }
.row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-actions > select { width: auto; padding: 6px 10px; }

/* Formulario de crear usuario */
.form-card { max-width: 520px; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; min-width: 0; }

/* Matriz de accesos */
.matrix input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.matrix input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .6; }

/* ===== Formularios y elementos comunes de módulos ===== */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 14px; }
.toolbar select { width: auto; }
.link-btn { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.danger-text { color: var(--danger); }
.back-link { display: inline-block; font-size: 14px; color: var(--accent); text-decoration: none; margin-bottom: 8px; }
.back-link:hover { text-decoration: underline; }
.strong-link { color: var(--text); font-weight: 600; text-decoration: none; }
.strong-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Etiquetas de estado */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid transparent;
}
.badge-lead { color: #b7791f; background: rgba(214, 158, 46, .14); border-color: rgba(214, 158, 46, .35); }
.badge-activo { color: #2f855a; background: rgba(56, 161, 105, .14); border-color: rgba(56, 161, 105, .35); }
.badge-inactivo { color: var(--text-muted); background: transparent; border-color: var(--border); }
:root[data-theme="dark"] .badge-lead, :root:not([data-theme]) .badge-lead { color: #f6c35b; }
:root[data-theme="dark"] .badge-activo, :root:not([data-theme]) .badge-activo { color: #5fd08f; }
.badge-type { color: var(--accent); border-color: var(--border); }

/* Ficha de cliente */
.detail-head { margin-bottom: 16px; }
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-title { margin: 0; font-size: clamp(22px, 3.4vw, 28px); font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.crm-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .crm-grid { grid-template-columns: 1fr; } }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.crm-grid > * { min-width: 0; }
.mini-form { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.contact-list + .mini-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.contact-list, .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contact-list li { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 4px; }
.contact-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contact-links { display: flex; gap: 14px; flex-wrap: wrap; }
.contact-links a { color: var(--accent); }
.timeline li { padding-left: 14px; border-left: 2px solid var(--border); }
.tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-head .link-btn { margin-left: auto; font-size: 18px; line-height: 1; }
.tl-text { margin: 6px 0 0; white-space: pre-wrap; }

/* ===== Indicadores (KPI) ===== */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 6px 0 16px; }
@media (max-width: 480px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kpi-value { font-size: 19px; } }
.kpi { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface-strong); min-width: 0; }
.kpi-value { font-size: clamp(19px, 1.9vw, 24px); font-weight: 700; color: var(--text); line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 6px; }
.kpi.warn { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
.kpi.warn .kpi-value { color: var(--warning); }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12.5px; white-space: nowrap; color: var(--text-muted); }

/* Estados de campaña */
.st-solicitud, .st-presupuesto { color: #b7791f; background: rgba(214, 158, 46, .14); border-color: rgba(214, 158, 46, .35); }
.st-aceptada, .st-diseno, .st-aprobacion, .st-imprenta { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--border); }
.st-reparto { color: #6b46c1; background: rgba(128, 90, 213, .14); border-color: rgba(128, 90, 213, .35); }
.st-completada { color: #2f855a; background: rgba(56, 161, 105, .14); border-color: rgba(56, 161, 105, .35); }
.st-cancelada { color: var(--danger); border-color: currentColor; }
:root[data-theme="dark"] .st-solicitud, :root[data-theme="dark"] .st-presupuesto { color: #f6c35b; }
:root[data-theme="dark"] .st-reparto { color: #b69cf5; }
:root[data-theme="dark"] .st-completada { color: #5fd08f; }

/* Pasos de la campaña */
.stepper-card { margin-bottom: 20px; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.stepper li { display: grid; justify-items: center; gap: 6px; text-align: center; position: relative; }
.stepper li::before {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0;
}
.stepper li:first-child::before { display: none; }
.stepper li.done::before, .stepper li.current::before { background: var(--accent); }
.stepper .dot {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  border: 2px solid var(--border); background: var(--bg); color: var(--text-muted);
}
.stepper li.done .dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stepper li.current .dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.stepper .label { font-size: 12px; color: var(--text-muted); }
.stepper li.current .label { color: var(--accent); font-weight: 700; }
@media (max-width: 700px) {
  .stepper { grid-template-columns: 1fr; gap: 8px; }
  .stepper li { grid-template-columns: 30px 1fr; justify-items: start; align-items: center; text-align: left; }
  .stepper li::before { display: none; }
}

/* Detalles en lista */
.info-list { display: grid; gap: 8px; margin: 0 0 12px; }
.info-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; }
.info-row dt { color: var(--text-muted); font-size: 13px; }
.info-row dd { margin: 0; font-weight: 600; }
.status-change { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.status-change .field { margin: 0; flex: 1; min-width: 180px; }

/* Barras de avance */
.progress { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); overflow: hidden; min-width: 80px; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .3s ease; }
.qty-input { max-width: 110px; }

/* Selección de zonas en el formulario */
.zone-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 6px 0 14px; display: grid; gap: 8px; }
.zone-fieldset legend { padding: 0 6px; color: var(--accent); font-weight: 700; font-size: 14px; }
.zone-pick { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; align-items: center; }

/* ===== Pestañas de módulo ===== */
.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.tabs a { position: relative; padding: 9px 14px 11px; text-decoration: none; color: var(--text-muted); font-size: 14px; font-weight: 600; border-radius: 8px 8px 0 0; }
.tabs a:hover { color: var(--text); background: var(--surface-hover); }
.tabs a[aria-current="page"] { color: var(--accent); }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }

/* Estados de pedidos de imprenta y presupuestos */
.po-solicitado, .qs-borrador { color: var(--text-muted); border-color: var(--border); }
.po-oferta, .qs-enviado { color: #b7791f; background: rgba(214, 158, 46, .14); border-color: rgba(214, 158, 46, .35); }
.po-aceptado, .po-produccion { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--border); }
.po-recibido, .qs-aceptado { color: #2f855a; background: rgba(56, 161, 105, .14); border-color: rgba(56, 161, 105, .35); }
.po-rechazado, .qs-rechazado, .qs-caducado { color: var(--danger); border-color: currentColor; }
:root[data-theme="dark"] .po-oferta, :root[data-theme="dark"] .qs-enviado { color: #f6c35b; }
:root[data-theme="dark"] .po-recibido, :root[data-theme="dark"] .qs-aceptado { color: #5fd08f; }
.stars { color: #d69e2e; letter-spacing: 1px; white-space: nowrap; }
.perk-box { padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; color: var(--accent); }

/* Comparador de ofertas */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.offer { border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: grid; gap: 4px; align-content: start; }
.offer.best { border-color: #38a169; box-shadow: 0 0 0 2px rgba(56, 161, 105, .25); }
.offer.rejected { opacity: .55; }
.offer-supplier { font-weight: 700; color: var(--accent); }
.offer-price { font-size: 22px; font-weight: 800; }
.offer .badge { justify-self: start; }

/* Editor de presupuesto */
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.chip { appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); transition: all .12s ease; }
.chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong)); }
.line-editor input, .line-editor select { min-width: 0; padding: 7px 8px; }
.line-editor td:first-child { min-width: 220px; }
.line-editor td:nth-child(2), .line-editor td:nth-child(4), .line-editor td:nth-child(5) { width: 110px; }
.line-amount { font-weight: 700; white-space: nowrap; }
th.num, td.num { text-align: right; }

/* Documento de presupuesto */
.quote-doc { padding: clamp(18px, 4vw, 36px); }
.qd-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid var(--accent); }
.qd-brand { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; letter-spacing: .12em; color: var(--accent); font-size: 20px; }
.qd-meta { text-align: right; display: grid; gap: 4px; justify-items: end; }
.qd-type { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.qd-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.qd-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.qd-title { font-size: 18px; color: var(--accent); margin: 8px 0 12px; }
.qd-totals { display: grid; gap: 6px; justify-content: end; margin: 14px 0; min-width: 260px; margin-left: auto; width: max-content; }
.qd-totals > div { display: flex; justify-content: space-between; gap: 40px; }
.qd-totals .grand { font-size: 18px; font-weight: 800; color: var(--accent); border-top: 1px solid var(--border); padding-top: 6px; }
.qd-notes { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 560px) { .qd-parties { grid-template-columns: 1fr; } .qd-meta { text-align: left; justify-items: start; } }

/* Impresión / PDF: solo el documento, en blanco y negro sobre blanco */
@media print {
  :root { --bg: #fff; --text: #111; --text-muted: #555; --accent: #1d5fbf; --border: #ccc; --surface: #fff; }
  body { background: #fff !important; }
  .topbar, .sidebar, .nav-backdrop, .no-print, .tabs { display: none !important; }
  body.nav-open .shell, .shell { display: block !important; }
  main { padding: 0; max-width: none; }
  .card { border: 0; box-shadow: none; backdrop-filter: none; background: #fff; }
  .quote-doc { padding: 0; }
  .qd-lines thead { display: table-header-group !important; }
  .qd-lines, .qd-lines tbody, .qd-lines tr { display: revert !important; }
  .qd-lines td { display: table-cell !important; }
  .qd-lines td::before { content: none !important; }
  .report-doc .rep-section { break-inside: avoid; }
  .report-doc .map { height: 320px; }
  .report-doc .photo-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Zonas en el mapa */
.zone-label { background: rgba(255, 255, 255, .9); border: 1px solid rgba(30, 58, 138, .35); color: #10233f; font-weight: 700; font-size: 12px; box-shadow: none; padding: 2px 6px; }
.zone-label.muted { color: #555; font-weight: 600; }
.zone-label::before { display: none; }
.zone-vertex { background: #fff; border: 3px solid #2f7fe0; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); cursor: grab; }
.map-editor { cursor: crosshair; }
.progress-map { display: grid; gap: 8px; margin-top: 14px; }
.progress-legend { display: grid; grid-template-columns: auto minmax(120px, 260px); gap: 4px 12px; align-items: center; }
.progress-ramp { height: 10px; border-radius: 5px; border: 1px solid var(--border); }
.progress-ramp-labels { grid-column: 2; display: flex; justify-content: space-between; }
@media print { .progress-map .map { height: 320px; } }

.vf-notice { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; font-size: 14px; line-height: 1.5; }
.vf-notice .link-btn { font-size: 18px; line-height: 1; }

/* Historial de cambios y copias */
.audit-list { display: grid; gap: 6px; }
.audit-item { border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; background: var(--surface-strong); }
.audit-item summary { display: grid; grid-template-columns: 150px 84px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; cursor: pointer; font-size: 14px; }
.audit-when { color: var(--text-muted); font-size: 13px; }
.audit-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-who { color: var(--text-muted); font-size: 13px; }
.audit-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; text-align: center; border: 1px solid currentColor; }
.audit-insert .audit-badge { color: #2f855a; }
.audit-update .audit-badge { color: var(--accent); }
.audit-delete .audit-badge { color: var(--danger); }
:root[data-theme="dark"] .audit-insert .audit-badge, :root:not([data-theme]) .audit-insert .audit-badge { color: #5fd08f; }
.audit-diff { width: 100%; font-size: 13px; margin: 4px 0 10px; }
.audit-diff th { text-align: left; color: var(--text-muted); font-weight: 600; width: 160px; vertical-align: top; }
.audit-diff td { overflow-wrap: anywhere; vertical-align: top; }
.audit-old { color: var(--danger); text-decoration: line-through; opacity: .85; }
.audit-new { color: #2f855a; }
:root[data-theme="dark"] .audit-new, :root:not([data-theme]) .audit-new { color: #5fd08f; }
@media (max-width: 720px) {
  .audit-item summary { grid-template-columns: auto auto; }
  .audit-what { grid-column: 1 / -1; white-space: normal; }
}
.backup-bar { width: 100%; height: 10px; margin-top: 14px; accent-color: var(--accent); }
.backup-advice { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }

/* Textos legales */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 18px; font-size: 13px; }
.legal-links a, .nav-legal a { color: var(--text-muted); text-decoration: none; }
.legal-links a:hover, .nav-legal a:hover { color: var(--accent); text-decoration: underline; }
.nav-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 10px 2px; font-size: 11.5px; }
.legal-screen, .legal-consent-wrap { max-width: 820px; margin: 24px auto; padding: 0 16px; }
.legal-page h1, .legal-consent h1 { font-size: 22px; }
.legal-doc section + section { margin-top: 16px; }
.legal-doc h3 { font-size: 15px; margin: 0 0 6px; }
.legal-doc p { margin: 0 0 8px; line-height: 1.6; }
.legal-body-box { max-height: 52vh; overflow-y: auto; padding: 14px 16px; margin: 12px 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-strong); }
.legal-body-box:focus-visible { outline: 2px solid var(--accent); }
.legal-consent .check-row { font-weight: 600; margin-bottom: 8px; }
.legal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legal-list summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.legal-list details[open] { padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* Soporte e incidencias */
.warn-text { color: #b7791f; }
:root[data-theme="dark"] .warn-text, :root:not([data-theme]) .warn-text { color: #f6c35b; }
.sup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .sup-layout { grid-template-columns: minmax(0, 1fr); } .sup-layout > .stack:last-child { order: -1; } }
.sup-resolution { margin-top: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(56, 161, 105, .35); background: rgba(56, 161, 105, .08); }
.sup-thread { display: grid; gap: 10px; margin-bottom: 14px; }
.sup-comment { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface-strong); }
.sup-comment.staff { border-left: 3px solid var(--accent); }
.sup-comment.client { border-left: 3px solid #d69e2e; }
.sup-comment.internal { background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, #d69e2e 7%, transparent) 10px 20px), var(--surface-strong); border-style: dashed; }
.sup-internal-tag { font-size: 11px; font-weight: 700; color: #b7791f; }
:root[data-theme="dark"] .sup-internal-tag, :root:not([data-theme]) .sup-internal-tag { color: #f6c35b; }
.sup-compose { display: grid; gap: 8px; }
.sup-compose-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sup-compose-row input[type="file"] { flex: 1; min-width: 200px; }
.sup-compose-row .btn { width: auto; margin-left: auto; }
.sup-stars { display: flex; gap: 4px; }
.sup-stars button { border: 0; background: none; font-size: 30px; line-height: 1; color: #d69e2e; cursor: pointer; padding: 2px; }
.sup-stars button:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }

/* Contratos */
.ctr-terms { font-family: inherit; line-height: 1.5; }
.ctr-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 18px; margin: 4px 0 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-strong); }
.ctr-summary dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ctr-summary dd { margin: 2px 0 0; font-weight: 600; }
.ctr-terms-doc { white-space: pre-wrap; line-height: 1.6; font-size: 15px; }
.ctr-signatures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.ctr-sign-line { margin-top: 40px; padding-top: 6px; border-top: 1px solid var(--text-muted); font-size: 14px; }
.ctr-signed { margin-top: 8px; color: #2f855a; }
:root[data-theme="dark"] .ctr-signed, :root:not([data-theme]) .ctr-signed { color: #5fd08f; }
@media (max-width: 560px) { .ctr-signatures { grid-template-columns: 1fr; } }
@media print { .ctr-summary { background: #fff; } .ctr-terms-doc { font-size: 12pt; } .ctr-signatures { break-inside: avoid; } }

/* Mensajes */
.nav-area[open] > summary .nav-badge { display: none; }
.msg-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; height: calc(100dvh - 150px); min-height: 480px; }
.msg-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.msg-search { width: 100%; padding: 9px 12px; border-radius: 10px; font-size: 14px; }
.msg-list { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 6px; }
.msg-group + .msg-group { margin-top: 8px; }
.msg-group-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 4px; }
.msg-group-count { font-size: 10px; letter-spacing: 0; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0 6px; line-height: 16px; }
.msg-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.msg-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.msg-item:hover { background: var(--surface-hover); }
.msg-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.msg-item-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.msg-hit { display: grid; }
.msg-item-top, .msg-item-bottom { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-width: 0; }
.msg-item-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-item.unread .msg-item-title { font-weight: 800; }
.msg-item-when { font-size: 12px; color: var(--text-muted); flex: none; }
.msg-item.unread .msg-item-when { color: var(--accent); font-weight: 700; }
.msg-item-last { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-item.unread .msg-item-last { color: var(--text); }
.msg-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.msg-new-row { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-new-panel:empty { display: none; }
.msg-new-panel { margin-top: 8px; }
.msg-new-form { display: flex; gap: 8px; }

/* Avatares */
.msg-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; letter-spacing: .02em;
  color: hsl(var(--h) 70% 30%); background: hsl(var(--h) 70% 88%); }
:root[data-theme="dark"] .msg-av, :root:not([data-theme="light"]) .msg-av { color: hsl(var(--h) 80% 82%); background: hsl(var(--h) 45% 26%); }
.msg-av.av-equipo { border-radius: 10px; font-size: 16px; }
.msg-av.av-cliente, .msg-av.av-client { border-radius: 10px; }
.msg-av.av-brand { background: var(--accent); color: var(--on-accent); border-radius: 10px; }
.msg-av.sm { width: 30px; height: 30px; font-size: 11px; }
.msg-av.lg { width: 40px; height: 40px; font-size: 14px; }
.msg-av-space { flex: none; width: 30px; }

/* Conversación */
.msg-chat { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.msg-chat-solo { height: calc(100dvh - 190px); min-height: 480px; }
.msg-view { display: flex; flex-direction: column; min-height: 0; flex: 1; position: relative; }
.msg-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.msg-head-text { flex: 1; min-width: 0; }
.msg-head h2 { margin: 0; font-size: 16.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-head-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.msg-back { display: none; font-size: 20px; text-decoration: none; color: var(--accent); padding: 4px 6px; }
.msg-pinbar { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.msg-pinbar-btn { appearance: none; font: inherit; width: 100%; text-align: left; display: flex; gap: 8px; align-items: center; padding: 7px 14px; border: 0; background: none; color: var(--text); cursor: pointer; font-size: 13px; }
.msg-pinbar-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.msg-body-wrap { flex: 1; min-height: 0; position: relative; display: flex; }
.msg-scroll { flex: 1; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.msg-older { align-self: center; margin: 4px 0 8px; }
.msg-day { text-align: center; margin: 14px 0 6px; position: sticky; top: 0; z-index: 2; }
.msg-day span { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--surface-strong); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; }
.msg-first { margin: auto; text-align: center; color: var(--text-muted); max-width: 360px; display: grid; gap: 8px; }

.msg-row { display: flex; align-items: flex-end; gap: 8px; position: relative; margin-top: 8px; }
.msg-row.grouped { margin-top: 2px; }
.msg-row.mine { flex-direction: row-reverse; }
.msg-row.mine .msg-av-space { display: none; }
.msg-stack { display: grid; gap: 3px; max-width: min(76%, 600px); min-width: 0; }
.msg-row.mine .msg-stack { justify-items: end; }
.msg-bubble { background: var(--surface-strong); border: 1px solid var(--border); border-radius: 16px 16px 16px 6px; padding: 7px 12px 5px; min-width: 0; outline: none; }
.msg-row.grouped .msg-bubble { border-radius: 6px 16px 16px 6px; }
.msg-row.mine .msg-bubble { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 16px 16px 6px 16px; }
.msg-row.mine.grouped .msg-bubble { border-radius: 16px 6px 6px 16px; }
.msg-row.from-client:not(.mine) .msg-bubble { border-left: 3px solid var(--c-sales, var(--accent)); }
.msg-row.pinned .msg-bubble { box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 55%, transparent); }
.msg-row.flash .msg-bubble { animation: msg-flash 1.6s ease; }
@keyframes msg-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: none; } }
.msg-meta { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.msg-meta strong { color: var(--text); font-size: 13px; }
.msg-org { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
.msg-org.client { color: var(--c-sales, var(--accent)); }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.msg-body a { color: var(--accent); }
.msg-mention { color: var(--accent); font-weight: 700; background: var(--accent-soft); border-radius: 4px; padding: 0 2px; }
.msg-foot { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.msg-edited { font-style: italic; }
.msg-seen { font-weight: 700; letter-spacing: -2px; }
.msg-seen.read { color: var(--accent); }
.msg-quote { appearance: none; font: inherit; text-align: left; display: grid; gap: 1px; width: 100%; margin: 2px 0 6px; padding: 5px 9px; border: 0; border-left: 3px solid var(--accent);
  border-radius: 6px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); cursor: pointer; font-size: 12.5px; }
.msg-quote strong { font-size: 12px; color: var(--accent); }
.msg-quote span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-img { display: block; margin-top: 4px; }
.msg-img img { max-width: min(100%, 340px); max-height: 280px; border-radius: 10px; display: block; }
.msg-doc { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; min-width: 0; }
.msg-doc:hover { border-color: var(--accent); }
.msg-doc-ext { flex: none; font-size: 10px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 6px 5px; min-width: 36px; text-align: center; }
.msg-doc-name { display: grid; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.msg-doc.wide { margin: 0; }

/* Reacciones */
.msg-reacts { display: flex; gap: 4px; flex-wrap: wrap; }
.msg-reacts:empty { display: none; }
.msg-react { appearance: none; font: inherit; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.msg-react.mine { border-color: var(--accent); background: var(--accent-soft); }

/* Acciones del mensaje */
.msg-tools { position: absolute; top: -14px; right: 44px; display: none; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-strong); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.18); z-index: 4; }
.msg-row.mine .msg-tools { right: auto; left: 8px; }
.msg-row:hover .msg-tools, .msg-row:focus-within .msg-tools, .msg-row.show-tools .msg-tools { display: flex; }
.msg-tool { appearance: none; font: inherit; font-size: 13px; min-width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--text-muted); cursor: pointer; padding: 0 6px; }
.msg-tool:hover { background: var(--surface-hover); color: var(--text); }
.msg-tool.on { color: var(--warning); }
.msg-tool.danger:hover, .msg-tool.confirm { color: var(--danger); font-weight: 700; }
.msg-picker { position: absolute; bottom: calc(100% + 4px); left: 0; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--surface-strong); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.msg-picker[hidden] { display: none; }
.msg-picker button { appearance: none; border: 0; background: none; font-size: 18px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.msg-picker button:hover { background: var(--surface-hover); transform: scale(1.15); }

/* Panel lateral (fijados, archivos) */
.msg-drawer { width: 300px; flex: none; border-left: 1px solid var(--border); background: var(--surface); overflow-y: auto; padding: 10px 14px; }
.msg-drawer[hidden] { display: none; }
.msg-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.msg-drawer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.msg-drawer-item { appearance: none; font: inherit; text-align: left; width: 100%; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: none; color: var(--text); cursor: pointer; }
.msg-drawer-item:hover { border-color: var(--accent); }
.msg-drawer-text { font-size: 13px; overflow-wrap: anywhere; }
.msg-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.msg-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
@media (max-width: 1100px) { .msg-drawer { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; box-shadow: -8px 0 24px rgba(0,0,0,.2); } }

/* Arrastrar archivos */
.msg-drop { display: none; position: absolute; inset: 8px; border: 2px dashed var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); z-index: 6; place-items: center; font-weight: 700; color: var(--accent); pointer-events: none; }
.msg-view.dropping .msg-drop { display: grid; }

/* Redacción */
.msg-compose { border-top: 1px solid var(--border); padding: 8px 12px 10px; display: grid; gap: 6px; position: relative; }
.msg-typing { min-height: 0; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.msg-typing:empty { display: none; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .dots i, .msg-row.flash .msg-bubble { animation: none; } }
.msg-ctx:empty { display: none; }
.msg-ctx-box { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-left: 3px solid var(--accent); border-radius: 8px; background: var(--accent-soft); }
.msg-ctx-box.edit { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.msg-ctx-text { flex: 1; min-width: 0; display: grid; font-size: 12.5px; }
.msg-ctx-text span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-file-tags:empty { display: none; }
.msg-file-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.msg-file-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 4px 8px 4px 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-strong); font-size: 12.5px; }
.msg-file-chip img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.msg-file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.msg-compose-row { display: flex; align-items: flex-end; gap: 6px; }
.msg-compose textarea { flex: 1; width: auto; min-width: 0; resize: none; min-height: 42px; max-height: 180px; line-height: 1.4; border-radius: 12px; }
.msg-tool-btn { border: 1px solid var(--border); background: var(--surface-strong); color: var(--text); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; font-size: 17px; flex: none; }
.msg-tool-btn:hover { border-color: var(--accent); }
.msg-send { flex: none; width: auto; height: 42px; margin: 0; }
.msg-mentions { position: absolute; bottom: calc(100% - 6px); left: 60px; list-style: none; margin: 0; padding: 4px; min-width: 240px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(0,0,0,.22); z-index: 7; }
.msg-mentions[hidden] { display: none; }
.msg-mentions li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.msg-mentions li.on, .msg-mentions li:hover { background: var(--accent-soft); }
.msg-quick { position: absolute; bottom: calc(100% - 6px); left: 12px; right: 12px; max-height: 340px; overflow-y: auto; padding: 10px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(0,0,0,.22); z-index: 7; display: grid; gap: 8px; }
.msg-quick[hidden] { display: none; }
.msg-quick-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.msg-quick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.msg-quick-list li { display: flex; align-items: center; gap: 6px; }
.msg-quick-item { appearance: none; font: inherit; flex: 1; text-align: left; display: grid; gap: 2px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; min-width: 0; }
.msg-quick-item:hover { border-color: var(--accent); }
.msg-quick-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-quick-new { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--border); padding-top: 8px; }
.msg-quick-new input { flex: 1; min-width: 180px; }

.msg-empty { margin: auto; text-align: center; color: var(--text-muted); padding: 30px; }
.msg-empty-icon { font-size: 40px; }
.msg-wrap { container-type: inline-size; }
@container (max-width: 720px) {
  .msg-layout { grid-template-columns: minmax(0, 1fr); }
  .msg-layout.has-chat .msg-side { display: none; }
  .msg-layout:not(.has-chat) .msg-chat { display: none; }
  .msg-back { display: inline-block; }
  .msg-stack { max-width: 86%; }
  .msg-head-actions .btn { padding: 6px 8px; font-size: 12px; }
}

/* Gastos */
.kpi-link { display: block; color: inherit; text-decoration: none; }
.kpi-link:hover .kpi { border-color: var(--accent); }
.badge-rechazado { color: var(--danger); border-color: currentColor; background: transparent; }
.badge-stack { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.exp-review { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.exp-review li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.exp-review li:last-child { border-bottom: 0; }
.exp-amount { font-size: 16px; white-space: nowrap; }
.exp-detail { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.exp-receipt img { width: 100%; max-height: 520px; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-strong); }
.detail-list { display: grid; gap: 10px; margin: 0; }
.detail-list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
.detail-list dt { color: var(--text-muted); font-size: 13px; }
.detail-list dd { margin: 0; font-weight: 600; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }
@media (max-width: 720px) {
  .exp-detail { grid-template-columns: minmax(0, 1fr); }
  .exp-review li { grid-template-columns: minmax(0, 1fr) auto; }
  .exp-review li .row-actions { grid-column: 1 / -1; }
  .detail-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Informe de resultados */
.report-doc .kpi-row { margin: 16px 0 6px; }
.rep-section { margin-top: 22px; display: grid; gap: 10px; }
.rep-section .map { height: 360px; }
.rep-section .tl-text { white-space: pre-line; margin: 0; line-height: 1.55; }

/* ===== Reparto ===== */
.rs-planificada { color: var(--text-muted); border-color: var(--border); }
.rs-en_curso { color: #6b46c1; background: rgba(128, 90, 213, .14); border-color: rgba(128, 90, 213, .35); }
.rs-completada { color: #2f855a; background: rgba(56, 161, 105, .14); border-color: rgba(56, 161, 105, .35); }
.rs-incidencia { color: #b7791f; background: rgba(214, 158, 46, .14); border-color: rgba(214, 158, 46, .35); }
.rs-cancelada { color: var(--danger); border-color: currentColor; }
:root[data-theme="dark"] .rs-en_curso { color: #b69cf5; }
:root[data-theme="dark"] .rs-completada { color: #5fd08f; }
:root[data-theme="dark"] .rs-incidencia { color: #f6c35b; }

.day-card.is-today { border-color: var(--accent); }
.progress-cell { display: grid; gap: 4px; min-width: 120px; }
.plan-edit summary { cursor: pointer; margin: 0; }
.plan-edit[open] summary { margin-bottom: 12px; }

.map { height: 360px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-strong); }
.map-tall { height: 460px; }
.map-dot span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.leaflet-container { font: inherit; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.photo { display: grid; gap: 4px; text-decoration: none; color: var(--text-muted); font-size: 11px; }
.photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }

.route-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.route-card { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.route-card:hover { border-color: var(--accent); }
.route-card.big { border-width: 2px; }
.route-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.center { text-align: center; }

/* Pantalla de reparto (móvil) */
.work-head .detail-title { font-size: clamp(24px, 6vw, 32px); }
.big-btn { font-size: 20px; padding: 18px 24px; border-radius: 14px; width: 100%; max-width: 420px; }
.counter-card { text-align: center; }
.counter-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.counter-value { font-size: clamp(56px, 18vw, 96px); font-weight: 800; color: var(--accent); line-height: 1.05; font-variant-numeric: tabular-nums; }
.counter-card .progress { height: 12px; margin: 10px auto 0; max-width: 520px; }
.counter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.counter-btn { font-size: 22px; padding: 18px 0; border-radius: 14px; touch-action: manipulation; }
@media (max-width: 420px) { .counter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.counter-card input { max-width: 130px; }
.gps-line { display: inline-block; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.gps-line.ok { color: #2f855a; border-color: rgba(56, 161, 105, .45); }
.gps-line.bad { color: var(--danger); border-color: currentColor; }
:root[data-theme="dark"] .gps-line.ok { color: #5fd08f; }

/* ===== Cuadro de mando ===== */
/* Paleta de gráficos (paleta de referencia validada): serie 1 azul, serie 2 naranja */
:root, :root[data-theme="dark"] { --series-1: #3987e5; --series-2: #d95926; --chart-grid: rgba(127, 127, 127, .18); --chart-axis: rgba(127, 127, 127, .45); }
:root[data-theme="light"] { --series-1: #2a78d6; --series-2: #eb6834; }

.filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.filters select { width: auto; }
.filter-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.labor-input { width: 80px; padding: 6px 8px; }
.hero-row .kpi-value { font-size: 26px; }
.kpi.neg .kpi-value { color: var(--danger); }
.kpi-row-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 1100px) { .kpi-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kpi-delta { margin-top: 6px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-delta.up { color: var(--success); } .kpi-delta.down { color: var(--danger); } .kpi-delta.flat { color: var(--text-muted); }

/* Inicio: dos columnas en pantallas anchas */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.dash-side { position: sticky; top: 76px; }
@media (max-width: 1180px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } .dash-side { position: static; } }
.dash-grid .charts-row { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Tarjeta "Tu agenda de hoy" */
.ag-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.ag-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 10px; }
.ag-item:hover { background: var(--surface-hover); }
.ag-item.past { opacity: .55; }
.ag-item.live { background: var(--accent-soft); }
.ag-time { display: grid; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ag-end { font-weight: 500; font-size: 12px; color: var(--text-muted); }
.ag-body { display: grid; gap: 2px; min-width: 0; text-decoration: none; color: var(--text); }
.ag-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-body .cal-rsvp { justify-self: start; }
.ag-live { justify-self: start; font-size: 11px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.ag-invites { margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ag-invites .ag-list { margin: 0; gap: 10px; }
.ag-invite { display: grid; gap: 6px; }
.ag-next { margin: 12px 0 0; display: grid; gap: 2px; }
.ag-next a { color: var(--text); font-weight: 600; text-decoration: none; }
.ag-next a:hover { color: var(--accent); }
.charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
@media (max-width: 480px) { .charts-row { grid-template-columns: 1fr; } }
.chart-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; min-height: 22px; }
.chart-legend { display: flex; gap: 16px; font-size: 13px; color: var(--text); }
.chart-legend > span, .tip-row { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-wrap { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-svg .chart-axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart-svg .chart-tick { fill: var(--text-muted); font-size: 11px; }
.chart-svg .chart-hit { fill: transparent; }
.chart-svg .chart-group:hover .chart-hit, .chart-svg .chart-group:focus .chart-hit { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.chart-svg .chart-group:focus { outline: none; }
.chart-tip {
  position: absolute; z-index: 5; min-width: 160px; pointer-events: none;
  background: var(--surface-strong); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; font-size: 12px; color: var(--text); box-shadow: 0 4px 16px rgba(0,0,0,.25);
  display: grid; gap: 3px;
}
.total-row td { font-weight: 800; border-top: 2px solid var(--border); }
tfoot td { padding: 10px 8px; }

.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alert-list li { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); }
.alert-list a { color: var(--text); text-decoration: none; }
.alert-list a:hover { text-decoration: underline; }
.alert-icon { font-weight: 800; }
.alert-serious { border-color: rgba(236, 131, 90, .55); }
.alert-serious .alert-icon { color: #ec835a; }
.alert-warning { border-color: rgba(250, 178, 25, .45); }
.alert-warning .alert-icon { color: #fab219; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Facturas ===== */
.iv-borrador { color: var(--text-muted); border-color: var(--border); }
.iv-pendiente, .iv-emitida { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--border); }
.iv-parcial { color: #b7791f; background: rgba(214, 158, 46, .14); border-color: rgba(214, 158, 46, .35); }
.iv-vencida, .iv-anulada { color: var(--danger); border-color: currentColor; }
.iv-cobrada { color: #2f855a; background: rgba(56, 161, 105, .14); border-color: rgba(56, 161, 105, .35); }
:root[data-theme="dark"] .iv-parcial { color: #f6c35b; }
:root[data-theme="dark"] .iv-cobrada { color: #5fd08f; }
.quote-doc { position: relative; overflow: hidden; }
.draft-stamp {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg);
  font-size: clamp(48px, 12vw, 110px); font-weight: 900; letter-spacing: .12em;
  color: color-mix(in srgb, var(--text-muted) 16%, transparent); pointer-events: none; white-space: nowrap;
}
.draft-stamp.cancelled { color: color-mix(in srgb, var(--danger) 22%, transparent); }

/* ===== Aprobaciones de diseño ===== */
.pf-pendiente { color: #b7791f; background: rgba(214, 158, 46, .14); border-color: rgba(214, 158, 46, .35); }
.pf-cambios { color: var(--danger); border-color: currentColor; }
.pf-aprobado { color: #2f855a; background: rgba(56, 161, 105, .14); border-color: rgba(56, 161, 105, .35); }
.pf-archivado { color: var(--text-muted); border-color: var(--border); }
:root[data-theme="dark"] .pf-pendiente { color: #f6c35b; }
:root[data-theme="dark"] .pf-aprobado { color: #5fd08f; }
.proof-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.proof-card { display: grid; gap: 6px; text-decoration: none; color: inherit; align-content: start; }
.proof-card:hover { border-color: var(--accent); }
.proof-card.needs-you { border-color: #d69e2e; border-width: 2px; }
.proof-thumb { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); display: grid; place-items: center; background: var(--surface-strong); color: var(--text-muted); font-weight: 800; }
.proof-thumb img { width: 100%; height: 100%; object-fit: cover; }
.proof-image { display: block; text-align: center; }
.proof-image img { max-width: 100%; max-height: 75vh; border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.pdf-view { display: grid; gap: 8px; justify-items: start; }
.pdf-view iframe { width: 100%; height: 75vh; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.decision-card { border: 2px solid #d69e2e; }
.fbk-aprobado { color: #2f855a; border-color: rgba(56, 161, 105, .45); }
.fbk-cambios { color: var(--danger); border-color: currentColor; }
:root[data-theme="dark"] .fbk-aprobado { color: #5fd08f; }

/* ===== Briefings ===== */
.bs-nueva { color: #b7791f; background: rgba(214, 158, 46, .14); border-color: rgba(214, 158, 46, .35); }
.bs-en_revision { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--border); }
.bs-convertida { color: #2f855a; background: rgba(56, 161, 105, .14); border-color: rgba(56, 161, 105, .35); }
.bs-descartada { color: var(--text-muted); border-color: var(--border); }
:root[data-theme="dark"] .bs-nueva { color: #f6c35b; }
:root[data-theme="dark"] .bs-convertida { color: #5fd08f; }
tr.row-new td:first-child { box-shadow: inset 3px 0 0 #d69e2e; }
.brief-form { display: grid; gap: 18px; }
.brief-step { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 6px; margin: 0; display: grid; gap: 4px; }
.brief-step legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-weight: 700; color: var(--accent); }
.step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 13px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.check-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 14px; }
.check-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.check-card input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.file-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; }
.file-list a { color: var(--accent); }
.sent-ok { border: 2px solid rgba(56, 161, 105, .6); }

/* ===== Mi panel ===== */
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border);
  text-decoration: none; color: var(--text);
}
.todo-list a:hover { border-color: var(--accent); }
.todo-text { display: grid; gap: 2px; }
.todo-cta { color: var(--accent); font-weight: 700; font-size: 13px; white-space: nowrap; }
.todo-warning a { box-shadow: inset 4px 0 0 #fab219; }
.todo-serious a { box-shadow: inset 4px 0 0 #ec835a; }
.todo-info a { box-shadow: inset 4px 0 0 var(--accent); }
details.shortcuts { margin-top: 28px; }
details.shortcuts > summary { cursor: pointer; }
.welcome + .role-tag + .stack { margin-bottom: 4px; }

/* ===== Calendario ===== */
/* Un color por tipo (paleta categórica de referencia); el texto siempre nombra el tipo */
:root, :root[data-theme="dark"] { --c-event: #9085e9; --c-route: #199e70; --c-campaign: #3987e5; --c-print: #c98500; --c-quote: #d95926; --c-invoice: #d55181; }
:root[data-theme="light"] { --c-event: #6250d6; --c-route: #1baf7a; --c-campaign: #2a78d6; --c-print: #eda100; --c-quote: #eb6834; --c-invoice: #e87ba4; }
.type-event { --c: var(--c-event); } .type-route { --c: var(--c-route); } .type-campaign { --c: var(--c-campaign); }
.type-print { --c: var(--c-print); } .type-quote { --c: var(--c-quote); } .type-invoice { --c: var(--c-invoice); }

:root, :root[data-theme="dark"] { --c-sales: #22b8d6; }
:root[data-theme="light"] { --c-sales: #0e8fae; }
.type-sales { --c: var(--c-sales); }

/* Estructura: calendario + columna lateral (día elegido, invitaciones) */
.cal-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cal-main { min-width: 0; }
.cal-side { display: grid; gap: 16px; position: sticky; top: 76px; }
.cal-side-title { font-size: 15px; margin: 0; }
@media (max-width: 1180px) { .cal-page { grid-template-columns: minmax(0, 1fr); } .cal-side { position: static; } }

.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-title { margin: 0 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.cal-arrow { font-size: 22px; line-height: 1; width: 34px; height: 34px; border: 1px solid var(--border); }
.cal-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-person { width: auto; padding: 6px 10px; font-size: 13px; }
.cal-status { margin: 0 0 8px; min-height: 1em; }
.cal-status:empty { display: none; }
.cal-tip { margin: 0; padding: 0 4px; line-height: 1.5; }

/* Selector segmentado (vistas, respuestas) */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--border); }
.seg-btn { appearance: none; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 5px 12px; border-radius: 7px; border: 0; background: transparent; color: var(--text-muted); }
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--surface-strong); color: var(--text); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.15)); }

.cal-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cal-filter {
  appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-faint);
}
.cal-filter .swatch { background: var(--c); opacity: .3; }
.cal-filter.on { color: var(--text); border-color: color-mix(in srgb, var(--c) 55%, var(--border)); background: color-mix(in srgb, var(--c) 8%, transparent); }
.cal-filter.on .swatch { opacity: 1; }
.cal-count { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--surface-hover); border-radius: 999px; padding: 0 6px; }
.cal-body { transition: opacity .15s ease; }
.cal-body.loading { opacity: .55; pointer-events: none; }

/* Mes */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cal-row { display: contents; }
.cal-wd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); text-align: center; padding: 8px 0; border-bottom: 1px solid var(--border); background: var(--surface-strong); }
.cal-cell {
  position: relative; color: var(--text); cursor: pointer; min-height: 112px; padding: 6px; min-width: 0;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: grid; grid-template-rows: auto 1fr; gap: 4px;
  outline: none; transition: background .12s ease;
}
.cal-cell:nth-child(7n + 7) { border-right: 0; }
.cal-cell:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-cell:hover { background: var(--surface-hover); }
.cal-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell.weekend { background: color-mix(in srgb, var(--surface-hover) 55%, transparent); }
.cal-cell.out .cal-num, .cal-cell.out .cal-chips { opacity: .45; }
.cal-cell.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell.drop { background: var(--accent-soft); }
.cal-cell.holiday .cal-num { color: var(--c-holiday); text-decoration: underline dotted; }
.cal-cell-head { display: flex; align-items: center; justify-content: space-between; }
.cal-num { font-size: 12.5px; font-weight: 700; min-width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.cal-cell.today .cal-num { background: var(--accent); color: var(--on-accent); text-decoration: none; }
.cal-add { opacity: 0; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; text-decoration: none; color: var(--accent); font-weight: 700; }
.cal-cell:hover .cal-add, .cal-cell.selected .cal-add { opacity: 1; }
.cal-add:hover { background: var(--accent-soft); }
.cal-chips { display: grid; gap: 3px; min-width: 0; align-content: start; }
.cal-chip {
  display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: var(--text);
  border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 13%, transparent);
}
.cal-chip:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.cal-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cal-chip.small { font-size: 11.5px; padding: 2px 6px; gap: 4px; }
.cal-chip.pending { border-left-style: dashed; }
.cal-chip[draggable="true"] { cursor: grab; }
.cal-chip.dragging { opacity: .4; }
.cal-time { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.cal-more { appearance: none; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0 6px; text-align: left; cursor: pointer; }
.cal-more:hover { text-decoration: underline; }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cal-list .cal-chip-text { white-space: normal; }
.cal-li-sub { padding-left: 11px; margin-top: 2px; }
.cal-rsvp { flex: none; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1px solid currentColor; line-height: 16px; }
.rsvp-si { color: var(--success); } .rsvp-no { color: var(--danger); } .rsvp-quiza { color: var(--warning); } .rsvp-pendiente { color: var(--text-muted); }

/* Agenda (y vista móvil del mes) */
.cal-agenda { display: none; gap: 14px; }
.cal-agenda.always { display: grid; }
.cal-agenda-day { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cal-agenda-day:last-child { border-bottom: 0; }
.cal-agenda-date { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 700; }
.cal-agenda-wd { display: grid; line-height: 1.25; }
.cal-agenda-num { font-size: 22px; font-weight: 800; min-width: 34px; color: var(--text); }
.cal-agenda-day.today .cal-agenda-num { color: var(--accent); }
.empty-state { text-align: center; padding: 36px 16px; color: var(--text-muted); display: grid; gap: 12px; justify-items: center; }
.empty-state p { margin: 0; }

/* Semana / día: franjas horarias */
.tg { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tg-head, .tg-allday { display: grid; grid-template-columns: 56px repeat(var(--days), minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.tg-head { background: var(--surface-strong); }
.tg-day { appearance: none; font: inherit; color: var(--text); background: none; border: 0; border-left: 1px solid var(--border); padding: 8px 4px; cursor: pointer; display: grid; justify-items: center; gap: 2px; }
.tg-day:hover { background: var(--surface-hover); }
.tg-wd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.tg-num { font-size: 18px; font-weight: 800; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
.tg-day.today .tg-num { background: var(--accent); color: var(--on-accent); }
.tg-gutter { font-size: 11px; display: grid; place-items: center; }
.tg-allday-col { border-left: 1px solid var(--border); padding: 4px; display: grid; gap: 3px; align-content: start; min-height: 30px; min-width: 0; }
.tg-scroll { max-height: min(640px, 65vh); overflow-y: auto; }
.tg-grid { display: grid; grid-template-columns: 56px repeat(var(--days), minmax(0, 1fr)); position: relative; }
.tg-hours { display: grid; grid-auto-rows: var(--hour); }
.tg-hour { font-size: 11px; color: var(--text-muted); text-align: right; padding-right: 8px; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.tg-col {
  position: relative; border-left: 1px solid var(--border); height: calc(var(--hour) * 24); cursor: cell; touch-action: pan-y;
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 100% var(--hour);
}
.tg-col.weekend { background-color: color-mix(in srgb, var(--surface-hover) 55%, transparent); }
.tg-col.today { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }
.tg-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 3; pointer-events: none; }
.tg-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.tg-ev {
  position: absolute; z-index: 2; overflow: hidden; display: grid; align-content: start; gap: 1px; padding: 4px 7px; border-radius: 7px;
  text-decoration: none; color: var(--text); font-size: 12px; line-height: 1.3; cursor: pointer;
  background: color-mix(in srgb, var(--c) 20%, var(--surface)); border-left: 3px solid var(--c); box-shadow: 0 0 0 1px var(--surface);
}
.tg-ev:hover { background: color-mix(in srgb, var(--c) 30%, var(--surface)); z-index: 4; }
.tg-ev.editable { cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.tg-col { user-select: none; }
.tg-ev.dragging { cursor: grabbing; opacity: .85; box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 5; }
.tg-ev.pending { border-left-style: dashed; }
.tg-ev.short { display: flex; gap: 5px; align-items: center; padding-top: 2px; padding-bottom: 2px; }
.tg-ev.short .tg-ev-time { order: -1; flex: none; }
.tg-ev.short .tg-ev-time .tg-ev-end { display: none; }
.tg-ev.short .tg-ev-title { min-width: 0; flex: 1; }
.tg-ev-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-ev-time { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap; }
.tg-ev-sub { color: var(--text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-ev .cal-rsvp { position: absolute; top: 4px; right: 4px; background: var(--surface); }
.tg-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.tg-ghost { position: absolute; left: 2px; right: 2px; border-radius: 7px; background: var(--accent-soft); border: 1px dashed var(--accent); z-index: 1; font-size: 11px; font-weight: 700; color: var(--accent); padding: 3px 6px; pointer-events: none; }

/* Invitaciones pendientes */
.cal-invites { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cal-invites .cal-list { margin-top: 10px; }
.cal-invite { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.cal-invite:last-child { border-bottom: 0; padding-bottom: 0; }
.cal-invite-title { font-weight: 700; color: var(--text); text-decoration: none; }
.cal-invite-title:hover { color: var(--accent); }
.row-actions.compact { gap: 6px; margin-top: 4px; }

/* Ficha de la cita */
.ev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 4px 0 14px 14px; border-left: 4px solid var(--c); margin: 10px 0 16px; }
.ev-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-title { margin: 8px 0 4px; font-size: 24px; }
.ev-when { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-muted); }
.ev-rsvp { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); margin-bottom: 16px; }
.ev-attendees { margin: 8px 0 16px; }
.att-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.att-list li { display: flex; align-items: center; gap: 10px; }
.att-name { flex: 1; min-width: 0; }
.att-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--accent-soft); color: var(--accent); }
.ev-notes { margin-bottom: 16px; }
.del-box { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Formulario de cita */
.ev-form { display: grid; gap: 14px; }
.form-section { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px 14px; margin: 0; min-width: 0; }
.form-section > legend { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 0 6px; }
.chips-inline { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 10px; }
.field-hint { margin: -6px 0 0; }
.conflicts:empty { display: none; }
.conflicts { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); }
.warn-line { margin: 2px 0; font-size: 13px; font-weight: 600; }
.guest-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.guest { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 14px; }
.guest:hover { border-color: var(--accent); }
.guest:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

@media (max-width: 760px) {
  .cal-grid { display: none; }
  .cal-agenda { display: grid; }
  .cal-title { font-size: 17px; width: 100%; margin: 4px 0 0; order: 5; }
  .tg-head, .tg-allday, .tg-grid { grid-template-columns: 44px repeat(var(--days), minmax(0, 1fr)); }
}

/* ===== Control horario ===== */
.clock-card { text-align: center; display: grid; gap: 8px; justify-items: center; }
.clock-state { font-size: clamp(26px, 6vw, 36px); font-weight: 800; }
.clock-state.on { color: #2f855a; }
.clock-state.off { color: var(--text-muted); }
:root[data-theme="dark"] .clock-state.on { color: #5fd08f; }
.clock-since { font-size: 16px; }
.clock-now { font-size: 13px; }
.big-btn.out { background: var(--danger); color: #fff; }
.tt-ok { color: #2f855a; border-color: rgba(56, 161, 105, .35); }
.tt-open { color: var(--accent); border-color: var(--border); }
.tt-fixed, .tt-manual { color: #b7791f; border-color: rgba(214, 158, 46, .35); }
.tt-req { color: var(--danger); border-color: currentColor; }
:root[data-theme="dark"] .tt-ok { color: #5fd08f; }
:root[data-theme="dark"] .tt-fixed, :root[data-theme="dark"] .tt-manual { color: #f6c35b; }
.fix-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 10px; align-items: end; margin-top: 6px; }
.fix-form .row-actions { margin-bottom: 14px; }
.row-actions > input[type="month"] { width: auto; padding: 6px 10px; }

/* ===== Tareas ===== */
:root, :root[data-theme="dark"] { --c-task: #008300; }
:root[data-theme="light"] { --c-task: #008300; }
.type-task { --c: var(--c-task); }
.pr-urgente { color: var(--danger); border-color: currentColor; font-weight: 800; }
.pr-alta { color: #b7791f; border-color: rgba(214, 158, 46, .45); }
.pr-media { color: var(--accent); border-color: var(--border); }
.pr-baja { color: var(--text-muted); border-color: var(--border); }
:root[data-theme="dark"] .pr-alta { color: #f6c35b; }
.ts-pendiente { color: var(--text-muted); border-color: var(--border); }
.ts-en_curso { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--border); }
.ts-hecha { color: #2f855a; background: rgba(56, 161, 105, .14); border-color: rgba(56, 161, 105, .35); }
.ts-cancelada { color: var(--danger); border-color: currentColor; }
:root[data-theme="dark"] .ts-hecha { color: #5fd08f; }
.quick-task { display: grid; grid-template-columns: minmax(0, 1fr) 150px 120px auto; gap: 8px; align-items: center; }
.quick-task select { padding: 9px 10px; }
@media (max-width: 640px) { .quick-task { grid-template-columns: 1fr 1fr; } .quick-task > input[type="text"] { grid-column: 1 / -1; } }
.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.task-line { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); }
.task-line > input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; cursor: pointer; }
.task-main { display: grid; gap: 4px; text-decoration: none; color: var(--text); min-width: 0; flex: 1; }
.task-title { font-weight: 600; }
.task-line.done .task-title { text-decoration: line-through; color: var(--text-muted); }
.task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-group.overdue { border-color: rgba(236, 131, 90, .6); }
.task-group.muted-group { opacity: .8; }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } }
.board-col { display: grid; gap: 10px; }
.board-title { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 14px; }
.board-cards { display: grid; gap: 10px; }
.board-card { display: grid; gap: 6px; padding: 12px 14px; }
.board-card.overdue { border-color: rgba(236, 131, 90, .6); }

/* ===== Catálogo de servicios ===== */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.svc-card { display: grid; gap: 8px; align-content: start; }
.svc-card h3 { margin: 0; font-size: 16px; color: var(--accent); }
.svc-card p { margin: 0; }
.svc-price { font-size: 22px; font-weight: 800; }
.svc-tiers { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-muted); }
.tier-rows { display: grid; gap: 6px; margin: 8px 0; }
.tier-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tier-row input { width: 110px; padding: 6px 8px; }
.catalog-picker { max-width: 520px; }

/* ===== Documentos ===== */
.chip.chip-on { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.doc-name { font-weight: 600; text-align: left; display: inline-flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.doc-name:hover .doc-name-text { color: var(--accent); }
.doc-name-text { display: grid; min-width: 0; }
.doc-note-line { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.doc-table td:nth-child(2) { min-width: 240px; }
.doc-table tr.sel td { background: var(--accent-soft); }
.doc-table th.doc-chk, .doc-table td.doc-chk { width: 1%; white-space: nowrap; text-align: left; padding-right: 4px; }
.doc-table .doc-chk input[type="checkbox"], .doc-card-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; padding: 0; }
.doc-table td:last-child { white-space: nowrap; }
.doc-ico { flex: none; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 30%, transparent); }
.doc-ico.k-pdf { --c: #e5484d; } .doc-ico.k-img { --c: #12a594; } .doc-ico.k-xls { --c: #30a46c; } .doc-ico.k-doc { --c: #3e63dd; }
.doc-ico.k-ppt { --c: #f76b15; } .doc-ico.k-zip { --c: #8e8c99; } .doc-ico.k-vid { --c: #8e4ec6; }
.doc-ver { font-size: 10.5px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 7px; }
.doc-ver.inline { margin-left: 6px; }
.doc-card .doc-ver { position: absolute; top: 8px; left: 8px; }

.doc-box-label { display: grid; gap: 4px; min-width: 240px; }
.doc-box { min-width: 240px; }
.doc-company-line { display: flex; justify-content: flex-end; }
.doc-toolbar .search { flex: 1; max-width: 340px; }
.doc-toolbar select { width: auto; }
.doc-drop { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; margin: 6px 0 12px;
  border: 2px dashed var(--border-strong); border-radius: 14px; background: color-mix(in srgb, var(--surface-hover) 50%, transparent); cursor: pointer; }
.doc-drop:hover, .doc-drop:focus-visible { border-color: var(--accent); outline: none; }
.doc-explorer.dropping .doc-drop { border-color: var(--accent); background: var(--accent-soft); }
.doc-drop-text { display: grid; gap: 2px; }
.doc-drop-opts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.doc-drop-opts select { width: auto; max-width: 200px; padding: 6px 10px; font-size: 13px; }
.doc-progress { display: grid; gap: 6px; margin-bottom: 12px; }
.doc-progress.has-error { color: var(--danger); }
.doc-progress .bar { height: 6px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
.doc-progress .bar span { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }
.doc-selbar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); position: sticky; top: 64px; z-index: 3; }
.doc-selbar[hidden] { display: none; }
.doc-selbar select { width: auto; padding: 6px 10px; font-size: 13px; }

.doc-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.doc-explorer.panel-open .doc-main { grid-template-columns: minmax(0, 1fr) 380px; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.doc-card { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-strong); cursor: pointer; outline: none; display: grid; }
.doc-card:hover, .doc-card:focus-visible { border-color: var(--accent); }
.doc-card.sel { box-shadow: 0 0 0 2px var(--accent); }
.doc-thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--surface-hover); overflow: hidden; }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-thumb .doc-ico { width: 56px; height: 56px; font-size: 13px; }
.doc-card-body { display: grid; gap: 3px; padding: 8px 10px 10px; min-width: 0; }
.doc-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.doc-card-body .badge { justify-self: start; }
.doc-card-check { position: absolute; top: 8px; right: 8px; background: var(--surface); border-radius: 6px; padding: 2px 4px; line-height: 0; opacity: .85; }

.doc-panel { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 14px 16px; position: sticky; top: 76px; max-height: calc(100dvh - 100px); overflow-y: auto; display: grid; gap: 12px; }
.doc-panel[hidden] { display: none; }
.doc-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.doc-panel-title { font-size: 16px; overflow-wrap: anywhere; }
.doc-panel-sub { margin: 6px 0 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.doc-panel-danger { border-top: 1px solid var(--border); padding-top: 12px; }
.doc-preview { display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: var(--surface-hover); min-height: 160px; }
.doc-preview img { max-width: 100%; max-height: 320px; display: block; }
.doc-preview.pdf iframe { width: 100%; height: 420px; border: 0; background: #fff; }
.doc-preview.none { gap: 8px; padding: 20px; text-align: center; }
.doc-meta .info-row { grid-template-columns: 120px minmax(0, 1fr); }
.doc-edit { display: grid; gap: 4px; }
.doc-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.doc-versions li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; }
.doc-versions li.current { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.doc-share { display: grid; gap: 8px; }
.doc-share-form { display: flex; gap: 6px; flex-wrap: wrap; }
.doc-share-form input { flex: 1; min-width: 160px; }
.doc-share-form select { width: auto; }
.doc-copy { display: flex; gap: 6px; }
.doc-copy input { flex: 1; min-width: 0; font-size: 12.5px; }
.doc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.doc-links li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.doc-link-main { flex: 1; min-width: 160px; display: grid; gap: 1px; font-size: 13.5px; }
.doc-origin { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-hover); color: var(--text-muted); }
.doc-origin.o-messages { color: var(--accent); } .doc-origin.o-approvals { color: #8e4ec6; } .doc-origin.o-contracts { color: #30a46c; } .doc-origin.o-briefings { color: #f76b15; }
@media (max-width: 1100px) {
  .doc-explorer.panel-open .doc-main { grid-template-columns: minmax(0, 1fr); }
  .doc-panel { position: fixed; inset: auto 0 0 0; top: 10vh; max-height: none; z-index: 40; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.35); }
}

/* Kit de marca */
.brand-sec { display: grid; gap: 10px; }
.brand-sec .section-title { margin: 0; font-size: 16px; }
.brand-sec > .btn { justify-self: start; }
.brand-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.brand-colors.edit { grid-template-columns: 1fr; gap: 8px; }
.brand-color { display: grid; gap: 4px; }
.brand-swatch { height: 72px; border-radius: 12px; border: 1px solid var(--border); }
.brand-color-row, .brand-font-row { display: flex; gap: 8px; align-items: center; }
.brand-color-row input[type="color"] { width: 44px; height: 38px; padding: 2px; flex: none; cursor: pointer; }
.brand-hex { width: 110px; flex: none; font-family: ui-monospace, monospace; text-transform: uppercase; }
.brand-fonts { display: grid; gap: 8px; }
.brand-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.brand-logo { margin: 0; display: grid; gap: 6px; }
.brand-logo figcaption { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; align-items: center; }
.brand-logo figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-logo-img { aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; padding: 10px; }
.brand-logo-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.checker { background-color: #fff; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }

/* Solicitudes de documentos */
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.req-item { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.req-item.st-pendiente { border-left: 4px solid var(--warning); }
.req-item.st-recibido { border-left: 4px solid var(--success); }
.req-item.st-cancelado { opacity: .6; }
.req-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.req-side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ===== Oportunidades ===== */
.board-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .board-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .board-4 { grid-template-columns: 1fr; } }
.op-nuevo { color: var(--text-muted); border-color: var(--border); }
.op-contactado { color: var(--accent); border-color: var(--border); }
.op-reunion { color: #6b46c1; background: rgba(128, 90, 213, .14); border-color: rgba(128, 90, 213, .35); }
.op-presupuesto { color: #b7791f; background: rgba(214, 158, 46, .14); border-color: rgba(214, 158, 46, .35); }
.op-ganada { color: #2f855a; background: rgba(56, 161, 105, .14); border-color: rgba(56, 161, 105, .35); }
.op-perdida { color: var(--danger); border-color: currentColor; }
:root[data-theme="dark"] .op-reunion { color: #b69cf5; }
:root[data-theme="dark"] .op-presupuesto { color: #f6c35b; }
:root[data-theme="dark"] .op-ganada { color: #5fd08f; }
.link-btn.ok { color: #2f855a; font-weight: 700; }
:root[data-theme="dark"] .link-btn.ok { color: #5fd08f; }
.decision-card.highlight { box-shadow: 0 0 0 3px rgba(56, 161, 105, .35); }

/* ===== Equipo y ausencias ===== */
:root, :root[data-theme="dark"] { --c-absence: #e66767; }
:root[data-theme="light"] { --c-absence: #e34948; }
.type-absence { --c: var(--c-absence); }
:root, :root[data-theme="dark"] { --c-holiday: #8a8f98; }
:root[data-theme="light"] { --c-holiday: #6b7280; }
.type-holiday { --c: var(--c-holiday); }
.abs-grid .abs-day.holiday { color: var(--c-holiday); text-decoration: underline dotted; cursor: help; }
.hol-nacional { color: var(--accent); border-color: currentColor; }
.hol-autonomico { color: #b7791f; border-color: currentColor; }
:root[data-theme="dark"] .hol-autonomico, :root:not([data-theme]) .hol-autonomico { color: #f6c35b; }
.hol-local { color: #2f855a; border-color: currentColor; }
:root[data-theme="dark"] .hol-local, :root:not([data-theme]) .hol-local { color: #5fd08f; }
.hol-empresa { color: var(--text-muted); border-color: var(--border); }
.ab-solicitada { color: #b7791f; background: rgba(214, 158, 46, .14); border-color: rgba(214, 158, 46, .35); }
.ab-aprobada { color: #2f855a; background: rgba(56, 161, 105, .14); border-color: rgba(56, 161, 105, .35); }
.ab-rechazada { color: var(--danger); border-color: currentColor; }
.ab-cancelada { color: var(--text-muted); border-color: var(--border); }
:root[data-theme="dark"] .ab-solicitada { color: #f6c35b; }
:root[data-theme="dark"] .ab-aprobada { color: #5fd08f; }
.abs-grid-wrap { overflow-x: auto; }
.abs-grid { border-collapse: separate; border-spacing: 2px; font-size: 12px; width: auto; }
.abs-grid th, .abs-grid td { padding: 0; border: 0; text-align: center; }
.abs-grid .abs-name { text-align: left; padding: 4px 10px 4px 0; white-space: nowrap; font-weight: 600; position: sticky; left: 0; background: var(--surface-strong); }
.abs-grid .abs-day { width: 26px; color: var(--text-muted); font-weight: 600; padding: 4px 0; }
.abs-grid .abs-day.today { color: var(--accent); }
.abs-cell { width: 26px; height: 26px; border-radius: 6px; display: inline-grid; place-items: center; font-weight: 800; font-size: 11px; color: #fff; }
td.abs-cell { display: table-cell; background: color-mix(in srgb, var(--text-muted) 8%, transparent); color: #fff; }
td.abs-cell.weekend, .abs-day.weekend { opacity: .5; }
.abs-cell.k-vacaciones { background: #199e70; }
.abs-cell.k-ausente, .abs-cell.k-baja_medica, .abs-cell.k-permiso, .abs-cell.k-asuntos_propios, .abs-cell.k-otro { background: #d95926; }
.abs-legend { display: flex; gap: 16px; margin-bottom: 10px; align-items: center; }
.abs-legend .abs-cell { width: 20px; height: 20px; }

.soon-box {
  margin-top: 12px; padding: 18px; border-radius: 12px;
  border: 1px dashed var(--border); color: var(--text-muted); text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .hero, .login { animation: none; }
}

/* ===== Clientes (CRM) 360º ===== */
.health { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.health-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.health.h-bueno { color: var(--success); } .health.h-atencion { color: var(--warning); } .health.h-riesgo { color: var(--danger); }
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.tag-x { appearance: none; border: 0; background: none; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 0 0 2px; }
.tag-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--input-bg); min-height: 42px; }
.tag-editor input { border: 0; background: transparent; flex: 1; min-width: 160px; padding: 4px; box-shadow: none; }
.field-note { font-size: 12px; color: var(--danger); min-height: 0; }
input.invalid { border-color: var(--danger); }
.chip.chip-warn:not(.chip-on) { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); color: var(--warning); }
.th-sort { appearance: none; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; }
.th-sort.on, .th-sort:hover { color: var(--accent); }
.crm-table td:first-child { min-width: 220px; }
tr.row-skip td { opacity: .55; }
.crm-hero { display: grid; gap: 16px; }
.crm-hero-id { display: flex; gap: 14px; align-items: flex-start; }
.title-badges { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.quick-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-act { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-strong); color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.quick-act:hover { border-color: var(--accent); color: var(--accent); }
.quick-ico { font-size: 14px; width: 18px; text-align: center; }
.crm-kpis { margin: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.kpi-btn { appearance: none; border: 0; padding: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.kpi-btn .kpi { height: 100%; }
.kpi.warn .kpi-value { color: var(--warning); }
.crm-alerts { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); }
.crm-alerts .warn-line { margin: 0; }
.crm-tab { margin-top: 4px; }
.crm-log { display: grid; gap: 8px; margin-bottom: 12px; }
.crm-log-row { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-log-row select, .crm-log-row input { width: auto; flex: 1; min-width: 150px; }
.crm-timeline { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.crm-timeline li { display: flex; gap: 10px; padding: 8px 0 8px 0; border-left: 0; border-bottom: 1px solid var(--border); }
.crm-timeline li:last-child { border-bottom: 0; }
.tl-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: var(--surface-hover); }
.tl-body { flex: 1; min-width: 0; }
.tl-body .tl-text { margin-top: 2px; font-size: 13.5px; color: var(--text-muted); }
.tl-quote .tl-ico { background: color-mix(in srgb, var(--c-quote) 18%, transparent); }
.tl-campaign .tl-ico { background: color-mix(in srgb, var(--c-campaign) 18%, transparent); }
.tl-invoice .tl-ico { background: color-mix(in srgb, var(--c-invoice) 18%, transparent); }
.tl-message .tl-ico { background: var(--accent-soft); }
.tl-ticket .tl-ico { background: color-mix(in srgb, var(--warning) 18%, transparent); }
.mini-details > summary { cursor: pointer; margin-top: 10px; list-style: none; }
.mini-details[open] > summary { margin-bottom: 10px; }
.contact-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ===== Oportunidades ===== */
.opp-card { cursor: grab; }
.opp-card.dragging { opacity: .45; }
.opp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opp-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.opp-prob { font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 7px; flex: none; }
.opp-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.opp-quote { color: var(--accent); text-decoration: none; font-weight: 600; }
.opp-col { border-radius: 14px; padding: 8px; margin: -8px; transition: background .12s ease; }
.opp-col.drop { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.opp-empty { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 16px 10px; text-align: center; margin: 0; }
.opp-close-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opp-zone { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 56px; padding: 10px 14px; border-radius: 14px; border: 2px dashed var(--border-strong); color: var(--text-muted); font-weight: 700; text-align: center; transition: all .12s ease; }
.opp-dragging .opp-zone.win { border-color: var(--success); color: var(--success); }
.opp-dragging .opp-zone.lose { border-color: var(--danger); color: var(--danger); }
.opp-zone.drop.win { background: color-mix(in srgb, var(--success) 14%, transparent); }
.opp-zone.drop.lose { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.opp-zone.asking { border-style: solid; border-color: var(--danger); color: var(--text); justify-content: flex-start; }
.opp-zone.asking input { flex: 1; min-width: 200px; }
.opp-analytics { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 8px; }
.hbar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hbar-list li { display: grid; grid-template-columns: minmax(110px, 40%) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar { height: 10px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
.hbar span { display: block; height: 100%; background: var(--danger); border-radius: 999px; }
.hbar.ok span { background: var(--success); }
@media (max-width: 700px) { .opp-close-zones { grid-template-columns: 1fr; } }

/* ===== Presupuestos: opciones, margen, seguimiento y PDF ===== */
.q-actions { align-items: center; }
.q-actions select { width: auto; padding: 6px 10px; font-size: 13px; }
.margin-box { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; border: 1px dashed var(--border-strong); }
.margin-box.compact { margin-top: 6px; padding: 4px 8px; font-size: 12px; }
.margin-box.good strong { color: var(--success); } .margin-box.mid strong { color: var(--warning); } .margin-box.low strong { color: var(--danger); }
.margin-chip { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.margin-chip.good { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.margin-chip.mid { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.margin-chip.low { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.line-editor .cost-col, .line-editor th.cost-col { background: color-mix(in srgb, var(--warning) 6%, transparent); }
.opt-editor { display: grid; gap: 8px; }
.opt-editor[hidden] { display: none; }
.opt-row { display: grid; grid-template-columns: 28px minmax(120px, 1fr) minmax(160px, 2fr) auto auto; gap: 8px; align-items: center; }
.opt-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--accent-soft); color: var(--accent); }
@media (max-width: 700px) { .opt-row { grid-template-columns: 28px 1fr; } }
.opt-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.opt-total { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.opt-total.rec { border-color: var(--accent); }
.opt-total-amount { font-size: 20px; font-weight: 800; }
.opt-rec { font-size: 11px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.opt-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.opt-pick { appearance: none; font: inherit; color: var(--text); text-align: left; display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; }
.opt-pick:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.opt-pick.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.opt-pick-price { font-size: 22px; font-weight: 800; }
.trk { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.trk li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--text-muted); }
.trk li.done { color: var(--text); }
.trk-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; transform: translateY(1px); }
.trk li.done .trk-dot { background: var(--success); border-color: var(--success); }
.qd-logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 800; margin-right: 8px; vertical-align: middle; }
.qd-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0; }
.qd-option { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.qd-option.rec { border: 2px solid var(--accent); }
.qd-option.chosen { border: 2px solid var(--success); background: color-mix(in srgb, var(--success) 6%, transparent); }
.qd-option.dim { opacity: .55; }
.qd-option-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.qd-option-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.qd-option-lines li { display: flex; justify-content: space-between; gap: 10px; }
.qd-option-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border); padding-top: 8px; margin-top: auto; }
.qd-option-total strong { font-size: 18px; }
.qd-accept-line { margin-top: 26px; max-width: 360px; }
.q-accept .check-row { margin: 8px 0; }

/* ===== Packs ===== */
.pack-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.pack-save { font-size: 11px; font-weight: 800; color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.link-card { text-decoration: none; color: var(--text); }
.link-card:hover { border-color: var(--accent); }
.pack-row select { flex: 1; min-width: 0; }
.pack-row input { width: 100px; }
.pack-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 4px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--surface-hover); }

/* ===== Firma dibujada ===== */
.sign-wrap { display: grid; gap: 4px; }
.sign-pad { width: 100%; max-width: 600px; height: 180px; background: #fff; border: 1px dashed var(--border-strong); border-radius: 12px; touch-action: none; cursor: crosshair; }
.sign-foot { display: flex; justify-content: space-between; max-width: 600px; }
.sign-img { display: block; max-width: 240px; max-height: 80px; margin-bottom: 4px; background: #fff; border-radius: 6px; }

@media print {
  .qd-option.dim { display: none; }
  .qd-options { break-inside: avoid; }
  .qd-logo { background: #1f5fd6 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Mapa interactivo ===== */
.amap-page { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 12px; height: calc(100dvh - 120px); min-height: 520px; }
.amap-page.side-closed { grid-template-columns: minmax(0, 1fr); gap: 0; }
.amap-page.side-closed .amap-side { display: none; }
.amap-page.full { position: fixed; inset: 0; z-index: 60; height: 100dvh; padding: 10px; background: var(--bg); }
/* Panel lateral: una sola columna que baja con la rueda, sin barra horizontal, secciones plegables */
.amap-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.amap-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex: none; }
.amap-side-head strong { font-size: 15px; }
.amap-side-close { display: none; }
.amap-side-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
.amap-side * { min-width: 0; }
.amap-sec { border-bottom: 1px solid var(--border); }
.amap-sec:last-child { border-bottom: 0; }
.amap-sec > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 2; background: var(--surface); }
.amap-sec > summary::-webkit-details-marker { display: none; }
.amap-sec > summary::after { content: '▾'; margin-left: auto; color: var(--text-muted); transition: transform .15s ease; flex: none; }
.amap-sec:not([open]) > summary::after { transform: rotate(-90deg); }
.amap-sec > summary:hover { background: var(--surface-hover); }
.amap-sec-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amap-sec-act { margin-left: auto; white-space: nowrap; }
.amap-sec > summary:has(.amap-sec-act)::after { margin-left: 0; }
.amap-sec-body { display: grid; gap: 8px; padding: 0 14px 14px; }
.amap-sec-body p { margin: 0; }
.amap-sec-body select, .amap-sec-body .btn { max-width: 100%; }
.amap-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.amap-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.amap-btn-grid .btn { justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 8px; }
/* Resumen en directo */
.amap-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.amap-kpi { appearance: none; font: inherit; text-align: left; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 12px; padding: 8px 10px; cursor: pointer; display: grid; gap: 1px; }
.amap-kpi:hover { border-color: var(--accent); }
.amap-kpi-v { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amap-kpi-l { font-size: 11.5px; color: var(--text-muted); line-height: 1.25; }
.amap-kpi.good { border-color: color-mix(in srgb, #15803d 45%, var(--border)); }
.amap-kpi.bad { border-color: color-mix(in srgb, #dc2626 50%, var(--border)); }
.amap-updated { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.amap-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: amap-blink 2s infinite; flex: none; }
@keyframes amap-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .amap-live-dot { animation: none; } }
.amap-team { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.amap-team-row { appearance: none; font: inherit; color: var(--text); width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 6px; cursor: pointer; }
.amap-team-row:hover { background: var(--surface-hover); }
.amap-team-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-hover); font-size: 12px; font-weight: 800; color: var(--text-muted); }
.amap-team-av.on { background: #1f5fd6; color: #fff; }
.amap-team-main { display: grid; gap: 2px; }
.amap-team-main .progress { height: 5px; }
/* Ruta comercial */
.amap-picklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.amap-picklist li { display: grid; grid-template-columns: 22px 10px minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 13.5px; }
.amap-num { width: 22px; height: 22px; border-radius: 50%; background: #1f5fd6; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.amap-co-dot { width: 10px; height: 10px; border-radius: 50%; background: #d97706; }
.amap-co-dot.cap { background: #15803d; }
.amap-co-dot.off { background: #8a8f98; }
.amap-status-pill { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.amap-status-pill.cap { background: color-mix(in srgb, #15803d 15%, transparent); color: #15803d; }
.amap-status-pill.pro { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
.amap-status-pill.off { background: var(--surface-hover); color: var(--text-muted); }
.amap-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.amap-co span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; font-size: 12px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.amap-co.picked span { box-shadow: 0 0 0 3px rgba(31,95,214,.35), 0 2px 8px rgba(0,0,0,.35); }
.leaflet-tooltip.amap-co-label { font-size: 11.5px; font-weight: 700; padding: 2px 6px; }
/* Vista 3D */
.amap-3d { position: absolute; inset: 0; z-index: 1100; background: #e5e7eb; }
.amap-3d .amap-3d-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.amap-3d-bar { position: absolute; top: 10px; left: 10px; right: 56px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; z-index: 2; }
.amap-3d-bar > * { box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.amap-3d-bar .amap-base { width: auto; max-width: 240px; background: var(--surface); }
.amap-3d-info { position: absolute; left: 10px; right: 10px; bottom: 26px; margin: 0 auto; max-width: 560px; z-index: 2; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.amap-3d-info { display: grid; gap: 6px; }
.amap-3d-info .amap-3d-lv { color: var(--text-muted); }
.amap-3d-live { width: 28px; height: 28px; border-radius: 50%; background: #1f5fd6; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 0 0 6px rgba(31,95,214,.25); }
.amap-3d-pop { display: grid; gap: 3px; font-size: 13px; color: #1f2937; }
.amap-3d-boxes { font-size: 15px; }
.amap-3d-lv { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.amap-3d-levels { width: 64px !important; padding: 3px 6px !important; color: #1f2937; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; }
.amap-3d-boxes b { font-size: 20px; color: #1f5fd6; }
.amap-toggles, .amap-layers, .amap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.amap-toggles label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.amap-toggles label:hover { background: var(--surface-hover); }
.amap-toggle-name { flex: 1; }
.amap-count { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--surface-hover); border-radius: 999px; padding: 0 7px; }
.amap-swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; background: var(--accent); }
.amap-swatch.sw-zones { background: #2f7fe0; } .amap-swatch.sw-live { background: #1f5fd6; border-radius: 50%; }
.amap-swatch.sw-clients { background: #15803d; border-radius: 50%; } .amap-swatch.sw-sales { background: #0e8fae; }
.amap-swatch.sw-campaigns { background: linear-gradient(90deg, #dbeafe, #1e3a8a); } .amap-swatch.sw-tickets { background: #dc2626; border-radius: 50%; }
.amap-layers li { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.amap-layer-name { flex: 1; text-align: left; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amap-vis { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 6px; }
.amap-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13.5px; }
.amap-total { display: flex; justify-content: space-between; margin: 4px 0; }
.amap-main { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-width: 0; min-height: 0; }
.amap-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.amap-search { flex: 1 1 160px; min-width: 120px; max-width: 360px; padding: 8px 12px; border-radius: 10px; }
.amap-tools-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.amap-tool { appearance: none; font: inherit; display: inline-flex; align-items: center; gap: 6px; min-width: 36px; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); cursor: pointer; font-size: 14px; }
.amap-tool:hover { background: var(--surface-hover); }
.amap-tool.on { background: var(--accent); color: var(--on-accent); }
.amap-tool-lbl { font-size: 13px; font-weight: 600; }
@media (max-width: 1500px) { .amap-tool-lbl { display: none; } .amap-3d-btn .amap-tool-lbl { display: inline; } }
.amap-base { width: auto; padding: 7px 10px; font-size: 13px; }
.amap-canvas { position: relative; min-height: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.amap-map { position: absolute; inset: 0; background: #e5e7eb; }
.amap-map.selecting { cursor: copy; }
.amap-detail { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(360px, calc(100% - 24px)); z-index: 500; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.28); padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.amap-detail[hidden] { display: none; }
.amap-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.amap-detail-head strong { font-size: 15.5px; }
.amap-sub { margin: 4px 0 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.amap-dl { margin: 0; display: grid; gap: 4px; }
.amap-dl > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.amap-dl dt { color: var(--text-muted); } .amap-dl dd { margin: 0; font-weight: 600; text-align: right; }
.amap-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.amap-form label, .amap-form > div { display: grid; gap: 3px; font-size: 12.5px; color: var(--text-muted); min-width: 0; }
.amap-form .wide { grid-column: 1 / -1; }
.amap-form input[type="color"] { height: 36px; padding: 2px; }
.amap-lbl { font-size: 12.5px; color: var(--text-muted); }
.amap-icons { display: flex; flex-wrap: wrap; gap: 4px; }
.amap-icon { appearance: none; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; width: 36px; height: 36px; font-size: 18px; cursor: pointer; }
.amap-icon.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.amap-status { position: absolute; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 600; opacity: 0; pointer-events: none; transition: all .2s ease;
  background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; max-width: 90%; text-align: center; }
.amap-status.on { opacity: 1; transform: translate(-50%, 0); }
.amap-legend { position: absolute; left: 12px; bottom: 24px; z-index: 450; display: grid; gap: 6px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; font-size: 12px; max-width: 70%; }
.amap-legend[hidden] { display: none; }
.amap-leg-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.amap-leg-row .progress-ramp { width: 90px; height: 8px; border-radius: 999px; display: inline-block; }
.amap-leg-item { display: inline-flex; align-items: center; gap: 4px; }
.amap-leg-item i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.amap-pin span { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35); font-size: 17px; line-height: 1; }
.amap-pin span::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
.amap-note-box { display: inline-block; white-space: nowrap; padding: 4px 8px; border-radius: 8px; background: #fff; color: #1f2937; font-size: 12px; font-weight: 700; border-left: 4px solid var(--c); box-shadow: 0 3px 10px rgba(0,0,0,.25); transform: translate(-10px, -14px); }
.amap-dot span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.amap-dot.small span { width: 14px; height: 14px; }
.amap-dot.live span { width: 28px; height: 28px; animation: amap-pulse 2s infinite; }
.amap-dot.alert span { background: #dc2626; }
@keyframes amap-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,95,214,.6); } 70% { box-shadow: 0 0 0 14px rgba(31,95,214,0); } 100% { box-shadow: 0 0 0 0 rgba(31,95,214,0); } }
@media (prefers-reduced-motion: reduce) { .amap-dot.live span { animation: none; } }
/* Pantallas estrechas: el panel se abre como cajón encima del mapa */
@media (max-width: 1000px) {
  .amap-page { grid-template-columns: minmax(0, 1fr); position: relative; }
  .amap-page .amap-side { position: absolute; z-index: 1200; top: 0; left: 0; bottom: 0; width: min(340px, 92%); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
  .amap-legend { font-size: 11px; padding: 6px 8px; bottom: 18px; max-width: calc(100% - 24px); }
  .amap-side-close { display: inline-grid; }
  .amap-search { max-width: none; }
}
@media (max-width: 1000px) { .amap-page:not(.side-closed) .amap-side { display: flex; } }

.tiles-light { filter: grayscale(.85) brightness(1.06) contrast(.92); }
.tiles-dark { filter: invert(1) hue-rotate(180deg) brightness(.88) contrast(.9) grayscale(.35); }

/* ===== Campañas profesionales ===== */
.cmp-alert-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; margin-left: 6px; vertical-align: middle; }
.cmp-alert-dot.warn { background: #d97706; } .cmp-alert-dot.bad { background: #dc2626; }
.cmp-prog { display: grid; grid-template-columns: minmax(60px, 1fr) auto; gap: 8px; align-items: center; min-width: 110px; }
.kpi.kpi-warn .kpi-value { color: #b45309; }
.cmp-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 14px; }
.cmp-tab { appearance: none; font: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.cmp-tab:hover { background: var(--surface-hover); }
.cmp-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cmp-alerts { border-color: color-mix(in srgb, #d97706 45%, var(--border)); }
.cmp-alert-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.cmp-alert-list li.bad { color: #dc2626; font-weight: 600; }
.cmp-alert-box { border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-top: 10px; }
.cmp-alert-box.bad { background: color-mix(in srgb, #dc2626 12%, transparent); color: #b91c1c; }
.cmp-check { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.cmp-check li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 4px; border-radius: 10px; }
.cmp-check li.next { background: var(--accent-soft); }
.cmp-check li.done .cmp-check-text { color: var(--text-muted); text-decoration: line-through; }
.cmp-check-mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.cmp-check li.done .cmp-check-mark { background: #15803d; border-color: #15803d; color: #fff; }
.cmp-check li.next .cmp-check-mark { border-color: var(--accent); }
.cmp-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cmp-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.cmp-items li:last-child { border-bottom: 0; }
.cmp-items li > :first-child { flex: 1 1 200px; min-width: 0; }
.cmp-items li.done { opacity: .6; }
/* Tablero */
.cmp-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding: 8px 8px 12px; align-items: start; }
.cmp-col { background: var(--surface); border: 1px solid var(--border); margin: 0; padding: 8px; min-height: 200px; }
.cmp-col-head { display: flex; align-items: center; gap: 6px; padding: 4px 4px 10px; font-size: 13.5px; }
.cmp-col-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cmp-col-body { display: grid; gap: 8px; }
.cmp-empty { text-align: center; padding: 18px 0; border: 1px dashed var(--border); border-radius: 10px; margin: 0; }
.cmp-card { padding: 10px 12px; display: grid; gap: 4px; }
.cmp-card-top { display: flex; justify-content: space-between; align-items: center; }
.cmp-card-name { font-size: 14.5px; }
.cmp-next { color: var(--accent); }
.cmp-card-foot { display: flex; justify-content: flex-end; }
/* Calendario (Gantt) */
.gantt { display: grid; gap: 4px; overflow-x: auto; }
.gantt-row { display: grid; grid-template-columns: 220px minmax(520px, 1fr); gap: 10px; align-items: center; min-height: 30px; }
.gantt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.gantt-track { position: relative; height: 26px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--border) calc(10% - 1px) 10%); border-radius: 6px; }
.gantt-head .gantt-track { background: none; height: 18px; }
.gantt-week { position: absolute; top: 0; font-size: 11px; color: var(--text-muted); transform: translateX(2px); }
.gantt-today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #dc2626; z-index: 2; }
.gantt-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; background: color-mix(in srgb, var(--c) 30%, var(--surface)); border: 1px solid var(--c); overflow: hidden; display: flex; align-items: center; padding: 0 6px; color: var(--text); text-decoration: none; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.gantt-bar span { position: relative; z-index: 1; }
.gantt-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--c) 45%, transparent); }
.gantt-bar.alert { box-shadow: 0 0 0 2px #dc2626; }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; }
.gantt-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Resultados */
.cmp-qr-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.cmp-qr { width: 200px; height: 200px; border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.cmp-code { font-size: 18px; letter-spacing: .08em; }
.cmp-stars { font-size: 26px; color: #f59e0b; letter-spacing: 2px; }
.cmp-star-pick { display: flex; gap: 4px; }
.cmp-star-pick button { appearance: none; border: 0; background: none; font-size: 32px; line-height: 1; color: var(--border); cursor: pointer; padding: 2px; }
.cmp-star-pick button.on { color: #f59e0b; }
@media (max-width: 700px) {
  .cmp-qr-card { grid-template-columns: 1fr; justify-items: center; }
  .gantt-row { grid-template-columns: 130px minmax(480px, 1fr); }
}

/* ===== Buzoneo profesional ===== */
.wk-wrap { overflow-x: auto; }
.wk-table { min-width: 860px; table-layout: fixed; }
.wk-table th:first-child { width: 150px; }
.wk-table th.is-today { color: var(--accent); }
.wk-cell { vertical-align: top; padding: 6px !important; position: relative; min-height: 80px; }
.wk-cell.off { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--border) 50%, transparent) 6px 7px); }
.wk-cell.over { box-shadow: inset 0 0 0 2px #dc2626; }
.wk-cell.drop { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.wk-load { display: grid; gap: 2px; margin-bottom: 6px; }
.wk-load .progress { height: 5px; }
.wk-route { display: grid; gap: 1px; padding: 5px 7px; margin-bottom: 4px; border-radius: 8px; border-left: 4px solid #8a8f98; background: var(--surface-hover); color: var(--text); text-decoration: none; font-size: 12px; cursor: grab; }
.wk-route.st-en_curso { border-left-color: #1f5fd6; } .wk-route.st-completada { border-left-color: #15803d; opacity: .75; } .wk-route.st-incidencia { border-left-color: #dc2626; }
.wk-route.dragging { opacity: .4; }
.wk-route strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-add { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px dashed var(--border); color: var(--text-muted); text-decoration: none; font-weight: 700; }
.wk-add:hover { border-color: var(--accent); color: var(--accent); }
.wk-unassigned th { color: #b45309; }
.dp-score { display: inline-grid; place-items: center; min-width: 38px; padding: 2px 8px; border-radius: 999px; font-weight: 800; font-size: 13px; }
.dp-score.good { background: color-mix(in srgb, #15803d 16%, transparent); color: #15803d; }
.dp-score.mid { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
.dp-score.bad { background: color-mix(in srgb, #dc2626 14%, transparent); color: #b91c1c; }
.dp-flags { margin: 0; padding-left: 16px; font-size: 12.5px; display: grid; gap: 2px; }
.dp-flags li.bad { color: #dc2626; font-weight: 600; } .dp-flags li.warn { color: #b45309; }
.dp-days { display: flex; gap: 4px; flex-wrap: wrap; }
.dp-days label { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; gap: 1px; }
.dp-insp summary { cursor: pointer; font-weight: 700; margin-top: 8px; }
/* App del repartidor */
.net-banner { position: sticky; top: 0; z-index: 20; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 700; text-align: center; }
.net-banner.ok { background: color-mix(in srgb, #15803d 14%, transparent); color: #15803d; }
.net-banner.sync { background: color-mix(in srgb, #1f5fd6 14%, transparent); color: #1f5fd6; }
.net-banner.off { background: #b45309; color: #fff; }
.counter-card.paused { opacity: .55; }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.quick-ev { display: grid; gap: 2px; justify-items: center; padding: 10px 4px; font-size: 12.5px; min-height: 64px; }
.quick-ev span:first-child { font-size: 22px; }
.work-map { height: 300px; }
.work-summary { margin-bottom: 10px; }
.confirm-inline { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--accent-soft); }
.confirm-inline p { margin: 0 0 8px; font-weight: 600; }
.badge.stk-entrada { background: color-mix(in srgb, #15803d 15%, transparent); color: #15803d; }
.badge.stk-salida { background: color-mix(in srgb, #1f5fd6 15%, transparent); color: #1f5fd6; }
.badge.stk-merma { background: color-mix(in srgb, #dc2626 14%, transparent); color: #b91c1c; }
.wk-table th.wk-person { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--text); white-space: normal; overflow-wrap: anywhere; vertical-align: top; padding: 8px !important; }
.wk-table th.wk-person .muted { font-weight: 500; }
.wk-table th:first-child { width: 170px; }

/* ===== Administración y mantenimiento ===== */
.adm { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.adm-nav { position: sticky; top: 12px; display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.adm-nav-title { font-weight: 800; font-size: 15px; padding: 4px 8px 8px; }
.adm-nav-sub { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 10px 8px 4px; }
.adm-nav-link { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14px; }
.adm-nav-link:hover { background: var(--surface-hover); }
.adm-nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.adm-nav-role { display: inline-flex; align-items: center; gap: 8px; }
.adm-nav-role i { width: 4px; height: 18px; border-radius: 2px; }
.adm-main { min-width: 0; }
.adm-hero { border-left: 4px solid var(--c, var(--accent)); padding: 4px 0 4px 14px; }
.adm-hero h1 { margin: 0; font-size: 24px; }
.adm-hero p { margin: 4px 0 0; }
.adm-hero-row { display: flex; gap: 14px; align-items: center; }
.adm-role-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--c) 16%, transparent); font-size: 20px; }
.adm-role-icon.big { width: 54px; height: 54px; font-size: 28px; border-radius: 16px; }
.adm-role-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-muted); margin-top: 6px; align-items: center; }
.adm-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.adm-role-card { display: grid; gap: 6px; color: var(--text); text-decoration: none; border-top: 4px solid var(--c); transition: transform .12s ease, box-shadow .12s ease; }
.adm-role-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.adm-role-card p { margin: 0; }
.adm-role-card-top { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.adm-hint { font-size: 12.5px; color: #b45309; font-weight: 600; }
.adm-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adm-checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--surface-hover); font-size: 14px; }
.adm-check-icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: #64748b; }
.adm-checks li.bad .adm-check-icon { background: #dc2626; } .adm-checks li.warn .adm-check-icon { background: #d97706; } .adm-checks li.info .adm-check-icon { background: #2f7fe0; }
.adm-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-side-col { position: sticky; top: 12px; }
.adm-tools { display: grid; gap: 6px; }
.adm-area { border: 1px solid var(--border); border-radius: 12px; }
.adm-area > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 700; list-style: none; }
.adm-area > summary::-webkit-details-marker { display: none; }
.adm-area > summary .amap-count { margin-left: auto; }
.adm-area > summary svg { width: 18px; height: 18px; }
.adm-area ul { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; gap: 2px; }
.adm-area li.on { background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 10px; }
.adm-tool { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px; cursor: pointer; }
.adm-tool-main { display: grid; gap: 2px; }
.adm-tool-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.adm-tool-name svg { width: 16px; height: 16px; }
.adm-tool-name .badge { font-size: 10.5px; }
.adm-switch { appearance: none; width: 38px !important; height: 22px; border-radius: 999px; background: var(--border); position: relative; cursor: pointer; flex: none; margin: 1px 0 0; padding: 0 !important; border: 0 !important; transition: background .15s ease; }
.adm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s ease; }
.adm-switch:checked { background: #15803d; }
.adm-switch:checked::after { left: 19px; }
.adm-switch:disabled { opacity: .6; cursor: default; }
.adm-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-preview-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.adm-preview-as { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.adm-mini-select { width: auto !important; padding: 4px 8px !important; font-size: 13px; }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* Vista previa (maqueta de la app) */
.pv-device { border: 1px solid var(--border); border-radius: 14px; background: var(--bg); overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.pv-device.mobile { width: 300px; max-width: 100%; margin: 0 auto; border-radius: 28px; border-width: 8px; border-color: #1f2937; }
.pv-screen { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 340px; font-size: 11.5px; }
.pv-device.mobile .pv-screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; min-height: 480px; }
.pv-menu { background: var(--surface); border-right: 1px solid var(--border); padding: 8px; display: grid; gap: 2px; align-content: start; max-height: 420px; overflow-y: auto; }
.pv-brand { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 11px; padding: 2px 4px 8px; }
.pv-logo { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: 10px; }
.pv-title { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 6px 4px 2px; }
.pv-link { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-link.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.pv-link.sub { padding-left: 22px; }
.pv-link svg, .pv-area-name svg, .pv-card svg, .pv-btn svg, .pv-bottom svg { width: 13px; height: 13px; flex: none; }
.pv-area-name { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-weight: 700; }
.pv-home { padding: 12px; display: grid; gap: 6px; align-content: start; }
.pv-hello { font-size: 16px; font-weight: 800; }
.pv-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.pv-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.pv-btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.pv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.pv-card { display: flex; align-items: center; gap: 6px; padding: 10px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.pv-topbar { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); font-weight: 800; }
.pv-bottom { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--border); background: var(--surface); }
.pv-bottom span { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; font-size: 9.5px; color: var(--text-muted); }
.pv-bottom span.on { color: var(--accent); font-weight: 700; }
.adm-suggest { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.adm-suggest li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--surface-hover); font-size: 13.5px; }
.adm-suggest li > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-suggest svg { width: 15px; height: 15px; }
/* Conexiones */
.adm-role-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.adm-flows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adm-flows li { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); border-left: 4px solid #15803d; display: grid; gap: 4px; }
.adm-flows li.warn { border-left-color: #d97706; } .adm-flows li.bad { border-left-color: #dc2626; }
.adm-flow-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-arrow { color: var(--text-muted); }
.adm-flow-state { margin-left: auto; font-size: 12px; font-weight: 800; }
.adm-flow-state.ok { color: #15803d; } .adm-flow-state.warn { color: #b45309; } .adm-flow-state.bad { color: #dc2626; }
.adm-diagram { width: 100%; max-width: 760px; display: block; margin: 0 auto; }
.adm-edge { stroke-width: 4; stroke-linecap: round; opacity: .8; }
.adm-edge.ok { stroke: #15803d; } .adm-edge.warn { stroke: #d97706; stroke-dasharray: 10 6; } .adm-edge.bad { stroke: #dc2626; stroke-dasharray: 4 6; }
.adm-edge-label { font-size: 12px; font-weight: 700; fill: var(--text-muted); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.adm-node { fill: var(--surface); stroke: var(--c); stroke-width: 4; }
.adm-diagram a:hover .adm-node { fill: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.adm-node-icon { font-size: 22px; }
.adm-node-name { font-size: 12.5px; font-weight: 800; fill: var(--text); }
.adm-node-sub { font-size: 11.5px; fill: var(--text-muted); }
.adm-node-g { cursor: pointer; outline: none; }
.adm-node-g:hover .adm-node, .adm-node-g:focus-visible .adm-node { fill: color-mix(in srgb, var(--c) 14%, var(--surface)); stroke-width: 6; }
.adm-node-sub.none { fill: #b45309; }
.adm-node-g, .adm-edge-g { transition: opacity .15s; }
.adm-node-g.dim, .adm-edge-g.dim { opacity: .15; }
.adm-filter { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 8px; }
.adm-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.adm-chip[aria-pressed="true"] { background: var(--primary, #1f5fd6); border-color: var(--primary, #1f5fd6); color: #fff; }
.adm-role-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); border-left: 4px solid var(--c); }
.adm-role-panel > div { flex: 1 1 240px; display: grid; gap: 2px; }
.adm-circuits { display: grid; gap: 10px; }
.adm-circuit { border: 1px solid var(--border); border-left: 4px solid #15803d; border-radius: 12px; padding: 10px 12px; }
.adm-circuit.warn { border-left-color: #d97706; } .adm-circuit.bad { border-left-color: #dc2626; }
.adm-circuit > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.adm-circuit > summary::-webkit-details-marker { display: none; }
.adm-circuit-icon { font-size: 20px; }
.adm-steps { list-style: none; counter-reset: st; margin: 12px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.adm-steps li { counter-increment: st; position: relative; padding: 10px 10px 10px 38px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); display: grid; gap: 4px; align-content: start; }
.adm-steps li::before { content: counter(st); position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: #15803d; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.adm-steps li.warn::before { background: #d97706; } .adm-steps li.bad::before { background: #dc2626; }
.adm-steps li.dim { opacity: .45; }
.adm-circuit, .adm-steps li { color: var(--text); }
.adm-steps li .muted { display: flex; align-items: center; gap: 4px; }
.adm-steps li svg { width: 14px; height: 14px; flex: none; }
.adm-step-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-step-text { font-weight: 600; font-size: 14px; }
.warn-text { color: #b45309; }
.adm-flow-group + .adm-flow-group { margin-top: 14px; }
.adm-legend { display: flex; gap: 16px; justify-content: center; font-weight: 700; }
.adm-legend .ok { color: #15803d; } .adm-legend .warn { color: #b45309; } .adm-legend .bad { color: #dc2626; }
.adm-cell-warn { background: color-mix(in srgb, #dc2626 14%, transparent); }
.adm-tool-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.adm-link { display: grid; gap: 4px; color: var(--text); text-decoration: none; }
.adm-link svg { width: 22px; height: 22px; color: var(--accent); }
.badge.po-enviado { background: color-mix(in srgb, #0e8fae 16%, transparent); color: #0e7490; }
@media (max-width: 1150px) { .adm-two { grid-template-columns: minmax(0, 1fr); } .adm-side-col { position: static; } }
@media (max-width: 820px) { .adm { grid-template-columns: minmax(0, 1fr); } .adm-nav { position: static; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .adm-nav-title, .adm-nav-sub { grid-column: 1 / -1; } }

/* ===== Portal del cliente ===== */
.brief-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.brief-est { position: sticky; top: 12px; display: grid; gap: 8px; border: 2px solid var(--accent); }
.brief-est-body { display: grid; gap: 6px; }
.brief-est-row { display: flex; justify-content: space-between; font-size: 14px; }
.brief-est-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--border); font-size: 15px; }
.brief-est-total strong { font-size: 24px; color: var(--accent); }
.brief-map { height: 320px; margin: 8px 0; }
@media (max-width: 900px) { .brief-layout { grid-template-columns: minmax(0, 1fr); } .brief-est { position: static; order: -1; } }
.cli-manager { display: grid; gap: 10px; }
.cli-manager-top { display: flex; gap: 12px; align-items: center; }
.cli-manager-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cli-timelines { display: grid; gap: 10px; }
.cli-tl { display: grid; gap: 8px; color: var(--text); text-decoration: none; }
.cli-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.cli-steps::before { content: ''; position: absolute; top: 13px; left: 10%; right: 10%; height: 2px; background: var(--border); }
.cli-steps li { display: grid; justify-items: center; gap: 4px; position: relative; text-align: center; }
.cli-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border); font-size: 12px; font-weight: 800; color: var(--text-muted); }
.cli-steps li.done .cli-dot { background: #15803d; border-color: #15803d; color: #fff; }
.cli-steps li.now .cli-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cli-step-name { font-size: 11.5px; color: var(--text-muted); }
.cli-steps li.now .cli-step-name { color: var(--text); font-weight: 700; }
.cli-now { margin: 0; font-size: 14px; }
.cli-faq { display: grid; gap: 4px; }
.cli-faq details { border-bottom: 1px solid var(--border); padding: 6px 0; }
.cli-faq summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.cli-faq p { margin: 6px 0 2px; }
.cli-account-link { display: grid; gap: 2px; color: var(--text); text-decoration: none; }
.cli-pass { font-size: 15px; padding: 6px 10px; border-radius: 8px; background: var(--surface-hover); user-select: all; }
.cert-doc .cert-text { font-size: 15px; line-height: 1.6; }
.cert-doc table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cert-doc th, .cert-doc td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.cert-doc .num { text-align: right; }
.cert-sign { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px; }
.cert-line { width: 220px; border-bottom: 1px solid var(--text); height: 40px; margin-bottom: 4px; }

/* ===== Oficina: bandeja, horas, plantillas ===== */
.off-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.off-items li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); border-left: 4px solid #15803d; }
.off-items li.l0 { border-left-color: #dc2626; } .off-items li.l1 { border-left-color: #d97706; }
.off-kind { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-hover); font-size: 15px; font-weight: 800; }
.off-text { display: grid; gap: 2px; min-width: 0; }
.off-text strong { font-size: 14px; }
.off-text .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.off-timer { border: 2px solid var(--accent-soft); }
.off-timer-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.off-timer-row select, .off-timer-row input { width: auto; flex: 1 1 160px; }
.off-timer-title { font-weight: 800; }
.off-clock { font-size: 22px; font-variant-numeric: tabular-nums; }
.off-timer-what { flex: 1; color: var(--text-muted); font-size: 14px; }
.off-rec { width: 12px; height: 12px; border-radius: 50%; background: #dc2626; animation: amap-blink 1.4s infinite; }
.off-tpl > summary { cursor: pointer; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.off-tpl[open] > summary { margin-bottom: 10px; }
.off-steps { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 4px; }
.off-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--surface-hover); }
.off-step { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.off-add-step { display: grid; grid-template-columns: minmax(0, 2fr) 70px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; }
@media (max-width: 760px) { .off-add-step { grid-template-columns: 1fr 1fr; } }
.off-apply { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.off-apply select { width: auto; flex: 1; }
.off-autos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.off-autos li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 4px 10px; }
.off-autos li.on { border-color: color-mix(in srgb, #15803d 50%, var(--border)); }
.off-autos .adm-tool { flex: 1; }
.off-days { display: inline-flex; gap: 6px; align-items: center; }

/* ===== Repartidor: jornada, SOS, disponibilidad ===== */
.day-flow { border: 2px solid var(--accent-soft); }
.day-steps { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.day-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; opacity: .55; }
.day-steps li.now, .day-steps li.done { opacity: 1; }
.day-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid var(--border); background: var(--surface); }
.day-steps li.done .day-dot { background: #15803d; border-color: #15803d; color: #fff; }
.day-steps li.now .day-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.day-body { display: grid; gap: 6px; padding-top: 4px; }
.day-body .big-btn { width: 100%; }
.day-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.sos-box { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.sos-btn { font-weight: 800; }
.sos-confirm { grid-column: 1 / -1; display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, #dc2626 12%, transparent); }
.sos-sent { grid-column: 1 / -1; padding: 12px; border-radius: 12px; background: color-mix(in srgb, #15803d 14%, transparent); color: #15803d; font-weight: 700; }
.sos-alert { border: 2px solid #dc2626; background: color-mix(in srgb, #dc2626 10%, var(--surface)); display: grid; gap: 6px; animation: amap-blink 1.6s 3; }
.route-wrap { display: grid; gap: 6px; }
.route-answer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.route-answer input { flex: 1 1 160px; width: auto; }
.wk-route.rejected { border-left-color: #dc2626; background: color-mix(in srgb, #dc2626 10%, var(--surface-hover)); }
.pay-line, .pay-total { display: flex; justify-content: space-between; gap: 10px; }
.pay-total { padding-top: 8px; border-top: 1px solid var(--border); font-size: 16px; }
.pay-total strong { font-size: 24px; color: var(--accent); }
.dp-pay { display: grid; gap: 4px; }
.av-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.av-key { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.av-key.yes { background: color-mix(in srgb, #15803d 18%, transparent); } .av-key.no { background: color-mix(in srgb, #dc2626 16%, transparent); } .av-key.off { opacity: .6; }
.av-head, .av-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.av-head span { text-align: center; font-size: 11px; font-weight: 800; color: var(--text-muted); }
.av-day { appearance: none; font: inherit; min-height: 62px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); padding: 4px; display: grid; align-content: start; gap: 2px; text-align: left; cursor: pointer; }
.av-day.yes { background: color-mix(in srgb, #15803d 18%, var(--surface)); border-color: #15803d; }
.av-day.no { background: color-mix(in srgb, #dc2626 14%, var(--surface)); border-color: #dc2626; }
.av-day.off { opacity: .55; }
.av-day.past { opacity: .3; cursor: default; }
.av-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.av-num { font-weight: 800; font-size: 13px; }
.av-state { font-size: 10.5px; color: var(--text-muted); }
.av-route { font-size: 10px; background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-hint span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #d97706; box-shadow: 0 2px 6px rgba(0,0,0,.3); font-size: 13px; }
.zone-hint.feat span { border-color: #1f5fd6; }
.hint-note { color: #b45309; font-weight: 600; margin: 0; }

/* ===== CEO: objetivos, decisiones, tesorería, informe ===== */
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.goal-card { display: grid; gap: 8px; border-top: 4px solid var(--border); }
.goal-card.ok { border-top-color: #15803d; } .goal-card.bad { border-top-color: #dc2626; }
.goal-num { font-size: 24px; font-weight: 800; }
.goal-bar { position: relative; height: 10px; border-radius: 999px; background: var(--surface-hover); overflow: visible; }
.goal-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.goal-card.ok .goal-bar span { background: #15803d; } .goal-card.bad .goal-bar span { background: #d97706; }
.goal-bar i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); opacity: .6; }
.goal-input { display: flex; align-items: center; gap: 6px; }
.goal-input input { width: 140px; }
.dec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dec-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.dec-list li.urgent { border-color: #dc2626; background: color-mix(in srgb, #dc2626 8%, transparent); }
.dec-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.dec-actions input { width: 220px; }
@media (max-width: 760px) { .dec-list li { grid-template-columns: 1fr; } .dec-actions { justify-content: flex-start; } .dec-actions input { width: 100%; } }
.cmp-items li.overdue { background: color-mix(in srgb, #dc2626 8%, transparent); border-radius: 8px; }
.approval-box { background: color-mix(in srgb, #d97706 14%, transparent); color: var(--text); width: 100%; }
.approval-box input { flex: 1; width: auto; }
.weekly-doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.weekly-doc th, .weekly-doc td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.weekly-doc .num { text-align: right; }
.weekly-hl { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; }

/* ===== Imprenta: tarifas, conversación, entrega ===== */
.tariff-add { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr .9fr .9fr .7fr auto; gap: 6px; align-items: center; margin-top: 10px; }
@media (max-width: 860px) { .tariff-add { grid-template-columns: 1fr 1fr; } }
.tariff-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.po-thread { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; padding: 4px; }
.po-msg { max-width: 80%; padding: 8px 12px; border-radius: 14px; background: var(--surface-hover); justify-self: start; }
.po-msg.mine { justify-self: end; background: var(--accent-soft); }
.po-msg.printer:not(.mine) { border-left: 3px solid #d97706; }
.po-msg p { margin: 4px 0 0; white-space: pre-wrap; }
.po-msg-head { display: flex; gap: 8px; align-items: baseline; }
.po-img { max-width: 240px; max-height: 200px; border-radius: 10px; margin-top: 6px; display: block; }
.po-compose { display: grid; gap: 6px; margin-top: 8px; }
.po-compose input[type="file"] { flex: 1; width: auto; }
.rating-row { display: flex; align-items: center; gap: 10px; }
.rating-row > span { width: 110px; }
.small-stars { font-size: 16px; }
.score-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }

/* ===== Admin: seguridad, empresa y datos ===== */
.stack-sm { display: grid; gap: 8px; }
.adm-sec { padding: 12px 4px; position: sticky; left: 12px; }
.adm-sec-row > td { background: var(--surface-hover); padding: 0 12px !important; }
.adm-sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.adm-sec-grid h3 { font-size: 14px; margin: 0 0 8px; }
.adm-sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adm-sec-list li { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.adm-sec-list li:last-child { border-bottom: 0; }
.adm-sec-foot { margin-top: 12px; justify-content: space-between; }
.adm-sec input.mono { white-space: normal; }
.adm-susp { margin: 0; font-weight: 600; color: #b91c1c; }
.adm-badge-susp { background: color-mix(in srgb, #dc2626 15%, transparent); color: #b91c1c; margin-top: 4px; }
.adm-badge-idle { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; margin-top: 4px; }
.adm-user-susp td { opacity: .75; }
.adm-feed { list-style: none; margin: 0; padding: 0; }
.adm-feed li { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.adm-feed li { border-left: 3px solid transparent; padding-left: 8px; }
.adm-feed li.del { border-left-color: #dc2626; }
.adm-feed-when { color: var(--text-muted); font-size: 12.5px; }
@media (max-width: 640px) { .adm-feed li { grid-template-columns: 1fr; gap: 2px; } }
.adm-tips { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.adm-logo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.adm-logo img { max-width: 160px; max-height: 80px; object-fit: contain; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: #fff; }
.adm-logo-empty { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: 22px; color: #fff; background: var(--accent); }
.adm-sticky-save { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; z-index: 2; }
.adm-row-bad td { background: color-mix(in srgb, #dc2626 6%, transparent); }
.adm-warnbox { border: 1px solid color-mix(in srgb, #f59e0b 50%, transparent); background: color-mix(in srgb, #f59e0b 10%, transparent); border-radius: 12px; padding: 10px 14px; margin-top: 10px; display: grid; gap: 8px; justify-items: start; }
.adm-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adm-bars li { display: grid; grid-template-columns: 170px 1fr 140px; gap: 10px; align-items: center; font-size: 14px; }
.adm-bar { height: 8px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
.adm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
@media (max-width: 640px) { .adm-bars li { grid-template-columns: 1fr; gap: 3px; } }
.adm-clean { list-style: none; margin: 0; padding: 0; }
.adm-clean li { display: grid; grid-template-columns: 1fr 80px auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.adm-clean li > strong { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .adm-clean li { grid-template-columns: 1fr auto; } .adm-clean li > span { grid-column: 1 / -1; } }
.filter-check { cursor: pointer; }
.qd-logo-img { max-height: 44px; max-width: 140px; object-fit: contain; margin-right: 10px; vertical-align: middle; }
.adm-sec .stack-sm > button, .adm-sec .stack-sm > .del-box { justify-self: start; }

/* ===== Finanzas: cobros, rectificativas, recurrentes, IVA ===== */
.iv-rectificada, .iv-rectificativa { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, transparent); border-color: color-mix(in srgb, #7c3aed 35%, transparent); }
:root[data-theme="dark"] .iv-rectificada, :root[data-theme="dark"] .iv-rectificativa { color: #b79cff; }
.qd-rect { margin: 12px 0; padding: 10px 14px; border-left: 3px solid #7c3aed; background: color-mix(in srgb, #7c3aed 7%, transparent); border-radius: 8px; font-size: 14px; }
.fin-aging .kpi { min-width: 0; }
.fin-auto { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; cursor: pointer; font-size: 14px; }
.fin-auto input { margin-top: 3px; width: auto; }
.fin-detail > td { background: var(--surface-hover); }
.fin-open { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fin-open li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.fin-open li:last-child { border-bottom: 0; }
.fin-rec.paused { opacity: .65; }
.fin-rec-amount { margin: 6px 0 2px; font-size: 18px; }
.fin-vat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.fin-vat-grid h3 { font-size: 14px; margin: 0 0 6px; }
.fin-vat { width: 100%; font-variant-numeric: tabular-nums; }
.fin-vat tfoot th { border-top: 2px solid var(--border); }
.fin-filed { font-weight: 600; color: #2f855a; }
:root[data-theme="dark"] .fin-filed { color: #5fd08f; }

/* ===== Comercial: agenda, objetivos, recompra, captación ===== */
.agenda-list { list-style: none; margin: 0; padding: 0; }
.agenda-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.agenda-item:last-child { border-bottom: 0; }
.agenda-item.late .agenda-ico { background: color-mix(in srgb, #dc2626 16%, transparent); }
.agenda-item.done { opacity: .75; }
.agenda-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-hover); font-size: 15px; }
.agenda-main strong { display: block; }
.agenda-group.late { border-color: color-mix(in srgb, #dc2626 45%, var(--border)); }
.agenda-postpone { display: inline-flex; gap: 4px; }
.agenda-done { display: grid; gap: 6px; min-width: 260px; }
.agenda-next { display: grid; grid-template-columns: 1fr 150px; gap: 6px; }
.agenda-auto { color: var(--text-muted); }
@media (max-width: 720px) { .agenda-item { grid-template-columns: 32px 1fr; } .agenda-item > .row-actions { grid-column: 1 / -1; } .agenda-done { min-width: 0; } }
.seq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.seq-list summary { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.seq-on input { width: auto; }
.seq-steps { display: grid; gap: 6px; margin: 8px 0; }
.seq-step { display: grid; grid-template-columns: auto 70px 150px 1fr auto; gap: 6px; align-items: center; }
@media (max-width: 720px) { .seq-step { grid-template-columns: auto 70px 1fr auto; } .seq-step input[type="text"] { grid-column: 1 / -1; } }
.tg-bar { position: relative; height: 22px; min-width: 120px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
.tg-bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 999px; }
.tg-bar i.full { background: #16a34a; }
.tg-bar span { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 700; line-height: 22px; }
.tg-input { width: 110px; }
.tg-input.small-in { width: 70px; }
.tg-comm { display: flex; align-items: center; gap: 6px; }
.tg-big { font-size: 28px; margin: 4px 0 10px; }
.season.now { border-color: color-mix(in srgb, #16a34a 55%, var(--border)); }
.season summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.season-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin: 10px 0; }
.season-client { display: flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.season-client input { width: auto; }
.fb-low { border-left: 3px solid #dc2626; padding-left: 8px !important; }
.fb-scores { white-space: nowrap; }
.lead-msg { max-width: 320px; white-space: pre-wrap; }
.lead-page { max-width: 760px; margin: 24px auto; padding: 0 16px; }
.lead-page.embed { margin: 0 auto; padding: 0; }
.lead-card { padding: 24px; }
.lead-head h1 { margin: 0 0 6px; font-size: 26px; }
.lead-form { margin-top: 12px; }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-thanks { text-align: center; padding: 30px 10px; }
.lead-ok { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; font-size: 30px; color: #fff; background: #16a34a; }
body.lead-embed .topbar { display: none; }
body.lead-embed { background: transparent; }

/* ===== Operaciones: checklists, jornada, vehículos, fichas ===== */
.cl-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.cl-list li { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border); }
.cl-list li label { display: flex; gap: 8px; align-items: center; cursor: pointer; flex: 1; }
.cl-list li input { width: auto; }
.cl-list li.done label span { text-decoration: line-through; color: var(--text-muted); }
.cl-add { display: flex; gap: 6px; }
.cl-progress { height: 8px; flex: 1; max-width: 220px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
.cl-progress i { display: block; height: 100%; background: #16a34a; border-radius: 999px; }
.cl-lines { display: grid; gap: 6px; margin-bottom: 10px; }
.cl-line { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; }
.proc summary { cursor: pointer; padding: 8px 0; }
.proc-body { white-space: pre-wrap; font-size: 14px; margin: 6px 0 10px; }
.proc-steps { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 4px; font-size: 14px; }
.break-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; }
.break-box .btn.paused { border-color: #f59e0b; color: #b45309; }
.tt-report-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.tt-days { font-variant-numeric: tabular-nums; font-size: 14px; }
.tt-days tr.tt-off td { color: var(--text-muted); }
.tt-days tfoot th { border-top: 2px solid var(--border); }
.tt-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); }
@media (max-width: 720px) { .tt-sign { grid-template-columns: 1fr; } }
.sch-in { width: 64px; }
.sch-table td, .sch-table th { white-space: nowrap; }
.fleet-dues { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.plate { font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 700; padding: 1px 6px; border: 1.5px solid currentColor; border-radius: 4px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-hover); }
.hr-upload { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
@media print { .tt-report { border: 0; box-shadow: none; } }
.nowrap { white-space: nowrap; }

/* ===== Menú lateral automático (ordenador): franja de iconos que se despliega al acercar el ratón ===== */
@media (min-width: 1024px) {
  body.nav-collapsed .shell { grid-template-columns: minmax(0, 1fr); padding-left: var(--nav-w-collapsed); }
  body.nav-collapsed .sidebar {
    position: fixed; z-index: 30; left: 0; top: var(--header-h); bottom: 0; height: auto;
    width: var(--nav-w-collapsed); transition: width .18s ease, box-shadow .18s ease;
    overflow-x: hidden;
  }
  /* Recogido: solo iconos (las áreas muestran su icono; sus enlaces se esconden) */
  body.nav-collapsed:not(.nav-peek) .nav-area > a { display: none; }
  body.nav-collapsed:not(.nav-peek) .nav-area summary { justify-content: center; padding: 9px 0; }
  body.nav-collapsed:not(.nav-peek) .nav-area summary::after { display: none; }
  body.nav-collapsed:not(.nav-peek) .nav-area.has-active summary { background: var(--accent-soft); color: var(--accent); }
  body.nav-collapsed:not(.nav-peek) .nav-badge { display: none; }
  /* Desplegado al acercar el ratón: por encima del contenido, sin moverlo */
  body.nav-collapsed.nav-peek .sidebar { width: var(--nav-w); box-shadow: 8px 0 32px rgba(0, 0, 0, .28); padding-left: 10px; padding-right: 10px; }
  body.nav-collapsed.nav-peek .sidebar a { justify-content: flex-start; padding: 8px 10px; }
  body.nav-collapsed.nav-peek .nav-area > a { padding-left: 14px; }
  body.nav-collapsed.nav-peek .nav-label, body.nav-collapsed.nav-peek .nav-title, body.nav-collapsed.nav-peek .nav-legal, body.nav-collapsed.nav-peek .nav-badge { display: revert; }
  body.nav-collapsed.nav-peek .nav-label { display: block; }
  body.nav-collapsed.nav-peek .nav-icon-badge { display: none; }
  body.nav-collapsed.nav-peek .nav-collapse { justify-content: flex-start; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { body.nav-collapsed .sidebar { transition: none; } }

/* ===== Vista previa en vivo por rol (panel de administración) ===== */
.pvx { display: grid; gap: 10px; }
.pvx-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.pvx-bar.sub { justify-content: flex-start; padding-bottom: 4px; }
.pvx-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pvx-seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pvx-seg .chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.pvx-zoom { display: inline-flex; align-items: center; gap: 4px; }
.pvx-zoom input[type="range"] { width: 110px; padding: 0; }
.pvx-zoom-val { font-size: 12px; color: var(--text-muted); min-width: 92px; font-variant-numeric: tabular-nums; }
.pvx-field { display: inline-flex; align-items: center; gap: 6px; }
.pvx-field select { width: auto; max-width: 240px; }
.pvx-note { flex: 1; min-width: 240px; }
.pvx-stage {
  position: relative; overflow: auto; border-radius: 12px; padding: 16px; min-height: 260px; max-height: 78vh;
  display: flex; justify-content: center; align-items: flex-start;
  background-color: var(--surface-hover);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text-muted) 22%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
}
.pvx-device { position: relative; flex: none; border-radius: 10px; overflow: hidden; background: var(--bg); box-shadow: 0 18px 50px rgba(0, 0, 0, .35), 0 0 0 1px var(--border); }
.pvx-device.mobile, .pvx-device.tablet { border-radius: 26px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35), 0 0 0 8px #111827, 0 0 0 9px #374151; margin: 10px; }
.pvx-frame { display: block; border: 0; transform-origin: 0 0; background: var(--bg); }
.pvx.full { position: fixed; inset: 0; z-index: 200; background: var(--bg); padding: 12px 16px; grid-template-rows: auto auto 1fr; }
.pvx.full .pvx-stage { max-height: none; height: 100%; align-items: center; }
body.pvx-open { overflow: hidden; }
/* Dentro del marco de la vista previa */
.pv-banner { position: sticky; top: 0; z-index: 60; text-align: center; font-size: 12px; font-weight: 700; padding: 5px 10px; background: #7c3aed; color: #fff; }
.pv-banner.warn { background: #b45309; }

/* ===== Redes sociales ===== */
.net-chip { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 800; color: #fff; background: var(--nc); margin-right: 2px; vertical-align: middle; }

.sc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.sc-wd { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); padding: 4px 6px; }
.sc-day { min-height: 104px; border: 1px solid var(--border); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 3px; background: var(--surface); min-width: 0; }
.sc-day.out { opacity: .45; }
.sc-day.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sc-day-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.sc-add { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; text-decoration: none; color: var(--text-muted); opacity: 0; }
.sc-day:hover .sc-add { opacity: 1; background: var(--surface-hover); }
.sc-item { display: flex; gap: 4px; align-items: center; font-size: 11.5px; text-decoration: none; color: var(--text); padding: 3px 4px; border-radius: 6px; border-left: 3px solid var(--st, #64748b); background: color-mix(in srgb, var(--st, #64748b) 12%, transparent); min-width: 0; }
.sc-item .net-chip { width: 15px; height: 15px; font-size: 9px; border-radius: 4px; }
.sc-time { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.sc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.st-idea, .st-borrador { --st: #64748b; } .st-pendiente_cliente { --st: #f59e0b; } .st-cambios { --st: #dc2626; } .st-aprobado { --st: #22c55e; } .st-programado { --st: #3b82f6; } .st-publicado { --st: #7c3aed; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.sc-leg::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--st); margin-right: 5px; vertical-align: -1px; }
.badge.sc-pub { background: color-mix(in srgb, #7c3aed 15%, transparent); color: #7c3aed; }
:root[data-theme="dark"] .badge.sc-pub { color: #b79cff; }
@media (max-width: 760px) { .sc-day { min-height: 64px; } .sc-item .sc-title, .sc-item .sc-time { display: none; } }
.sc-board { grid-template-columns: repeat(7, minmax(200px, 1fr)); overflow-x: auto; }
.sc-nets { display: inline-flex; gap: 2px; align-items: center; }
.sc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .sc-layout { grid-template-columns: 1fr; } }
.sc-phone-wrap { position: sticky; top: calc(var(--header-h) + 16px); }
.sc-phone { width: 320px; max-width: 100%; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #fff; color: #111; box-shadow: 0 0 0 8px #111827, 0 18px 40px rgba(0, 0, 0, .35); font-size: 13px; }
.sc-phone-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; }
.sc-phone-head .muted { color: #6b7280; }
.sc-phone img, .sc-phone video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #e5e7eb; }
.sc-phone-empty { aspect-ratio: 1 / 1; display: grid; place-items: center; background: #f3f4f6; color: #9ca3af; }
.sc-phone-actions { padding: 8px 12px 0; font-size: 18px; letter-spacing: 4px; }
.sc-phone-cap { padding: 6px 12px 14px; margin: 0; white-space: pre-wrap; max-height: 220px; overflow: auto; }
.sc-dots { text-align: center; padding-top: 4px; }
.sc-tags { color: #1d4ed8; white-space: pre-wrap; }
.sc-netpick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.net-pick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.net-pick.on { border-color: var(--nc); color: var(--text); background: color-mix(in srgb, var(--nc) 12%, transparent); }
.field-label { display: block; color: var(--text-muted); margin-bottom: 2px; }
.sc-count { display: flex; gap: 4px; flex-wrap: wrap; }
.sc-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 8px 0; }
.sc-media img, .sc-media video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; }
.sc-media-item { position: relative; }
.sc-media-rm { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; }
.sc-caption { white-space: pre-wrap; }
.sc-approve img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.sc-clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .sc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Publicidad online ===== */
.ad-budget { display: grid; gap: 4px; margin: 8px 0 4px; }
.ad-line { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.ad-pace { display: grid; gap: 6px; margin: 4px 0 12px; max-width: 560px; }
.ad-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 8px 0; }
.ad-charts h3 { margin: 0 0 4px; }
.ad-edit { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; }
.ad-edit summary { cursor: pointer; font-weight: 600; }
.ad-day-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0; align-items: end; }
@media (max-width: 720px) { .ad-day-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-import { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px dashed var(--border); border-radius: 10px; }
.ad-import h3 { margin: 0; }
.ad-review { margin-top: 14px; padding: 14px; border-radius: 12px; }
.ad-plat { margin-right: 14px; white-space: nowrap; }
.warn-text { color: #b45309; }
:root[data-theme="dark"] .warn-text { color: #fbbf24; }

/* ===== Web y SEO ===== */
.web-steps { list-style: none; margin: 10px 0; padding: 0; display: flex; gap: 2px; flex-wrap: wrap; counter-reset: s; }
.web-steps li { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); padding: 3px 8px 3px 3px; border-radius: 999px; background: var(--surface-hover); }
.web-steps li span { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: var(--border); color: var(--text); }
.web-steps li.done span { background: #16a34a; color: #fff; }
.web-steps li.cur { color: var(--text); font-weight: 700; background: var(--accent-soft); }
.web-steps li.cur span { background: var(--accent); color: #fff; }
.web-steps li.cur.warn span { background: #dc2626; }
.web-card .web-steps li:not(.cur) { font-size: 0; padding: 3px; gap: 0; }
.kw-table td, .kw-table th { white-space: nowrap; }
.kw-pos-in { width: 70px; }
.kw-spark { color: var(--accent); display: block; }
.kw-add { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr auto; gap: 6px; align-items: center; }
@media (max-width: 760px) { .kw-add { grid-template-columns: 1fr 1fr; } }
.aud-form { display: flex; gap: 8px; margin-top: 8px; }
.aud-form input { flex: 1 1 auto; min-width: 0; width: auto; }
.aud-form .btn { flex: none; width: auto; }
.aud-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.aud-score { width: 86px; height: 86px; border-radius: 50%; display: grid; place-content: center; text-align: center; border: 6px solid currentColor; flex: none; }
.aud-score strong { font-size: 28px; line-height: 1; color: var(--text); }
.aud-score span { font-size: 11px; color: var(--text-muted); }
.aud-score.good, .aud-mini.good { color: #16a34a; } .aud-score.mid, .aud-mini.mid { color: #d97706; } .aud-score.bad, .aud-mini.bad { color: #dc2626; }
.aud-mini { display: inline-grid; place-items: center; min-width: 30px; height: 22px; border-radius: 6px; font-weight: 800; font-size: 12px; border: 2px solid currentColor; }
.aud-list li { align-items: flex-start; }

/* ===== Email marketing ===== */
.warn-box { border-color: #d69e2e; }
.em-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .em-editor { grid-template-columns: minmax(0, 1fr); } }
.em-blocks { display: flex; flex-direction: column; gap: 10px; }
.em-block { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.em-block-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.em-block-head .link-btn { min-width: 26px; font-size: 15px; }
.em-block-head .link-btn:disabled { opacity: .3; cursor: default; }
.em-add { margin-top: 10px; flex-wrap: wrap; }
.em-preview-col { position: sticky; top: 76px; }
.em-preview { display: flex; flex-direction: column; gap: 10px; }
.em-devbar button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.em-inbox { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.em-inbox > div:last-child { min-width: 0; }
.em-inbox-subj, .em-inbox-pre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; }
.em-device { margin: 0 auto; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #f3f4f6; transition: width .2s; max-width: 100%; }
.em-device.desktop { width: 100%; }
.em-device.mobile { width: 375px; border-radius: 28px; border-width: 8px; border-color: #1f2937; }
.em-frame { display: block; width: 100%; height: 640px; border: 0; background: #f3f4f6; }
.em-send { border: 2px solid var(--accent); border-radius: 12px; padding: 12px 14px; }
.em-send .row-actions { flex-wrap: wrap; align-items: center; }
.em-actions { margin-top: 14px; }
.em-listinfo { align-self: end; padding-bottom: 8px; }
.em-url { word-break: break-all; font-size: 13px; }
.em-newlist { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.em-newlist .field { min-width: 200px; flex: 1; }
.em-addform { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 10px 0 14px; }
.em-addform .field { min-width: 180px; flex: 1; }
.em-listcard.active { outline: 2px solid var(--accent); }
.em-unsub-page { min-height: 70vh; display: grid; place-items: center; padding: 24px 16px; }
.em-unsub { max-width: 460px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.em-unsub h1 { font-size: 24px; margin: 0; }
.em-unsub-ok { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: #16a34a; color: #fff; }
/* ===== Finanzas: gráficos y panel financiero ===== */
/* Paleta categórica completa (8 colores, orden validado) y colores de estado */
:root, :root[data-theme="dark"] { --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; }
:root[data-theme="light"] { --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-8: #e34948; }
:root { --status-good: #0ca30c; --status-warning: #fab219; --status-serious: #ec835a; --status-critical: #d03b3b; }
.chart-legend { flex-wrap: wrap; gap: 6px 16px; }
.swatch.dash { background: transparent; border-top: 2px dashed; height: 0; width: 14px; border-radius: 0; }
.swatch.ref { background: transparent; border-top: 2px dashed var(--text-muted); height: 0; width: 14px; border-radius: 0; }
.chart-svg .chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .chart-line.dash { stroke-dasharray: 6 5; }
.chart-svg .chart-area { opacity: .12; }
.chart-svg .chart-dot { stroke: var(--surface); stroke-width: 2; }
.chart-svg .chart-cross { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-svg .chart-ref { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-svg .chart-ref-label { fill: var(--text-muted); font-size: 11px; font-weight: 600; }
.chart-svg .chart-val { fill: var(--text); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-svg .chart-hit:focus { outline: none; }
.chart-svg .chart-hit:focus-visible { stroke: var(--accent); stroke-width: 1; }

/* Ranking en barras horizontales */
.fbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fbar { display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(80px, 2fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.fbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbar-label a { color: var(--text); text-decoration: none; }
.fbar-label a:hover { color: var(--accent); }
.fbar-track { height: 10px; background: color-mix(in srgb, var(--text-muted) 14%, transparent); border-radius: 5px; overflow: hidden; }
.fbar-track i { display: block; height: 100%; border-radius: 0 5px 5px 0; }
.fbar-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) { .fbar { grid-template-columns: minmax(0, 1fr) auto; } .fbar-track { grid-column: 1 / -1; grid-row: 2; } }

/* Cuenta de resultados y presupuesto */
.fin-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pl-table td, .pl-table th { white-space: nowrap; }
.pl-table .pl-head td { font-weight: 700; border-top: 1px solid var(--border); }
.pl-table .pl-sub td:first-child { padding-left: 22px; color: var(--text-muted); }
.pl-table .pl-sub td { font-size: 13px; }
.pl-table .pl-total td { font-weight: 800; border-top: 2px solid var(--border); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pl-table .pl-total.strong td { font-size: 15px; }
.pl-table .pl-pct td { font-size: 12px; color: var(--text-muted); font-style: italic; }
.bud-grid th[scope="row"] { text-align: left; white-space: nowrap; font-weight: 600; min-width: 150px; }
.bud-grid input { width: 82px; padding: 5px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.bud-grid .bud-total { width: 96px; font-weight: 700; }
.bud-grid tr.pl-head th, .bud-grid tr.pl-head input { font-weight: 800; }
.bud-grid tr.bud-sep th, .bud-grid tr.bud-sep td { border-top: 2px solid var(--border); }
.bud-growth { width: 70px; }
@media print { .fin-kpis, .pl-table { break-inside: avoid; } }.bud-grid th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); }
.bud-grid th[scope="row"] .small { font-weight: 400; font-size: 11px; }
.bud-grid td { padding: 3px 4px; }
/* ===== Portal del cliente ===== */
.cli-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cli-dates, .cli-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cli-dates li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 14px; }
.cli-date { font-weight: 700; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cli-dates a, .cli-recent a { color: var(--text); text-decoration: none; }
.cli-dates a:hover, .cli-recent a:hover { color: var(--accent); }
.cli-recent li { display: grid; gap: 2px; font-size: 13.5px; padding-left: 10px; border-left: 3px solid transparent; }
.cli-recent li.unread { border-left-color: var(--accent); font-weight: 600; }
.cli-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cli-service { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.cli-service:hover { border-color: var(--accent); color: var(--accent); }
.cli-res-sec .kpi-row { margin-bottom: 12px; }

/* Centro de ayuda */
.help-search { width: 100%; font-size: 16px; padding: 12px 14px; margin: 6px 0 10px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.help-card { text-align: left; display: grid; gap: 6px; align-content: start; cursor: pointer; font: inherit; color: var(--text); }
.help-card:hover { border-color: var(--accent); }
.help-card.draft { opacity: .65; }
.help-snippet { line-height: 1.45; }
.help-article .help-body { font-size: 15.5px; line-height: 1.65; max-width: 72ch; }
.help-article .help-body ul { padding-left: 20px; }
.help-related { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.help-suggest { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.help-suggest ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.canned-select { width: auto; max-width: 240px; }

/* Avisos por email */
.np-groups { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 10px 0; display: grid; gap: 6px; }
.np-groups legend { padding: 0 6px; color: var(--text-muted); }
.np-preview { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: 10px; background: #f3f4f6; margin-top: 8px; }
/* ===== Estrategias y promociones ===== */
.stg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.stg-card { text-align: left; display: grid; gap: 6px; align-content: start; cursor: pointer; font: inherit; color: var(--text); }
.stg-card:hover { border-color: var(--accent); }
.stg-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.stg-name { font-size: 15.5px; }
.stg-alias { font-style: italic; }
.stg-sum { color: var(--text-muted); line-height: 1.45; }
.stg-meta { display: flex; gap: 14px; color: var(--text-muted); margin-top: 2px; }
.stg-dots i { font-style: normal; opacity: .25; margin-right: 1px; }
.stg-dots i.on { opacity: 1; color: var(--accent); }
.stg-ch { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.stg-ch.ch-clasico { border-color: color-mix(in srgb, var(--series-2) 55%, var(--border)); }
.stg-ch.ch-digital { border-color: color-mix(in srgb, var(--series-1) 55%, var(--border)); }
.stg-ch.ch-mixto { border-color: color-mix(in srgb, var(--series-3) 55%, var(--border)); }
.stg-detail .stg-lead { font-size: 16px; line-height: 1.6; max-width: 75ch; }
.stg-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; margin: 6px 0 4px; }
.stg-facts > div { display: grid; gap: 2px; }
.stg-h { font-size: 15px; margin: 18px 0 6px; }
.stg-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; max-width: 80ch; }
.stg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stg-chips .chip { text-decoration: none; }
.stg-example { margin: 4px 0 8px; padding: 12px 16px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0 10px 10px 0; font-size: 15px; font-weight: 600; }
.stg-plan { border: 2px solid color-mix(in srgb, var(--accent) 50%, var(--border)); }
.stg-plan-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.stg-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stg-rank li { display: grid; grid-template-columns: auto 26px minmax(0, 1fr) 110px auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.stg-rank-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-hover); font-weight: 800; font-size: 13px; }
.stg-rank-body { display: grid; gap: 2px; min-width: 0; }
.stg-fit { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text-muted) 15%, transparent); overflow: hidden; }
.stg-fit i { display: block; height: 100%; background: var(--series-3); border-radius: 4px; }
@media (max-width: 640px) { .stg-rank li { grid-template-columns: auto 26px minmax(0, 1fr); } .stg-fit, .stg-rank li > span:last-child { display: none; } }
.stg-items { display: grid; gap: 10px; margin-bottom: 10px; }
.stg-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.stg-item.off { opacity: .6; }
.stg-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stg-flow { flex-wrap: wrap; margin-top: 10px; }
.stg-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.btn.disabled { pointer-events: none; opacity: .5; }
.stg-doc .stg-doc-title { font-size: 26px; margin: 18px 0 4px; }
.stg-doc .stg-doc-intro { font-size: 15.5px; line-height: 1.6; }
.stg-doc-item { margin-top: 18px; break-inside: avoid; }
.stg-doc-item h2 { font-size: 18px; margin: 0 0 4px; }
.stg-doc-item h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 12px 0 4px; }
/* Tablas de muchas columnas (cuenta de resultados, presupuesto): en el móvil se mantienen como tabla con desplazamiento lateral */
@media (max-width: 640px) {
  table.keep-table { display: table; } table.keep-table thead { display: table-header-group; } table.keep-table tbody { display: table-row-group; }
  table.keep-table tr { display: table-row; border: 0; padding: 0; margin: 0; background: none; border-radius: 0; }
  table.keep-table td, table.keep-table th { display: table-cell; padding: 8px 10px; border-bottom: 1px solid var(--border); }
  table.keep-table td::before { content: none; }
  table.keep-table th[scope="row"], table.keep-table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
}
/* Aviso de versión nueva */
.update-banner { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--accent); box-shadow: 0 8px 28px rgba(0,0,0,.35); max-width: calc(100vw - 32px); font-size: 14px; }
@media (min-width: 1024px) { .update-banner { bottom: 24px; } }
/* Diálogos propios (confirmar, pedir texto, avisar) */
.ui-dialog { border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 14px; background: var(--surface-strong); color: var(--text); max-width: min(440px, calc(100vw - 32px)); width: 100%; box-shadow: 0 18px 48px rgba(0,0,0,.4); }
.ui-dialog::backdrop { background: rgba(5, 8, 15, .55); backdrop-filter: blur(2px); }
.ui-dialog-msg { margin: 0 0 14px; font-size: 15px; line-height: 1.5; white-space: pre-line; }
.ui-dialog-input { width: 100%; margin-bottom: 14px; }
.ui-dialog-actions { justify-content: flex-end; }
/* Admin → Salud del sistema */
.hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hl-cols { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.hl-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; }
.hl-st { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; }
.hl-st.ok { background: var(--status-good); } .hl-st.warn { background: var(--status-warning); color: #111; } .hl-st.bad { background: var(--status-critical); }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 10px; }
.hl-pre { white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; background: var(--surface-2, rgba(127,127,127,.08)); padding: 8px; border-radius: 6px; margin: 6px 0 0; }
.hl-frame { position: fixed; left: -10000px; top: 0; width: 1280px; height: 900px; border: 0; }
/* ---------- Medición de folletos ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.msr-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.msr-funnel li { display: grid; gap: 2px; }
.msr-funnel-bar { display: block; width: var(--w); min-width: fit-content; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--series-1, #1f5fd6) 16%, transparent); border-left: 4px solid var(--series-1, #1f5fd6); }
.msr-recs { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.msr-redeem { max-width: 640px; }
.msr-code-form { display: grid; gap: 10px; margin: 12px 0; }
.msr-code-input { font: 700 24px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 14px; width: 100%; }
.msr-result { border: 2px solid #15803d; border-radius: 14px; padding: 16px; display: grid; gap: 8px; text-align: center; }
.msr-result.warn { border-color: #d97706; } .msr-result.bad { border-color: #dc2626; }
.msr-result .form-grid { text-align: left; }
.msr-big { font-size: 40px; font-weight: 800; line-height: 1; color: #15803d; }
.msr-result.warn .msr-big { color: #d97706; } .msr-result.bad .msr-big { color: #dc2626; }
.msr-offer { font-size: 18px; font-weight: 700; margin: 0; }
.msr-redeem-btn { font-size: 18px; padding: 14px; width: 100%; }
.msr-plus { flex: 1 1 200px; }
.msr-video { width: 100%; max-width: 420px; border-radius: 12px; background: #000; }
.lead-row { align-items: flex-start; }
.lead-row .row-actions { flex-wrap: nowrap; }
/* Página pública de la oferta */
.offer-page { max-width: 560px; margin: 16px auto 32px; padding: 0 16px; }
.offer-card { padding: 24px 20px; display: grid; gap: 14px; }
.offer-business { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--text-muted); text-align: center; }
.offer-title { margin: 0; font-size: clamp(24px, 6vw, 34px); line-height: 1.15; text-align: center; }
.offer-body { margin: 0; text-align: center; white-space: pre-line; }
.offer-coupon { border: 2px dashed var(--series-1, #1f5fd6); border-radius: 14px; padding: 16px; text-align: center; display: grid; gap: 6px; background: color-mix(in srgb, var(--series-1, #1f5fd6) 8%, transparent); }
.offer-coupon.expired { border-color: var(--border); opacity: .7; }
.offer-code { font: 800 30px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.offer-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.offer-btn { justify-content: center; text-align: center; padding: 12px; font-size: 16px; }
.offer-wa { background: #15803d; border-color: #15803d; }
.offer-form { display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.offer-form h2 { margin: 0; font-size: 18px; }
.offer-foot { margin-top: 6px; }
.cmp-qr.msr-qr-sm { width: 64px !important; height: 64px !important; max-width: none; padding: 0; border-radius: 4px; }

/* ---------- Inicios por rol ---------- */
.hm-pill { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.hm-pill.ok { background: color-mix(in srgb, #15803d 16%, transparent); color: #15803d; }
.hm-pill.warn { background: color-mix(in srgb, #d97706 18%, transparent); color: #b45309; }
.hm-pill.bad { background: color-mix(in srgb, #dc2626 16%, transparent); color: #dc2626; }
.hm-platform { border-left: 4px solid #15803d; }
.hm-platform.warn { border-left-color: #d97706; } .hm-platform.bad { border-left-color: #dc2626; }
.hm-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.hm-mini > * { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); color: inherit; text-decoration: none; }
.hm-mini strong { font-size: 18px; }
.hm-mini span { font-size: 12.5px; color: var(--text-muted); }
.hm-mini a:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.hm-decide.has { border-left: 4px solid #d97706; }
.hm-decide-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.hm-decide-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; background: color-mix(in srgb, var(--text) 4%, transparent); }
.hm-decide-list a:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.hm-decide-list strong { min-width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: #d97706; color: #fff; font-size: 13px; }
.hm-decide-list li.bad strong { background: #dc2626; }
.hm-cap { display: grid; gap: 6px; margin-bottom: 10px; }
.progress.over span { background: #dc2626; }
.hm-goal { margin-top: 12px; display: grid; gap: 6px; }
.hm-flow { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; }
.hm-flow a { display: grid; gap: 2px; padding: 10px; border-radius: 10px; text-align: center; color: inherit; text-decoration: none; background: color-mix(in srgb, var(--text) 4%, transparent); border-top: 3px solid transparent; }
.hm-flow li.has a { border-top-color: var(--series-1, #1f5fd6); }
.hm-flow li.blocked a { border-top-color: #d97706; }
.hm-flow strong { font-size: 22px; }
.hm-flow span { font-size: 12.5px; color: var(--text-muted); }
.hm-flow em { font-style: normal; font-size: 11.5px; color: #b45309; font-weight: 600; }
.hm-setup { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hm-setup li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.hm-setup li > span:first-child { width: 18px; color: var(--text-muted); font-weight: 800; }
.hm-setup li.ok > span:first-child { color: #15803d; }.hm-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
@media (max-width: 900px) { .hm-week { grid-template-columns: 1fr; } }
.hm-day { display: grid; gap: 6px; align-content: start; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); min-height: 80px; }
.hm-day.today { outline: 2px solid var(--series-1, #1f5fd6); }
.hm-day-head { font-size: 12px; font-weight: 800; text-transform: capitalize; color: var(--text-muted); }
.hm-post { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: var(--surface); border-left: 3px solid var(--border); color: inherit; text-decoration: none; font-size: 12.5px; }
.hm-post strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-post span { color: var(--text-muted); font-size: 11.5px; }
.hm-post.ok { border-left-color: #15803d; } .hm-post.warn { border-left-color: #d97706; } .hm-post.bad { border-left-color: #dc2626; }
/* ---------- Centro de administración (estudio) ---------- */
.adm-nav-roles > summary { list-style: none; cursor: pointer; }
.adm-nav-roles > summary::-webkit-details-marker { display: none; }
.adm-nav-roles > .adm-nav-link { padding-left: 22px; font-size: 13.5px; }
@media (max-width: 820px) { .adm-nav-roles { grid-column: 1 / -1; } }
.suggest-btn { font-size: 18px; }
.ui-dialog.studio-idea { max-width: min(680px, calc(100vw - 32px)); }
.ui-dialog.studio-preview { max-width: calc(100vw - 24px); width: calc(100vw - 24px); height: calc(100vh - 24px); max-height: none; padding: 10px; overflow: auto; }
.studio-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.studio-area { display: grid; gap: 6px; color: inherit; text-decoration: none; align-content: start; }
.studio-area:hover { border-color: var(--series-1, #1f5fd6); }
.studio-area-head { display: flex; gap: 8px; align-items: center; font-size: 16px; }
.studio-area p { margin: 0; }
.studio-area-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--text-muted); }
.studio-area-stats b { color: var(--text); font-size: 16px; }
.studio-area-stats .warn b { color: #b45309; }
.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.studio-card { display: grid; gap: 8px; align-content: start; }
.studio-card.soon { border-style: dashed; }
.studio-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.studio-card-head h3 { margin: 0; font-size: 16px; }
.studio-card p { margin: 0; }
.studio-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.studio-badges a { text-decoration: none; }
.studio-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.studio-role { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--border); color: var(--text-muted); opacity: .6; }
.studio-role.on { opacity: 1; border: 0; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-weight: 700; }
.studio-screens { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-screens .chip { font-size: 12px; text-decoration: none; }
.studio-actions { flex-wrap: wrap; }
.studio-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; align-items: start; }
.studio-col { background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 12px; padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 120px; }
.studio-col h3 { margin: 0 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.studio-col.st-en_desarrollo h3 { color: var(--series-1, #1f5fd6); } .studio-col.st-hecha h3 { color: #15803d; } .studio-col.st-nueva h3 { color: #b45309; }
.studio-idea-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 6px; cursor: pointer; }
.studio-idea-card:hover, .studio-idea-card:focus-visible { border-color: var(--series-1, #1f5fd6); outline: none; }
.studio-idea-card.pri-alta { border-left-color: #dc2626; } .studio-idea-card.pri-media { border-left-color: #d97706; } .studio-idea-card.pri-baja { border-left-color: #64748b; }
.studio-idea-card strong { font-size: 14px; line-height: 1.3; }
.studio-idea-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.studio-idea-meta .chip { font-size: 11px; padding: 1px 7px; }
.studio-idea-meta .chip.win { background: color-mix(in srgb, #15803d 16%, transparent); color: #15803d; font-weight: 700; }
.studio-idea-foot { display: flex; justify-content: space-between; align-items: center; }
.studio-idea-foot .icon-btn { width: 26px; height: 26px; font-size: 13px; }
.studio-row { cursor: pointer; }
.studio-roles-pick { border: 1px solid var(--border); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 12px; }
.studio-role-check { font-size: 13px; }
.studio-releases { margin: 0; padding-left: 20px; display: grid; gap: 10px; }.studio-stage { display: grid; gap: 14px; align-items: start; }
.studio-stage.mode-devices { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 2.6fr); }
.studio-stage.mode-roles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 1100px) { .studio-stage.mode-devices { grid-template-columns: 1fr; } }
.studio-cell { min-width: 0; display: grid; gap: 6px; }
.studio-cell-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 13px; }
.studio-viewport { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: #000; }
.studio-cell.dev-mobile .studio-viewport { border-radius: 22px; border-width: 6px; border-color: #1e293b; }
.studio-frame { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: var(--bg, #0d1119); }
.studio-controls { align-items: flex-end; }
.qa-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qa-case { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid var(--border); }
.qa-case.ok { border-left-color: #15803d; } .qa-case.bad { border-left-color: #dc2626; } .qa-case.warn { border-left-color: #d97706; }
.qa-case-main { flex: 1 1 380px; display: grid; gap: 4px; min-width: 0; }
.qa-case-main details p { margin: 4px 0; }
.qa-case-actions { flex-wrap: nowrap; }
.qa-err { border-left: 4px solid #dc2626; }
.qa-err.revisado { border-left-color: #d97706; } .qa-err.arreglado, .qa-err.ignorado { border-left-color: #15803d; opacity: .85; }.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.set-card { display: grid; gap: 6px; align-content: start; color: inherit; text-decoration: none; border-left: 4px solid var(--border); }
.set-card.ok { border-left-color: #15803d; } .set-card.pending { border-left-color: #d97706; }
.set-card:hover { border-color: var(--series-1, #1f5fd6); }
.set-head { display: flex; gap: 8px; align-items: center; }
.set-head strong { flex: 1; }
.set-card p { margin: 0; }
.set-status { font-weight: 600; }
.set-go { color: var(--series-1, #1f5fd6); }
.adm-new-user > summary { list-style: none; display: inline-flex; cursor: pointer; }
.adm-new-user > summary::-webkit-details-marker { display: none; }
.adm-new-user[open] > summary { margin-bottom: 10px; }
/* ---------- Mapa profesional (datos, INE, radio, cotizador, puntos de interés, imprimir) ---------- */
.mp-legend { display: grid; gap: 3px; min-width: 200px; }
.mp-legend-steps { display: flex; gap: 2px; }
.mp-step { flex: 1; display: grid; gap: 2px; font-size: 10.5px; color: var(--text-muted); }
.mp-step i { display: block; height: 10px; border-radius: 2px; }
.mp-inline { display: grid; gap: 4px; font-size: 13px; }
.mp-inline select, .mp-inline input { width: 100%; }
.mp-inline-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mp-inline-row .mp-inline { flex: 1 1 140px; }
.mp-rank { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.mp-rank-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; border-radius: 8px; cursor: pointer; }
.mp-rank-row:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.mp-rank-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.mp-rank-bar i { display: block; height: 100%; background: var(--series-1, #1f5fd6); border-radius: 4px; }
.mp-poi { background: none; border: 0; }
.mp-poi span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #94a3b8; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mp-poi-list { display: grid; gap: 2px; }
.mp-price { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); margin: 6px 0; }
.mp-quote { display: grid; gap: 8px; margin: 8px 0; }
.mp-quote-out { display: grid; gap: 4px; }
.mp-qrow { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.mp-qrow.ok { color: #15803d; }
.mp-qrow.total { border-top: 1px solid var(--border); padding-top: 6px; font-size: 14px; }
/* Imprimir el plano: solo el mapa con su leyenda, a página completa */
/* (la impresión del mapa se define más abajo, en el bloque v122) */
.mp-picking { cursor: crosshair !important; }
.mp-picking .leaflet-interactive, .mp-picking .leaflet-marker-icon { pointer-events: none !important; }

/* ---------- Rutas comerciales profesionales ---------- */
.pro-map-tools { align-items: center; margin: 8px 0; flex-wrap: wrap; }
.pro-map-tools .btn.on { background: color-mix(in srgb, #f97316 18%, transparent); border-color: #f97316; }
.pro-rad { display: inline-flex; gap: 4px; align-items: center; }
.pro-eta { display: inline-block; font-size: 12px; font-weight: 700; color: var(--series-1, #1f5fd6); margin-right: 6px; white-space: nowrap; }
.pro-stop-list .pro-eta { min-width: 3.4em; }
.pro-gmaps, .pro-nav { flex-wrap: wrap; margin: 6px 0; }
.pro-nav .btn { white-space: normal; text-align: left; }
.pro-next-ring { animation: pro-pulse 1.6s ease-in-out infinite; }
@keyframes pro-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pro-next-ring { animation: none; } }

/* ===== Mapas de reparto profesionales (fase 3): directo, repartidor y ficha de ruta ===== */
.lv-box { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lv-tools .btn.on { background: var(--surface-hover); border-color: #ea580c; }
.lv-spacer { flex: 1; }
.lv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--surface); }
.lv-chip input { margin: 0; accent-color: #2563eb; }
.lv-map { height: 420px; }
.lv-map-live { height: 560px; }
.lv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.lv-side { display: flex; flex-direction: column; gap: 8px; max-height: 690px; overflow: auto; }
.lv-list { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 960px) { .lv-layout { grid-template-columns: 1fr; } .lv-side { max-height: none; } .lv-map-live { height: 440px; } }
.lv-card { padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); transition: border-color .15s; }
.lv-card:hover, .lv-card.sel { border-color: #2563eb; }
.lv-card.sel { box-shadow: 0 0 0 2px rgba(37,99,235,.25); }
.lv-card-top { display: flex; align-items: center; gap: 8px; }
.lv-card-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lv-card-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-card-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.lv-swatch { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; flex: none; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.lv-badge { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.lv-badge.ok { background: rgba(5,150,105,.12); color: #047857; }
.lv-badge.warn { background: rgba(217,119,6,.14); color: #b45309; }
.lv-badge.serious { background: rgba(234,88,12,.14); color: #c2410c; }
.lv-badge.critical { background: #dc2626; color: #fff; }
.lv-alerts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lv-alert { display: flex; gap: 8px; align-items: center; text-align: left; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); border-left-width: 4px; background: var(--surface); color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.lv-alert.warn { border-left-color: #d97706; }
.lv-alert.serious { border-left-color: #ea580c; }
.lv-alert.critical { border-left-color: #dc2626; background: rgba(220,38,38,.08); }
.lv-kpis { margin-bottom: 0; }
.lv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.lv-legend .progress-ramp { width: 90px; height: 8px; border-radius: 999px; display: inline-block; }
.lv-leg-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 3px solid; margin-left: 6px; }
.lv-leg-dot.ok { border-color: #059669; } .lv-leg-dot.warn { border-color: #d97706; } .lv-leg-dot.serious { border-color: #ea580c; } .lv-leg-dot.critical { border-color: #dc2626; background: #dc2626; }
.lv-dot { position: relative; }
.lv-dot span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; border: 3px solid #059669; box-shadow: 0 2px 8px rgba(0,0,0,.35); box-sizing: border-box; }
.lv-dot b { position: absolute; left: 50%; top: 31px; transform: translateX(-50%); background: #fff; color: #111; font-size: 10px; padding: 0 4px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.3); white-space: nowrap; }
.lv-dot.warn span { border-color: #d97706; } .lv-dot.serious span { border-color: #ea580c; } .lv-dot.critical span { border-color: #dc2626; }
.lv-dot.live.ok span { animation: amap-pulse 2s infinite; }
.lv-dot.done span { opacity: .75; }
.lv-ev span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #fff; border: 1px solid #94a3b8; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.lv-sos span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #dc2626; font-size: 18px; animation: lv-sos 1.2s infinite; }
@keyframes lv-sos { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.7); } 70% { box-shadow: 0 0 0 18px rgba(220,38,38,0); } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } }
.lv-replay { display: flex; align-items: center; gap: 8px; }
.lv-replay input[type=range] { flex: 1; accent-color: #2563eb; min-width: 0; }
.lv-time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 44px; }
.lv-speed { width: auto; padding: 4px 6px; }
.lv-live-btn.on { border-color: #059669; color: #059669; }
.lv-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-stat { display: flex; flex-direction: column; padding: 6px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.lv-box.lv-full { position: fixed; inset: 0; z-index: 2000; background: var(--surface); padding: 12px; }
.lv-box.lv-full .map { flex: 1; height: auto; }
body.lv-noscroll { overflow: hidden; }
.me-dot span { display: block; width: 18px; height: 18px; border-radius: 50%; background: #1f5fd6; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(31,95,214,.6); animation: amap-pulse 2s infinite; box-sizing: border-box; }
.cov-line { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.zone-warn { margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: rgba(234,88,12,.12); color: #c2410c; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .lv-dot.live.ok span, .lv-sos span, .me-dot span { animation: none; } }
@media (max-width: 600px) { .lv-map { height: 340px; } .lv-replay { flex-wrap: wrap; } .lv-replay input[type=range] { flex-basis: 100%; order: 5; } }


/* ===== Portada pública (sin sesión): presentación, servicios, «Hazte cliente» y acceso ===== */
body.is-login .brand { visibility: visible; }
body.is-login main { max-width: none; padding: 0; }
body.is-login .legal-screen { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
.ld { --ld-max: 1160px; overflow-x: clip; }
.ld-nav { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top)); z-index: 20; display: flex; justify-content: center; align-items: center; gap: 4px; padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.ld-nav-link { appearance: none; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: color .15s, background-color .15s; }
.ld-nav-link:hover { color: var(--text); background: var(--surface-hover); }
.ld-nav-cta { margin-left: 8px; border-radius: 999px; }
.ld-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 420px); gap: clamp(28px, 5vw, 72px); align-items: center;
  max-width: var(--ld-max); margin: 0 auto; padding: clamp(36px, 7vw, 96px) 20px clamp(40px, 6vw, 80px); }
.ld-glow { position: absolute; inset: -20% -30% auto -30%; height: 620px; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 320px at 22% 38%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), radial-gradient(460px 300px at 78% 30%, rgba(139, 92, 246, .16), transparent 70%);
  filter: blur(8px); animation: ld-float 14s ease-in-out infinite alternate; }
@keyframes ld-float { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, 3%, 0) scale(1.06); } }
.ld-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ld-title { margin: 14px 0 0; font-family: var(--font-brand); font-weight: 800; font-size: clamp(34px, 5.6vw, 64px); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.ld-title em { font-style: normal; background: linear-gradient(100deg, var(--accent) 10%, #8b5cf6 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-lead { margin: 18px 0 0; max-width: 56ch; font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.6; color: var(--text-muted); }
.ld-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ld-cta .btn, .ld-btn-main { width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; font-size: 15.5px; border-radius: 12px; }
.ld-cta .btn svg, .ld-btn-main svg { width: 18px; height: 18px; flex: none; }
.ld-btn-main { box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .15s ease, box-shadow .15s ease, background-color .15s; }
.ld-btn-main:hover { transform: translateY(-1px); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 45%, transparent); }
.ld-btn-main svg { transition: transform .2s ease; } .ld-btn-main:hover svg { transform: translateX(3px); }
.ld-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; padding: 0; font-size: 13.5px; color: var(--text-muted); }
.ld-proof li { display: inline-flex; align-items: center; gap: 7px; }
.ld-proof svg { width: 16px; height: 16px; color: var(--accent); }
.ld-hero-text { animation: hero-in .7s ease-out both; }
.ld-access { animation: hero-in .7s .15s ease-out both; scroll-margin-top: calc(var(--header-h) + 70px); }
.ld-access .login { max-width: none; animation: none; border-color: var(--border-strong); box-shadow: var(--shadow), 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent); }
.ld-section { max-width: var(--ld-max); margin: 0 auto; padding: clamp(48px, 7vw, 96px) 20px; scroll-margin-top: calc(var(--header-h) + 50px); }
.ld-band { max-width: none; background: var(--surface-strong); border-block: 1px solid var(--border); }
.ld-band > * { max-width: var(--ld-max); margin-inline: auto; }
.ld-head { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); }
.ld-head.left { text-align: left; margin: 0; }
.ld-head h2 { margin: 10px 0 0; font-family: var(--font-brand); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
.ld-head p { margin: 14px 0 0; color: var(--text-muted); font-size: 16.5px; line-height: 1.6; }
.ld-head .btn { margin-top: 22px; }
.ld-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ld-card { padding: 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.ld-card.in { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ld-card.in:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: var(--shadow); }
.ld-card h3, .ld-step h3 { margin: 16px 0 0; font-size: 18px; font-weight: 700; }
.ld-card p, .ld-step p { margin: 8px 0 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }
.ld-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); flex: none; }
.ld-ico svg { width: 22px; height: 22px; }
.ld-ico.small { width: 38px; height: 38px; border-radius: 11px; } .ld-ico.small svg { width: 18px; height: 18px; }
.ld-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ld-step { position: relative; padding: 4px 4px 0; }
.ld-num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-family: var(--font-brand); font-weight: 800; font-size: 17px; color: #fff; background: linear-gradient(135deg, #3b7bff, #1f4fc4); box-shadow: 0 6px 16px rgba(31, 79, 196, .35); }
.ld-step:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 60px; right: -6px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent); }
.ld-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ld-split.form { align-items: start; }
.ld-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ld-feat { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.ld-feat strong { display: block; font-size: 15px; } .ld-feat div span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.ld-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.ld-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ld-ticks svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--success); }
.ld-contact { margin: 22px 0 0; font-size: 15px; color: var(--text-muted); } .ld-contact a { color: var(--accent); font-weight: 600; text-decoration: none; }
.ld-form-card { padding: clamp(18px, 3vw, 28px); box-shadow: var(--shadow); }
.ld-form-card .lead-form { margin-top: 0; }
.ld-footer { max-width: var(--ld-max); margin: 0 auto; padding: 32px 20px calc(36px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; color: var(--text-muted); font-size: 13px; }
.ld-foot-brand { display: grid; gap: 2px; } .ld-foot-brand strong { font-family: var(--font-brand); letter-spacing: .12em; color: var(--text); font-size: 14px; }
.ld-footer .legal-links { margin-top: 0; }
.ld-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--d, 0ms), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.ld-reveal.in { opacity: 1; transform: none; }
/* Tablet */
@media (max-width: 1023px) {
  .ld-hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .ld-hero-text { display: flex; flex-direction: column; align-items: center; }
  .ld-cta, .ld-proof { justify-content: center; }
  .ld-access { width: 100%; max-width: 440px; margin: 0 auto; text-align: left; }
  .ld-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .ld-step:nth-child(2)::after { display: none; }
  .ld-split { grid-template-columns: minmax(0, 1fr); }
  .ld-split .ld-head.left { text-align: center; max-width: 720px; margin: 0 auto; }
  .ld-ticks { max-width: 420px; margin-inline: auto; text-align: left; }
}
/* Móvil */
@media (max-width: 640px) {
  .ld-nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 6px 12px; }
  .ld-nav::-webkit-scrollbar { display: none; }
  .ld-nav-link { white-space: nowrap; padding: 8px 10px; font-size: 13.5px; }
  .ld-nav-cta { white-space: nowrap; flex: none; }
  .ld-hero { padding-inline: 16px; }
  .ld-cta { width: 100%; } .ld-cta .btn { flex: 1 1 100%; justify-content: center; }
  .ld-grid, .ld-steps, .ld-feats { grid-template-columns: minmax(0, 1fr); }
  .ld-step::after { display: none !important; }
  .ld-step { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; text-align: left; }
  .ld-step .ld-num { grid-row: span 2; } .ld-step h3 { margin-top: 2px; }
  .ld-section { padding-inline: 16px; }
  .ld-footer { flex-direction: column; text-align: center; } .ld-foot-brand { justify-items: center; }
}
@media (prefers-reduced-motion: reduce) { .ld-glow, .ld-hero-text, .ld-access { animation: none; } .ld-reveal { opacity: 1; transform: none; transition: none; } }

/* Aviso de versión nueva: que no se estruje en móvil */
.update-banner { width: max-content; max-width: calc(100vw - 24px); }
.update-banner > :first-child { flex: none; }
/* Otras pantallas sin sesión (legal, presupuesto, nueva contraseña) conservan su margen */
body.is-login main > :not(.ld) { max-width: 1240px; margin-inline: auto; padding: 24px 16px; }

/* Adaptación: ningún desplegable puede ser más ancho que su contenedor */
#app select { max-width: 100%; }
.row-actions > select { min-width: 0; flex: 0 1 auto; }
.off-apply select { flex: 1 1 180px; }

/* Previsión del tiempo en la planificación del reparto */
.wx { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface); vertical-align: middle; }
.wx-warn { border-color: #d97706; color: #b45309; background: rgba(217,119,6,.12); }
.wx-bad { border-color: #dc2626; color: #fff; background: #dc2626; }
.route-card .wx { margin-top: 4px; white-space: normal; }

/* Panel financiero · Simulador */
.fs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 14px 0; }
.fs-grid.one { grid-template-columns: minmax(0, 420px); }
.fs-slider { display: grid; gap: 6px; }
.fs-label { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.fs-val { font-variant-numeric: tabular-nums; }
.fs-slider input[type=range] { width: 100%; accent-color: var(--accent); }
.fs-table td.num, .fs-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fs-table td.ok { color: var(--success); } .fs-table td.error { color: var(--danger); }
@media (max-width: 640px) { .fs-grid { grid-template-columns: minmax(0, 1fr); } }
.cmp-alert-box.ok { background: color-mix(in srgb, #16a34a 12%, transparent); color: var(--success); }
.cmp-alert-box.warn { background: color-mix(in srgb, #d97706 14%, transparent); color: var(--warning); }
.cmp-alert-box.info { background: var(--accent-soft); color: var(--text); }

/* Oportunidades · Análisis comercial */
.si-table td.num, .si-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.si-rate { padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 12.5px; }
.si-rate.good { background: color-mix(in srgb, #16a34a 16%, transparent); color: var(--success); }
.si-rate.mid { background: color-mix(in srgb, #d97706 16%, transparent); color: var(--warning); }
.si-rate.low { background: color-mix(in srgb, #dc2626 14%, transparent); color: var(--danger); }
.si-why { font-size: 12.5px; white-space: nowrap; color: var(--text-muted); }
.si-why.warn { color: var(--warning); } .si-why.bad { color: var(--danger); font-weight: 600; }
@media (max-width: 640px) { .si-why { white-space: normal; } }

/* Zonas: editor de contornos y datos del INE (fase 4 de mapas) */
.zone-vertex.mid { background: #fff; border: 2px solid var(--accent, #2f7fe0); border-radius: 50%; opacity: .75; cursor: copy; }
.zone-vertex.mid:hover { opacity: 1; box-shadow: 0 0 0 4px rgba(47,127,224,.3); }
.zone-ine { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; }
.zone-ine strong { flex-basis: 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.progress-map.lv-box { gap: 8px; }
@media print { .no-print { display: none !important; } }

/* ===== Acceso en ventana, ojo de contraseña y muestra del área de cliente (v93) ===== */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; width: 100%; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-muted); border-radius: 8px; cursor: pointer; }
.pw-eye:hover { color: var(--text); background: var(--surface-hover); }
.pw-eye svg { width: 19px; height: 19px; }
.login-open { display: inline-flex; align-items: center; gap: 7px; width: auto; border-radius: 999px; padding: 8px 16px; margin-left: 4px; white-space: nowrap; }
.login-open svg { width: 15px; height: 15px; }
@media (max-width: 420px) { .login-open { padding: 8px 12px; } }
.ld-dialog { border: 0; padding: 0; background: transparent; color: inherit; width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: visible; }
.ld-dialog::backdrop { background: rgba(5, 8, 14, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ld-dialog[open] { animation: ld-pop .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes ld-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.ld-dialog .login { max-width: none; margin: 0; animation: none; border-color: var(--border-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.ld-dialog-close { position: absolute; top: 10px; right: 10px; z-index: 1; font-size: 15px; }
/* Portada: selector de servicio y detalle de cada servicio (v98) */
.ld-pick { display: grid; gap: 10px; padding: 20px; border-radius: 20px; text-align: left; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow), 0 30px 70px color-mix(in srgb, var(--accent) 16%, transparent); animation: hero-in .7s .15s ease-out both; }
.ld-pick-title { margin: 0 0 4px; font-family: var(--font-brand); font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.ld-pick-row { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-strong); border: 1px solid var(--border); transition: border-color .15s ease, transform .15s ease, background-color .15s ease; }
.ld-pick-row:hover, .ld-pick-row:focus-visible { border-color: var(--accent); background: var(--accent-soft); transform: translateX(3px); }
.ld-pick-row > svg { width: 18px; height: 18px; color: var(--accent); }
.ld-pick-txt strong { display: block; font-size: 15px; line-height: 1.25; }
.ld-pick-txt small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--text-muted); }
.ld-pick-note { margin: 4px 0 0; text-align: center; font-size: 12.5px; color: var(--text-muted); }
.ld-card { display: flex; flex-direction: column; align-items: flex-start; }
.ld-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }
.ld-list li { display: flex; gap: 8px; align-items: flex-start; }
.ld-list svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--accent); }
.ld-card-cta { appearance: none; border: 0; background: transparent; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 18px 0 0; }
.ld-card-cta svg { width: 16px; height: 16px; transition: transform .2s ease; }
.ld-card-cta:hover svg { transform: translateX(3px); }
.ld-card-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) { .ld-pick { width: 100%; max-width: 460px; margin: 6px auto 0; } }
@media (prefers-reduced-motion: reduce) { .ld-dialog[open], .ld-pick { animation: none; } .ld-pick-row:hover { transform: none; } }

/* Planificación · Zonas y sectores (coordinación de repartos compartidos) */
.zc-card { display: grid; gap: 10px; }
.zc-card.zc-conflict { border-color: color-mix(in srgb, #dc2626 55%, var(--border)); }
.zc-card.zc-shared { border-color: color-mix(in srgb, #7c3aed 45%, var(--border)); }
.zc-zone { margin: 0; font-size: 17px; font-weight: 700; }
.zc-state { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.zc-state.bad { background: #dc2626; color: #fff; border-color: transparent; }
.zc-state.ok { background: color-mix(in srgb, #7c3aed 18%, transparent); color: color-mix(in srgb, #7c3aed 70%, var(--text)); border-color: color-mix(in srgb, #7c3aed 40%, transparent); }
.zc-state.info { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.zc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zc-chip { display: grid; gap: 1px; padding: 8px 12px 8px 14px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border); border-left: 4px solid var(--c); font-size: 13.5px; }
.zc-chip span { font-size: 12px; color: var(--text-muted); }
.zc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 7px; vertical-align: middle; }

/* Verificación en dos pasos */
.mfa-screen { min-height: calc(100dvh - var(--header-h) - 40px); display: grid; place-items: center; padding: 24px 16px; }
.mfa-card { max-width: 460px; text-align: left; }
.mfa-badge { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: var(--grad-soft, var(--accent-soft)); margin-bottom: 12px; }
.mfa-code { font-size: 26px; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; padding: 12px; }
.mfa-form { display: grid; gap: 4px; }
.mfa-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; color: var(--text-muted); font-size: 14px; }
.mfa-qr { display: grid; place-items: center; padding: 12px; margin-bottom: 10px; background: #fff; border-radius: 14px; width: fit-content; justify-self: center; }
.mfa-qr img { display: block; }
.mfa-secret { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; user-select: all; padding: 2px 6px; border-radius: 6px; background: var(--surface-strong); }

/* Gestoría */
.gs-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gs-checks li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border); font-size: 14px; }
.gs-checks li > span:first-child { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: var(--success); }
.gs-checks li.bad > span:first-child { background: var(--warning); color: #111; }
.gs-checks li > span:nth-child(2) { flex: 1; }

/* Botón «Instalar la app» (solo visible donde el navegador instala desde un botón) */
.install-btn[hidden] { display: none !important; }
.ld-foot-install { appearance: none; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.ld-foot-install:hover { border-color: var(--accent); color: var(--accent); }
.ld-foot-install svg { width: 15px; height: 15px; }

/* ===== Inicio de dirección: operativa del día y finanzas de un vistazo (v101) ===== */
.cd-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cd-nav input[type=date] { width: auto; padding: 6px 10px; }
.cd-nav .btn { width: auto; min-width: 36px; }
.cd-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 6px 0 12px; }
.cd-day { appearance: none; font: inherit; color: inherit; cursor: pointer; display: grid; justify-items: center; gap: 1px; padding: 7px 2px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border); transition: border-color .15s, background-color .15s; }
.cd-day span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.cd-day strong { font-size: 17px; line-height: 1.1; }
.cd-day i { font-style: normal; font-size: 11px; font-weight: 700; min-width: 20px; padding: 0 6px; border-radius: 999px; color: var(--text-muted); }
.cd-day i.has { color: #fff; background: var(--accent); }
.cd-day:hover { border-color: var(--accent); }
.cd-day.today strong { color: var(--accent); }
.cd-day.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.cd-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cd-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 11px; border-radius: 999px; font-size: 13px; border: 1px solid var(--border); background: var(--surface-strong); }
.cd-chip.ok { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); color: var(--success); }
.cd-chip.warn { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.cd-chip.bad { border-color: var(--danger); color: var(--danger); }
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.cd-map { height: 460px; }
.cd-hint:empty { display: none; } .cd-hint { margin: 0; }
.cd-list { display: grid; gap: 8px; max-height: 510px; overflow: auto; padding-right: 2px; }
.cd-route { display: grid; gap: 4px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-strong); cursor: pointer; }
.cd-route:hover, .cd-route:focus-visible { border-color: var(--accent); }
.cd-route.sales { cursor: default; border-left: 3px solid #7c3aed; }
.cd-route-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cd-prog { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.cd-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.card-head .cd-links { margin-top: 0; }
.cd-pin span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid #1f2937; font-size: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.cd-pin.start span { background: #16a34a; border-color: #fff; color: #fff; font-size: 12px; }
.cd-pin.end span { border-color: #111; }
.cd-pin.client span { border-color: #15803d; }
.cd-fin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 16px; }
.cd-fin-block { min-width: 0; }
.cd-fin-block h3 { margin: 0; font-size: 15.5px; }
.cd-fin-block > p { margin: 3px 0 10px; }
@media (max-width: 1100px) { .cd-grid { grid-template-columns: minmax(0, 1fr); } .cd-list { max-height: none; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
@media (max-width: 900px) { .cd-fin-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .cd-map { height: 340px; } .cd-day strong { font-size: 15px; } .cd-day span { font-size: 10px; letter-spacing: 0; } }
.cd-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cd-kpis .kpi-value { font-size: clamp(17px, 1.5vw, 22px); }
@media (max-width: 1100px) { .cd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Mapa general: día de trabajo, plan del día e inicio/final de ruta (v102) ===== */
.amap-day { align-items: center; }
.amap-day-input { width: auto; padding: 5px 8px; font-size: 13.5px; min-height: 0; }
.amap-day.other .amap-day-input { border-color: #d97706; box-shadow: 0 0 0 2px rgba(217, 119, 6, .25); }
.amap-day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.amap-day-list li { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-strong); min-width: 0; }
.amap-day-list li.warn { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.amap-day-top, .amap-day-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.amap-day-who select { flex: 1 1 auto; min-width: 0; padding: 4px 8px; font-size: 13px; }
.amap-dot.route-start span, .amap-dot.route-end span { box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, .45); font-size: 11px; }
.amap-icons { max-height: 132px; overflow: auto; }

/* ===== Vista 3D con todo lo del mapa (v103) ===== */
.amap-3d-ov { cursor: pointer; }
.amap-3d-ov.label { padding: 3px 8px; border-radius: 6px; background: #fff; color: #1f2937; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); cursor: default; }
.amap-canvas:has(.amap-3d) .amap-detail, .amap-canvas:has(.amap-3d) .amap-status { z-index: 1200; }

/* Dibujo dentro de la vista 3D (v104) */
.amap-3d-draw { display: inline-flex; flex-wrap: wrap; gap: 6px; box-shadow: none !important; }
.amap-3d-draw[hidden] { display: none; }
.amap-3d-draw .btn { width: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.amap-3d-draw .btn.ghost { background: var(--surface); }
.amap-3d.drawing .amap-3d-ov { pointer-events: none; }

/* ===== Ubicación compartida del equipo (v106) ===== */
.loc-card { display: grid; gap: 8px; }
.loc-card.on { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
.loc-card.asked { border-color: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent); }
.loc-card p { margin: 0; }
.loc-head { display: flex; align-items: center; gap: 10px; }
.loc-state { margin-left: auto; font-size: 12.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.loc-card.on .loc-state { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.loc-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); flex: none; }
.loc-dot.on { background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); animation: loc-pulse 2s infinite; }
@keyframes loc-pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.loc-asked { padding: 8px 12px; border-radius: 10px; font-weight: 600; background: color-mix(in srgb, var(--warning) 16%, transparent); }
.loc-card .btn { width: auto; }
.cd-team { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.cd-team:empty { display: none; }
.cd-team-title { font-size: 13px; font-weight: 700; margin-right: 4px; }
.cd-person { appearance: none; font: inherit; font-size: 13px; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-strong); }
.cd-person i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.cd-person small { color: var(--text-muted); font-size: 11.5px; }
.cd-person.on { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); } .cd-person.on i { background: var(--success); }
.cd-person:not(.on):not(:disabled) small { color: var(--accent); font-weight: 600; }
.cd-person:hover:not(:disabled) { border-color: var(--accent); }
.cd-person:disabled { opacity: .7; cursor: default; }
@media (prefers-reduced-motion: reduce) { .loc-dot.on { animation: none; } }

/* ===== v107: mapa propio en «Mi ubicación» y tipos de mapa en el inicio de dirección ===== */
.loc-map { height: 260px; }
.loc-zone { font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.loc-zone.ok { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.loc-zone.warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.cd-mapwrap { position: relative; min-width: 0; }
.cd-base { width: auto; padding: 6px 10px; font-size: 13.5px; }
.lv-box.lv-full .cd-mapwrap { flex: 1; display: flex; }
.lv-box.lv-full .cd-mapwrap .map { flex: 1; height: auto; }

/* ===== v108: pantalla completa del inicio de dirección y estimación de buzones opcional en 3D ===== */
.amap-3d [hidden] { display: none !important; }
.amap-3d-bar .btn.on { border-color: var(--accent); }
.cd-only-full { display: none; }
.cd-board .lv-tools .btn { width: auto; }
.cd-board.cd-full { position: fixed; inset: 0; z-index: 2000; margin: 0; border-radius: 0; border: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); overflow: hidden; background: var(--bg); animation: none; transform: none; }
.cd-full .cd-only-full { display: inline-flex; }
.cd-full .btn.cd-exit { background: var(--danger); border-color: var(--danger); color: #fff; }
.cd-full .card-head, .cd-full .cd-week, .cd-full .cd-sum, .cd-full .cd-team { margin: 0; flex: none; }
.cd-full.cd-nosum .cd-week, .cd-full.cd-nosum .cd-sum, .cd-full.cd-nosum .cd-team, .cd-full .cd-links, .cd-full .cd-hint { display: none; }
.cd-full .cd-grid { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 330px; align-items: stretch; }
.cd-full.cd-nolist .cd-grid { grid-template-columns: minmax(0, 1fr); }
.cd-full.cd-nolist .cd-list { display: none; }
.cd-full .lv-box { min-height: 0; height: 100%; }
.cd-full .cd-mapwrap { flex: 1; min-height: 0; display: flex; }
.cd-full .cd-map { flex: 1; height: auto; min-height: 0; }
.cd-full .cd-list { max-height: none; overflow: auto; align-content: start; }
@media (max-width: 1100px) {
  .cd-full .cd-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .cd-full .cd-list { max-height: 32vh; }
  .cd-full .cd-week { display: none; }
}

/* ===== v109: pantalla completa del inicio con panel lateral, como el mapa general ===== */
.cd-layers, .cd-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cd-shell { display: none; }
.cd-board.cd-full { padding: 0; display: block; gap: 0; }
.cd-board.cd-full > :not(.cd-shell) { display: none !important; }
.cd-full .cd-shell { display: grid; grid-template-columns: 350px minmax(0, 1fr); height: 100%; position: relative; }
.cd-full.cd-noside .cd-shell { grid-template-columns: minmax(0, 1fr); }
.cd-full.cd-noside .cd-side { display: none; }
.cd-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--border); background: var(--surface); }
.cd-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 15px; }
.cd-side-close { width: auto; font-size: 18px; line-height: 1; padding: 2px 10px; }
.cd-side-scroll { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px calc(16px + env(safe-area-inset-bottom)); }
.cd-sec { border-bottom: 1px solid var(--border); }
.cd-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cd-sec > summary::-webkit-details-marker { display: none; }
.cd-sec > summary::after { content: "▾"; font-size: 12px; }
.cd-sec:not([open]) > summary::after { content: "▸"; }
.cd-sec > summary:hover { color: var(--text); }
.cd-sec-body { display: grid; gap: 8px; padding: 0 0 12px; min-width: 0; }
.cd-sec:has(.cd-team:empty) { display: none; }
.cd-side .cd-team-title { display: none; }
.cd-side .card-head, .cd-side .cd-week, .cd-side .cd-sum, .cd-side .cd-team { margin: 0; }
.cd-side .card-head .section-title { font-size: 16px; }
.cd-side .cd-week { display: grid !important; gap: 4px; }
.cd-side .cd-day { padding: 5px 0; border-radius: 10px; } .cd-side .cd-day strong { font-size: 14px; } .cd-side .cd-day span { font-size: 10px; letter-spacing: 0; }
.cd-side .cd-layers { display: grid; gap: 6px; } .cd-side .cd-layers .lv-chip { border-radius: 10px; padding: 7px 10px; }
.cd-side .cd-list { max-height: none; overflow: visible; grid-template-columns: minmax(0, 1fr); }
.cd-side .cd-links { display: grid !important; gap: 8px; margin: 14px 2px 0; }
.cd-fmain { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px; }
.cd-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cd-fbar .btn { width: auto; }
.cd-fday { display: inline-flex; align-items: center; gap: 4px; }
.cd-fday-lbl { min-width: 92px; text-align: center; font-size: 14px; text-transform: capitalize; }
.cd-fmap { flex: 1; min-height: 0; display: flex; }
@media (max-width: 900px) {
  .cd-full .cd-shell { grid-template-columns: minmax(0, 1fr); }
  .cd-full .cd-side { position: absolute; inset: 0 auto 0 0; width: min(350px, 90vw); z-index: 1300; box-shadow: 10px 0 30px rgba(0, 0, 0, .45); }
  .cd-fmain { padding: 8px; }
}

/* ===== v110: iconos por rol y ficha de cada persona en el mapa del inicio ===== */
.cd-who span { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 3px solid var(--c); font-size: 18px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 28%, transparent), 0 3px 10px rgba(0, 0, 0, .4); cursor: pointer; }
.cd-who span i { position: absolute; right: -6px; bottom: -6px; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; background: var(--c); color: #fff; font: 800 11px/18px system-ui, sans-serif; font-style: normal; text-align: center; border: 2px solid #fff; }
.cd-who.stale span { border-color: #d97706; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); opacity: .85; }
.cd-who.stale span i { background: #d97706; }
.cd-pop { display: grid; gap: 6px; color: #1f2937; font-size: 13px; min-width: 210px; }
.cd-pop a { color: #1f5fd6; font-weight: 600; }
.cd-pop-head { display: flex; align-items: center; gap: 10px; }
.cd-pop-head strong { display: block; font-size: 15px; line-height: 1.2; } .cd-pop-head div span { font-size: 12px; color: #6b7280; }
.cd-pop-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; flex: none; }
.cd-pop-state { padding: 4px 8px; border-radius: 8px; font-weight: 600; font-size: 12.5px; }
.cd-pop-state.ok { color: #15803d; background: #dcfce7; } .cd-pop-state.warn { color: #b45309; background: #fef3c7; }
.cd-pop-row { display: flex; justify-content: space-between; gap: 12px; } .cd-pop-row span { color: #6b7280; }
.cd-pop-title { margin-top: 4px; padding-top: 6px; border-top: 1px solid #e5e7eb; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #6b7280; }
.cd-pop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cd-pop-list .badge { font-size: 10.5px; padding: 0 6px; }
.cd-pop-note { margin: 0; font-size: 12px; color: #6b7280; }
.cd-pop-link { margin-top: 2px; }

/* ===== v111: flecha de rumbo con los colores de la app y «Mi trabajo de hoy» en la tarjeta de ubicación ===== */
.loc-arrow { width: 44px; height: 44px; transition: transform .35s ease; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.loc-arrow svg { display: block; width: 100%; height: 100%; }
.loc-arrow .d { display: none; }
.loc-arrow.nohead .a { display: none; } .loc-arrow.nohead .d { display: block; }
.loc-detail { display: grid; gap: 8px; }
.loc-detail:empty { display: none; }
.loc-detail-title { margin: 4px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.loc-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-strong); color: inherit; text-decoration: none; }
.loc-item:hover { border-color: var(--accent); }
.loc-item strong { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-sub { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-muted); }
.loc-tag { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.loc-tag.st-en_curso { color: #7c6cff; border-color: color-mix(in srgb, #7c6cff 50%, var(--border)); }
.loc-tag.st-completada { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.loc-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
.loc-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4d8dff, #7c6cff 55%, #d946ef); }
@media (prefers-reduced-motion: reduce) { .loc-arrow { transition: none; } }

/* ===== v112: los mapas ya no se ponen por encima del menú, los avisos ni las ventanas =====
   Leaflet numera sus capas internas del 200 al 1000 y el menú lateral, la campana y los avisos de la app van del 19 al 90:
   sin aislar el mapa, sus capas quedaban por encima de todo. Cada mapa pasa a ser un bloque cerrado. */
.leaflet-container, .maplibregl-map, .amap-canvas, .cd-mapwrap, .lv-box:not(.lv-full) { isolation: isolate; }
.leaflet-container { z-index: 0; }
/* La pantalla completa de un mapa tapa la página, pero no los avisos de la app */
.cd-board.cd-full, .lv-box.lv-full { z-index: 70; }
/* Flecha de posición propia: siempre triángulo, con los colores de la app */
.loc-me { background: none; border: 0; }
.loc-arrow { width: 100%; height: 100%; transition: transform .25s ease-out; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.loc-arrow svg { display: block; width: 100%; height: 100%; }

/* ===== v113: símbolo del equipo que camina, trabaja o está parado, y posición en tiempo real ===== */
.cd-map:not(.zooming) .leaflet-marker-icon.cd-who { transition: transform 1.2s linear; }
.cd-who .cd-who-in { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 3px solid var(--c, #0ea5e9); font-size: 20px; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); cursor: pointer; }
.cd-who .cd-who-in u { display: inline-block; text-decoration: none; }
.cd-who .cd-who-in b { display: inline-block; font-weight: 400; transform-origin: 50% 90%; }
.cd-who.flip .cd-who-in u { transform: scaleX(-1); }
.cd-who .cd-who-in i { position: absolute; right: -6px; bottom: -6px; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; background: var(--c, #0ea5e9); color: #fff; font: 800 11px/18px system-ui, sans-serif; font-style: normal; text-align: center; border: 2px solid #fff; }
.cd-who .cd-who-in em { position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--c, #0ea5e9); opacity: 0; pointer-events: none; }
/* Caminando: el muñeco da pasos y salen ondas rápidas */
.cd-who[data-state="moving"] .cd-who-in b { animation: cd-walk .55s ease-in-out infinite; }
.cd-who[data-state="moving"] .cd-who-in em { animation: cd-ring 1.1s ease-out infinite; }
/* Trabajando en un punto: quieto, con un latido lento */
.cd-who[data-state="working"] .cd-who-in { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 30%, transparent), 0 3px 10px rgba(0, 0, 0, .4); }
.cd-who[data-state="working"] .cd-who-in em { animation: cd-ring 2.4s ease-out infinite; }
.cd-who[data-state="working"] .cd-who-in b { animation: cd-work 1.6s ease-in-out infinite; }
/* Parado: fijo. Sin señal: gris y apagado */
.cd-who[data-state="lost"] .cd-who-in { opacity: .75; filter: grayscale(1); }
@keyframes cd-walk { 0%, 100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-4px) rotate(9deg); } }
@keyframes cd-work { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes cd-ring { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.75); opacity: 0; } }
.cd-legend { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: calc(100% - 150px); padding: 5px 10px; border-radius: 10px; font-size: 11.5px; color: #1f2937; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 6px rgba(0, 0, 0, .25); pointer-events: none; }
.cd-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cd-legend i { width: 9px; height: 9px; border-radius: 50%; }
.cd-pop-act { display: flex; align-items: flex-start; gap: 7px; font-weight: 600; font-size: 12.5px; }
.cd-pop-act i { flex: none; width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; background: var(--c); }
@media (prefers-reduced-motion: reduce) { .cd-who .cd-who-in b, .cd-who .cd-who-in em { animation: none !important; } .cd-map .leaflet-marker-icon.cd-who { transition: none; } }

/* ===== v114: ficha del trabajador (contacto, lo repartido y lo que queda) y símbolo en todos los mapas ===== */
.leaflet-container:not(.zooming) .leaflet-marker-icon.cd-who { transition: transform 1.2s linear; }
.amap-3d-ov .cd-who { display: block; width: 42px; height: 42px; }
.cd-pop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cd-pop-btn { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3 !important; text-decoration: none; }
.cd-pop-btn:hover { background: #e0e7ff; } .cd-pop-btn:disabled { opacity: .6; cursor: default; }
.cd-pop-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; }
.cd-pop-big span { display: grid; gap: 1px; padding: 6px 4px; border-radius: 8px; background: #f3f4f6; font-size: 11px; color: #6b7280; }
.cd-pop-big strong { font-size: 15px; color: #111827; }
.cd-pop-bar { height: 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.cd-pop-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4d8dff, #7c6cff 55%, #d946ef); }
.cd-pop-clients { margin: 0; font-size: 12.5px; }
.maplibregl-popup-content .cd-pop { max-height: 60vh; overflow: auto; }
.leaflet-popup-content .cd-pop { max-height: 52vh; overflow: auto; padding-right: 2px; }

/* ===== v115: flechas atrás / adelante en la barra superior ===== */
.nav-arrows { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.nav-arrows[hidden] { display: none; }
.nav-arrows .icon-btn { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 50%; }
.nav-arrows .icon-btn svg { width: 18px; height: 18px; }
.nav-arrows .icon-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--accent); }
.nav-arrows .icon-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 480px) { .nav-arrows { gap: 0; padding: 1px; } .nav-arrows .icon-btn { width: 28px; height: 28px; } }

/* ===== v116: dibujar por encima de las zonas; nombres de zona discretos; zonas dibujadas en el inicio ===== */
/* Mientras se dibuja, zonas, rutas y marcas no capturan el clic: cada toque pone un punto del dibujo */
.amap-drawing .leaflet-overlay-pane .leaflet-interactive { pointer-events: none !important; }
.amap-drawing .leaflet-marker-pane .leaflet-marker-icon:not(.marker-icon):not(.cursor-marker) { pointer-events: none !important; }
.amap-drawing { cursor: crosshair; }
.cd-zones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.cd-zones:empty { display: none; }
.cd-zone { appearance: none; font: inherit; font-size: 13px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px dashed var(--border); background: transparent; }
.cd-zone i { width: 9px; height: 9px; border-radius: 3px; opacity: .35; }
.cd-zone.on { color: var(--text); border-style: solid; border-color: var(--border-strong); background: var(--surface-strong); }
.cd-zone.on i { opacity: 1; }
.cd-zone small { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; color: #fff; background: var(--accent); }
.cd-zone:hover { border-color: var(--accent); }
.cd-side .cd-zones { margin: 0; }
.cd-sec:has(.cd-zones:empty) { display: none; }

/* ===== v117: opacidad de las zonas y botón «Aa» en el inicio ===== */
.amap-ops { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.amap-op { display: grid; gap: 4px; font-size: 13px; }
.amap-op span { display: flex; justify-content: space-between; }
.amap-op input[type=range] { width: 100%; accent-color: var(--accent); padding: 0; }
.cd-btns .btn.on { border-color: var(--accent); color: var(--accent); }

/* ===== v118: Zonas y cobertura (herramientas de la lista) y giro de los mapas ===== */
.zn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.zn-bar .btn { width: auto; }
.zn-search { flex: 1 1 260px; min-width: 0; }
.zn-filters { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.zn-chip { appearance: none; font: inherit; font-size: 13px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.zn-chip small { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--surface-hover); }
.zn-chip.on { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.zn-chip.on small { color: #fff; background: var(--accent); }
.zn-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.zn-name input[type=text] { flex: 1; min-width: 120px; }
.zn-color { flex: none; width: 30px !important; height: 30px; padding: 2px !important; border-radius: 8px; cursor: pointer; }
.zn-new { margin: 6px 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--border-strong); background: var(--surface-strong); }
.zn-new > summary { cursor: pointer; font-weight: 700; }
.zn-new[open] > summary { margin-bottom: 8px; }
.leaflet-control-rotate .leaflet-control-rotate-toggle { cursor: grab; }
.zn-new input[type=color] { width: 64px; height: 38px; padding: 3px; cursor: pointer; }

/* ===== v119: tabla de zonas compacta (sin barra horizontal), giro con botón derecho y opacidad por zona ===== */
.zn-table { table-layout: fixed; width: 100%; }
.zn-table th, .zn-table td { padding: 6px 6px; vertical-align: middle; overflow: hidden; }
.zn-table th { font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.zn-table th:nth-child(1) { width: 27%; } .zn-table th:nth-child(2) { width: 16%; } .zn-table th:nth-child(3) { width: 16%; }
.zn-table th:nth-child(4) { width: 11%; } .zn-table th:nth-child(5) { width: 7%; text-align: center; } .zn-table th:nth-child(6) { width: 10%; } .zn-table th:nth-child(7) { width: 13%; }
.zn-table input[type=text], .zn-table input[type=number] { width: 100%; min-width: 0 !important; padding: 6px 8px; font-size: 13.5px; }
.zn-table .zn-name input[type=text] { min-width: 0 !important; }
.zn-table .zn-color { width: 26px !important; height: 26px; }
.zn-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.zn-actions .del-box { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.zn-icon { width: 34px !important; min-width: 34px; height: 32px; padding: 0 !important; display: inline-grid; place-items: center; font-size: 15px; }
.zn-maplink { white-space: nowrap; }
.zn-table td > .ok, .zn-table td > .error { display: block; font-size: 11.5px; line-height: 1.3; }
@media (max-width: 760px) { .zn-table { table-layout: auto; } .zn-table th, .zn-table td { overflow: visible; } }
.map-rotating, .map-rotating * { cursor: grabbing !important; }
.lv-tools .btn.on { border-color: var(--accent); color: var(--accent); }
#app .zn-table input[type=color].zn-color, .zn-table input[type=color].zn-color { flex: 0 0 26px; width: 26px !important; min-width: 26px !important; max-width: 26px; height: 26px; padding: 0 !important; border-radius: 7px; }
#app .zn-table input[type=checkbox], .zn-table input[type=checkbox] { width: 18px !important; min-width: 18px !important; height: 18px; padding: 0; margin: 0 auto; display: block; accent-color: var(--accent); }
.zn-table td.center { text-align: center; }

/* v120: confirmación al eliminar una zona: franja debajo de la fila */
.zn-confirm td { padding: 0 6px 10px !important; overflow: visible; }
.zn-ask-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.zn-ask { flex: 1 1 320px; font-size: 13.5px; line-height: 1.45; }
.zn-ask-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.zn-ask-btns .btn { width: auto; }

/* ===== v121: rutas por encima de las zonas, fáciles de tocar; ver/ocultar rutas; deshacer punto ===== */
.amap-drawing .leaflet-smRoutes-pane .leaflet-interactive { pointer-events: none !important; }
.amap-noroutes .amap-dot.route-start, .amap-noroutes .amap-dot.route-end { display: none !important; }
.amap-hit { cursor: pointer; }

/* ===== v122: ficha del mapa en un panel a la derecha, y vista de impresión del plano ===== */
.amap-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; min-height: 0; min-width: 0; position: relative; }
.amap-row > .amap-canvas { min-width: 0; }
.amap-row > .amap-detail { position: relative; top: auto; right: auto; bottom: auto; z-index: auto; width: 360px; max-height: 100%; min-height: 0; border-radius: 16px; box-shadow: none; }
.amap-detail-btns { display: inline-flex; gap: 2px; }
@media (max-width: 1100px) {
  .amap-row { grid-template-columns: minmax(0, 1fr); }
  .amap-row > .amap-detail { position: absolute; top: 10px; right: 10px; bottom: 10px; z-index: 500; width: min(360px, calc(100% - 20px)); box-shadow: 0 12px 40px rgba(0, 0, 0, .28); }
}
.amap-toolbar .amap-tool:disabled { opacity: .45; cursor: default; }

.amap-print-sheet { position: fixed; inset: 0; z-index: 5000; overflow: auto; background: #6b7280; color: #111827; display: grid; grid-template-rows: auto auto 1fr; justify-items: center; }
.amap-print-bar { position: sticky; top: 0; z-index: 3; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; background: #111827; color: #f9fafb; }
.amap-print-bar label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.amap-print-bar input[type=text], .amap-print-bar select { width: auto; min-width: 0; padding: 6px 10px; font-size: 13.5px; }
.amap-print-bar .amap-print-title { width: min(260px, 50vw); }
.amap-print-bar .btn { width: auto; }
.amap-print-hint { margin: 10px 16px 0; max-width: 900px; font-size: 13px; color: #f3f4f6; text-align: center; }
.amap-print-paper { margin: 14px 0 28px; padding: 8mm; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); display: grid; grid-template-rows: auto 1fr; gap: 3mm; width: 297mm; height: 210mm; box-sizing: border-box; }
.amap-print-sheet[data-orient="portrait"] .amap-print-paper { width: 210mm; height: 297mm; }
.amap-print-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 11pt; color: #374151; }
.amap-print-head strong { font-size: 15pt; color: #111827; }
.amap-print-box { position: relative; min-height: 0; border: 1px solid #9ca3af; }
.amap-print-box > .amap-canvas { position: absolute; inset: 0; border: 0; border-radius: 0; }
.amap-print-sheet.no-legend .amap-legend { display: none !important; }
.amap-print-sheet .amap-status { display: none !important; }
@media print {
  body.amap-printing > *:not(.amap-print-sheet) { display: none !important; }
  body.amap-printing { background: #fff !important; }
  .amap-print-sheet { position: static; overflow: visible; background: #fff; display: block; }
  .amap-print-bar, .amap-print-hint { display: none !important; }
  .amap-print-paper { margin: 0; padding: 0; box-shadow: none; width: 281mm; height: 190mm; page-break-inside: avoid; }
  .amap-print-sheet[data-orient="portrait"] .amap-print-paper { width: 194mm; height: 277mm; }
  .amap-print-sheet, .amap-print-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .amap-print-sheet .leaflet-control-zoom, .amap-print-sheet .leaflet-control-rotate, .amap-print-sheet .amap-3d-bar, .amap-print-sheet .amap-3d-info { display: none !important; }
}
.amap-print-sheet .amap-legend { background: rgba(255, 255, 255, .95); color: #111827; border: 1px solid #9ca3af; box-shadow: none; }
.amap-print-sheet .amap-legend * { color: #111827; }

/* ===== v123: estado del móvil del trabajador (batería, conexión, GPS) en su ficha ===== */
.cd-pop-devs { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.cd-pop-dev { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: #f3f4f6; border: 1px solid #e5e7eb; min-width: 0; }
.cd-pop-dev b { font-size: 13px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-pop-dev small { font-size: 10.5px; color: #6b7280; line-height: 1.25; }
.cd-pop-dev.ok { border-color: #bbf7d0; background: #f0fdf4; }
.cd-pop-dev.warn { border-color: #fde68a; background: #fffbeb; }
.cd-pop-dev.bad { border-color: #fecaca; background: #fef2f2; }
.cd-pop-dev.bad b { color: #b91c1c; }

/* ===== v124: barra superior en móvil (tira deslizable) y comportamiento de app en móvil y tablet ===== */
@media (max-width: 760px) {
  .topbar { gap: 8px; padding-inline: 10px; }
  .brand-wrap { flex: none; gap: 6px; }
  /* Lo de la derecha es una tira que se desliza con el dedo: primero lo que más se usa, el resto se pasa */
  .controls { flex: 1 1 auto; min-width: 0; justify-content: flex-start; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 6px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); }
  .controls::-webkit-scrollbar { display: none; }
  .controls > * { flex: none; scroll-snap-align: start; }
  .controls > .nav-arrows { order: 1; }
  .controls > #searchBtn { order: 2; }
  .controls > #bellBtn { order: 3; }
  .controls > #suggestBtn { order: 4; }
  .controls > #userChip { order: 5; margin-left: 0; padding: 2px; }
  .controls > .lang { order: 6; }
  .controls > #themeToggle { order: 7; }
  .controls > #logoutBtn { order: 8; margin-right: 18px; }
  .controls > .login-open { order: 0; }
  .user-meta, .brand-name { display: none; }
}
/* Sin sesión (portada) caben todos: la tira no hace falta */
@media (max-width: 760px) { body.is-login .controls { justify-content: flex-end; overflow: visible; -webkit-mask-image: none; mask-image: none; } }

html.is-touch, html.is-touch body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.is-touch body { touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; }
html.is-touch .topbar, html.is-touch .sidebar, html.is-touch .btn, html.is-touch .icon-btn, html.is-touch nav, html.is-touch .tabs, html.is-touch .lv-tools, html.is-touch .amap-toolbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* En iPhone, un campo con letra menor de 16 px amplía la pantalla al tocarlo */
html.is-touch #app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(.mfa-code), html.is-touch #app select, html.is-touch #app textarea, html.is-touch dialog input, html.is-touch dialog select, html.is-touch dialog textarea { font-size: 16px; }
html.is-touch .leaflet-container { touch-action: none; }
@media (max-width: 760px) { .controls { scroll-snap-type: none; } .controls > * { scroll-snap-align: none; } }
/* Fichas de «Equipo en la calle» y de zonas: nunca más anchas que la tarjeta */
.cd-person, .cd-zone { max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cd-person small { overflow: hidden; text-overflow: ellipsis; }
.cd-team, .cd-zones, .cd-sum { min-width: 0; }

/* ===== v125: portada — ganchos gratuitos, modalidades, por qué elegirnos, sectores, preguntas y bloques con datos reales ===== */
.ld-hooks-sec { padding-top: 0; padding-bottom: clamp(24px, 4vw, 48px); }
.ld-hooks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ld-hook { position: relative; display: grid; gap: 12px; align-content: start; padding: 26px 24px 24px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 60%); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); overflow: hidden; }
.ld-hook::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .22), transparent 70%); pointer-events: none; }
.ld-hook-tag { justify-self: start; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #fff; background: linear-gradient(100deg, #4d8dff, #7c6cff 55%, #d946ef); }
.ld-hook-top { display: flex; align-items: center; gap: 12px; }
.ld-hook h3 { margin: 0; font-family: var(--font-brand); font-weight: 800; font-size: clamp(19px, 2.2vw, 24px); }
.ld-hook p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.ld-hook .btn { justify-self: start; position: relative; z-index: 1; }
.ld-why { display: grid; gap: 0; max-width: 980px; margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.ld-why-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 0; border-top: 1px solid var(--border); }
.ld-why-row.head { border-top: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ld-why-row > * { padding: 14px 16px; display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; min-width: 0; }
.ld-why-row .us { color: var(--accent); }
.ld-why-row strong { font-size: 14.5px; }
.ld-why-row .bad { color: var(--text-muted); } .ld-why-row .bad svg { color: var(--danger); }
.ld-why-row .good { background: color-mix(in srgb, var(--accent) 7%, transparent); font-weight: 600; } .ld-why-row .good svg { color: var(--success); }
.ld-why-row.head .us { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ld-why-row svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.ld-sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ld-sector { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.ld-sector.in { transition: transform .2s ease, border-color .2s ease; } .ld-sector.in:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.ld-sector-ico { font-size: 26px; line-height: 1; flex: none; }
.ld-sector strong { display: block; font-size: 15px; } .ld-sector div span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.ld-sector-note { margin: 22px 0 0; text-align: center; color: var(--text-muted); font-size: 15px; }
.ld-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.ld-faq-item { border-radius: 14px; background: var(--surface); border: 1px solid var(--border); padding: 0 18px; }
.ld-faq-item[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ld-faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; font-weight: 700; font-size: 16px; }
.ld-faq-item summary::-webkit-details-marker { display: none; }
.ld-faq-item summary::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 500; color: var(--accent); background: var(--accent-soft); transition: transform .2s ease; }
.ld-faq-item[open] summary::after { transform: rotate(45deg); }
.ld-faq-item p { margin: 0; padding: 0 0 18px; color: var(--text-muted); font-size: 15px; line-height: 1.65; }
.ld-stats { max-width: var(--ld-max); margin: 0 auto; padding: 0 20px clamp(24px, 4vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; text-align: center; }
.ld-stats div { padding: 18px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.ld-stats strong { display: block; font-family: var(--font-brand); font-size: clamp(26px, 3vw, 36px); background: linear-gradient(100deg, #4d8dff, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-stats span { font-size: 13.5px; color: var(--text-muted); }
.ld-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 40px; }
.ld-logos img { max-height: 46px; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; } .ld-logos img:hover { filter: none; opacity: 1; }
.ld-review blockquote { margin: 10px 0 0; font-size: 15px; line-height: 1.6; } .ld-review figcaption { margin-top: 14px; display: grid; gap: 2px; font-size: 13.5px; } .ld-review figcaption span { color: var(--text-muted); }
.ld-stars { color: #f59e0b; letter-spacing: 2px; }
.ld-case-result { font-weight: 800; color: var(--accent); font-size: 17px !important; }
.ld-wa { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px; background: #25d366; color: #fff; font-weight: 700; font-size: 14.5px; text-decoration: none; box-shadow: 0 10px 26px rgba(37, 211, 102, .4); }
.ld-wa svg { width: 20px; height: 20px; }
.ld-wa:hover { transform: translateY(-2px); }
@media (max-width: 1023px) { .ld-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ld-hooks { grid-template-columns: minmax(0, 1fr); }
  .ld-why-row { grid-template-columns: minmax(0, 1fr); }
  .ld-why-row.head { display: none; }
  .ld-why-row > * { padding: 8px 16px; } .ld-why-row strong { padding-top: 14px; } .ld-why-row .good { padding-bottom: 14px; }
  .ld-why-row .bad::before { content: none; }
}
@media (max-width: 640px) { .ld-sectors { grid-template-columns: minmax(0, 1fr); } .ld-wa span { display: none; } .ld-wa { padding: 14px; } }

/* v126: enlaces a la página de cada servicio */
.ld-card-foot { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; width: 100%; }
.ld-card-foot .ld-card-cta { margin-top: 0; padding-top: 0; }
.ld-card-more { font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none; } .ld-card-more:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ld-foot-links { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.ld-foot-links a { color: var(--text-muted); text-decoration: none; } .ld-foot-links a:hover { color: var(--text); }

/* ===== v127: «Te llamamos» y barra fija de contacto en el móvil ===== */
.ld-cb { padding: 22px 20px 20px; max-height: calc(100dvh - 40px); overflow: auto; border-color: var(--border-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.ld-cb-form { display: grid; gap: 12px; }
.ld-cb-head { display: flex; gap: 12px; align-items: flex-start; padding-right: 30px; }
.ld-cb-head h2 { margin: 0; font-family: var(--font-brand); font-size: 21px; }
.ld-cb-head p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.ld-cb-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ld-cb-form .btn { width: 100%; justify-content: center; }
.ld-cb .lead-thanks { padding: 10px 4px; }
.ld-cb-cta { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); text-align: left; }
.ld-cb-cta div { flex: 1; min-width: 0; } .ld-cb-cta strong { display: block; font-size: 15px; } .ld-cb-cta div span { display: block; font-size: 13px; color: var(--text-muted); }
.ld-cb-cta .btn { width: auto; flex: none; }
.ld-mbar { display: none; }
@media (max-width: 760px) {
  .ld-mbar { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); transform: translateY(110%); transition: transform .25s ease; }
  .ld-mbar.on { transform: none; }
  .ld-mbar .btn { width: 100%; justify-content: center; padding: 12px 10px; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
  .ld-mbar svg { width: 17px; height: 17px; }
  .ld:has(.ld-mbar.on) .ld-wa { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ld-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .ld-cb-row { grid-template-columns: minmax(0, 1fr); }
  .ld-cb-cta { flex-wrap: wrap; } .ld-cb-cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ld-mbar { transition: none; } }

/* ===== v128: calculadora pública de buzones ===== */
.ld-calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 34px); padding: clamp(18px, 3vw, 30px); max-width: 1080px; margin: 0 auto; box-shadow: var(--shadow); }
.ld-calc-in { display: grid; gap: 12px; align-content: start; min-width: 0; }
.ld-calc-step { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ld-calc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ld-calc-chip { appearance: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-strong); }
.ld-calc-chip:hover { border-color: var(--accent); }
.ld-calc-chip.on { color: #fff; border-color: transparent; background: linear-gradient(100deg, #4d8dff, #7c6cff 55%, #d946ef); }
.ld-calc-profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ld-calc-prof { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; display: grid; gap: 2px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-strong); }
.ld-calc-prof strong { font-size: 14.5px; } .ld-calc-prof span { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.ld-calc-prof:hover { border-color: var(--accent); }
.ld-calc-prof.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.ld-calc-out { display: grid; gap: 14px; align-content: start; padding: clamp(16px, 2.4vw, 24px); border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); min-width: 0; }
.ld-calc-out:empty { display: none; }
.ld-calc-big { display: grid; gap: 2px; }
.ld-calc-big span { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.ld-calc-big strong { font-family: var(--font-brand); font-size: clamp(40px, 6vw, 60px); line-height: 1.05; background: linear-gradient(100deg, #4d8dff, #8b5cf6 60%, #d946ef); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.ld-calc-big small { font-size: 13.5px; color: var(--text-muted); }
.ld-calc-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ld-calc-mini div { display: grid; gap: 1px; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.ld-calc-mini strong { font-size: 16px; font-variant-numeric: tabular-nums; } .ld-calc-mini span { font-size: 11.5px; line-height: 1.3; color: var(--text-muted); }
.ld-calc-out .btn { justify-self: stretch; justify-content: center; }
.ld-calc-src { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 860px) { .ld-calc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .ld-calc-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ld-calc-mini div:last-child { grid-column: 1 / -1; } }
/* El menú de la portada nunca parte los enlaces en dos líneas: si no caben, se desliza */
.ld-nav-link, .ld-nav-cta { white-space: nowrap; flex: none; }
@media (max-width: 1180px) { .ld-nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .ld-nav::-webkit-scrollbar { display: none; } .ld-nav-link { padding: 8px 10px; } }
.ld-calc-more { font-size: 14px; font-weight: 600; text-align: center; color: var(--accent); text-decoration: none; } .ld-calc-more:hover { text-decoration: underline; }
.ld-foot-links > span { color: var(--text-muted); font-weight: 600; }

/* ===== v130: calendario de campañas ===== */
.ld-cal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ld-cal-item { display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.ld-cal-item.urgent { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); }
.ld-cal-date { display: inline-grid; justify-items: center; align-content: center; width: 62px; height: 62px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #4d8dff, #7c6cff 55%, #d946ef); box-shadow: 0 8px 20px rgba(124, 108, 255, .35); }
.ld-cal-date strong { font-family: var(--font-brand); font-size: 24px; line-height: 1; } .ld-cal-date span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ld-cal-body { display: grid; gap: 6px; align-content: start; }
.ld-cal-body h3 { margin: 0; font-size: 17px; }
.ld-cal-body p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.ld-cal-who { color: var(--text-muted); }
.ld-cal-when { font-weight: 600; }
.ld-cal-ask { color: var(--accent); font-weight: 700; }
.ld-cal-item.urgent .ld-cal-ask { color: var(--warning); }
.ld-cal-body .ld-card-cta { justify-self: start; padding-top: 6px; }
@media (max-width: 1023px) { .ld-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ld-cal { grid-template-columns: minmax(0, 1fr); } .ld-cal-item { grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: none; } }

/* v131: tarjetas de «Consejos» */
.ld-tip { color: inherit; text-decoration: none; }
.ld-tip-ico { font-size: 30px; line-height: 1; }
.ld-tip h3 { margin-top: 14px; }
.ld-tip .ld-card-cta { pointer-events: none; }

/* ===== v133: visitas a la web (Captación) ===== */
.ws-days { display: flex; align-items: flex-end; gap: 3px; height: 70px; margin: 4px 0 16px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ws-days i { flex: 1; min-width: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #7c6cff, #4d8dff); }
.ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.ws-grid h3 { margin: 0 0 8px; font-size: 14px; }
.ws-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ws-bars li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; }
.ws-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-t { height: 8px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
.ws-t i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4d8dff, #7c6cff 55%, #d946ef); }
.ws-bars strong { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .ws-grid { grid-template-columns: minmax(0, 1fr); } }
.card-head > select { width: auto; min-width: 0; }

/* ===== v137: accesibilidad de la portada ===== */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 6000; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 12px; }
#app:focus { outline: none; }
/* La barra de contacto del móvil, cuando no se ve, tampoco se puede alcanzar con el teclado ni la lee el lector de pantalla */
.ld-mbar:not(.on) { visibility: hidden; }
@media (max-width: 760px) { .ld-mbar { transition: transform .25s ease, visibility .25s; } }
/* Zonas de toque de al menos 40 px en pantallas táctiles */
html.is-touch .lang button { min-width: 40px; min-height: 40px; }
html.is-touch .topbar .icon-btn, html.is-touch .ld-nav-link, html.is-touch .ld-nav-cta, html.is-touch .login-open { min-height: 40px; }
html.is-touch .topbar .icon-btn { min-width: 40px; }
html.is-touch .ld-card-cta, html.is-touch .ld-card-more { min-height: 40px; display: inline-flex; align-items: center; }
html.is-touch .ld-foot-links a, html.is-touch .ld-footer .legal-links a { display: inline-flex; align-items: center; min-height: 40px; }
html.is-touch .ld-footer .legal-links { gap: 0 14px; }
html.is-touch .ld-cb-cta .btn, html.is-touch .topbar .brand { min-height: 40px; }

/* ===== v138: precios orientativos ===== */
.ld-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 14px 0 0 !important; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; color: var(--text-muted); }
.ld-price[hidden] { display: none; }
.ld-price strong { font-family: var(--font-brand); font-size: 20px; color: var(--text); }
.ld-calc-cost { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ld-calc-cost span { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.ld-calc-cost strong { font-family: var(--font-brand); font-size: 26px; }
.ld-calc-cost small { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

/* ===== v139: contactos de la web — acciones rápidas y origen ===== */
.lead-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lead-acts .btn { width: auto; padding: 5px 10px; font-size: 12.5px; }
.lead-origin { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-hover); color: var(--text-muted); }
.lead-origin.call { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.lead-origin.calc, .lead-origin.zone { background: var(--accent-soft); color: var(--accent); }
.lead-origin.season { background: color-mix(in srgb, #d946ef 14%, transparent); color: #a21caf; }
tr.lead-late td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.lead-warn { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--warning); }
tr[hidden] { display: none; }

/* ===== v140: formulario de presupuesto en dos pasos y «qué pasa ahora» ===== */
.lead-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; counter-reset: none; }
.lead-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 3px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-muted); }
.lead-steps li span { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface-hover); color: var(--text-muted); }
.lead-steps li.on { border-color: var(--accent); color: var(--text); }
.lead-steps li.on span { background: var(--accent); color: #fff; }
.lead-steps li.done { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.lead-steps li.done span { background: var(--accent-soft); color: var(--accent); }
.lead-step[hidden] { display: none; }
.lead-nav { justify-content: space-between; margin-top: 14px; }
.lead-nav .btn:only-child { margin-left: auto; }
.lead-recap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 13.5px; }
.lead-recap span { color: var(--text-muted); }
.lead-recap .linklike { margin-left: auto; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.lead-why { margin: 8px 0 4px; }
.lead-thanks:focus { outline: none; }
.lead-next { list-style: none; counter-reset: ln; display: grid; gap: 10px; max-width: 460px; margin: 14px auto 18px; padding: 0; text-align: left; }
.lead-next li { counter-increment: ln; position: relative; padding: 10px 12px 10px 48px; border-radius: 12px; background: var(--surface-hover); display: grid; gap: 2px; }
.lead-next li::before { content: counter(ln); position: absolute; left: 12px; top: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--accent); color: #fff; }
.lead-next li span { font-size: 13px; color: var(--text-muted); }
.lead-tips { max-width: 460px; margin: 0 auto; text-align: left; }
.lead-tips ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
@media (max-width: 520px) { .lead-steps li { font-size: 12px; } .lead-nav .btn { flex: 1; } }

/* ===== v141: portada — menú desplegable, fotos, catálogo de impresión y proporción áurea ===== */
/* Escala áurea (φ ≈ 1,618) y espacios de Fibonacci: 8 · 13 · 21 · 34 · 55 · 89 */
.ld { --phi: 1.618; --f1: 8px; --f2: 13px; --f3: 21px; --f4: 34px; --f5: 55px; --f6: 89px; }

/* --- Menú superior --- */
.ld-nav { display: block !important; overflow: visible !important; padding: 0 !important; z-index: 30; }
.ld-nav-row { max-width: var(--ld-max); margin: 0 auto; display: flex; align-items: center; gap: 6px; padding: 8px 20px; }
.ld-nav-items { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.ld-nav-end { display: flex; align-items: center; gap: 10px; flex: none; }
.ld-nav-drop { display: inline-flex; align-items: center; gap: 4px; }
.ld-chev { display: inline-grid; transition: transform .2s ease; } .ld-chev svg { width: 15px; height: 15px; }
.ld-nav-drop[aria-expanded="true"] { color: var(--text); background: var(--surface-hover); }
.ld-nav-drop[aria-expanded="true"] .ld-chev { transform: rotate(180deg); }
.ld-nav-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--text); text-decoration: none; white-space: nowrap; }
.ld-nav-phone svg { width: 16px; height: 16px; color: var(--accent); }
.ld-nav-phone[hidden] { display: none; }
.ld-nav-menu { display: none; appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 8px 14px; align-items: center; gap: 8px; cursor: pointer; min-height: 40px; }
.ld-nav-menu svg { width: 18px; height: 18px; }
.ld-mega { position: absolute; left: 0; right: 0; top: 100%; padding: 0 20px 20px; }
.ld-mega[hidden] { display: none; }
.ld-mega-in { max-width: var(--ld-max); margin: 0 auto; padding: var(--f3); border-radius: 0 0 22px 22px; background: var(--surface); border: 1px solid var(--border-strong); border-top: 0;
  box-shadow: 0 30px 60px rgba(8, 12, 30, .28); animation: ld-mega-in .18s ease-out; max-height: calc(100vh - var(--header-h) - 80px); overflow: auto; overscroll-behavior: contain; }
@keyframes ld-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ld-mega-cap { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 var(--f1); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ld-mega-cap span { letter-spacing: .04em; font-weight: 600; text-transform: none; }
.ld-mega-link { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; transition: background-color .15s; }
.ld-mega-link:hover, .ld-mega-link:focus-visible { background: var(--accent-soft); }
.ld-mega-link-t { display: grid; gap: 1px; min-width: 0; }
.ld-mega-link-t strong { font-size: 14px; font-weight: 700; line-height: 1.3; }
.ld-mega-link-t small { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; }
.ld-mega-emoji { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-size: 18px; border-radius: 10px; background: var(--surface-hover); }
.ld-mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--f3); align-items: start; }
.ld-mega-cols.print .ld-mega-link-t small { white-space: nowrap; }
.ld-mega .ld-mega-cols.print { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(170px, 1fr); gap: var(--f2); }
.ld-mega .ld-mega-cols.print .ld-mega-link { padding: 6px 8px; }
.ld-mega .ld-mega-cols.print .ld-mega-link-t small { white-space: normal; }
.ld-mega-col { display: grid; gap: 2px; align-content: start; }
.ld-mega-towns { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-mega-towns a { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
.ld-mega-towns a:hover { border-color: var(--accent); color: var(--accent); }
.ld-mega-feat { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; display: grid; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-strong); padding: 0; transition: border-color .15s, transform .15s; }
.ld-mega-feat:hover { border-color: var(--accent); transform: translateY(-2px); }
.ld-mega-feat-img { display: block; aspect-ratio: 1.618; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), rgba(217, 70, 239, .18)); }
.ld-mega-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-mega-feat.contain .ld-mega-feat-img img { object-fit: contain; }
.ld-mega-feat-t { display: grid; gap: 4px; padding: 12px 14px 14px; }
.ld-mega-feat-t strong { font-size: 14.5px; } .ld-mega-feat-t small { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.ld-mega-feat-t .ld-card-cta { margin-top: 4px; padding: 0; }
/* Servicios: lista numerada a la izquierda y vista previa con foto a la derecha */
.ld-mega-svcs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--f3) var(--f4); }
.ld-mega-list { display: grid; gap: 4px; align-content: start; }
.ld-mega-svc { display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: inherit; text-decoration: none; border: 1px solid transparent; transition: background-color .15s, border-color .15s; }
.ld-mega-svc > svg { width: 16px; height: 16px; color: var(--accent); opacity: 0; transition: opacity .15s, transform .15s; }
.ld-mega-svc.on, .ld-mega-svc:focus-visible { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ld-mega-svc.on > svg { opacity: 1; transform: translateX(2px); }
.ld-mega-num { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-family: var(--font-brand); font-weight: 800; font-size: 13px; color: var(--text-muted); background: var(--surface-hover); }
.ld-mega-svc.on .ld-mega-num { color: #fff; background: linear-gradient(135deg, var(--accent), #8b5cf6); }
.ld-mega-prev { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 18px; overflow: hidden; background: var(--surface-strong); border: 1px solid var(--border); }
.ld-mega-photo { aspect-ratio: 2.618; overflow: hidden; background: var(--surface-hover); }
.ld-mega-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-mega-prev-t { padding: var(--f2) var(--f3) var(--f3); }
.ld-mega-prev-t h3 { margin: 0; font-family: var(--font-brand); font-size: 20px; }
.ld-mega-prev-t p { margin: 6px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.ld-mega-prev-t .ld-list { margin-top: 10px; }
.ld-mega-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ld-mega-acts .btn { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.ld-mega-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: var(--f2); border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-muted); }
.ld-mega-foot .ld-mega-link { width: auto; padding: 6px 10px; }
.ld-mega-foot .ld-mega-link .ld-ico { display: none; }
.ld-mega-foot .ld-mega-link-t strong { color: var(--accent); font-size: 13.5px; }
.ld-mega-sectors { display: grid; gap: var(--f2); }
.ld-mega-secgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px var(--f2); }
.ld-mega-secgrid .ld-mega-link { align-items: flex-start; }
.ld-mega-secgrid small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Menú del móvil a pantalla completa */
.ld-sheet { width: 100%; max-width: 520px; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 0; background: var(--bg); color: var(--text); display: none; flex-direction: column; }
.ld-sheet[open] { display: flex; animation: ld-sheet-in .22s ease-out; }
.ld-sheet::backdrop { background: rgba(5, 8, 20, .55); backdrop-filter: blur(3px); }
@keyframes ld-sheet-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.ld-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--border); }
.ld-sheet-head strong { font-family: var(--font-brand); letter-spacing: .1em; } .ld-sheet-head strong span { font-weight: 500; color: var(--text-muted); }
.ld-sheet-x svg { width: 20px; height: 20px; }
.ld-sheet-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 6px 12px 16px; }
.ld-sheet-sec { border-bottom: 1px solid var(--border); }
.ld-sheet-sec > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 6px; font-family: var(--font-brand); font-size: 18px; font-weight: 800; cursor: pointer; min-height: 48px; }
.ld-sheet-sec > summary::-webkit-details-marker { display: none; }
.ld-sheet-sec[open] > summary .ld-chev { transform: rotate(180deg); }
.ld-sheet-panel { padding: 0 0 16px; }
.ld-sheet .ld-mega-svcs, .ld-sheet .ld-mega-cols, .ld-sheet .ld-mega-secgrid { grid-template-columns: minmax(0, 1fr); gap: var(--f2); }
.ld-sheet .ld-mega-prev, .ld-sheet .ld-mega-feat { display: none; }
.ld-sheet .ld-mega-svc > svg { opacity: 1; }
.ld-sheet .ld-mega-svc.on { background: transparent; border-color: transparent; } .ld-sheet .ld-mega-svc.on .ld-mega-num { color: var(--text-muted); background: var(--surface-hover); }
.ld-sheet .ld-mega-link, .ld-sheet .ld-mega-svc { min-height: 44px; }
.ld-sheet-foot { display: grid; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.ld-sheet-foot .btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 6px; padding: 12px; font-size: 15px; border-radius: 12px; }
.ld-sheet-foot .btn svg { width: 17px; height: 17px; }

@media (max-width: 767px) {
  .ld-nav-items, .ld-nav-phone { display: none !important; }
  .ld-nav-menu { display: inline-flex; }
  .ld-nav-row { justify-content: space-between; padding: 6px 12px; }
  .ld-mega { display: none !important; }
}

/* --- Cabecera: texto y visual en proporción áurea --- */
.ld-hero { grid-template-columns: minmax(0, 1.618fr) minmax(340px, 1fr); }
.ld-hero-scarce { display: flex; align-items: center; gap: 12px; margin: var(--f4) 0 0; padding: 12px 16px; max-width: 560px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; line-height: 1.45; text-align: left; }
.ld-hero-scarce .ld-ico { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.ld-link { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ld-hero-visual { position: relative; padding: 34px 0 34px 34px; }
.ld-hero-visual .ld-pick { position: relative; z-index: 2; }
.ld-hero-ph { position: absolute; z-index: 0; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px rgba(8, 12, 30, .28); border: 4px solid var(--surface); animation: hero-in .8s .1s ease-out both; }
.ld-hero-ph, .ld-rev-photo, .ld-rev-mock { height: auto; }
.ld-hero-ph.a { right: -64px; top: -10px; width: 58%; aspect-ratio: 1 / 1.618; rotate: 4deg; }
.ld-hero-ph.b { left: -30px; bottom: -14px; width: 56%; aspect-ratio: 1.618; rotate: -5deg; }
.ld-hero-badge { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 10px 26px rgba(8, 12, 30, .22); animation: ld-bob 5s ease-in-out infinite alternate; }
.ld-hero-badge svg { width: 15px; height: 15px; color: var(--accent); }
.ld-hero-badge.one { top: 0; left: 0; }
.ld-hero-badge.two { right: -26px; bottom: 6px; animation-delay: -2.5s; }
@keyframes ld-bob { from { transform: translateY(0); } to { transform: translateY(-7px); } }

/* --- Franja «lo que nos hace distintos» --- */
.ld-diff { max-width: var(--ld-max); margin: 0 auto; padding: 0 20px var(--f5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--f2); }
.ld-diff-item { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.ld-diff-item strong { display: block; font-size: 14.5px; } .ld-diff-item div span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }

/* --- Servicios con foto (1,618 : 1) --- */
.ld-svc { padding-top: 0; overflow: hidden; }
.ld-svc-photo { position: relative; margin: 0 -24px 6px; width: calc(100% + 48px); aspect-ratio: 1.618; overflow: hidden; background: var(--surface-hover); }
.ld-svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ld-svc:hover .ld-svc-photo img { transform: scale(1.04); }
.ld-svc-photo .ld-ico { position: absolute; left: 18px; bottom: 12px; background: var(--surface); box-shadow: 0 8px 18px rgba(8, 12, 30, .18); }
.ld-svc h3 { margin-top: 14px; }

/* --- Catálogo de impresión --- */
.ld-cat-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ld-cat-tab { appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; font-size: 14px; min-height: 42px; transition: background-color .15s, border-color .15s; }
.ld-cat-tab small { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--surface-hover); color: var(--text-muted); }
.ld-cat-tab:hover { border-color: var(--accent); }
.ld-cat-tab.on { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--accent), #8b5cf6 70%, #d946ef); }
.ld-cat-tab.on small { background: rgba(255, 255, 255, .22); color: #fff; }
.ld-cat-intro { text-align: center; margin: var(--f2) auto var(--f3); color: var(--text-muted); font-size: 15px; max-width: 60ch; }
.ld-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--f2); }
.ld-cat-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; scroll-margin: 120px; }
.ld-cat-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: var(--shadow); }
.ld-cat-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.ld-cat-img { aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(90% 90% at 90% 100%, rgba(217, 70, 239, .14), transparent 60%), var(--surface-strong); }
.ld-cat-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .4s ease; }
.ld-cat-card:hover .ld-cat-img img { transform: scale(1.05) rotate(-1deg); }
.ld-cat-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.ld-cat-size { align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); }
.ld-cat-body h3 { margin: 10px 0 0; font-size: 16.5px; line-height: 1.3; }
.ld-cat-body p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); flex: 1; }
.ld-cat-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.ld-cat-acts .ld-card-cta { padding: 0; font-size: 13.5px; }
.ld-cat-add { appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-size: 12.5px; font-weight: 700; min-height: 34px; }
.ld-cat-add svg { width: 14px; height: 14px; }
.ld-cat-add:hover { border-color: var(--accent); color: var(--accent); }
.ld-cat-add.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ld-cat-tray { position: fixed; z-index: 44; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(720px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 20px 50px rgba(8, 12, 30, .35); }
.ld-cat-tray[hidden] { display: none; }
.ld-cat-tray-n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), #d946ef); }
.ld-cat-tray-list { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-cat-tray .btn { flex: none; padding: 10px 16px; font-size: 14px; }
.ld-cat-tray-x { appearance: none; border: 0; background: var(--surface-hover); color: var(--text-muted); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.ld-cat-tray-x svg { width: 15px; height: 15px; }

/* --- Reseñas en Google (QR + NFC) --- */
.ld-rev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--f5); align-items: center; }
.ld-rev-visual { position: relative; }
.ld-rev-photo { display: block; width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 50px rgba(8, 12, 30, .25); }
.ld-rev-mock { position: absolute; right: -34px; bottom: -30px; width: 62%; filter: drop-shadow(0 18px 30px rgba(8, 12, 30, .3)); }
.ld-rev .ld-list { margin-top: var(--f3); }
.ld-rev-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--f4); }
.ld-rev-acts .btn { width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 12px; }

/* --- Formas de reparto: foto y tarjetas (1 : φ) --- */
.ld-modes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--f3); align-items: stretch; }
.ld-modes-photo { position: relative; margin: 0; border-radius: 22px; overflow: hidden; min-height: 320px; }
.ld-modes-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ld-modes-photo figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 3px; padding: 14px 16px; border-radius: 16px; color: #fff; background: rgba(8, 12, 30, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ld-modes-photo figcaption span { font-size: 13px; line-height: 1.45; opacity: .9; }
.ld-modes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--f2); }
.ld-mode { padding: 18px; }
.ld-mode h3 { margin-top: 12px; font-size: 16.5px; }
.ld-mode .ld-list { margin-top: 8px; }
.ld-mode .ld-card-cta { margin-top: auto; padding-top: 12px; }

/* Resaltado al llegar desde el menú */
.flash { animation: ld-flash 1.6s ease-out; }
@keyframes ld-flash { 0%, 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ld-foot-btn { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ld-foot-btn:hover { color: var(--accent); }

@media (max-width: 1100px) { .ld-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ld-mega-secgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .ld-hero { grid-template-columns: minmax(0, 1fr); }
  .ld-hero-scarce { margin-inline: auto; }
  .ld-hero-visual { max-width: 460px; width: 100%; margin: 0 auto; padding: 26px 0 30px; }
  .ld-hero-ph.a { right: -18px; top: -6px; width: 44%; } .ld-hero-ph.b { left: -14px; bottom: -6px; width: 46%; }
  .ld-hero-badge.two { right: -6px; }
  .ld-diff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-rev, .ld-modes { grid-template-columns: minmax(0, 1fr); }
  .ld-rev-visual { max-width: 520px; margin: 0 auto 30px; width: 100%; } .ld-rev-mock { right: -8px; }
  .ld-rev .ld-head.left { text-align: left; }
  .ld-modes-photo { min-height: 0; aspect-ratio: 2.618; }
}
@media (max-width: 640px) {
  .ld-hero-ph, .ld-hero-badge { display: none; }
  .ld-hero-visual { padding: 0; }
  .ld-diff { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; gap: 8px; }
  .ld-diff-item { padding: 12px 14px; }
  .ld-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ld-cat-body { padding: 10px 12px 12px; } .ld-cat-body h3 { font-size: 14.5px; } .ld-cat-body p { font-size: 12.5px; }
  .ld-cat-acts { flex-direction: column; align-items: stretch; }
  .ld-cat-add { justify-content: center; }
  .ld-cat-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
  .ld-cat-tabs::-webkit-scrollbar { display: none; }
  .ld-cat-tab { flex: none; }
  .ld-modes-grid { grid-template-columns: minmax(0, 1fr); }
  .ld-modes-photo { aspect-ratio: 1.618; }
  .ld-rev-acts .btn { flex: 1 1 100%; justify-content: center; }
  .ld-cat-tray { bottom: calc(76px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .ld-cat-tray-list { flex-basis: calc(100% - 90px); }
  .ld-cat-tray .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ld-hero-badge, .ld-hero-ph, .ld-mega-in, .ld-sheet[open], .flash { animation: none; } }

/* Captación: qué se ofrece en la web */
.offer-group { margin: 16px 0 8px; font-size: 14px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.offer-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer; }
.offer-item:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.offer-item input { width: 18px; height: 18px; flex: none; }
.offer-item img { width: 60px; height: 45px; object-fit: contain; flex: none; border-radius: 8px; background: var(--surface-hover); }
.offer-item span { display: grid; gap: 1px; min-width: 0; } .offer-item strong { font-size: 13.5px; } .offer-item small { font-size: 12px; color: var(--text-muted); line-height: 1.35; }

/* ===== v142: cabecera limpia y centrada (escala áurea: 89 → 34 → 21 px), botón «Inicio» ===== */
.ld-hero.clean { grid-template-columns: minmax(0, 1fr); text-align: center; padding-top: clamp(48px, 9vw, 120px); padding-bottom: clamp(40px, 6vw, 72px); }
.ld-hero.clean .ld-hero-text { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.ld-hero.clean .ld-title { font-size: clamp(42px, 7.4vw, 89px); line-height: 1.02; margin-top: var(--f3); }
.ld-hero.clean .ld-lead { max-width: 62ch; font-size: clamp(17px, 1.7vw, 21px); margin-top: var(--f3); }
.ld-hero.clean .ld-cta { justify-content: center; margin-top: var(--f4); }
.ld-needs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: var(--f4); }
.ld-needs-q { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.ld-need { appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; transition: border-color .15s, color .15s, transform .15s; }
.ld-need svg { width: 16px; height: 16px; color: var(--accent); }
.ld-need:hover, .ld-need:focus-visible { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.ld-hero.clean .ld-hero-scarce { display: inline-flex; align-items: center; gap: 8px; margin: var(--f3) 0 0; padding: 0; max-width: none; border: 0; background: none; font-size: 14px; color: var(--text-muted); text-align: center; }
.ld-hero.clean .ld-hero-scarce > svg { width: 16px; height: 16px; flex: none; color: var(--success); }
.ld-totop { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 43; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; box-shadow: 0 10px 26px rgba(8, 12, 30, .2); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s, border-color .15s; }
.ld-totop svg { width: 17px; height: 17px; }
.ld-totop.on { opacity: 1; transform: none; pointer-events: auto; }
.ld-totop:hover { border-color: var(--accent); color: var(--accent); }
.ld:has(.ld-wa) .ld-totop { bottom: calc(88px + env(safe-area-inset-bottom)); }
body.ld-has-tray .ld-totop { display: none; }
@media (max-width: 760px) {
  .ld:has(.ld-mbar.on) .ld-totop { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ld:has(.ld-mbar.on):has(.ld-wa) .ld-totop { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .ld-totop span { display: none; } .ld-totop { padding: 11px; }
}
@media (max-width: 640px) { .ld-needs-q { flex-basis: 100%; margin: 0 0 2px; } .ld-need { font-size: 13.5px; padding: 7px 12px; } }
@media (prefers-reduced-motion: reduce) { .ld-totop { transition: none; } }

/* ===== v143: botón «Inicio» fijo en la barra y desplegables que se cierran al sacar el ratón ===== */
.ld-mega { pointer-events: none; }
.ld-mega-in { pointer-events: auto; }
.ld-nav-home { width: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 38px; border-radius: 999px; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.ld-nav-home svg { width: 16px; height: 16px; }
@media (max-width: 767px) { .ld-nav-row { gap: 8px; } .ld-nav-row .ld-nav-menu { margin-right: auto; } }
@media (max-width: 400px) { .ld-nav-home span { display: none; } .ld-nav-home { padding: 8px 11px; } }

/* ===== v144: fondo premium — auroras de la marca en movimiento, foco que sigue al ratón, rejilla y textura ===== */
.ld-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.ld-bg-set { position: absolute; inset: -12%; transform: translate3d(0, var(--sy, 0px), 0); transition: opacity .8s ease; }
.ld-bg-set.a { opacity: calc(1 - var(--p, 0) * .75); }
.ld-bg-set.b { opacity: calc(.12 + var(--p, 0) * .88); }
.ld-bg i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: var(--o, .42); will-change: transform; background: radial-gradient(circle, var(--c) 0%, transparent 62%); }
:root[data-theme="dark"] .ld-bg i { --o: .5; }
.ld-bg .b1 { --c: #4d8dff; left: -18vmax; top: -24vmax; animation: ld-drift-a 28s ease-in-out infinite alternate; }
.ld-bg .b2 { --c: #7c6cff; right: -22vmax; top: 0; animation: ld-drift-b 34s ease-in-out infinite alternate; }
.ld-bg .b3 { --c: #38bdf8; left: 18vw; bottom: -34vmax; animation: ld-drift-c 40s ease-in-out infinite alternate; }
.ld-bg .b4 { --c: #d946ef; right: -18vmax; top: -12vmax; animation: ld-drift-c 30s ease-in-out infinite alternate; }
.ld-bg .b5 { --c: #7c6cff; left: -22vmax; top: 26vh; animation: ld-drift-a 36s ease-in-out infinite alternate; }
.ld-bg .b6 { --c: #4d8dff; right: 8vw; bottom: -30vmax; animation: ld-drift-b 42s ease-in-out infinite alternate; }
@keyframes ld-drift-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(14vw, 8vh, 0) scale(1.12); } 100% { transform: translate3d(4vw, 18vh, 0) scale(.94); } }
@keyframes ld-drift-b { 0% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-12vw, 12vh, 0) scale(.92); } 100% { transform: translate3d(-4vw, -6vh, 0) scale(1.1); } }
@keyframes ld-drift-c { 0% { transform: translate3d(0, 0, 0) scale(.95); } 50% { transform: translate3d(10vw, -10vh, 0) scale(1.08); } 100% { transform: translate3d(-10vw, -4vh, 0) scale(1); } }
.ld-bg-grid { position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(color-mix(in srgb, var(--text) 16%, transparent) 1px, transparent 1.5px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(130% 75% at 50% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(130% 75% at 50% 0%, #000 0%, transparent 72%); }
.ld-bg-spot { position: absolute; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, #7c6cff 30%, transparent), color-mix(in srgb, #4d8dff 12%, transparent) 55%, transparent);
  transform: translate3d(var(--mx, 50vw), var(--my, 30vh), 0); transition: opacity .8s ease, transform .45s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
:root[data-theme="dark"] .ld-bg-spot { background: radial-gradient(closest-side, color-mix(in srgb, #7c6cff 28%, transparent), color-mix(in srgb, #d946ef 10%, transparent) 55%, transparent); }
.ld-bg.live .ld-bg-spot { opacity: 1; }
.ld-bg-grain { position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
:root[data-theme="dark"] .ld-bg-grain { opacity: .08; }
/* El fondo se ve a través: el halo antiguo de la cabecera sobra y las franjas pasan a ser translúcidas */
.ld .ld-glow { display: none; }
.ld .ld-band { background: color-mix(in srgb, var(--surface-strong) 60%, transparent); }
/* Tarjetas: un punto más de cristal y un brillo que sigue al ratón */
.ld .ld-card, .ld .ld-cat-card, .ld .ld-diff-item, .ld .ld-sector, .ld .ld-feat, .ld .ld-cal-item { background-color: color-mix(in srgb, var(--surface) 88%, transparent);
  background-image: radial-gradient(420px circle at var(--cx, -999px) var(--cy, -999px), color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%); }
@media (prefers-reduced-motion: reduce) { .ld-bg i { animation: none; } .ld-bg-spot { display: none; } .ld-bg-set { transition: none; } }

/* ===== v147: eslogan «Donde mira tu cliente, aparece tu negocio.» ===== */
.ld-hero.clean .ld-title { text-wrap: balance; } .ld-hero.clean .ld-title em { display: block; }
.ld-hero.clean .ld-lead-key { margin-top: var(--f4); font-family: var(--font-brand); font-weight: 700; font-size: clamp(20px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
.ld-hero.clean .ld-lead-key + .ld-lead { margin-top: var(--f2); font-size: clamp(16px, 1.4vw, 19px); text-wrap: balance; }

/* ===== v148: marca IMPACTIA — logo en la barra, menú del móvil y documentos ===== */
img.brand-mark { width: 34px; height: 34px; padding: 0; background: none !important; box-shadow: 0 4px 14px rgba(124, 108, 255, .28); border-radius: 8px; display: block; }
img.brand-name { height: 17px; width: auto; display: block; }
:root[data-theme="dark"] .brand-name-light, :root:not([data-theme="dark"]) .brand-name-dark { display: none !important; }
.ld-sheet-logo img { height: 30px; width: auto; display: block; }
.qd-logo-img { max-height: 40px; max-width: 180px; }
.qd-legal { display: block; margin-top: 4px; }
.adm-logo-box img, .adm-logo img { max-width: 100%; }

/* ===== v148: portada con la marca IMPACTIA ===== */
/* Símbolos con el estilo de la marca: dibujo blanco sobre el cuadrado con el degradado de la web (como el logo) */
.ld .ld-ico { color: #fff; border: 0; border-radius: 23.6%; background: linear-gradient(135deg, #4D8DFF 0%, #7C6CFF 55%, #D946EF 100%); box-shadow: 0 6px 16px color-mix(in srgb, #7C6CFF 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ld .ld-ico svg { stroke-width: 2.2; }
.ld .ld-svc-photo .ld-ico { background: linear-gradient(135deg, #4D8DFF 0%, #7C6CFF 55%, #D946EF 100%); }
.ld-sector .ld-ico { flex: none; }
.ld-tip .ld-ico { margin-bottom: 4px; }
.ld-mega-svc { grid-template-columns: 38px minmax(0, 1fr) 18px; }
.ld-mega-svc.on .ld-ico { box-shadow: 0 0 0 3px color-mix(in srgb, #7C6CFF 35%, transparent); }
/* Cabecera: logo vertical con eslogan encima del titular, que baja un escalón áureo (89 → 55 px) */
.ld-hero-logo { width: clamp(220px, 26vw, 340px); margin: 0 auto var(--f3); }
.ld-hero-logo img { width: 100%; height: auto; display: block; }
.ld-hero.clean { padding-top: clamp(36px, 6vw, 72px); }
.ld-hero.clean .ld-title { font-size: clamp(32px, 5vw, 55px); line-height: 1.08; margin-top: var(--f2); }
.ld-hero.clean .ld-lead-key { font-size: clamp(18px, 1.9vw, 25px); margin-top: var(--f3); }
/* Submarcas */
.ld-subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--f3); }
.ld-sub { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 22px; background-color: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ld-sub:hover { transform: translateY(-3px); border-color: color-mix(in srgb, #7C6CFF 50%, var(--border)); box-shadow: var(--shadow); }
.ld-sub-logo img { width: 92%; max-width: 330px; height: auto; display: block; }
.ld-sub p { margin: 4px 0 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
.ld-sub .ld-card-cta { padding: 0; align-self: flex-start; }
@media (max-width: 1023px) { .ld-subs { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; } }
@media (max-width: 720px) { img.brand-name { display: none !important; } }

/* ===== v149: barra de anuncios debajo del menú (degradado de la marca translúcido, letra blanca) ===== */
.ld-tk-slot:empty { display: none; }
.ld-tk { position: relative; overflow: hidden; height: 40px; display: flex; align-items: center; color: #fff;
  background: linear-gradient(90deg, rgba(77, 141, 255, .84), rgba(124, 108, 255, .84) 50%, rgba(217, 70, 239, .84));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
:root[data-theme="dark"] .ld-tk { background: linear-gradient(90deg, rgba(77, 141, 255, .74), rgba(124, 108, 255, .74) 50%, rgba(217, 70, 239, .74)); }
.ld-tk-track { display: flex; width: max-content; will-change: transform; animation: ld-tk-move var(--tk-dur, 90s) linear infinite; }
.ld-tk:hover .ld-tk-track, .ld-tk:focus-within .ld-tk-track { animation-play-state: paused; }
@keyframes ld-tk-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ld-tk-list { display: flex; flex: none; align-items: center; }
.ld-tk-item { appearance: none; border: 0; background: none; margin: 0; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 26px;
  font: 600 13.5px/1 Inter, system-ui, sans-serif; color: inherit; text-decoration: none; white-space: nowrap; text-shadow: 0 1px 2px rgba(20, 16, 60, .18); }
button.ld-tk-item, a.ld-tk-item { cursor: pointer; }
button.ld-tk-item:hover .ld-tk-txt, a.ld-tk-item:hover .ld-tk-txt { text-decoration: underline; text-underline-offset: 3px; }
.ld-tk-item:focus-visible { outline: 2px solid #fff; outline-offset: -5px; border-radius: 10px; }
.ld-tk-item b { font-weight: 800; }
.ld-tk-sep { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .75); flex: none; }
.ld-tk-tag { font: 800 10.5px/1 Montserrat, sans-serif; letter-spacing: .08em; padding: 4px 8px; border-radius: 999px; text-transform: uppercase;
  background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); text-shadow: none; }
.ld-tk-ico { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.ld-tk-ico svg { width: 13px; height: 13px; stroke-width: 2.2; }
@media (max-width: 640px) {
  .ld-tk { height: 36px; }
  .ld-tk-item { height: 36px; font-size: 12.5px; padding: 0 18px; gap: 8px; }
  .ld-tk-ico { width: 20px; height: 20px; }
}
/* Sin animaciones: la barra no se mueve y se puede desplazar con el dedo */
@media (prefers-reduced-motion: reduce) {
  .ld-tk { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .ld-tk-track { animation: none; }
  .ld-tk-list[aria-hidden] { display: none; }
}
/* Editor de la barra (Cuadro de mando → Barra de anuncios) */
.tk-ed-prev { border-radius: 12px; overflow: hidden; margin: 10px 0 4px; }
.tk-ed-list { display: grid; gap: 10px; margin-top: 10px; }
.tk-ed-row { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: grid; gap: 8px; }
.tk-ed-row.off { opacity: .6; }
.tk-ed-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tk-ed-top .tk-ed-on { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; margin-right: auto; }
.tk-ed-grid { display: grid; grid-template-columns: 140px 150px 1fr 1.6fr; gap: 8px; }
.tk-ed-grid2 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.tk-ed-row input[type="text"], .tk-ed-row input[type="url"], .tk-ed-row select { width: 100%; min-width: 0; }
.tk-ed-auto { padding: 8px 10px; border-radius: 8px; background: var(--surface-hover); font-size: 13px; }
@media (max-width: 860px) { .tk-ed-grid, .tk-ed-grid2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tk-ed-grid, .tk-ed-grid2 { grid-template-columns: 1fr; } }

/* ===== v150: el menú desplegable se abre sobre la barra de anuncios (justo debajo de los botones) ===== */
.ld-nav > .ld-mega { top: auto; z-index: 3; }

/* ===== v151: tablet (768–1023 px) con el menú desplegable del ordenador, más compacto ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .ld-nav-phone { display: none !important; }
  .ld-nav-row { padding: 8px 14px; gap: 6px; }
  .ld-nav-link { padding: 8px 9px; font-size: 13.5px; }
  .ld-nav-home span { display: none; }
  .ld-nav-home { padding: 8px 11px; }
  .ld-nav-cta { margin-left: 4px; }
  .ld-mega { padding: 0 12px 12px; }
  .ld-mega-in { padding: var(--f2); border-radius: 0 0 18px 18px; }
  .ld-mega-svcs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--f2); }
  .ld-mega-photo { aspect-ratio: 2.618; }
  .ld-mega .ld-mega-cols.print { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ld-mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--f2); }
  .ld-mega-secgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* En pantallas táctiles los enlaces del panel son más altos para el dedo */
@media (min-width: 768px) and (hover: none) { .ld-mega-link, .ld-mega-svc { min-height: 44px; } .ld-nav-link { min-height: 40px; } }

/* Ficha de campaña: código de «Sigue tu campaña» */
.cmp-follow-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; padding: 12px 14px; border-radius: 12px; border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.cmp-follow-code strong { font-size: 20px; letter-spacing: .1em; }
.cmp-follow .row-actions { flex-wrap: wrap; }