/* ==========================================================================
   AromatizaPro - Panel de gestion
   Identidad "Rosa & Grafito" (tokens heredados de la web de marca).
   Adaptado a UI de dashboard: chrome grafito + area de trabajo blush.
   ========================================================================== */

:root{
  /* Marca */
  /* Marca (solo como ACENTO) */
  --magenta:      #E11383;
  --magenta-deep: #B4005F;
  --magenta-soft: #F06CB0;
  --rose:         #F49CC4;
  --sakura:       #F1D3E0;
  --blush:        #FBEEF4;   /* toques minimos de marca */
  --blush-2:      #F6E4EE;
  --ink:          #191319;

  /* Canvas NEUTRO limpio (area de trabajo) */
  --bg:        #F6F6F7;
  --surface:   #FFFFFF;
  --surface-2: #F1F1F3;
  --text:      #1D1B20;
  --muted:     #6C6A72;
  --faint:     #A6A4AC;
  --line:      rgba(23,21,27,.075);
  --line-2:    rgba(23,21,27,.13);

  /* Chrome oscuro neutro (sidebar) */
  --dk-bg:      #18151B;
  --dk-bg-2:    #1F1B24;
  --dk-surface: #262029;
  --dk-surface-2:#2F2833;
  --dk-text:    #F4F1F5;
  --dk-muted:   #A8A1AD;
  --dk-faint:   #766E7C;
  --dk-line:    rgba(255,255,255,.09);

  /* Estados semanticos (calmados) */
  --ok:      #2E8B82;   /* al dia / cobrado */
  --ok-bg:   #E9F3F1;
  --warn:    #B7791F;   /* proxima / pendiente */
  --warn-bg: #F6EEDF;
  --bad:     #C4006A;   /* impago / vencido */
  --bad-bg:  #F9E7F0;
  --info:    #8E44AD;
  --info-bg: #F0E9F5;

  /* Tipografia practica y muy legible (dashboard) */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 9px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px -4px rgba(22,22,30,.11);
  --shadow:    0 14px 36px -24px rgba(22,22,30,.18);
  --shadow-lg: 0 34px 78px -44px rgba(22,22,30,.24);

  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .32s;

  --sidebar-w: 256px;
  --topbar-h: 62px;

  --grad-magenta: linear-gradient(125deg, var(--magenta) 0%, var(--magenta-deep) 100%);
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.15; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:15px; }
::selection{ background:var(--sakura); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(23,21,27,.16); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(23,21,27,.28); background-clip:content-box; }

.mono{ font-variant-numeric:tabular-nums; }

/* ---- Iconos inline: tamano por contexto (evita SVG gigantes) ----------- */
.card__head > svg{ width:20px; height:20px; flex:none; color:var(--magenta-deep); }
.section-title svg{ width:14px; height:14px; vertical-align:-2px; }
.cell-sub svg{ width:14px; height:14px; vertical-align:-2px; opacity:.9; }
.ficha-head .meta svg{ width:16px; height:16px; flex:none; }
.ficha-head .meta span{ white-space:nowrap; }
.hoja__band svg{ width:19px; height:19px; vertical-align:-4px; }
.visit-num svg{ width:16px; height:16px; }
.modal__head .close svg{ width:18px; height:18px; }
.hamburger svg{ width:20px; height:20px; }
.sidebar__logout svg{ width:18px; height:18px; }
.userpick__btn .go{ display:grid; }
.userpick__btn .go svg{ width:18px; height:18px; }
.pill svg{ width:13px; height:13px; }
.leaflet-pin svg{ width:30px; height:38px; }
.leaflet-popup-content .cell-sub svg{ width:13px; height:13px; }
[data-move="up"] svg{ transform:rotate(-90deg); }
[data-move="down"] svg{ transform:rotate(90deg); }

