/* styles.css — comentado (sin cambios funcionales) */
/* --------------------------------------------------------------------------------
   - Layout grid (sidebar izquierda 320px + mapa)
   - Select DL más corto (anchos controlados)
   - Panel flotante por encima del mapa (z-index alto)
   - Semáforo de capacidad en panel izquierdo (verde/amarillo/naranja)
   - Tooltips JS (clase .tip-pop) y CSS (data-tip) coexistentes
--------------------------------------------------------------------------------- */

html, body { height: 100%; margin: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.app { display: grid; grid-template-columns: 320px 1fr; height: 100%; }

/* Sidebar izquierda */
.left { padding: 12px; border-right: 1px solid #e5e7eb; background: #fafafa; overflow: auto; }
.left h1 { margin: 8px 0 12px; font-size: 18px; }
.left .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.left .toolbar { display: flex; gap: 8px; margin: 6px 0; align-items: center; flex-wrap:wrap; }
.left .toggle { margin: 8px 0 6px; font-size: 13px; color: #334155; }
.rutas { margin-top: 8px; }

/* Anchos de selects (DL más corto) */
#selEstado { width: 120px; max-width: 100%; }
#selDL     { width: clamp(160px, 28vw, 160px); max-width: 100%; }

/* Fila compacta para filtros / toolbar */
.topbar, .toolbar, .filters {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;               /* separación entre Estado y DL */
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Inputs uniformes */
#selEstado, #selDL {
  margin: 0;
  height: 34px;
  line-height: 34px;
}

/* Wrapper opcional para selects */
.select-wrap { max-width: 100%; overflow: hidden; }
.select-wrap select { width: 100%; }

/* Main derecha + mapa */
.right { position: relative; }
#map { position: absolute; inset: 0; }

/* Barra de estado (overlay) */
.status { position: absolute; left: 12px; bottom: 12px; background: rgba(0,0,0,.6); color: #fff;
          padding: 6px 10px; border-radius: 8px; font-size: 20px; z-index: 3000; }

/* Clusters (marcadores) */
.cluster-ico { pointer-events: auto; }
.cluster-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #1f2937; display: flex;
  align-items: center; justify-content: center; font: 700 12px/1.0 system-ui, sans-serif; color: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.1); user-select: none; }
.cluster-dot span { transform: translateY(0.5px); }

/* Panel flotante (asignación) */
.cluster-panel { position: absolute; right: 16px; top: 16px; width: 360px; max-height: calc(100vh - 32px);
  overflow: auto; background: #ffffff; border: 1px solid #d1d5db; border-radius: 12px;
  box-shadow: 0 10px 28px rgba(31,41,55,.25); z-index: 9999; }
.cp-header { display:flex; align-items:center; justify-content: space-between; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; background: #fff; z-index: 1; }
.cp-header .title { font-weight: 700; color: #111827; }
.cp-header .close { border: 0; background: #f3f4f6; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
.cp-sub { padding: 10px 14px; color: #4b5563; border-bottom: 1px solid #f3f4f6; font-size: 12px; }
.cp-list { padding: 8px; }

.cluster-item { display:flex; align-items:center; justify-content: space-between; gap: 8px; padding: 8px 10px;
  border: 2px solid #263066; border-radius: 10px; margin: 6px 4px; background: #fff; }
.cluster-item .mini { border:0; padding: 6px 10px; border-radius: 8px; background: #111827; color: #fff; cursor:pointer; }
.cluster-item .mini:hover{ filter: brightness(1.05); }
.cc-left { display:flex; flex-direction: column; gap: 2px; }
.cc-title { font-weight: 700; color:#111827; }
.cc-sub { font-size: 12px; color:#6b7280; }

/* Rutas list (izq) */
.ruta-tag { display:flex; gap:10px; align-items:center; padding:8px; border:2px solid #93c5fd; border-radius:12px; margin:6px 4px; cursor:pointer; background:#fff; }
.ruta-tag.active{ box-shadow: 0 0 0 2px rgba(37,99,235,.2);
		  order-width: 3px !important;
		  box-shadow: 0 0 0 3px rgba(59,130,246,.45),0 0 0 8px rgba(59,130,246,.15);
		  transform: translateZ(0); /* evita difuminado en escalado */
		}
.ruta-pick { width: 16px; height: 16px; border-radius: 50%; border:0; background: var(--ruta-color, #60a5fa); }
.ruta-info .ruta-title{ font-weight:600; font-size:18px; color:#0f172a; }
.ruta-info .ruta-sub{ font-size:12px; color:#475569; }

/* util: ocultar */
.hidden { display: none !important; }

/* Encabezado panel (compatibilidad con versión anterior) */
.cp-header,
.cluster-head {
  display:flex; align-items:center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; background: #fff; z-index: 1;
}
.cp-header .title,
.cluster-head .title { font-weight: 700; color: #111827; }
.cp-header .close,
.cluster-head .close { border: 0; background: #f3f4f6; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }

/* Subtítulo / domicilio */
.cp-sub,
.cluster-sub { padding: 10px 14px; color: #4b5563; border-bottom: 1px solid #f3f4f6; font-size: 12px; }

/* Lista de casillas del panel */
.cp-list,
.cluster-list { padding: 8px; }

/* Semáforo contador de ruta */
.ruta-tag .ruta-sub {
  margin-top: 2px;
  padding: 4px 6px;
  border-radius: 6px;
  display: inline-block;
  font-weight: 600;
}
.ruta-tag .ruta-sub.k-over   { background:#FED7AA; color:#7C2D12; } /* naranja suave */
.ruta-tag .ruta-sub.k-equal  { background:#BBF7D0; color:#064E3B; } /* verde suave  */
.ruta-tag .ruta-sub.k-less   { background:#FEF9C3; color:#713F12; } /* amarillo suave */

/* Tooltip JS (pop) */
.tip-pop {
  position: fixed;
  z-index: 5000;
  background: #0f172a;
  color: #fff;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0,0,0,.2);
  white-space: nowrap;
  pointer-events: none;
}

/* ===== Tarjeta de ayuda colapsable ===== */
.help-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  margin:8px 0 12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  overflow:hidden;
}
.help-toggle{
  width:100%;
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  background:#f9fafb; border:0; cursor:pointer; text-align:left;
  border-bottom:1px solid #f3f4f6;
}
.help-toggle:hover{ background:#f3f4f6; }
.help-toggle-icon{ font-size:14px; }
.help-toggle-text{ font-weight:600; color:#111827; flex:1; }
.help-toggle-caret{ color:#6b7280; transition: transform .2s ease; }
.help-card[data-open="true"] .help-toggle-caret{ transform: rotate(90deg); }

.help-body{
  display:none; padding:12px 14px; color:#111827; font-size:13px; line-height:1.35;
}
.help-card[data-open="true"] .help-body{ display:block; }

.help-subtitle{ font-weight:600; margin:6px 0; color:#374151; }
.help-list{ margin:6px 0 0 18px; padding:0; }
.help-list li{ margin:4px 0; }
.help-legend{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.icon-cluster{
  width:16px; height:16px; border-radius:50%;
  display:inline-block; background:#fff;
  box-shadow: inset 0 0 0 2px #111; /* real por defecto */
}
.icon-cluster.real{ box-shadow: inset 0 0 0 2px #111; }   /* borde negro */
.icon-cluster.fake{ box-shadow: inset 0 0 0 2px #f2c94c; } /* borde ámbar */
.legend-text{ font-size:12.5px; color:#374151; }

/* Resumen DL (encima de la lista de rutas) */
.dl-summary{ display:flex; align-items:center; gap:8px; margin:6px 4px 8px; padding:8px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; }
.dl-title{ font-weight:700; color:#0f172a; text-align: center; font-size:20px; }
.dl-meter{ margin-left:auto; font-weight:700; padding:3px 6px; border-radius:6px; font-size:12px; }
.dl-meter.k-over{ background:#FCA5A5; color:#7F1D1D; }
.dl-meter.k-equal{ background:#BBF7D0; color:#064E3B; }
.dl-meter.k-less{ background:#FEF9C3; color:#713F12; }


/* Botón RG junto al círculo de color de la ruta */
.btn-rg{ width:26px; height:22px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#0f172a; font-weight:700; cursor:pointer; }
.btn-rg:hover{ background:#f8fafc; }


/* ===== Clusters (DOM icon) ===== */
/* Estructura esperada del HTML del icono:
   <span class="cluster-dot [fake] [assigned]" style="--ruta-color:#RRGGBB">10U</span> */
.cluster-dot{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px;
  background:#fff; color:#111;
  box-shadow: inset 0 0 0 3px #111; /* real (borde negro) */
  text-shadow: none;
}
.cluster-dot.fake{ box-shadow: inset 0 0 0 3px #f2c94c; } /* ficticio: borde ámbar */
.cluster-dot.assigned{
  background: var(--ruta-color, #2563eb);
  color:#fff;
  box-shadow: inset 0 0 0 0 var(--ruta-color, #2563eb);
}

/* Clusters resaltados de la ruta activa en el mapa */
.leaflet-marker-icon.cluster.route-focus{
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(99,102,241,.60);
  z-index: 450 !important;
}
.leaflet-marker-icon.cluster.route-dim{
  opacity: .35;
  filter: grayscale(.4);
}

/* ===== Tooltip visual (usado por app.js -> showTip) ===== */
.cluster-tip{
  background:#111827;
  color:#fff;
  font-size:12.5px;
  border-radius:8px;
  padding:8px 10px;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  max-width:260px;
}
.cluster-tip .ct-line{ margin:2px 0; }
.cluster-tip .ct-type{ color:#a7f3d0; font-weight:600; } /* verde-menta */
.cluster-tip .ct-route{ font-weight:700; color:#fff; }
.cluster-tip .ct-actions{ margin-top:6px; font-size:12px; opacity:.9; }

/* ===== Estilo para seccion en el mapa ======*/
.seccion-label-badge{
  background: rgba(0,0,0,.35);
  color:#fff;
  padding:2px 6px;
  border-radius:4px;
  font: 600 11px/1.2 system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  pointer-events:none;
}

/* Pie de la tarjeta: semáforo + botones RG a la derecha */
.ruta-footer{ display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:4px; }
.rg-actions{ display:flex; gap:8px; }

/* Botones RG con el mismo “look”/tamaño del semáforo */
.rg-btn{
  padding:4px 6px; border-radius:6px; font-weight:600; font-size:12px;
  border:1px solid #cbd5e1; background:#fff; color:#111827; cursor:pointer;
}
.rg-btn:hover{ background:#f8fafc; }
.rg-btn.unassign{ background:#FED7AA; color:#7C2D12; border-color:#fdba74; } /* visual afín al 'over' */

/* Contenedor de filtros de rutas (misma fila) */
#rutaFilters {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  align-items: stretch;
}

/* Tarjeta de filtro */
.ruta-filter {
  flex: 1 1 0;
  border: 2px solid #dbeafe;           /* azul claro como las rutas */
  border-radius: 12px;
  background: #fff;
  padding: 8px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.ruta-filter:hover { border-color: #93c5fd; }
.ruta-filter:active { transform: translateY(1px); }
.ruta-filter.active {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.16) inset, 0 1px 4px rgba(0,0,0,.12);
}

/* [RC] chip y semáforo dentro de la lista de casillas */
.ci-actions { display:flex; gap:8px; align-items:center; margin-top:4px; }
.rc-edit { padding:4px 6px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; font-weight:600; cursor:pointer; }
.rc-edit:hover { background:#f8fafc; }
.rc-meter { padding:2px 6px; border-radius:6px; font:600 12px/1 system-ui,sans-serif; border:1px solid #e5e7eb; }
.rc-meter.ok { background:#dcfce7; color:#14532d; border-color:#86efac; }    /* verde */
.rc-meter.warn { background:#fef9c3; color:#854d0e; border-color:#fde68a; }  /* amarillo */

/* [RC] panel detalle */
.rc-panel { margin:8px 0 0; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.rc-head { padding:8px 12px; font-weight:700; border-bottom:1px solid #f3f4f6; }
.rc-body { padding:8px 12px; display:grid; gap:8px; }
.rc-row { display:flex; align-items:center; justify-content:space-between; padding:4px 0; border-bottom:1px dashed #f3f4f6; }
.rc-row:last-child { border-bottom:none; }
.rc-tag { display:inline-flex; gap:6px; align-items:center; padding:3px 6px; background:#eef2ff; color:#111827; border:1px solid #c7d2fe; border-radius:999px; margin:2px; }
.rc-del { border:none; background:transparent; font-weight:700; cursor:pointer; }
.rc-meter { padding:2px 6px; border:1px solid #e5e7eb; border-radius:6px; font-weight:600; font-size:12px; }
.rc-meter.ok   { background:#dcfce7; color:#14532d; border-color:#86efac; }   /* verde */
.rc-meter.warn { background:#fef9c3; color:#854d0e; border-color:#fde68a; }   /* amarillo */
.rc-card.active { outline:2px solid #111827; } /* para ver la tarjeta activa, opcional */

/* Flotante RC estilo “ventana” */
.rc-panel{
  position: absolute; /* importante para poder ubicarla a la izq */
  width: 360px;
  max-height: 70vh;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 10001;
}
.rc-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 700;
  border-bottom: 1px solid #f3f4f6;
}
.rc-close{
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.rc-head.rc-stale { outline: 2px dashed #f59e0b; } /* opcional: marca “hay cambios nuevos” */

/* Semáforo que ya usas */
.rc-meter { padding:2px 6px; border:1px solid #e5e7eb; border-radius:6px; font-weight:600; font-size:12px; }
.rc-meter.ok   { background:#dcfce7; color:#14532d; border-color:#86efac; }
.rc-meter.warn { background:#fef9c3; color:#854d0e; border-color:#fde68a; }