:root{
  --verde-900:#051f20;
  --verde-800:#0a2e2c;
  --verde-700:#0d3a33;
  --verde-600:#13524a;
  --verde-500:#1d6b5e;
  --verde-acento:#8cb79b;
  --verde-claro:#dbf0dd;
  --verde-borde:#1d4d44;
  --texto:#0c2420;
  --texto-suave:#5b7a6e;
  --blanco:#ffffff;
  --gris-bg:#eef3f0;
  --linea:#e2ebe5;
  --rojo:#c0392b;
  --rojo-bg:#fdecea;
  --sombra-sm:0 1px 2px rgba(5,31,32,.06), 0 2px 8px rgba(5,31,32,.05);
  --sombra:0 8px 30px rgba(5,31,32,.10);
  --sombra-lg:0 18px 50px rgba(5,31,32,.22);
  --radio:16px;
  --radio-sm:11px;
  --sidebar-w:260px;

  /* ====== TAMANO DEL LOGO (imagenes/sonso.png) — cambia estos valores a gusto ====== */
  /* ====== LOGO (imagenes/sonso.png) ======
     --logo-*       = tamano VISIBLE del logo. Cambia SOLO estos para agrandar/achicar;
                      el logo crece desde su centro y NO mueve el menu ni el formulario.
     --logo-*-area  = espacio reservado (footprint). Normalmente no lo tocas; súbelo solo
                      si agrandas MUCHO el logo y quieres mas aire alrededor. */
  --logo-login:220px;    --logo-login-area:132px;
  --logo-sidebar:120px;   --logo-sidebar-area:76px;
  --logo-topbar:80px;    --logo-topbar-area:44px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--gris-bg);
  color:var(--texto);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
a{color:var(--verde-500);text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--verde-acento);outline-offset:2px;border-radius:6px}

/* ===================== LOGIN ===================== */
.login-wrap{
  min-height:100dvh;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(1200px 600px at 50% -10%, var(--verde-700), var(--verde-900));
}
.login-card{
  width:100%;max-width:380px;background:var(--blanco);border-radius:22px;
  padding:2.6rem 2rem;box-shadow:var(--sombra-lg)
}
.login-logo{
  position:relative;height:var(--logo-login-area);margin:0 auto 1rem;
  display:grid;place-items:center;color:var(--verde-500);font-weight:800;font-size:1.6rem;letter-spacing:-1px
}
.login-logo img{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--logo-login);height:var(--logo-login);object-fit:contain
}
.login-card h1{text-align:center;font-size:1.3rem;margin:.2rem 0 .1rem;color:var(--verde-900);letter-spacing:-.3px}
.login-card p.sub{text-align:center;color:var(--texto-suave);margin:0 0 1.6rem;font-size:.88rem}