/* ---- Wordmark ---------------------------------------------------------- */
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:var(--grad-magenta);
  display:grid; place-items:center; color:#fff;
  box-shadow:0 6px 18px -6px rgba(225,19,131,.6);
}
.brand-mark svg{ width:19px; height:19px; }
.brand-logo{ width:36px; height:36px; border-radius:11px; flex:none; background:#170710; display:grid; place-items:center; box-shadow:0 6px 18px -7px rgba(225,19,131,.6), inset 0 0 0 1px rgba(255,255,255,.05); }
.brand-logo svg{ width:28px; height:auto; display:block; }
.brand-name{ font-family:var(--font-display); font-size:1.24rem; letter-spacing:-.015em; font-weight:700; }
.brand-name b{ color:var(--magenta); font-weight:800; }

/* ==========================================================================
   LOGIN
   ========================================================================== */
.login{
  min-height:100dvh; display:grid; grid-template-columns:1.05fr .95fr;
}
.login__aside{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 15% 10%, #2B0F1F 0%, var(--dk-bg) 55%);
  color:var(--dk-text);
  padding:clamp(2rem,5vw,4.5rem);
  display:flex; flex-direction:column; justify-content:space-between;
}
.login__aside .brand-name{ color:#fff; }
.login__petal{ position:absolute; border-radius:50% 50% 50% 0; opacity:.5; filter:blur(.3px);
  background:linear-gradient(135deg, var(--magenta-soft), transparent); }
.login__hero h1{ font-family:var(--font-display); font-size:clamp(2rem,3.6vw,3rem); font-weight:700; line-height:1.1; letter-spacing:-.025em; }
.login__hero p{ color:var(--dk-muted); max-width:34ch; margin-top:1rem; font-weight:300; }
.login__hero .kicker{ font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--magenta-soft); margin-bottom:1.1rem; }
.login__facts{ display:flex; gap:2rem; margin-top:2.4rem; }
.login__fact b{ font-family:var(--font-display); font-size:1.8rem; font-weight:700; letter-spacing:-.02em; display:block; color:#fff; }
.login__fact span{ font-size:.78rem; color:var(--dk-muted); letter-spacing:.04em; }

.login__panel{ display:grid; place-items:center; padding:clamp(1.5rem,4vw,3rem); }
.login__card{ width:min(420px,100%); }
.login__card h2{ font-size:1.5rem; margin-bottom:.35rem; }
.login__card .sub{ color:var(--muted); margin-bottom:1.6rem; }
.userpick{ display:grid; gap:.7rem; }
.userpick__btn{
  display:flex; align-items:center; gap:.9rem; width:100%; text-align:left;
  background:var(--surface); border:1.5px solid var(--line-2); border-radius:var(--radius);
  padding:.85rem 1rem; transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.userpick__btn:hover{ border-color:var(--magenta); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.userpick__btn .avatar{ flex:none; }
.userpick__btn .who{ flex:1; }
.userpick__btn .who b{ display:block; font-weight:600; }
.userpick__btn .who span{ font-size:.82rem; color:var(--muted); }
.userpick__btn .go{ color:var(--faint); }
.login__note{ margin-top:1.5rem; font-size:.8rem; color:var(--muted); text-align:center; }

.avatar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:600; font-size:.85rem; letter-spacing:.02em; }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.shell{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100dvh; }

.sidebar{
  background:linear-gradient(180deg, var(--dk-bg-2), var(--dk-bg));
  color:var(--dk-text); position:sticky; top:0; height:100dvh;
  display:flex; flex-direction:column; padding:1.1rem .8rem;
  border-right:1px solid var(--dk-line);
}
.sidebar .brand{ padding:.35rem .5rem 1.1rem; }
.sidebar .brand-name{ color:#fff; font-size:1.2rem; }
.sidebar__role{ margin:0 .5rem 1rem; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dk-faint); }
.nav{ display:flex; flex-direction:column; gap:.15rem; }
.nav a{
  display:flex; align-items:center; gap:.75rem; padding:.62rem .75rem; border-radius:11px;
  color:var(--dk-muted); font-weight:400; font-size:.94rem;
  transition:background var(--dur), color var(--dur);
}
.nav a svg{ width:19px; height:19px; flex:none; opacity:.85; }
.nav a:hover{ background:var(--dk-surface); color:#fff; }
.nav a.active{ background:var(--grad-magenta); color:#fff; box-shadow:0 8px 22px -12px rgba(225,19,131,.7); }
.nav a.active svg{ opacity:1; }
.nav a .badge{ margin-left:auto; }
.sidebar__spacer{ flex:1; }
.sidebar__foot{ border-top:1px solid var(--dk-line); padding-top:.8rem; margin-top:.5rem; }
.sidebar__user{ display:flex; align-items:center; gap:.65rem; padding:.35rem .5rem; }
.sidebar__user .who b{ display:block; font-size:.9rem; color:#fff; }
.sidebar__user .who span{ font-size:.74rem; color:var(--dk-faint); }
.sidebar__logout{ margin-left:auto; background:none; border:none; color:var(--dk-faint); padding:.3rem; border-radius:8px; }
.sidebar__logout:hover{ color:#fff; background:var(--dk-surface); }

.main{ display:flex; flex-direction:column; min-width:0; }
.topbar{
  height:var(--topbar-h); position:sticky; top:0; z-index:30;
  background:rgba(246,246,247,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:1rem;
  padding:0 clamp(1rem,3vw,2rem);
}
.topbar__title{ min-width:0; }
.topbar h1{ font-size:1.15rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar .crumb{ color:var(--faint); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__right{ margin-left:auto; display:flex; align-items:center; gap:.7rem; }
.demo-pill{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--magenta-deep);
  background:var(--blush-2); border:1px solid var(--sakura); padding:.28rem .6rem; border-radius:99px; font-weight:600; }

.content{ padding:clamp(1.1rem,2.6vw,2rem); flex:1; }
.content.pad0{ padding:0; }

.hamburger{ display:none; background:none; border:1px solid var(--line-2); border-radius:9px; padding:.4rem; }

/* ==========================================================================
   ATOMS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  padding:.62rem 1.05rem; border-radius:var(--radius-pill); border:1.5px solid transparent;
  font-weight:500; font-size:.92rem; line-height:1; transition:all var(--dur); white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn--primary{ background:var(--grad-magenta); color:#fff; box-shadow:0 12px 26px -14px rgba(225,19,131,.7); }
.btn--primary:hover{ transform:translateY(-1px); box-shadow:0 16px 30px -12px rgba(225,19,131,.8); }
.btn--ghost{ background:var(--surface); border-color:var(--line-2); color:var(--text); }
.btn--ghost:hover{ border-color:var(--magenta); color:var(--magenta-deep); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; }
.btn--sm{ padding:.42rem .8rem; font-size:.82rem; }
.btn--danger{ background:var(--bad); color:#fff; }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.5; pointer-events:none; }

.pill{ display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:600; padding:.24rem .6rem; border-radius:99px; letter-spacing:.01em; }
.pill i{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill--ok{ color:var(--ok); background:var(--ok-bg); }
.pill--warn{ color:var(--warn); background:var(--warn-bg); }
.pill--bad{ color:var(--bad); background:var(--bad-bg); }
.pill--info{ color:var(--info); background:var(--info-bg); }
.pill--muted{ color:var(--muted); background:var(--surface-2); }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.card__pad{ padding:1.25rem 1.35rem; }
.card__head{ display:flex; align-items:center; gap:.75rem; padding:1rem 1.35rem; border-bottom:1px solid var(--line); }
.card__head h3{ font-size:1rem; }
.card__head .btn{ margin-left:auto; }
.section-title{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); font-weight:600; margin:0 0 .8rem; }

/* KPI grid */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.15rem 1.25rem; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); }
.kpi__label{ font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; display:flex; align-items:center; gap:.45rem; }
.kpi__label svg{ width:15px; height:15px; }
.kpi__value{ font-family:var(--font-display); font-size:2.15rem; font-weight:700; line-height:1; margin-top:.55rem; letter-spacing:-.022em; font-variant-numeric:tabular-nums; }
.kpi__value small{ font-family:var(--font-body); font-size:1rem; color:var(--muted); font-weight:400; }
.kpi__foot{ margin-top:.55rem; font-size:.8rem; color:var(--muted); }
.kpi__foot b.up{ color:var(--ok); } .kpi__foot b.down{ color:var(--bad); }
.kpi > *{ position:relative; z-index:1; }
.kpi--accent{ background:var(--grad-magenta); color:#fff; border:none; box-shadow:0 16px 34px -20px rgba(225,19,131,.5); }
.kpi--accent .kpi__label,.kpi--accent .kpi__foot{ color:rgba(255,255,255,.88); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; }
.stack{ display:flex; flex-direction:column; gap:1.15rem; }
.row{ display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* Toolbar */
.toolbar{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.15rem; flex-wrap:wrap; }
.search{ position:relative; flex:1; min-width:200px; max-width:360px; }
.search svg{ position:absolute; left:.75rem; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--faint); }
.search input{ width:100%; padding:.6rem .9rem .6rem 2.3rem; border:1.5px solid var(--line-2); border-radius:var(--radius-pill); background:var(--surface); }
.search input:focus{ outline:none; border-color:var(--magenta); }
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-pill); padding:.2rem; }
.seg button{ border:none; background:none; padding:.4rem .8rem; border-radius:99px; font-size:.85rem; color:var(--muted); font-weight:500; }
.seg button.active{ background:var(--surface); color:var(--magenta-deep); box-shadow:var(--shadow-sm); }

/* Table */
.table-wrap{ overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface); }
table.data{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:640px; }
table.data th{ text-align:left; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:.85rem 1rem; border-bottom:1px solid var(--line); background:var(--surface-2); position:sticky; top:0; }
table.data td{ padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data tr:last-child td{ border-bottom:none; }
table.data tbody tr{ transition:background var(--dur); cursor:default; }
table.data tbody tr:hover{ background:var(--surface-2); }
table.data tr.clickable{ cursor:pointer; }
.cell-main{ font-weight:600; }
.cell-sub{ font-size:.8rem; color:var(--muted); }

/* Forms */
.field{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem; }
.field label{ font-size:.8rem; color:var(--muted); font-weight:500; }
.field label .req{ color:var(--bad); }
.field input,.field select,.field textarea{
  padding:.6rem .8rem; border:1.5px solid var(--line-2); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--magenta); box-shadow:0 0 0 3px rgba(225,19,131,.12); }
.field textarea{ resize:vertical; min-height:70px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.hint{ font-size:.76rem; color:var(--faint); }

/* Toggle chips (si/no, bueno/revisar) */
.choice{ display:inline-flex; gap:.4rem; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice label{ padding:.5rem .95rem; border-radius:99px; border:1.5px solid var(--line-2); font-size:.88rem; font-weight:500; color:var(--muted); transition:all var(--dur); }
.choice input:checked + label{ border-color:var(--magenta); background:var(--blush); color:var(--magenta-deep); }
.choice.choice--ok input:checked + label{ border-color:var(--ok); background:var(--ok-bg); color:var(--ok); }
.choice.choice--bad input:checked + label{ border-color:var(--bad); background:var(--bad-bg); color:var(--bad); }

/* Signature pad */
.sigpad{ border:1.5px dashed var(--line-2); border-radius:var(--radius); background:var(--surface-2); position:relative; touch-action:none; }
.sigpad canvas{ display:block; width:100%; height:160px; border-radius:var(--radius); cursor:crosshair; }
.sigpad__hint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.4rem; color:var(--faint); font-size:.85rem; pointer-events:none; }
.sigpad__hint svg{ width:18px; height:18px; }
.sigpad__clear{ position:absolute; right:.5rem; top:.5rem; }

/* Control de stock (almacen) */
.stock-ctrl{ display:inline-flex; align-items:center; gap:.35rem; }
.stock-ctrl button:not(.btn){ width:30px; height:30px; border:1.5px solid var(--line-2); background:var(--surface); border-radius:9px; display:grid; place-items:center; color:var(--text); }
.stock-ctrl button:not(.btn):hover{ border-color:var(--magenta); color:var(--magenta-deep); }
.stock-ctrl svg{ width:15px; height:15px; }

/* Empty state */
.empty{ text-align:center; padding:3rem 1rem; color:var(--muted); }
.empty svg{ width:44px; height:44px; color:var(--faint); margin-bottom:.8rem; }

/* ==========================================================================
   MAP
   ========================================================================== */
.map-layout{ display:grid; grid-template-columns:340px 1fr; height:calc(100dvh - var(--topbar-h)); }
.map-side{ border-right:1px solid var(--line); background:var(--surface); overflow-y:auto; padding:1.1rem; }
.map-side h3{ font-size:1rem; margin-bottom:.9rem; }
#map{ height:100%; width:100%; background:#e9e3e6; z-index:1; }
.map-legend{ display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:1rem; font-size:.82rem; }
.map-legend span{ display:inline-flex; align-items:center; gap:.35rem; color:var(--muted); }
.map-legend i{ width:11px; height:11px; border-radius:50%; }
.client-mini{ border:1px solid var(--line); border-radius:var(--radius); padding:.75rem .85rem; margin-bottom:.6rem; transition:border-color var(--dur), box-shadow var(--dur); cursor:pointer; }
.client-mini:hover{ border-color:var(--magenta); box-shadow:var(--shadow-sm); }
.client-mini .spread{ margin-bottom:.3rem; }
.client-mini b{ font-size:.92rem; }
.client-mini .cell-sub{ font-size:.78rem; }

/* Planificador: pestanas de ruta */
.route-tabs{ display:flex; flex-wrap:wrap; gap:.4rem; }
.route-tab{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:99px; border:1.5px solid var(--line-2); background:var(--surface); font-size:.84rem; font-weight:500; color:var(--muted); }
.route-tab i{ width:9px; height:9px; border-radius:50%; background:var(--rc,#ccc); }
.route-tab span{ background:var(--surface-2); border-radius:99px; padding:0 .4rem; font-size:.72rem; color:var(--muted); }
.route-tab.active{ border-color:var(--rc,var(--magenta)); color:var(--ink); background:var(--surface); box-shadow:var(--shadow-sm); }
.route-tab--new{ color:var(--magenta-deep); border-style:dashed; }
.route-tab--new svg{ width:14px; height:14px; }

.planner-tip{ font-size:.8rem; color:var(--muted); background:var(--surface-2); border-radius:10px; padding:.55rem .7rem; margin:.6rem 0; line-height:1.4; }
.planner-tip svg{ width:14px; height:14px; vertical-align:-2px; color:var(--magenta); }
.planner-debt{ font-size:.82rem; font-weight:600; color:var(--bad); background:var(--bad-bg); border-radius:10px; padding:.5rem .7rem; margin-bottom:.6rem; }
.planner-debt svg{ width:15px; height:15px; vertical-align:-3px; }

.stop-list{ display:flex; flex-direction:column; }
.stop-row{ display:grid; grid-template-columns:auto 1fr auto; gap:.6rem; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--line); cursor:pointer; }
.stop-row:last-child{ border-bottom:none; }
.stop-n{ width:26px; height:26px; border-radius:50%; color:#fff; font-weight:700; font-size:.8rem; display:grid; place-items:center; }
.stop-info b{ display:block; font-size:.88rem; font-weight:600; }
.stop-info span{ font-size:.76rem; color:var(--muted); }
.stop-acts{ display:flex; gap:.1rem; }
.stop-acts button{ background:none; border:none; color:var(--faint); padding:.25rem; border-radius:7px; display:grid; }
.stop-acts button:hover{ background:var(--surface-2); color:var(--text); }
.stop-acts svg{ width:15px; height:15px; }
.stop-acts [data-pmove="up"] svg{ transform:rotate(-90deg); }
.stop-acts [data-pmove="down"] svg{ transform:rotate(90deg); }

/* Marcadores numerados de ruta */
.leaflet-num{ background:none; border:none; }
.numpin{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.35); }
.numpin.is-impago{ border-color:#C4006A; box-shadow:0 0 0 2px #fff, 0 0 0 4px #C4006A, 0 3px 8px rgba(0,0,0,.35); }

/* Etiquetas de provincia */
.prov-label{ background:none; border:none; box-shadow:none; color:rgba(26,11,18,.5); font-family:var(--font-body); font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
.prov-label::before{ display:none; }

.leaflet-pin{ display:grid; place-items:center; }
.leaflet-pin svg{ filter:drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.leaflet-popup-content-wrapper{ border-radius:14px; }
.leaflet-popup-content{ margin:.85rem 1rem; font-family:var(--font-body); }
.popup-title{ font-weight:600; font-size:1rem; margin-bottom:.2rem; }
.popup-actions{ display:flex; gap:.4rem; margin-top:.7rem; }

/* ==========================================================================
   MODAL / TOAST
   ========================================================================== */
#modal-root:empty{ display:none; }
.modal-backdrop{ position:fixed; inset:0; background:rgba(21,7,16,.5); backdrop-filter:blur(4px); z-index:100; display:grid; place-items:center; padding:1.2rem; animation:fade .2s var(--ease); }
.modal{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:min(560px,100%); max-height:92dvh; overflow:hidden; display:flex; flex-direction:column; animation:pop .28s var(--ease); }
.modal--wide{ width:min(760px,100%); }
.modal__head{ display:flex; align-items:center; gap:.75rem; padding:1.05rem 1.35rem; border-bottom:1px solid var(--line); }
.modal__head h3{ font-size:1.12rem; }
.modal__head .close{ margin-left:auto; background:none; border:none; color:var(--muted); border-radius:8px; padding:.35rem; display:grid; }
.modal__head .close:hover{ background:var(--surface-2); color:var(--text); }
.modal__body{ padding:1.35rem; overflow-y:auto; }
.modal__foot{ padding:1rem 1.35rem; border-top:1px solid var(--line); display:flex; gap:.6rem; justify-content:flex-end; background:var(--surface-2); }

#toast-root{ position:fixed; bottom:1.2rem; right:1.2rem; z-index:200; display:flex; flex-direction:column; gap:.6rem; }
.toast{ background:var(--ink); color:#fff; padding:.8rem 1.1rem; border-radius:var(--radius); box-shadow:var(--shadow-lg); font-size:.9rem; display:flex; align-items:center; gap:.6rem; animation:slidein .3s var(--ease); max-width:340px; }
.toast svg{ width:18px; height:18px; flex:none; }
.toast--ok{ background:var(--ok); }
.toast--bad{ background:var(--bad); }

@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none} }
@keyframes slidein{ from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:none} }

/* ==========================================================================
   FICHA CLIENTE
   ========================================================================== */
.ficha-head{ display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:start; margin-bottom:1.25rem; }
.ficha-head h1{ font-family:var(--font-display); font-size:1.8rem; font-weight:700; letter-spacing:-.02em; }
.ficha-head .meta{ color:var(--muted); margin-top:.3rem; display:flex; gap:1rem; flex-wrap:wrap; font-size:.9rem; }
.ficha-head .meta span{ display:inline-flex; align-items:center; gap:.35rem; }
.dl{ display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.1rem; font-size:.9rem; }
.dl dt{ color:var(--muted); }
.dl dd{ margin:0; font-weight:500; }

.visit-row{ display:grid; grid-template-columns:auto 1fr auto; gap:.9rem; padding:.85rem 0; border-bottom:1px solid var(--line); align-items:center; }
.visit-row:last-child{ border-bottom:none; }
.visit-num{ width:34px; height:34px; border-radius:10px; background:var(--blush); color:var(--magenta-deep); display:grid; place-items:center; font-weight:600; }
.visit-tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.3rem; }
.mini-tag{ font-size:.74rem; color:var(--muted); background:var(--surface-2); padding:.15rem .5rem; border-radius:6px; }

.timeline-week{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600; margin:1.4rem 0 .6rem; }

/* Tarjeta de parada (Mi ruta) */
.stop-card{ display:block; text-decoration:none; cursor:pointer; transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.stop-card:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-1px); }
.stop-head{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.6rem; }
.stop-head .visit-num{ flex:none; }
.stop-head .stop-title{ flex:1; min-width:0; font-size:1.05rem; font-weight:600; line-height:1.25; }
.stop-head .pill{ flex:none; margin-top:.15rem; }
.miruta-wrap{ max-width:900px; }
.stop-actions{ display:flex; gap:.5rem; margin-top:.9rem; }
@media (max-width: 560px){ .stop-actions .btn{ flex:1; } }

/* Ficha tecnico (replica hoja de papel) */
.hoja{ max-width:720px; margin:0 auto; }
.hoja__band{ background:var(--grad-magenta); color:#fff; border-radius:var(--radius) var(--radius) 0 0; padding:.7rem 1.1rem; font-weight:600; letter-spacing:.02em; display:flex; align-items:center; gap:.5rem; }
.hoja__section{ border:1px solid var(--line); border-top:none; padding:1.15rem 1.25rem; background:var(--surface); }
.hoja__section:last-of-type{ border-radius:0 0 var(--radius) var(--radius); }
.hoja__foot{ display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; background:var(--surface-2); border-radius:0 0 var(--radius) var(--radius); }
@media (max-width: 480px){ .hoja__foot .btn{ flex:1; justify-content:center; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .grid-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px){
  :root{ --sidebar-w:0px; }
  .shell{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; z-index:60; width:260px; left:0; transform:translateX(-105%); transition:transform var(--dur); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:none; }
  .hamburger{ display:inline-flex; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .map-layout{ grid-template-columns:1fr; grid-template-rows:auto 1fr; height:auto; }
  .map-side{ max-height:38vh; }
  #map{ height:60vh; }
  .login{ grid-template-columns:1fr; }
  .login__aside{ display:none; }
  .scrim{ position:fixed; inset:0; background:rgba(21,7,16,.4); z-index:55; }
}
@media (max-width: 640px){
  .topbar{ padding:0 .9rem; gap:.55rem; }
  .topbar h1{ font-size:1.05rem; }
  .topbar .crumb{ display:none; }
  .topbar__right{ gap:.4rem; }
  .lbl{ display:none; }
  .demo-pill{ padding:.28rem .5rem; }
  .miruta-truck{ display:none; }
}
@media (max-width: 560px){
  .field-row{ grid-template-columns:1fr; }
  .ficha-head{ grid-template-columns:1fr; }
  .content{ padding:1rem; }
}
@media (max-width: 430px){
  .demo-pill{ display:none; }
  .hoja__band{ font-size:.92rem; }
}