/* ═══════════════════════════════════════════════════════════════════════════
   CRM Grupo Ceta — piel APPLE / macOS (Ernesto 14/08/2026, mock-crm-apple.html)
   CAPA VISUAL PURA: solo tokens + repiel de componentes. No toca datos, rutas,
   permisos ni lógica. Primera pasada: shell (sidebar + toolbar + tarjetas) y
   listado de Negocios. Light/dark AUTOMÁTICO por prefers-color-scheme
   (en esta piel el switch de tema viejo se oculta; [data-apple] fuerza el modo
   para capturas/pruebas).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ────────────────────────────────────────────────────────────── */
:root, :root[data-tema="claro"], :root[data-tema="neo"]{
  /* tokens Apple */
  --bg:#e9e9ec;
  --sidebar-bg:rgba(246,246,248,.72);
  --panel:rgba(255,255,255,.78);
  --panel-solid:#ffffff;
  --card-a:rgba(255,255,255,.9);
  --text:#1d1d1f; --text-2:#6e6e73; --text-3:#8e8e93;
  --sep:rgba(0,0,0,.08); --sep-strong:rgba(0,0,0,.14);
  --hover:rgba(0,0,0,.045);
  --blue:#007AFF; --green:#34C759; --orange:#FF9500; --red:#FF3B30; --purple:#AF52DE;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07);
  --shadow-lg:0 12px 48px rgba(0,0,0,.14);
  --radius:14px;
  --ease:cubic-bezier(.32,.72,0,1);
  --pill-gray:rgba(120,120,128,.16);
  --green-text:#248A3D; --orange-text:#B25E00; --purple-text:#8944AB;
  --logo-filter:none;

  /* remapa las variables legadas del CRM a los tokens (los estilos inline siguen andando) */
  --fondo:var(--bg); --side:transparent;
  --card:var(--card-a); --card2:rgba(120,120,128,.08);
  --borde:var(--sep); --borde2:var(--sep);
  --tinta:var(--text); --sec:var(--text-2); --apagado:var(--text-3);
  --titulo:var(--text); --txt:var(--text); --baj:var(--text-2);
  --oro:var(--blue); --oro-solido:var(--blue);
  --oro-bg:rgba(0,122,255,.12); --oro-borde:rgba(0,122,255,.3);
  --verde:var(--green-text); --verde-bg:rgba(52,199,89,.16); --verde-borde:rgba(52,199,89,.35);
  --rojo:var(--red); --sombra:rgba(0,0,0,.10);
  --panel2:rgba(0,0,0,.03);
  --org:var(--blue); --org-claro:var(--blue);
}
@media (prefers-color-scheme: dark){
  :root:not([data-apple="light"]), :root:not([data-apple="light"])[data-tema="claro"], :root:not([data-apple="light"])[data-tema="neo"]{
    --bg:#1c1c1e;
    --sidebar-bg:rgba(38,38,41,.72);
    --panel:rgba(44,44,46,.72);
    --panel-solid:#2c2c2e;
    --card-a:rgba(58,58,60,.6);
    --text:#f5f5f7; --text-2:#a1a1a6; --text-3:#8e8e93;
    --sep:rgba(255,255,255,.09); --sep-strong:rgba(255,255,255,.16);
    --hover:rgba(255,255,255,.06);
    --blue:#0A84FF; --green:#30D158; --orange:#FF9F0A; --red:#FF453A; --purple:#BF5AF2;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    --shadow-lg:0 16px 60px rgba(0,0,0,.5);
    --green-text:var(--green); --orange-text:var(--orange); --purple-text:var(--purple);
    --card2:rgba(120,120,128,.14);
    --sombra:rgba(0,0,0,.45);
    --panel2:rgba(255,255,255,.04);
    --logo-filter:brightness(0) invert(.92);
  }
}
/* modo forzado (capturas / pruebas): data-apple="dark" replica el bloque oscuro */
:root[data-apple="dark"], :root[data-apple="dark"][data-tema="claro"], :root[data-apple="dark"][data-tema="neo"]{
  --bg:#1c1c1e;
  --sidebar-bg:rgba(38,38,41,.72);
  --panel:rgba(44,44,46,.72);
  --panel-solid:#2c2c2e;
  --card-a:rgba(58,58,60,.6);
  --text:#f5f5f7; --text-2:#a1a1a6; --text-3:#8e8e93;
  --sep:rgba(255,255,255,.09); --sep-strong:rgba(255,255,255,.16);
  --hover:rgba(255,255,255,.06);
  --blue:#0A84FF; --green:#30D158; --orange:#FF9F0A; --red:#FF453A; --purple:#BF5AF2;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 16px 60px rgba(0,0,0,.5);
  --green-text:var(--green); --orange-text:var(--orange); --purple-text:var(--purple);
  --card2:rgba(120,120,128,.14);
  --sombra:rgba(0,0,0,.45);
  --panel2:rgba(255,255,255,.04);
  --logo-filter:brightness(0) invert(.92);
}