label{display:block;font-size:.78rem;font-weight:600;color:var(--texto-suave);margin:.9rem 0 .35rem;letter-spacing:.2px}
input,select,textarea{
  width:100%;padding:.72rem .9rem;border:1.5px solid var(--linea);border-radius:var(--radio-sm);
  font-size:.95rem;background:var(--blanco);color:var(--texto);transition:border-color .15s, box-shadow .15s
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde-acento);box-shadow:0 0 0 4px rgba(140,183,155,.22)}
.btn-primary{
  width:100%;margin-top:1.4rem;background:var(--verde-500);color:var(--blanco);
  border:none;padding:.9rem;border-radius:12px;font-weight:700;font-size:1rem;transition:background .15s, transform .05s
}
.btn-primary:hover{background:var(--verde-600)}
.btn-primary:active{transform:translateY(1px)}
.alerta{background:var(--rojo-bg);color:var(--rojo);padding:.7rem .9rem;border-radius:10px;font-size:.85rem;margin-top:1rem;border:1px solid #f5c6c0}

/* ===================== LAYOUT / SIDEBAR ===================== */
.layout{min-height:100dvh}

.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--verde-900),var(--verde-800));
  color:var(--verde-claro);display:flex;flex-direction:column;
  z-index:60;transition:transform .26s ease;border-right:1px solid var(--verde-borde)
}
.sb-brand{position:relative;display:grid;place-items:center;height:var(--logo-sidebar-area);padding:0 1.25rem;border-bottom:1px solid rgba(255,255,255,.06)}
.sb-logo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--logo-sidebar);height:var(--logo-sidebar);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.15rem;letter-spacing:-1px
}
.sb-logo img{width:100%;height:100%}
.sb-brand-txt{font-weight:800;font-size:1.05rem;letter-spacing:.2px;color:#fff}

/* Logo por imagen (imagenes/sonso.png): se ve completo, sin recortar ni deformar,
   y crece desde su centro dentro de un espacio reservado, sin mover el resto del layout.
   Si la imagen no existe, cae a la letra "S". Controla el tamano con las variables --logo-*. */
.login-logo img,.sb-logo img,.brand-sm .dot img{object-fit:contain;display:block}

.sb-nav{flex:1;overflow-y:auto;padding:1rem .8rem;display:flex;flex-direction:column;gap:.15rem}
.sb-section{
  font-size:.66rem;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;
  color:var(--verde-acento);opacity:.7;padding:.9rem .9rem .35rem
}
.sb-link{
  display:flex;align-items:center;gap:.75rem;padding:.62rem .85rem;border-radius:11px;
  color:var(--verde-claro);font-size:.92rem;font-weight:600;
  transition:background .14s, color .14s;position:relative
}
.sb-link:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-link.is-active{background:var(--verde-500);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.sb-link.is-active::before{
  content:"";position:absolute;left:-.8rem;top:50%;transform:translateY(-50%);
  width:4px;height:60%;border-radius:0 4px 4px 0;background:var(--verde-acento)
}
.sb-ico{width:1.4rem;text-align:center;font-size:1.05rem;flex:0 0 auto}

.sb-foot{padding:1rem .9rem;border-top:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:.7rem}
.sb-user{display:flex;align-items:center;gap:.7rem;min-width:0}
.sb-avatar{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--verde-acento);color:var(--verde-900);font-weight:800;font-size:1rem
}
.sb-user-meta{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.sb-user-meta strong{color:#fff;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-rol{font-size:.74rem;color:var(--verde-acento);text-transform:capitalize}
.sb-salir{
  display:block;text-align:center;color:var(--verde-claro);border:1px solid var(--verde-borde);
  padding:.55rem;border-radius:10px;font-size:.85rem;font-weight:600;transition:background .14s
}
.sb-salir:hover{background:var(--verde-700);color:#fff}

.backdrop{position:fixed;inset:0;background:rgba(5,31,32,.5);backdrop-filter:blur(2px);z-index:55;display:none}
.backdrop.show{display:block}

/* topbar movil */
.topbar{
  display:none;align-items:center;gap:.9rem;padding:.7rem 1rem;
  background:var(--verde-900);color:var(--verde-claro);position:sticky;top:0;z-index:40;box-shadow:var(--sombra)
}
.hamb{background:none;border:none;width:40px;height:40px;display:grid;align-content:center;gap:5px;padding:9px 8px;border-radius:10px}
.hamb span{display:block;height:2.5px;border-radius:3px;background:var(--verde-claro)}
.hamb:hover{background:var(--verde-800)}
.brand-sm{position:relative;width:var(--logo-topbar-area);height:var(--logo-topbar-area);flex:0 0 auto}
.brand-sm .dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--logo-topbar);height:var(--logo-topbar);display:grid;place-items:center;color:#fff;font-weight:800}
.brand-sm .dot img{width:100%;height:100%}

.content{margin-left:var(--sidebar-w);min-height:100dvh;display:flex;flex-direction:column}

/* ===================== CONTENEDOR / TIPOGRAFIA ===================== */
.container{width:100%;max-width:1160px;margin:0 auto;padding:2rem 1.8rem 4rem}
.page-title{font-size:1.6rem;margin:.3rem 0 .25rem;color:var(--verde-900);letter-spacing:-.4px;font-weight:800}
.page-sub{color:var(--texto-suave);margin:0 0 1.8rem;font-size:.95rem;max-width:62ch}
.breadcrumb{font-size:.85rem;color:var(--texto-suave);margin-bottom:.5rem}
.breadcrumb a{font-weight:600}
.breadcrumb a:hover{text-decoration:underline}

/* ===================== DASHBOARD: CANALES ===================== */
.canal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem}
.canal-card{
  background:var(--blanco);border-radius:var(--radio);padding:1.6rem;box-shadow:var(--sombra-sm);
  border:1px solid var(--linea);text-align:left;display:flex;flex-direction:column;gap:.7rem;
  transition:transform .16s, box-shadow .16s, border-color .16s;border-left:5px solid var(--verde-acento)
}
.canal-card:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-left-color:var(--verde-500)}
.canal-card .icono{width:52px;height:52px;border-radius:14px;background:var(--verde-claro);display:grid;place-items:center;font-size:1.5rem}
.canal-card .nombre{font-size:1.2rem;font-weight:800;color:var(--verde-900);letter-spacing:.2px}
.canal-card .meta{font-size:.85rem;color:var(--texto-suave)}

/* ===================== ZONAS / RUTAS ===================== */
.zona-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.2rem}
.zona-card{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra-sm);overflow:hidden;border:1px solid var(--linea)}
.zona-head{
  background:linear-gradient(120deg,var(--verde-800),var(--verde-700));
  color:var(--verde-claro);padding:.9rem 1.1rem;display:flex;justify-content:space-between;align-items:center;gap:.6rem
}
.zona-head .z-nombre{font-weight:700;font-size:.98rem}
.zona-head .z-total{background:var(--verde-acento);color:var(--verde-900);font-weight:800;font-size:.74rem;padding:.22rem .65rem;border-radius:999px;white-space:nowrap}
.ruta-row{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.72rem 1.1rem;
  border-top:1px solid var(--linea);cursor:pointer;transition:background .12s, padding-left .12s
}
.ruta-row:hover{background:var(--gris-bg);padding-left:1.3rem}
.ruta-row .r-nombre{font-weight:600;font-size:.92rem}
.ruta-row .r-count{font-size:.78rem;color:var(--texto-suave);background:var(--gris-bg);padding:.16rem .58rem;border-radius:999px;font-weight:700;min-width:2rem;text-align:center}
.ruta-row.activa{background:var(--verde-700);color:#fff}
.ruta-row.activa:hover{background:var(--verde-700)}
.ruta-row.activa .r-nombre{color:#fff}
.ruta-row.activa .r-count{background:var(--verde-500);color:#fff}

/* ===================== PANEL DE CLIENTES (inline, render JS) ===================== */
.clientes-panel{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);margin-top:1.6rem;overflow:hidden;box-shadow:var(--sombra-sm);scroll-margin-top:1rem}
.clientes-panel-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;padding:1rem 1.2rem;background:linear-gradient(120deg,var(--verde-900),var(--verde-700));color:var(--verde-claro)}
.clientes-panel-head h3{margin:0;font-size:1rem;font-weight:700}
.btn-nuevo{background:var(--verde-acento);color:var(--verde-900);border:none;padding:.55rem 1rem;border-radius:10px;font-weight:700;font-size:.85rem;transition:background .14s, transform .05s}
.btn-nuevo:hover{background:#7aa98a}
.btn-nuevo:active{transform:translateY(1px)}

/* buscador en tiempo real dentro del panel de ruta */
.cli-buscar{position:relative;display:flex;align-items:center;margin:1.1rem 1.2rem 0}
.cli-buscar-ico{position:absolute;left:.9rem;color:var(--texto-suave);pointer-events:none}
.cli-buscar input{padding-left:2.5rem;padding-right:5rem}
.cli-buscar-count{position:absolute;right:.95rem;font-size:.76rem;font-weight:700;color:var(--texto-suave);pointer-events:none}

/* tarjetas de cliente */
.cli-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem;padding:1.2rem}
.cli-card{
  border:1px solid var(--linea);border-radius:14px;padding:1rem 1.05rem;background:#fbfdfb;
  display:flex;flex-direction:column;gap:.55rem;transition:box-shadow .15s, transform .15s, border-color .15s
}
.cli-card:hover{box-shadow:var(--sombra-sm);transform:translateY(-2px);border-color:var(--verde-acento)}
.cli-card-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.cli-name{margin:0;font-size:1.02rem;font-weight:700;color:var(--verde-900);line-height:1.25}
.cli-meta{margin:0;display:flex;align-items:flex-start;gap:.4rem;font-size:.86rem;color:var(--texto-suave)}
.cli-meta .pin{flex:0 0 auto;margin-top:.05rem;color:var(--verde-500)}
.cli-fecha{margin:0;display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--verde-600);font-weight:600}
.cli-fecha .pin{flex:0 0 auto;color:var(--verde-500)}