/* ── 2 · TIPOGRAFÍA Y FONDO ───────────────────────────────────────────────── */
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:12.5px; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 8% -10%, rgba(0,122,255,.16), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(175,82,222,.13), transparent 55%),
    radial-gradient(900px 700px at 60% 110%, rgba(52,199,89,.10), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
b,strong{font-weight:590}
.num,.monto{font-family:inherit;font-variant-numeric:tabular-nums;font-weight:500}
h1.tit{font-size:15px;font-weight:590;letter-spacing:-.015em;color:var(--text)}
.baj{color:var(--text-3);font-size:12px}

/* ── 3 · SIDEBAR translúcida ──────────────────────────────────────────────── */
.side{
  background:var(--sidebar-bg);
  -webkit-backdrop-filter:saturate(180%) blur(30px); backdrop-filter:saturate(180%) blur(30px);
  border-right:.5px solid var(--sep);
  color:var(--text-2);
}
.side .lg{padding:16px 16px 6px}
.side .lg img{filter:var(--logo-filter)}
.logocrm b{color:var(--text);font-size:13.5px;font-weight:590;letter-spacing:.1em}
.side nav{margin-top:8px;padding:0 8px;display:grid;gap:1px}
.side a{
  border-radius:7px; padding:6px 10px; font-size:13px; color:var(--text);
  display:flex; align-items:center; gap:9px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.side a:hover{background:var(--hover);color:var(--text)}
.side a.act{
  background:var(--blue); color:#fff; font-weight:500;
  border-left:0; padding-left:10px;
}
.side .navsep{
  font-size:11px; font-weight:590; color:var(--text-3);
  text-transform:none; letter-spacing:.01em; padding:14px 10px 5px;
}
.side .pie{color:var(--text-3);font-size:11px;margin:14px 18px 0}
#temaSwitch{display:none}   /* en esta piel el modo lo decide el sistema (prefers-color-scheme) */

/* íconos de trazo en el menú (SVG por máscara, currentColor vía background) */
.side nav a::before{
  content:""; width:15px; height:15px; flex:none;
  background:var(--blue);
  -webkit-mask:var(--icon) no-repeat center/contain; mask:var(--icon) no-repeat center/contain;
}
.side nav a.act::before{background:#fff}
.side nav a[href="empresas.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><path d='M8.5 7.5h.01M12 7.5h.01M15.5 7.5h.01M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01M10 21v-4.5h4V21'/></svg>")}
.side nav a[href="negocios.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7.5' width='18' height='12.5' rx='2.5'/><path d='M8.5 7.5V6a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v1.5M3 12.5h18'/></svg>")}
.side nav a[href="contactos.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.4'/><path d='M5.4 20a6.6 6.6 0 0 1 13.2 0'/></svg>")}
.side nav a[href="pipeline.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V12M9.3 20V5M14.7 20v-6M20 20V9'/></svg>")}
.side nav a[href="accesos.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='10' width='14' height='10' rx='2.5'/><path d='M8.5 10V7.5a3.5 3.5 0 0 1 7 0V10'/></svg>")}
.side nav a[href="backoffice.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 2.8v2.4M12 18.8v2.4M21.2 12h-2.4M5.2 12H2.8M18.5 5.5l-1.7 1.7M7.2 16.8l-1.7 1.7M18.5 18.5l-1.7-1.7M7.2 7.2 5.5 5.5'/></svg>")}
.side nav a[href="puente-whatsapp.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.5 8.5 0 0 1-12.4 7.6L3 21l1.9-5.6A8.5 8.5 0 1 1 21 11.5z'/></svg>")}
.side nav a[href="agendas.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='16' rx='2.5'/><path d='M8 3v4M16 3v4M3.5 10h17'/></svg>")}
.side nav a[href="documentos.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8z'/><path d='M14 3v5h5M8.5 13h7M8.5 16.5h4.5'/></svg>")}
.side nav a[href="tareas.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6.5h11M9 12h11M9 17.5h11M3.5 6.5l1.2 1.2 2-2.2M3.5 12l1.2 1.2 2-2.2M3.5 17.5l1.2 1.2 2-2.2'/></svg>")}
.side nav a[href="prioridades.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5 13.7 9l5.5 1.7-5.5 1.7L12 18l-1.7-5.6L4.8 10.7 10.3 9z'/></svg>")}
.side nav a[href="cotizador.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2.5'/><path d='M8.5 7.5h7M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16.5h.01M12 16.5h.01M15.5 16.5h.01'/></svg>")}
.side nav a[href="leads.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16l-6 7v6l-4 2v-8z'/></svg>")}
.side nav a[href="panel.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7.5' height='7.5' rx='1.8'/><rect x='13' y='3.5' width='7.5' height='7.5' rx='1.8'/><rect x='3.5' y='13' width='7.5' height='7.5' rx='1.8'/><rect x='13' y='13' width='7.5' height='7.5' rx='1.8'/></svg>")}
.side nav a[href="radar.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><circle cx='12' cy='12' r='4.5'/><path d='M12 12 18 6'/></svg>")}
.side nav a[href="negocios-ch.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3'/><path d='M3.5 19.5a5.5 5.5 0 0 1 11 0M16 5.5a3 3 0 0 1 0 6M20.5 19.5a5.5 5.5 0 0 0-4-5.3'/></svg>")}
.side nav a[href="higiene.html"]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5 13.7 9l5.5 1.7-5.5 1.7L12 18l-1.7-5.6L4.8 10.7 10.3 9z'/><path d='M18.5 16.5l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z'/></svg>")}