/* sello Actualizado / Sin actualizar */
.estado-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;border:1.5px solid transparent;white-space:nowrap}
.estado-badge.is-upd{background:var(--verde-claro);color:var(--verde-600);border-color:#bfe0c7}
.estado-badge.is-noupd{background:#f1f4f2;color:var(--texto-suave);border-color:var(--linea)}
.cli-actions{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.2rem}
.cli-actions .btn-ico{flex:1;text-align:center;min-width:64px}

.cod-badge{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--verde-700);color:#fff;padding:.18rem .55rem;border-radius:7px;font-size:.76rem;font-weight:700;letter-spacing:.3px}
.btn-ico{border:1.5px solid var(--linea);background:#fff;border-radius:9px;padding:.4rem .7rem;font-size:.78rem;font-weight:600;color:var(--verde-600);transition:background .14s, color .14s, border-color .14s}
.btn-ico:hover{background:var(--verde-700);color:#fff;border-color:var(--verde-700)}
.btn-ico.peligro{color:var(--rojo);border-color:#f0c8c2}
.btn-ico.peligro:hover{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.acciones{display:flex;gap:.4rem;justify-content:flex-end;flex-wrap:wrap}
.vacio{padding:2rem 1.2rem;text-align:center;color:var(--texto-suave);font-size:.92rem}

/* ===================== TABLAS ===================== */
.tabla-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
table.tabla{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
table.tabla th{background:#eaf1ec;color:var(--texto-suave);text-align:left;padding:.65rem .9rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;font-weight:700;white-space:nowrap}
table.tabla td{padding:.7rem .9rem;border-top:1px solid var(--linea);vertical-align:middle}
table.tabla tr:hover td{background:#f3f8f4}

/* ===================== MODAL ===================== */
.modal-overlay{position:fixed;inset:0;background:rgba(5,31,32,.55);backdrop-filter:blur(2px);display:none;align-items:flex-start;justify-content:center;padding:2rem 1rem;z-index:80;overflow-y:auto}
.modal-overlay.abierto{display:flex}
.modal{background:#fff;border-radius:20px;width:100%;max-width:660px;box-shadow:var(--sombra-lg);animation:subir .2s ease}
@keyframes subir{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 1.5rem;border-bottom:1px solid var(--linea)}
.modal-head h2{margin:0;font-size:1.15rem;color:var(--verde-900);font-weight:800}
.modal-head .cerrar{background:none;border:none;font-size:1.6rem;color:var(--texto-suave);line-height:1;width:36px;height:36px;border-radius:9px}
.modal-head .cerrar:hover{background:var(--gris-bg);color:var(--verde-900)}
.modal-body{padding:1.3rem 1.5rem;max-height:70vh;overflow-y:auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.1rem}
.modal-foot{padding:1.1rem 1.5rem;border-top:1px solid var(--linea);display:flex;justify-content:flex-end;gap:.6rem;flex-wrap:wrap}
.btn-ghost{background:#fff;border:1.5px solid var(--linea);color:var(--texto-suave);padding:.72rem 1.3rem;border-radius:11px;font-weight:600;transition:background .14s}
.btn-ghost:hover{background:var(--gris-bg)}
.btn-save{background:var(--verde-500);border:none;color:#fff;padding:.72rem 1.5rem;border-radius:11px;font-weight:700;transition:background .14s, transform .05s}
.btn-save:hover{background:var(--verde-600)}
.btn-save:active{transform:translateY(1px)}

/* vista "Ver" cliente: secciones */
.ver-block{margin-bottom:1.3rem}
.ver-block:last-child{margin-bottom:0}
.ver-block-title{display:flex;align-items:center;gap:.5rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.8px;font-weight:700;color:var(--verde-500);margin:0 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--linea)}
.ver-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.4rem}
.modal.ver .campo{padding:0}
.modal.ver .campo .k{font-size:.7rem;text-transform:uppercase;color:var(--texto-suave);letter-spacing:.4px;margin-bottom:.15rem}
.modal.ver .campo .v{font-size:.95rem;font-weight:600;color:var(--texto);word-break:break-word}

/* ===================== ADMIN / CARDS GENERICAS ===================== */
.card{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra-sm);padding:1.6rem;margin-bottom:1.5rem;border:1px solid var(--linea)}
.card h2{margin:0 0 1.1rem;font-size:1.1rem;color:var(--verde-900);font-weight:800}
.card.vacio{padding:2rem;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.chip{display:flex;align-items:center;gap:.4rem;background:var(--gris-bg);padding:.45rem .8rem;border-radius:999px;font-size:.85rem;cursor:pointer;transition:background .14s}
.chip:hover{background:var(--verde-claro)}
.badge-rol{font-size:.72rem;font-weight:700;padding:.18rem .6rem;border-radius:999px;text-transform:capitalize}
.badge-rol.admin{background:var(--verde-700);color:#fff}
.badge-rol.usuario{background:var(--verde-claro);color:var(--verde-600)}

/* ===================== BARRA DE ESTADISTICA (inicio) ===================== */
.stats-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--linea);border-left:5px solid var(--verde-acento);
  border-radius:var(--radio);box-shadow:var(--sombra-sm);padding:1.1rem 1.4rem;margin-bottom:1.8rem}
.stat{display:flex;align-items:center;gap:.9rem;min-width:0}
.stat-ico{width:46px;height:46px;flex:0 0 auto;border-radius:12px;background:var(--verde-claro);display:grid;place-items:center;font-size:1.4rem}
.stat-num{font-size:1.7rem;font-weight:800;color:var(--verde-900);line-height:1;letter-spacing:-.5px}
.stat-de{font-size:.95rem;font-weight:600;color:var(--texto-suave)}
.stat-label{font-size:.85rem;color:var(--texto-suave);margin-top:.2rem}

/* ===================== DESCARGAS (solo admin) ===================== */
.btn-descargar{margin-top:.5rem;align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;color:var(--verde-600);background:var(--verde-claro);border:1px solid #bfe0c7;border-radius:9px;padding:.42rem .72rem;cursor:pointer;transition:background .14s}
.btn-descargar:hover{background:#cfe9d5}

.canal-toolbar{margin:0 0 1.5rem}
.btn-descargar-canal{display:inline-flex;align-items:center;gap:.45rem;background:var(--verde-500);color:#fff;border:none;border-radius:11px;padding:.7rem 1.1rem;font-weight:700;font-size:.9rem;box-shadow:var(--sombra-sm);transition:background .14s,transform .05s}
.btn-descargar-canal:hover{background:var(--verde-600)}
.btn-descargar-canal:active{transform:translateY(1px)}

.zona-head-right{display:flex;align-items:center;gap:.5rem}
.btn-dl-zona{background:rgba(255,255,255,.16);color:var(--verde-claro);border:1px solid rgba(255,255,255,.28);border-radius:8px;width:30px;height:27px;display:grid;place-items:center;font-size:.85rem;line-height:1;padding:0;cursor:pointer;transition:background .14s}
.btn-dl-zona:hover{background:rgba(255,255,255,.3)}

.ruta-row-right{display:flex;align-items:center;gap:.5rem}
.btn-dl-ruta{background:#fff;border:1.5px solid var(--linea);color:var(--verde-600);border-radius:8px;width:27px;height:25px;display:grid;place-items:center;font-size:.82rem;line-height:1;padding:0;cursor:pointer;transition:background .14s,color .14s,border-color .14s}
.btn-dl-ruta:hover{background:var(--verde-700);color:#fff;border-color:var(--verde-700)}
.ruta-row.activa .btn-dl-ruta{background:var(--verde-500);border-color:var(--verde-500);color:#fff}

.panel-head-acciones{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.btn-dl-panel{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.14);color:var(--verde-claro);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:.5rem .85rem;font-weight:700;font-size:.85rem;cursor:pointer;transition:background .14s}
.btn-dl-panel:hover{background:rgba(255,255,255,.26)}

/* aviso informativo (ej. sesión expirada) */
.aviso{background:var(--verde-claro);color:var(--verde-600);border:1px solid #bfe0c7;padding:.7rem .9rem;border-radius:10px;font-size:.85rem;margin-top:1rem}

/* ===================== BADGES A / C (actualizados / clientes) ===================== */
.ac-badges{display:inline-flex;align-items:center;gap:.35rem}
.ac-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:800;padding:.16rem .5rem;border-radius:999px;line-height:1;white-space:nowrap}
.ac-badge .ac-k{font-size:.62rem;opacity:.8}
.ac-badge.act{background:var(--verde-acento);color:var(--verde-900)}
.ac-badge.cli{background:rgba(255,255,255,.16);color:var(--verde-claro);border:1px solid rgba(255,255,255,.22)}
.ruta-row .ac-badge.cli{background:var(--gris-bg);color:var(--texto-suave);border:1px solid var(--linea)}
.ruta-row .ac-badge.act{background:var(--verde-claro);color:var(--verde-600)}
.ruta-row.activa .ac-badge.cli{background:var(--verde-500);color:#fff;border-color:var(--verde-500)}
.ruta-row.activa .ac-badge.act{background:var(--verde-acento);color:var(--verde-900)}

/* ===================== MODULO CLIENTES INACTIVOS (inicio) ===================== */
.modulo-inactivos{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--linea);border-left:5px solid #c9a227;border-radius:var(--radio);box-shadow:var(--sombra-sm);padding:1rem 1.3rem;margin-bottom:1.8rem;transition:box-shadow .15s,transform .15s}
.modulo-inactivos:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.modulo-inactivos .mi-ico{width:44px;height:44px;flex:0 0 auto;border-radius:12px;background:#fdf6e3;display:grid;place-items:center;font-size:1.35rem}
.modulo-inactivos .mi-body{display:flex;flex-direction:column;min-width:0;flex:1}
.modulo-inactivos strong{color:var(--verde-900);font-size:1rem}
.modulo-inactivos .mi-sub{color:var(--texto-suave);font-size:.83rem}
.modulo-inactivos .mi-chevron{font-size:1.6rem;color:var(--texto-suave);font-weight:400}

/* resumen de canales por usuario (con boton Editar) */
.canales-view{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.canales-resumen{color:var(--texto);font-size:.9rem}
.canales-edit{margin-top:.2rem}

/* chips de zona (Distribuidores) en admin de usuarios */
.chip-zona{background:#eef6f0;border:1px dashed var(--verde-acento)}
.zd-sep{font-size:.8rem;color:var(--texto-suave);font-weight:700;margin-left:.2rem}

/* ===================== TOAST ===================== */
.toast{position:fixed;bottom:1.4rem;right:1.4rem;background:var(--verde-900);color:#fff;padding:.9rem 1.3rem;border-radius:13px;box-shadow:var(--sombra-lg);z-index:100;opacity:0;transform:translateY(10px);transition:.25s;font-size:.9rem;max-width:calc(100vw - 2.8rem)}
.toast.show{opacity:1;transform:translateY(0)}

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--sombra-lg)}
  .sidebar.open{transform:none}
  .content{margin-left:0}
  .topbar{display:flex}
  .container{padding:1.4rem 1.1rem 3.2rem}
  .page-title{font-size:1.4rem}
}
@media (max-width:560px){
  .container{padding:1.1rem .9rem 3rem}
  .grid-2{grid-template-columns:1fr}
  .ver-grid{grid-template-columns:1fr}
  .cli-grid{grid-template-columns:1fr;padding:1rem}
  .cli-buscar{margin:.9rem 1rem 0}
  .clientes-panel-head{padding:.9rem 1rem}
  .modal-head,.modal-body,.modal-foot{padding-left:1.1rem;padding-right:1.1rem}
  .modal-foot{flex-direction:column-reverse}
  .modal-foot .btn-ghost,.modal-foot .btn-save{width:100%;text-align:center}
  .acciones{justify-content:flex-start}
  .toast{left:.9rem;right:.9rem;bottom:.9rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}