/* ── 4 · TOPBAR (marcas + perfil) ─────────────────────────────────────────── */
.marcasbar{
  background:#2c2c2e; border:.5px solid var(--sep-strong); border-radius:10px;
  box-shadow:var(--shadow);
}
.perfil-chip{
  background:var(--card-a); border:.5px solid var(--sep); border-radius:999px;
  -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px);
  box-shadow:var(--shadow); color:var(--text); font-weight:500;
}
.perfil-ava{background:linear-gradient(150deg,#FF9500,#FF3B30);color:#fff;font-weight:600}
.perfil-card{
  background:var(--panel-solid); border:.5px solid var(--sep); border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}

/* ── 5 · CONTENIDO, TOOLBAR PEGAJOSA Y TARJETAS ───────────────────────────── */
.contenido{padding:20px 24px}
.atoolbar{
  position:sticky; top:0; z-index:8;
  margin:-20px -24px 16px; padding:12px 24px;
  background:color-mix(in srgb, var(--panel-solid) 55%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px);
  border-bottom:.5px solid var(--sep);
}
.box,.perfil-card,#formNuevo{
  background:var(--card-a); border:.5px solid var(--sep); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
#formNuevo{padding:16px 18px}

/* ── 6 · CONTROLES ────────────────────────────────────────────────────────── */
.btn{
  background:var(--blue); color:#fff; border-radius:8px; padding:5px 12px;
  font-size:12.5px; font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:filter .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.97)}
.btn.sec{background:var(--pill-gray); color:var(--text); border:0; font-weight:500}
/* jerarquía: UN solo primario azul (Nuevo negocio); el resto de la barra, fantasma gris */
#btnLegacy,#exportar,#bajadaCom,.atoolbar a.btn[href="/panel-negocios.html"]{
  background:var(--pill-gray); color:var(--text); box-shadow:none;
}
.btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
input.buscar,select.buscar{
  background:var(--pill-gray); border:.5px solid transparent; border-radius:8px;
  padding:5px 10px; font-size:12.5px; color:var(--text);
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
input.buscar::placeholder{color:var(--text-3)}
input.buscar:focus,select.buscar:focus{outline:none;border-color:var(--blue);background:var(--panel-solid)}
.chip{background:var(--pill-gray);border:0;color:var(--text-2);font-weight:500}
.chip.on{background:var(--blue);color:#fff;border-color:var(--blue)}
#wrapArch{color:var(--text-2)}
#chkArch{accent-color:var(--blue)}

/* ── 7 · PILLS de estado (fondo al 14-18%, texto del color) ──────────────── */
.pill{
  border-radius:999px; padding:3px 9px; font-size:11px; font-weight:500;
  line-height:1.4; border:0; background:var(--pill-gray); color:var(--text-2);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.pill.on,.pill.hijo{background:rgba(52,199,89,.16);color:var(--green-text)}
.pill.medio{background:rgba(255,149,0,.18);color:var(--orange-text)}
.pill.padre{background:rgba(0,122,255,.14);color:var(--blue)}
.pill.off{background:var(--pill-gray);color:var(--text-3)}
.chipm{border-radius:999px;font-weight:500;font-size:10.5px;border:0;
  background:color-mix(in srgb,var(--m,var(--blue)) 15%,transparent)}
.estadom{font-weight:590}

/* ── 8 · TABLA del listado ────────────────────────────────────────────────── */
table.t{font-size:12.5px}
table.t th{
  font-size:11.5px; font-weight:500; color:var(--text-3);
  text-transform:none; letter-spacing:-.005em;
  padding:6px 14px; border-bottom:.5px solid var(--sep);
}
table.t td{padding:11px 14px;border-bottom:.5px solid var(--sep)}
table.t tr:last-child td{border-bottom:0}
table.t tr.link:nth-child(even){background:transparent}
table.t tr.link{transition:background .18s var(--ease)}
table.t tr.link:hover{background:var(--hover)}
tbody#tb{animation:apple-in .35s var(--ease)}
@keyframes apple-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* dos líneas por negocio: título 500 + subtítulo gris chico (la estructura ya existe) */
#tb td > div > div[style*="flex-wrap"] > span[style*="font-weight:600"]{font-weight:500!important;font-size:13px!important}

/* editor modal del negocio */
#edPanel{
  background:var(--panel-solid)!important; border:.5px solid var(--sep-strong)!important;
  border-radius:var(--radius)!important; box-shadow:var(--shadow-lg)!important;
}
#edBack{background:rgba(0,0,0,.35)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* buscador histórico (modal legacy) */
#lgPanel{background:var(--panel-solid)!important;border:.5px solid var(--sep-strong)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow-lg)!important}

/* ── 9 · MOVIMIENTO Y DETALLES ────────────────────────────────────────────── */
a{color:var(--blue)}
::selection{background:rgba(0,122,255,.22)}
*{scrollbar-width:thin;scrollbar-color:rgba(120,120,128,.35) transparent}
@media (prefers-reduced-motion: reduce){
  .btn,.side a,table.t tr.link{transition:none}
  tbody#tb{animation:none}
}

/* ── 11 · EMPRESAS: filas-tarjeta (conservan la barrita de color de marca) ──
   (prefijo `main`: el <style> local de la página carga después de este archivo
   y empataría en especificidad — con el prefijo, gana esta piel) */
main table.em-t{border-spacing:0 8px}
main table.em-t th{font-size:11.5px;font-weight:500;color:var(--text-3);text-transform:none;letter-spacing:-.005em}
main table.em-t tbody tr{background:var(--card-a);box-shadow:var(--shadow);transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
main table.em-t td{border-top:.5px solid var(--sep);border-bottom:.5px solid var(--sep)}
main table.em-t td:first-child{border-left:3px solid var(--m,var(--sep));border-radius:var(--radius) 0 0 var(--radius)}
main table.em-t td:last-child{border-right:.5px solid var(--sep);border-radius:0 var(--radius) var(--radius) 0}
main table.em-t tr.link:hover{transform:translateY(-1px)}
main table.em-t tr.link:hover td{background:var(--hover);border-top-color:var(--sep);border-bottom-color:var(--sep)}
main table.em-t tr.link:hover td:last-child{border-right-color:var(--sep)}
main .em-vercomo{background:var(--card-a);border:.5px solid var(--sep);border-radius:var(--radius);box-shadow:var(--shadow)}
main .em-cnt{color:var(--text-3);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;font-size:12px}

/* ── 12 · FICHA DE EMPRESA (mismo motivo del prefijo `main`) ──────────────── */
/* solapas → segmented control macOS */
main .tabs{
  display:inline-flex; flex-wrap:wrap; gap:2px; padding:2px;
  background:var(--pill-gray); border-radius:8px; border-bottom:0;
  font-size:12.5px; font-weight:400;
}
main .tabs button{padding:4px 13px; border-radius:6px; color:var(--text); letter-spacing:-.01em; cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease)}
main .tabs button.act{
  background:var(--panel-solid); color:var(--text); border-bottom:0; margin-bottom:0;
  box-shadow:0 1px 2px rgba(0,0,0,.14); font-weight:500;
}
main .tabs button:focus-visible{outline:2px solid var(--blue)}
/* cabecera + banda + tiras de marca */
main .fh .avatar{border-radius:12px;border:.5px solid var(--sep);background:var(--pill-gray);color:var(--text-2)}
main .banda,main .bit-nueva,main .nota,main .rawgrid,main .c360-hilo,main .aviso{
  background:var(--card-a); border:.5px solid var(--sep); border-radius:var(--radius); box-shadow:var(--shadow);
}
main .aviso{color:var(--text)}
main .mtemp{border-width:.5px;border-radius:12px;background:var(--card-a)}
main .mtemp .sig{font-weight:590}
main .ubi,main .geo-panel,main .geo-cand,main .neg-padre,main .neg-hijo{border-width:.5px}
main .neg-padre,main .neg-hijo{border-radius:12px}
main .btnval{border-width:.5px;border-radius:8px;background:var(--pill-gray);font-weight:500}
main .btnval:hover{border-color:var(--blue);color:var(--blue)}
main .mchip{border:0;background:var(--pill-gray);color:var(--text-2);font-weight:500}
main .mchip.on{background:var(--blue);color:#fff}
main .kv b{color:var(--text-3)}
main .kv select,main .kv input[type=text]{background:var(--pill-gray);border:.5px solid transparent;border-radius:8px;color:var(--text)}
main .kv select:focus,main .kv input[type=text]:focus{outline:none;border-color:var(--blue);background:var(--panel-solid)}
/* KPIs (mock: 30px peso 600, tabular) */
.kpix{background:var(--card-a);border:.5px solid var(--sep);border-radius:var(--radius);box-shadow:var(--shadow)}
.kpix .k{text-transform:none;letter-spacing:-.005em;font-size:12px;color:var(--text-2);font-weight:400}
.kpix .v{font-family:inherit;font-size:30px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpix .v small{font-weight:500;letter-spacing:-.01em}
/* tarjetas de actividades compartidas (comun.js) — .act SOLO dentro de .acts */
.acts .act{border:.5px solid var(--sep);border-radius:12px;background:var(--card-a)}
.actf,.actfm{border:0;background:var(--pill-gray);color:var(--text-2);font-weight:500}
.actf.on{background:var(--blue);color:#fff;font-weight:500}
.subpanel{border-left-color:var(--blue)}
.subpanel h4{color:var(--blue);text-transform:none;letter-spacing:-.005em;font-weight:590}
/* stepper de recorrido: tramos finos, nodo actual sin glow duro */
.stepper .pto{border-color:var(--sep-strong)}
.stepper .paso.aqui .pto{box-shadow:0 0 0 4px color-mix(in srgb,var(--m,var(--blue)) 22%,transparent)}
.stepper .lbl{text-transform:none;letter-spacing:0;font-weight:500}

/* ── 13 · RESTO DEL CRM (15/08: «seguí con todo el resto») ─────────────────
   Overrides genéricos para los componentes propios de cada página. El remapeo
   de variables ya unifica los colores; acá solo superficie: radio 14, borde
   .5px, sombra suave, chips grises, kanban estilo mock. Prefijo `main` por la
   misma trampa de especificidad (el <style> local carga después). */

/* superficies-tarjeta */
main .mbox, main .bo-card, main .ac-tcard, main .agpanel, main .agp,
main .nch-ribbon, main .nch-kpi, main .deal, main .tar-sec, main .met,
main .lead, main .op, main .doc-carp, main .doc-f, main .hg-card,
main .hg-tipo, main .persona, main .alta, main .pl-ribbon, main .pl-flujo,
main .embed-wrap, main .pr-tools, main .metrics > div{
  background:var(--card-a); border:.5px solid var(--sep);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
/* kanban: columnas hundidas + tarjetas que sobresalen (mock .col/.tk) */
main .pl-col, main .kb-col, main .mkk-col{
  background:rgba(120,120,128,.09); border:0; border-radius:var(--radius);
}
main .pl-col.drop, main .kb-col.drop{background:rgba(0,122,255,.10);outline:1.5px dashed var(--blue)}
main .pl-card, main .kb-card, main .mkk-card{
  background:var(--panel-solid); border:.5px solid var(--sep); border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.07);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
main .pl-card:hover, main .kb-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
/* chips y botones chicos de página */
main .unchip, main .agchip, main .hg-chip, main .dd-btn, main .actf, main .actfm,
main .agbtn, main .mchip, main .fq, main .hg-fix{
  border:0; background:var(--pill-gray); color:var(--text-2);
  border-radius:999px; font-weight:500;
}
main .agchip.on, main .unchip.on, main .hg-chip.on, main .fq.on, main .agbtn.on{
  background:var(--blue); color:#fff;
}
/* menús desplegables propios */
main .dd-menu{
  background:var(--panel-solid); border:.5px solid var(--sep-strong);
  border-radius:12px; box-shadow:var(--shadow-lg);
}
/* campos de página (backoffice y afines) */
main .bo-inp, main .maddrow input, main .maddrow select{
  background:var(--pill-gray); border:.5px solid transparent; border-radius:8px; color:var(--text);
}
main .bo-inp:focus{outline:none;border-color:var(--blue);background:var(--panel-solid)}
/* tablas propias: mismos modales que table.t */
main table.bo-t th, main table.nch-tabla th, main table.hg-t th{
  font-size:11.5px; font-weight:500; color:var(--text-3);
  text-transform:none; letter-spacing:-.005em; border-bottom:.5px solid var(--sep);
}
main table.bo-t td, main table.nch-tabla td, main table.hg-t td{border-bottom:.5px solid var(--sep)}
main .tar-row:hover, main .mitem:hover{background:var(--hover)}
main .mitem{border-radius:10px}
/* filas de la tabla de accesos y afines */
main .ac-prow{border-bottom:.5px solid var(--sep)}

/* ── 14 · COMBOS Y CAMPOS — revisión 15/08 («cada combo con la nueva estética») ──
   a) TODO campo de formulario hereda el look Apple aunque no tenga class=buscar
      (bo-sel, selRol, selUN, rMargen, etc. — los combos dinámicos del BO/Accesos). */
main select, main textarea,
main input[type=text], main input[type=search], main input[type=number],
main input[type=date], main input[type=time], main input[type=email],
main input[type=url], main input[type=tel], main input[type=password]{
  background:var(--pill-gray); border:.5px solid transparent; border-radius:8px;
  color:var(--text); font-family:inherit; font-size:12.5px; padding:5px 10px;
  letter-spacing:-.011em;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
main select:focus, main textarea:focus, main input:focus{
  outline:none; border-color:var(--blue); background:var(--panel-solid);
}
input[type=checkbox], input[type=radio]{accent-color:var(--blue)}
/* b) el menú DESPLEGABLE propio (selects-oscuros.js) — estilo menú de macOS:
   panel sólido, radio 12, ítem resaltado AZUL con texto blanco. `body` delante
   porque ese CSS se inyecta en runtime después de este archivo. */
body .selNegro{
  background:var(--panel-solid); color:var(--text);
  border:.5px solid var(--sep-strong); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:4px;
  font-size:12.5px; letter-spacing:-.011em;
}
body .selNegro-it{border-radius:8px; padding:6px 12px}
body .selNegro-it:hover{background:var(--blue); color:#fff}
body .selNegro-it.sel{color:var(--blue); font-weight:590}
body .selNegro-it.sel:hover{color:#fff}

/* ── 15 · INDICADOR «Buscando datos…» (comun.js lo inyecta en runtime → `body` delante) ──
   Barra de progreso azul + pill translúcida arriba a la IZQUIERDA (Ernesto 15/08: a la
   derecha se pisaba con el chip de perfil). En mobile la sidebar es horizontal arriba:
   ahí baja debajo de ella. */
body .apiL-barra{background:linear-gradient(90deg,transparent,var(--blue),transparent);background-size:40% 100%;background-repeat:no-repeat}
body .apiL-pill{
  top:8px; left:14px; right:auto;
  background:color-mix(in srgb,var(--panel-solid) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border:.5px solid var(--sep-strong); color:var(--blue);
  font-size:11.5px; font-weight:500; letter-spacing:-.011em;
  border-radius:999px; padding:4px 11px; box-shadow:var(--shadow);
}
/* mobile: el menú es una barra horizontal arriba y el título arranca justo debajo → el pill
   baja al borde inferior derecho de la pantalla (zona libre, estilo toast de iOS) */
@media(max-width:820px){ body .apiL-pill{top:auto;bottom:14px;left:auto;right:12px;font-size:11px;padding:4px 10px} }

/* ── 10 · PANTALLAS CHICAS (hereda el layout horizontal de estilo.css) ────── */
@media(max-width:820px){
  .side{
    background:var(--sidebar-bg);
    -webkit-backdrop-filter:saturate(180%) blur(30px); backdrop-filter:saturate(180%) blur(30px);
    border-bottom:.5px solid var(--sep);
  }
  /* restaurar el layout horizontal del breakpoint (mi display:grid de escritorio lo pisaba) */
  .side nav{display:flex;gap:3px;margin:0;flex:1 0 auto;padding:0}
  .side a{border-radius:8px;padding:7px 12px}
  .side a.act{border-bottom:0;border-radius:8px;background:var(--blue);color:#fff}
  .side nav a::before{display:none}
  .contenido{padding:14px 14px}
  .atoolbar{margin:-14px -14px 12px;padding:10px 14px}
}