html, body {
  height: 100%;
  margin: 0;
  font-family: system-ui, sans-serif;
}

#mapa {
  height: 100%;
  width: 100%;
}

.territorios-letra {
  font-size: 13px;
  font-weight: 600;
  color: #222;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

.territorios-numero {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
               0 0 6px #fff, 0 0 6px #fff;
}

.editor-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

#panel {
  width: 320px;
  min-width: 230px;
  max-width: 1000px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ccc;
  background: #fafafa;
  overflow: hidden;
  position: relative;
}

#panel.colapsado {
  width: 32px !important;
}

#panel.colapsado #panel-contenido,
#panel.colapsado #panel-resize {
  display: none;
}

#btn-colapsar-panel {
  align-self: flex-end;
  margin: 6px 6px 0 6px;
  font-size: 13px;
  padding: 4px 8px;
  cursor: pointer;
  flex: none;
}

#panel-contenido {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#panel-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
}

#tabs-rail {
  flex: none;
  width: 92px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ddd;
  background: #eef0f0;
  overflow-y: auto;
}

.tab-boton {
  border: none;
  background: none;
  padding: 10px 8px;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #e2e2e0;
  color: #444;
}

.tab-boton:hover {
  background: #e4e7e7;
}

.tab-boton.activa {
  background: #fff;
  border-left-color: #2b6cb0;
  color: #111;
  font-weight: 600;
}

#tabs-contenido {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.tab-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  /* deja un margen antes del borde del panel: sin esto, contenido ancho
     (la grilla de ubicaciones) queda pegado al borde derecho y es dificil
     distinguirlo del handle de #panel-resize */
  padding-right: 6px;
  box-sizing: border-box;
}

.tab-panel.activa {
  display: flex;
}

.panel-seccion-flex {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.panel-seccion-flex ul,
#ubicaciones-grilla-contenedor {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

#panel-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
}

#panel-resize:hover,
#panel-resize.arrastrando {
  background: rgba(43, 108, 176, 0.3);
}

#mapa-editor {
  flex: 1;
  height: 100%;
}

#panel-derecho {
  width: 260px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #ccc;
  background: #fafafa;
  overflow-y: auto;
}

#panel-derecho.colapsado {
  width: 28px !important;
  overflow: hidden;
}

#panel-derecho.colapsado .panel-seccion {
  display: none !important;
}

#btn-colapsar-panel-derecho {
  align-self: flex-start;
  margin: 6px;
  font-size: 13px;
  padding: 4px 8px;
  cursor: pointer;
  flex: none;
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#panel-seleccion label,
#panel-territorio label {
  display: block;
  font-size: 12px;
  color: #555;
  margin: 14px 0 5px 0;
}

#panel-seleccion select,
#panel-seleccion input,
#panel-territorio select,
#panel-territorio input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 8px;
  font-size: 13px;
}

#panel-seleccion input[type="color"],
#panel-territorio input[type="color"] {
  width: 60px;
  height: 32px;
  padding: 2px;
  cursor: pointer;
}

.fila-color-guardar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fila-color-guardar input[type="color"] {
  flex: none;
}

.fila-color-guardar button {
  flex: 1;
}

.asignacion-botones {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.asignacion-botones button {
  flex: 1;
}

.asignacion-error {
  color: #b33;
  font-size: 12px;
  margin-top: 8px;
  min-height: 1.2em;
}

#seleccion-nuevo-territorio {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  background: #fff;
}

.panel-seccion {
  padding: 10px 12px;
  border-bottom: 1px solid #ddd;
}

.panel-seccion h2 {
  font-size: 13px;
  text-transform: uppercase;
  color: #666;
  margin: 0 0 8px 0;
}


.panel-seccion input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 6px;
  margin-bottom: 6px;
  font-size: 13px;
}

.panel-seccion button {
  font-size: 13px;
  padding: 5px 8px;
  margin: 2px 2px 2px 0;
  cursor: pointer;
}

#panel-servidor label {
  display: block;
  font-size: 12px;
  color: #555;
  margin: 10px 0 3px 0;
}

#panel-servidor input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 6px;
  font-size: 13px;
}

#panel-servidor button {
  display: block;
  width: 100%;
  margin: 6px 0 0 0;
  padding: 7px 8px;
}

#servidor-estado-sesion {
  font-size: 12px;
  color: #444;
  margin-bottom: 6px;
}

#lista-territorios {
  list-style: none;
  margin: 0;
  padding: 0;
  /* alto: lo da el flex de .panel-seccion-flex (ocupa todo lo disponible) */
}

#lista-territorios li {
  padding: 5px 4px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}

#lista-territorios li:hover {
  background: #eef4ff;
}

#lista-territorios li.sin-manzanas {
  color: #b33;
}

#lista-territorios li.territorio-cero {
  font-weight: bold;
  border-bottom: 2px solid #ccc;
  background: #fafafa;
}

#lista-territorios li.territorio-cero.sin-manzanas {
  color: #888;
  font-weight: normal;
}

.panel-seccion .ayuda {
  font-size: 12px;
  color: #666;
  margin: 6px 0 0 0;
}

.estado-guardado {
  font-size: 12px;
  color: #666;
  padding: 6px 12px;
}

.popup-acciones button {
  font-size: 12px;
  margin-top: 4px;
  margin-right: 4px;
}

.seleccion-contador {
  font-size: 13px;
  font-weight: 600;
  margin: 4px 0 14px 0;
  color: #2b6cb0;
}

.colision {
  margin-top: 8px;
  padding: 8px;
  background: #fff3cd;
  border: 1px solid #e0b94a;
  border-radius: 4px;
  font-size: 12px;
  color: #664d03;
}

.colision button {
  margin-top: 6px;
}

#panel-territorio h3 {
  font-size: 12px;
  text-transform: uppercase;
  color: #666;
  margin: 14px 0 4px 0;
}

#territorio-manzanas {
  list-style: none;
  margin: 0;
  padding: 0;
}

#territorio-manzanas li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}

#territorio-manzanas li button {
  font-size: 11px;
  padding: 2px 6px;
  margin-left: 4px;
}

.boton-peligro {
  background: #d33;
  color: #fff;
  border: 1px solid #a11;
}

.error-carga {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #ffe3e3;
  border: 1px solid #d33;
  color: #611;
  padding: 10px 16px;
  border-radius: 6px;
  max-width: 80%;
  white-space: pre-wrap;
  font-size: 13px;
}

/* ==========================================================================
   Pantallas nuevas (login, planificación, delegación, mapa de calor, y las
   agregadas después: registro, S-13, estado de territorios, personales,
   configuración, importar, admin). Dirección visual evolucionada respecto al
   editor/visor de arriba (más cuidado tipográfico, radios más grandes,
   sombras sutiles, acento en oklch). Todo scopeado bajo .pant-* para no
   chocar con lo de arriba.
   ========================================================================== */

.pant {
  --pant-bg: #f7f5f2;
  --pant-tarjeta: #fff;
  --pant-panel: #faf9f7;
  --pant-texto: #242220;
  --pant-muted: #8a8580;
  --pant-muted-2: #6b6660;
  --pant-label: #4a4642;
  --pant-acento: oklch(52% 0.15 258);
  --pant-acento-fondo: oklch(96% 0.02 258);
  --pant-exito: oklch(53% 0.14 150);
  --pant-error: oklch(50% 0.17 25);
  --pant-error-fondo: oklch(95% 0.03 30);
  --pant-error-borde: oklch(85% 0.08 30);
  --pant-borde: rgba(0, 0, 0, .08);
  --pant-borde-input: rgba(0, 0, 0, .12);
  font-family: system-ui, sans-serif;
  color: var(--pant-texto);
  background: var(--pant-bg);
  min-height: 100vh;
  box-sizing: border-box;
}

.pant *, .pant *::before, .pant *::after { box-sizing: border-box; }

.pant-badge-grupo {
  width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block;
}

.pant-badge-estado {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}

.pant-boton {
  border: none; border-radius: 10px; font-weight: 600; cursor: pointer; padding: 10px 16px; font-size: 13.5px;
  background: var(--pant-acento); color: #fff;
}
.pant-boton:disabled { cursor: default; background: #eef1f3; color: var(--pant-muted); }
.pant-boton-outline {
  background: #fff; color: var(--pant-acento); border: 1.5px solid var(--pant-acento);
}
.pant-boton-fantasma {
  background: transparent; color: var(--pant-muted-2); border: 1.5px dashed rgba(0, 0, 0, .15);
}
.pant-boton-exito { background: var(--pant-exito); color: #fff; }
.pant-boton-peligro { background: var(--pant-error); color: #fff; }

.pant-error-caja {
  font-size: 13.5px; color: var(--pant-error); background: var(--pant-error-fondo);
  border: 1px solid var(--pant-error-borde); padding: 12px 14px; border-radius: 10px; line-height: 1.6;
}

/* --- Login --- */
.pant-login-fondo {
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pant-login-tarjeta {
  width: 100%; max-width: 340px; background: var(--pant-tarjeta); border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .08); padding: 40px 30px; text-align: center;
}
.pant-login-tarjeta.pant-shake { animation: pant-shake .5s; }
@keyframes pant-shake {
  0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); }
}
.pant-login-logo {
  width: 52px; height: 52px; border-radius: 14px; background: var(--pant-acento); margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px;
}
.pant-login-nombre { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.pant-login-version { font-size: 10.5px; color: var(--pant-muted-2); margin-bottom: 18px; min-height: 1.2em; }
.pant-login-subtitulo { font-size: 13.5px; color: var(--pant-muted); margin-bottom: 30px; }
.pant-login-select {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 14.5px; margin-bottom: 20px;
  border: 1px solid var(--pant-borde-input); border-radius: 10px; background: #fff; color: var(--pant-texto);
}
.pant-login-select:disabled { opacity: .6; }
.pant-login-puntos { display: flex; justify-content: center; gap: 14px; margin-bottom: 20px; }
.pant-login-punto {
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, .25); transition: background .15s;
}
.pant-login-punto.lleno { background: var(--pant-acento); border-color: var(--pant-acento); }
.pant-login-punto.error { border-color: var(--pant-error); background: var(--pant-error); }
.pant-login-mensaje { font-size: 13.5px; margin-bottom: 16px; min-height: 1.4em; }
.pant-login-mensaje.error { color: var(--pant-error); font-weight: 500; }
.pant-login-mensaje.ok { color: var(--pant-exito); font-weight: 600; }
.pant-login-mensaje.cargando { color: var(--pant-muted-2); display: flex; align-items: center; justify-content: center; gap: 8px; }
.pant-spinner {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid #ddd; border-top-color: var(--pant-acento);
  display: inline-block; animation: pant-spin .7s linear infinite;
}
@keyframes pant-spin { to { transform: rotate(360deg); } }
.pant-login-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.pant-login-teclado.deshabilitado { opacity: .35; pointer-events: none; }
.pant-login-tecla {
  padding: 16px 0; font-size: 18px; font-weight: 500; border: none; background: var(--pant-panel);
  color: var(--pant-texto); cursor: pointer; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.pant-login-tecla:disabled { cursor: default; }
.pant-login-tecla.vacia { visibility: hidden; }
.pant-login-ayuda { font-size: 11.5px; color: #a39e98; margin: 24px 0 0; line-height: 1.5; }
.pant-login-ayuda a { color: var(--pant-acento); }
#login-vincular #login-token-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; margin-top: 4px;
  border: 1px solid var(--pant-borde-input); border-radius: 10px;
}
#login-vincular .asignacion-botones { margin-top: 14px; }

/* --- Barra superior (planificación / mapa de calor) --- */
.pant-topbar {
  padding: 14px 24px; border-bottom: 1px solid var(--pant-borde); display: flex; align-items: center;
  gap: 14px; background: #fff;
}
.pant-topbar-logo {
  width: 32px; height: 32px; border-radius: 9px; background: var(--pant-acento); display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; flex: none;
}
.pant-topbar-nombre { font-size: 14.5px; font-weight: 700; }
.pant-topbar-subtitulo { font-size: 11.5px; color: var(--pant-muted); }
.pant-topbar-version { margin-left: auto; font-size: 10.5px; color: var(--pant-muted-2); white-space: nowrap; }
.pant-topbar-rol {
  font-size: 12.5px; font-weight: 600; color: var(--pant-label); background: var(--pant-panel);
  padding: 6px 12px; border-radius: 20px;
}

.pant-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: 20px; }
.pant-nav a {
  font-size: 12.5px; font-weight: 600; color: var(--pant-muted-2); text-decoration: none;
  padding: 6px 10px; border-radius: 8px;
}
.pant-nav a:hover { background: var(--pant-panel); color: var(--pant-texto); }
.pant-nav a.pant-nav-activo { background: var(--pant-acento-fondo); color: var(--pant-acento); }

/* --- Planificación --- */
.pant-planif { display: flex; flex-direction: column; height: 100vh; }
.pant-planif-body { display: flex; flex: 1; min-height: 0; }
.pant-planif-panel {
  width: 360px; flex: none; border-right: 1px solid var(--pant-borde); background: #fff;
  display: flex; flex-direction: column;
}
.pant-planif-panel-cabecera { padding: 20px 20px 16px; border-bottom: 1px solid var(--pant-borde); }
.pant-planif-eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--pant-muted);
  margin-bottom: 8px;
}
.pant-planif-panel select, .pant-planif-panel input {
  width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid var(--pant-borde-input);
  border-radius: 10px; color: var(--pant-texto); background: #fff;
}
.pant-planif-lista { padding: 16px 20px; flex: 1; overflow: auto; }
.pant-salida-tarjeta {
  border: 1px solid var(--pant-borde); border-radius: 12px; padding: 13px 14px; margin-bottom: 10px;
  cursor: pointer; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.pant-salida-tarjeta.seleccionada { border-color: var(--pant-acento); background: var(--pant-acento-fondo); }
.pant-salida-titulo { font-size: 14px; font-weight: 700; }
.pant-salida-responsable { font-size: 12.5px; color: var(--pant-muted); margin: 3px 0 9px; }
.pant-salida-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pant-chip-territorio { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.pant-salida-estados { display: flex; gap: 12px; margin-top: 9px; font-size: 11.5px; font-weight: 500; }
.pant-planif-footer { padding: 16px 20px; border-top: 1px solid var(--pant-borde); }
.pant-planif-footer .pant-boton { width: 100%; padding: 13px; font-size: 14px; }
.pant-planif-contenido { flex: 1; display: flex; flex-direction: column; background: #fdfcfa; min-width: 0; }
.pant-planif-contenido-cabecera {
  padding: 18px 26px; border-bottom: 1px solid var(--pant-borde); display: flex; align-items: center;
  justify-content: space-between; gap: 22px; background: #fff;
}
.pant-planif-progreso { display: flex; gap: 20px; }
.pant-progreso-item { min-width: 150px; }
.pant-progreso-etiqueta { font-size: 11.5px; color: var(--pant-muted); margin-bottom: 5px; white-space: nowrap; }
.pant-progreso-barra { height: 6px; border-radius: 4px; background: var(--pant-panel, #eef1f3); overflow: hidden; }
.pant-progreso-relleno { height: 100%; background: var(--pant-acento); border-radius: 4px; transition: width .2s; }

.pant-planif-confirmacion-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 6px 22px 22px;
  flex: 1; min-height: 0; overflow: auto;
}
.pant-mapa-placeholder {
  height: 220px; background: repeating-linear-gradient(135deg, #f3f1ee, #f3f1ee 12px, #eae7e2 12px, #eae7e2 24px);
  display: flex; align-items: center; justify-content: center; color: #9a958f; font-size: 12px;
  font-family: ui-monospace, monospace; flex: none; border-bottom: 1px solid var(--pant-borde);
}
.pant-mapa-real { height: 320px; flex: none; border-bottom: 1px solid var(--pant-borde); }
.pant-cercania-lista { flex: 1; overflow: auto; padding: 6px 26px; }
.pant-cercania-fila {
  display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.pant-cercania-numero { font-size: 14.5px; font-weight: 700; width: 58px; }
.pant-cercania-distancia { font-size: 12.5px; color: var(--pant-muted); width: 80px; }
.pant-cercania-fila .pant-boton { margin-left: auto; padding: 8px 16px; border-radius: 9px; }

.pant-planif-tabla-contenedor { flex: 1; overflow: auto; padding: 18px 26px; }

/* Anchos fijos por columna (Fecha/Hora angostas — lo justo para el input nativo, Territorios
   bien angosto ya que solo lleva números cortos, Lugar sin ancho fijo para que absorba el resto)
   y tipografía más grande en todos los controles. */
#planif-tabla { table-layout: fixed; }
#planif-tabla th:nth-child(1), #planif-tabla td:nth-child(1) { width: 148px; }
#planif-tabla th:nth-child(2), #planif-tabla td:nth-child(2) { width: 118px; }
#planif-tabla th:nth-child(4), #planif-tabla td:nth-child(4) { width: 190px; }
#planif-tabla th:nth-child(5), #planif-tabla td:nth-child(5) { width: 140px; }
#planif-tabla th:nth-child(6), #planif-tabla td:nth-child(6) { width: 56px; }
#planif-tabla input, #planif-tabla select { font-size: 14.5px; min-width: 0; }
.pant-planif-turno { font-size: 11.5px; color: var(--pant-muted); margin-top: 3px; }
.pf-territorios-parciales { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
.pf-chip-parcial {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--pant-muted-2);
  background: #fff3cd; border-radius: 7px; padding: 3px 7px;
}
.pf-chip-parcial button {
  font-size: 10.5px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--pant-borde-input);
  background: #fff; color: var(--pant-muted-2); cursor: pointer;
}
.pf-chip-parcial button:hover { background: var(--pant-panel); color: var(--pant-texto); }
.pf-territorios-advertencias { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
.pf-chip-advertencia {
  display: block; font-size: 11px; color: #8a5a00;
  background: #fff3cd; border: 1px solid #ffe08a; border-radius: 7px; padding: 3px 7px;
}
.pant-planif-lugar-esquina { display: flex; gap: 4px; margin-top: 4px; }
.pant-planif-lugar-esquina input { min-width: 0; }
.pant-planif-tabla-acciones { display: flex; gap: 4px; justify-content: flex-end; }
.pant-planif-tabla-acciones button {
  font-size: 13px; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--pant-borde-input);
  background: #fff; color: var(--pant-muted-2); cursor: pointer;
}
.pant-planif-tabla-acciones button:hover { background: var(--pant-panel); color: var(--pant-texto); }
.pant-planif-tabla-acciones button.peligro { color: var(--pant-error); border-color: var(--pant-error-borde); }

/* Fondo pastel por turno (mañana/tarde), y borde de acento para la fila resaltada desde el
   panel lateral — separado del fondo para no chocar con el color pastel de la fila. */
#planif-tabla-filas tr.pf-manana td { background: #fff8e6; }
#planif-tabla-filas tr.pf-tarde td { background: #eef1fb; }
#planif-tabla-filas tr.resaltada td:first-child { box-shadow: inset 3px 0 0 var(--pant-acento); }
#planif-tabla-filas tr.pf-reunion td { font-style: normal; }

.pf-lugar-fila { display: flex; align-items: center; gap: 6px; }
.pf-lugar-valor { flex: 1; min-width: 0; }
.pf-lugar-fila .pf-tipo-toggle { flex-direction: column; margin: 0; flex: none; }
.pf-tipo-toggle button { padding: 4px 9px; font-size: 12px; }
.pf-ins-tipo-toggle { margin-left: 0; }
.pf-check-cont { flex: none; }
.pf-responsable-fila { display: flex; align-items: center; gap: 6px; }
.pf-responsable-fila select { flex: 1; min-width: 0; }

/* Tilde de confirmación (ubicación/responsable, ver migración 017) — gris cuando no confirmado,
   verde con el ícono de check cuando sí. */
.pf-check {
  width: 22px; height: 22px; flex: none; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid var(--pant-borde-input); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pf-check:hover { border-color: var(--pant-acento); }
.pf-check--ok { background: var(--pant-exito); border-color: var(--pant-exito); }
.pf-check:disabled { cursor: default; border-color: var(--pant-borde-input); opacity: .4; }
.pf-check:disabled:hover { border-color: var(--pant-borde-input); }

/* Fila delgada entre cada par de filas, con un botón de inserción que solo se ve al pasar el mouse. */
#planif-tabla-filas tr.pf-separador td { padding: 2px 14px; border: none; text-align: center; background: transparent; }
#planif-tabla-filas tr.pf-separador .pf-insertar-boton {
  opacity: 0; font-size: 11px; padding: 2px 10px; border-radius: 10px; transition: opacity .12s;
  border: 1px dashed var(--pant-borde-input); background: #fff; color: var(--pant-muted-2); cursor: pointer;
}
#planif-tabla-filas tr.pf-separador:hover .pf-insertar-boton { opacity: 1; }
#planif-tabla-filas tr.pf-separador .pf-insertar-form {
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 6px 4px;
}
#planif-tabla-filas tr.pf-separador .pf-insertar-form input {
  width: auto; padding: 6px 8px; font-size: 12.5px; border: 1px solid var(--pant-borde-input); border-radius: 7px;
}
#planif-tabla-filas tr.pf-separador .pf-ins-tipo-toggle button { padding: 5px 10px; font-size: 12px; }

.pant-planif-cercania-caja {
  background: #fff; border-radius: 16px; max-width: 720px; width: 100%; max-height: 88vh;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25); display: flex; flex-direction: column; overflow: hidden;
}
.pant-planif-cercania-cabecera {
  padding: 18px 22px; border-bottom: 1px solid var(--pant-borde); display: flex; align-items: center; gap: 16px;
}
.pant-planif-cercania-cabecera > div:first-child { flex: 1; min-width: 0; }
.pant-planif-cercania-caja .pant-mapa-real { height: 280px; }
.pant-planif-cercania-caja .pant-cercania-lista { flex: 1; overflow: auto; padding: 6px 22px; }

/* --- Ubicaciones --- */
.pant-ubicaciones { display: flex; flex-direction: column; height: 100vh; }
.pant-ubicaciones-body { display: flex; flex: 1; min-height: 0; }
.pant-ubicaciones-grilla { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #fdfcfa; }
.pant-ubicaciones-tabla-contenedor { flex: 1; overflow: auto; padding: 18px 26px; }
.pant-ubicaciones-mapa {
  width: 440px; flex: none; border-left: 1px solid var(--pant-borde); background: #fff;
  display: flex; flex-direction: column;
}
.pant-ubicaciones-mapa .pant-mapa-real { flex: 1; height: auto; border-bottom: none; }
#ubic-tabla-filas tr.fila-duplicada td { background: #fff3cd; }
#ubic-tabla-filas tr.resaltada td:first-child { box-shadow: inset 3px 0 0 var(--pant-acento); }
.ubic-coordenadas { display: flex; flex-direction: column; gap: 4px; }
.ubic-coordenadas-valor { font-size: 12px; color: var(--pant-muted); white-space: nowrap; }
.ubic-coordenadas button {
  font-size: 11.5px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--pant-borde-input);
  background: #fff; color: var(--pant-muted-2); cursor: pointer; white-space: nowrap;
}
.ubic-coordenadas button:hover { background: var(--pant-panel); color: var(--pant-texto); }
.ubic-coordenadas button.activo { background: var(--pant-acento); color: #fff; border-color: var(--pant-acento); }
.ubic-boton-chico {
  font-size: 11.5px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--pant-borde-input);
  background: #fff; color: var(--pant-muted-2); cursor: pointer; white-space: nowrap; flex: none;
}
.ubic-boton-chico:hover { background: var(--pant-panel); color: var(--pant-texto); }
.ubic-franja-fila { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.ubic-franja-fila > span { font-size: 12.5px; color: var(--pant-label); font-weight: 500; white-space: nowrap; }
.ubic-franja-fila label { font-size: 12.5px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
/* Especificidad por #id: gana sin importar el orden a `.pant-config-tabla input` (width:100%,
   pensado para nombre/dirección), que si no un número de 2 cifras quedaba en un input de 900px. */
#ubic-tabla .ubic-franja-fila input,
#ubic-tabla .ubic-franja-fila select { width: auto; flex: none; }
#ubic-tabla .ubic-franja-fila input[type="number"] { width: 62px; text-align: center; }
#ubic-tabla .ubic-franja-fila input[type="text"] { width: 200px; }
#ubic-tabla .ubic-franja-fila select { width: 150px; }

/* --- Delegación (mobile) --- */
.pant-deleg-contenido { padding: 16px; max-width: 480px; margin: 0 auto; }
.pant-deleg-tarjeta {
  background: #fff; border: 1px solid var(--pant-borde); border-radius: 16px; margin-top: 16px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); padding: 16px;
}
.pant-deleg-cabecera { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.pant-deleg-territorio { font-size: 16.5px; font-weight: 700; }
.pant-deleg-cabecera .pant-badge-estado { margin-left: auto; }
.pant-deleg-subtitulo { font-size: 13px; color: var(--pant-muted); margin-bottom: 12px; }
.pant-mapa-mini {
  height: 140px; border-radius: 12px; margin-bottom: 12px; background: repeating-linear-gradient(135deg, #f3f1ee, #f3f1ee 8px, #eae7e2 8px, #eae7e2 16px);
}
.pant-deleg-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.pant-deleg-acciones .pant-boton { flex: 1; min-width: 110px; padding: 12px; border-radius: 11px; }
.pant-deleg-tarjeta > .pant-boton-fantasma { width: 100%; margin-top: 8px; padding: 11px; border-radius: 11px; cursor: not-allowed; }
.pant-deleg-tarjeta > .pant-boton-navegar { width: 100%; margin-top: 8px; padding: 11px; border-radius: 11px; }

/* --- Navegación GPS a pie ("Cómo llegar", punto 12) --- */
.pant-nav-caja {
  background: #fff; border-radius: 16px; max-width: 480px; width: 100%; max-height: 92vh;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25); display: flex; flex-direction: column; overflow: hidden;
}
.pant-nav-cabecera {
  padding: 16px 18px; border-bottom: 1px solid var(--pant-borde); display: flex; align-items: center; gap: 14px;
}
.pant-nav-cabecera > div:first-child { flex: 1; min-width: 0; }
.pant-nav-mapa { height: 360px; flex: none; }
.pant-nav-info { padding: 14px 18px; font-size: 13.5px; }
.pant-nav-info .pant-error-caja { margin: 0; }
.pant-nav-distancia { font-size: 21px; font-weight: 700; }
.pant-nav-detalle { color: var(--pant-muted); font-size: 12.5px; margin-top: 2px; }
.pant-subdivision {
  margin-top: 12px; padding: 12px; border: 1.5px dashed rgba(0, 0, 0, .15); border-radius: 12px; background: var(--pant-panel);
}
.pant-subdivision-titulo { font-size: 12px; color: var(--pant-muted); margin-bottom: 8px; font-weight: 600; }
.pant-manzanas-grid { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.pant-manzana-chip {
  width: 38px; height: 38px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer;
  border: none; background: #fff; color: var(--pant-texto); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.pant-manzana-chip.seleccionada { background: var(--pant-acento); color: #fff; box-shadow: none; }
.pant-subdivision input[type="text"] {
  width: 100%; padding: 11px; font-size: 13.5px; border: 1px solid var(--pant-borde-input); border-radius: 10px; margin-bottom: 10px;
}
.pant-subdivision .pant-boton { width: 100%; padding: 11px; border-radius: 11px; }

/* --- Registro de trabajo --- */
.pant-registro-titulo-seccion {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pant-muted); margin: 24px 0 4px; padding: 0 2px;
}
.pant-registro-titulo-seccion:first-child { margin-top: 0; }
.pant-registro-manual-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; max-height: 320px; overflow: auto;
  padding: 2px;
}
.pant-registro-manual-grid .pant-calor-tile {
  width: 46px; height: 46px; font-size: 12.5px; cursor: pointer; border: 2px solid transparent;
  transition: transform .1s;
}
.pant-registro-manual-grid .pant-calor-tile:hover { transform: scale(1.08); }
.pant-registro-manual-grid .pant-calor-tile.seleccionado { border-color: var(--pant-acento); box-shadow: 0 0 0 2px var(--pant-acento-fondo); }
.pant-registro-campo { margin-top: 10px; }
.pant-registro-campo label { display: block; font-size: 12px; color: var(--pant-muted); margin-bottom: 4px; }
.pant-registro-campo input, .pant-registro-campo select {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--pant-borde-input); border-radius: 10px;
}
.pant-registro-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 12px; color: var(--pant-label); }
.pant-registro-cumplimiento-filtros {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; font-size: 13px; color: var(--pant-label);
}
.pant-registro-cumplimiento-filtros input[type="date"] {
  font-size: 13px; padding: 7px 10px; border: 1px solid var(--pant-borde-input); border-radius: 9px;
}
.pant-registro-cumplimiento-filtros .pant-registro-checkbox { margin-top: 0; margin-left: 8px; }
.pant-deleg-tarjeta-registrada { background: var(--pant-panel); opacity: .75; }
.pant-confirmacion-fila {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--pant-borde); font-size: 13.5px;
}
.pant-confirmacion-fila .pant-boton { margin-left: auto; padding: 8px 14px; border-radius: 9px; }

/* --- Mapa de calor --- */
.pant-calor-filtros {
  padding: 16px 24px; border-bottom: 1px solid var(--pant-borde); display: flex; align-items: center;
  gap: 20px; background: #fff; flex-wrap: wrap;
}
.pant-calor-rango { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pant-label); }
.pant-calor-rango input[type="date"] { font-size: 13px; padding: 7px 10px; border: 1px solid var(--pant-borde-input); border-radius: 9px; }
.pant-calor-rango select { font-size: 13px; padding: 7px 10px; border: 1px solid var(--pant-borde-input); border-radius: 9px; background: #fff; }
.pant-calor-check-planificado { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--pant-label); font-weight: 500; cursor: pointer; }
.pant-calor-grupos { display: flex; gap: 8px; flex-wrap: wrap; }
.pant-chip-grupo {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 7px 12px;
  border-radius: 20px; border: 1.5px solid var(--pant-borde); background: transparent; color: #c2bdb7; cursor: pointer;
}
.pant-chip-grupo.activo { border-color: var(--pant-borde-input); background: var(--pant-panel); color: var(--pant-texto); }
.pant-calor-body { display: flex; flex: 1; min-height: 0; position: relative; }
.pant-calor-grid {
  flex: 1; position: relative; background: repeating-linear-gradient(135deg, #f3f1ee, #f3f1ee 12px, #eae7e2 12px, #eae7e2 24px);
  padding: 24px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 14px; overflow: auto;
}
.pant-calor-tile {
  width: 58px; height: 58px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  position: relative; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); font-size: 14px; font-weight: 800;
}
.pant-calor-tile .pant-badge-grupo { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; box-shadow: 0 0 0 1.5px #fff; }
.pant-calor-tile-personal {
  position: absolute; top: 4px; left: 4px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #444; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15);
}
/* "Parcialmente abarcado": un anillo punteado alrededor del tile, separado de su color (que ya
   sigue la escala de antigüedad normal) — así "urgencia" (color) y "está incompleto" (anillo) se
   leen como dos señales independientes en vez de mezclarse en un tono aparte. Se dibuja por fuera
   del tile (outline-offset), sobre el fondo fijo de la grilla, para que el contraste del punteado
   no dependa de qué tan claro/oscuro salga el color de turno. */
.pant-calor-tile-parcial {
  outline: 3px dashed #3d3830;
  outline-offset: 3px;
}
.pant-calor-mapa-real { flex: 1; position: relative; }
.pant-calor-leyenda { width: 260px; flex: none; border-left: 1px solid var(--pant-borde); padding: 20px; background: #fff; overflow: auto; }
.pant-calor-leyenda-item { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; font-size: 12.5px; }
.pant-calor-leyenda-color { width: 18px; height: 18px; border-radius: 6px; flex: none; }
.pant-calor-leyenda-gradiente { display: flex; gap: 12px; margin-bottom: 8px; }
.pant-calor-leyenda-barra { width: 20px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.pant-calor-leyenda-marcas { display: flex; flex-direction: column; justify-content: space-between; font-size: 12.5px; color: var(--pant-label); }
.pant-calor-toggle { display: flex; gap: 6px; margin-left: auto; }
.pant-calor-toggle button {
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--pant-borde-input);
  background: #fff; color: var(--pant-muted-2); cursor: pointer;
}
.pant-calor-toggle button.activo { background: var(--pant-acento); color: #fff; border-color: var(--pant-acento); }
.pant-vacio-centrado {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 20px; font-size: 14px; color: var(--pant-muted-2);
}
.pant-calor-cargando {
  position: absolute; inset: 0; z-index: 20; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 20px; font-size: 14px; color: var(--pant-muted-2); background: rgba(255, 255, 255, .7);
}

/* --- Configuración --- */
.pant-config { display: flex; flex-direction: column; height: 100vh; }
.pant-config-body { display: flex; flex: 1; min-height: 0; }
.pant-config-nav {
  width: 190px; flex: none; border-right: 1px solid var(--pant-borde); background: #fff;
  display: flex; flex-direction: column; padding: 10px 0; overflow-y: auto;
}
.pant-config-tab {
  border: none; background: none; text-align: left; padding: 11px 20px; font-size: 13.5px;
  font-weight: 600; color: var(--pant-muted-2); cursor: pointer; border-left: 3px solid transparent;
}
.pant-config-tab:hover { background: var(--pant-panel); }
.pant-config-tab.activa { background: var(--pant-acento-fondo); color: var(--pant-acento); border-left-color: var(--pant-acento); }
.pant-config-contenido { flex: 1; overflow: auto; padding: 26px 32px; background: #fdfcfa; }
.pant-config-contenido h2 { font-size: 17px; margin: 0 0 16px; }
.pant-config-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pant-config-cabecera h2 { margin: 0; }
.pant-config-tarjeta {
  background: #fff; border: 1px solid var(--pant-borde); border-radius: 12px; padding: 18px 20px;
  margin-bottom: 16px; max-width: 480px;
}
.pant-config-tarjeta input[type="text"], .pant-config-tarjeta input[type="number"], .pant-config-tarjeta select {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; margin: 6px 0 12px;
  border: 1px solid var(--pant-borde-input); border-radius: 10px;
}
.pant-config-ayuda { font-size: 12.5px; color: var(--pant-muted); line-height: 1.6; margin: 0 0 10px; }
.esc-colores-fila { display: flex; gap: 20px; margin-bottom: 12px; }
.esc-colores-fila label { font-size: 12.5px; color: var(--pant-label); display: flex; flex-direction: column; gap: 5px; }
.esc-colores-fila input[type="color"] { width: 56px; height: 34px; padding: 2px; border: 1px solid var(--pant-borde-input); border-radius: 8px; cursor: pointer; }
.esc-umbrales { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.esc-umbral-fila { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pant-label); }
.esc-umbral-fila input[type="number"] { width: 80px; box-sizing: border-box; padding: 7px 9px; font-size: 13px; margin: 0; border: 1px solid var(--pant-borde-input); border-radius: 8px; }
.esc-umbral-fila button { font-size: 11.5px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--pant-borde-input); background: #fff; color: var(--pant-muted-2); cursor: pointer; }
.esc-umbral-fila button:hover { background: var(--pant-panel); color: var(--pant-error); }
.esc-preview { display: flex; gap: 3px; margin-top: 12px; border-radius: 8px; overflow: hidden; }
.esc-preview span { flex: 1; height: 22px; }
.hor-atardecer { display: block; font-size: 11px; color: var(--pant-muted); margin-top: 3px; white-space: nowrap; }
.pant-config-tabla { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--pant-borde); border-radius: 12px; overflow: hidden; }
.pant-config-tabla th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--pant-muted); padding: 10px 14px; background: var(--pant-panel); border-bottom: 1px solid var(--pant-borde);
}
.pant-config-tabla td { padding: 10px 14px; font-size: 13.5px; border-bottom: 1px solid var(--pant-borde); vertical-align: middle; }
.pant-config-tabla tr:last-child td { border-bottom: none; }
.pant-config-tabla td.pant-config-acciones { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pant-config-tabla td.pant-config-acciones button {
  font-size: 11.5px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--pant-borde-input);
  background: #fff; cursor: pointer; color: var(--pant-muted-2); white-space: nowrap;
}
.pant-config-tabla td.pant-config-acciones button:hover { background: var(--pant-panel); color: var(--pant-texto); }
.pant-config-tabla td.pant-config-acciones button.peligro { color: var(--pant-error); border-color: var(--pant-error-borde); }
.pant-config-tabla input, .pant-config-tabla select { font-size: 13px; padding: 6px 8px; border: 1px solid var(--pant-borde-input); border-radius: 7px; width: 100%; box-sizing: border-box; }
.pant-config-tabla input[type="color"] { width: 44px; padding: 2px; }
.s13-tabla th, .s13-tabla td { white-space: nowrap; }
.s13-tabla { border-radius: 12px; }

/* Tabla de Usuarios: sin esto, el layout automático de la tabla le da a los <input> sin ancho
   fijo mucho más espacio del que necesitan (~214px c/u) y deja muy poco a la columna de acciones
   (4 botones), que termina apilándolos verticalmente incluso con la ventana ancha. table-layout:
   fixed + anchos por columna resuelve la distribución, PERO no se puede combinar con
   `display:flex` directo en el <td> de acciones (el navegador lo saca del algoritmo de tabla y
   el ancho fijado deja de aplicarse) — por eso ese <td> vuelve a ser una celda normal y el flex
   vive en el <div> de adentro (`.pant-config-acciones-grupo`). */
.pant-config-tabla-usuarios { table-layout: fixed; }
.pant-config-tabla-usuarios th:nth-child(1), .pant-config-tabla-usuarios td:nth-child(1) { width: 14%; }
.pant-config-tabla-usuarios th:nth-child(2), .pant-config-tabla-usuarios td:nth-child(2) { width: 10%; }
.pant-config-tabla-usuarios th:nth-child(3), .pant-config-tabla-usuarios td:nth-child(3) { width: 11%; }
.pant-config-tabla-usuarios th:nth-child(4), .pant-config-tabla-usuarios td:nth-child(4) { width: 11%; }
.pant-config-tabla-usuarios th:nth-child(5), .pant-config-tabla-usuarios td:nth-child(5) { width: 17%; }
.pant-config-tabla-usuarios th:nth-child(6), .pant-config-tabla-usuarios td:nth-child(6) { width: 7%; }
.pant-config-tabla-usuarios th:nth-child(7), .pant-config-tabla-usuarios td:nth-child(7) { width: 9%; }
.pant-config-tabla-usuarios th:nth-child(8), .pant-config-tabla-usuarios td:nth-child(8) { width: 21%; }
.pant-config-tabla-usuarios td.pant-config-acciones { display: table-cell; }
.pant-config-acciones-grupo { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pant-config-fila-nueva { background: #fff; border: 1px solid var(--pant-borde); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; max-width: 560px; }
.pant-config-fila-nueva label { display: block; font-size: 12px; color: var(--pant-muted); margin: 8px 0 4px; }
.pant-config-fila-nueva input, .pant-config-fila-nueva select {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13.5px; border: 1px solid var(--pant-borde-input); border-radius: 8px;
}

/* --- Estado de territorios (vista de registro online, distinta de S13) --- */
.pant-et-filtros {
  padding: 14px 24px; border-bottom: 1px solid var(--pant-borde); display: flex; align-items: flex-end;
  gap: 16px; background: #fff; flex-wrap: wrap;
}
.pant-et-filtro { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--pant-label); }
.pant-et-filtro select, .pant-et-filtro input[type="date"] {
  font-size: 13px; padding: 7px 10px; border: 1px solid var(--pant-borde-input); border-radius: 9px; background: #fff;
}
.pant-et-leyenda {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center; padding: 10px 24px;
  background: var(--pant-panel); border-bottom: 1px solid var(--pant-borde); font-size: 11.5px; color: var(--pant-label);
}
.pant-et-leyenda-titulo { font-weight: 700; color: var(--pant-texto); margin-right: 2px; }
.pant-et-leyenda-grupo { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pant-et-leyenda-item { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.pant-et-leyenda-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; flex: none; }
.pant-et-leyenda-forma-icono {
  width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(0, 0, 0, .5); background: #fff; color: rgba(0, 0, 0, .75); flex: none;
}

.pant-et-tabla { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--pant-borde); border-radius: 12px; overflow: hidden; }
.pant-et-tabla th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--pant-muted); padding: 10px 14px; background: var(--pant-panel); border-bottom: 1px solid var(--pant-borde);
}
.pant-et-tabla td { padding: 12px 14px; font-size: 13.5px; border-bottom: 1px solid var(--pant-borde); vertical-align: middle; }
.pant-et-tabla tr:last-child td { border-bottom: none; }
.pant-et-numero { font-weight: 700; }

.pant-et-detalle-col { display: flex; flex-direction: column; gap: 8px; }
.pant-et-manzanas { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.pant-et-secuencia { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pant-et-secuencia-sep { color: var(--pant-muted); font-size: 13px; }
.pant-et-historial-titulo { font-size: 11px; color: var(--pant-muted); margin-right: 2px; white-space: nowrap; }

.pant-et-chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px 6px 8px;
  border-radius: 9px; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.2;
}
.pant-et-chip svg { flex: none; }
.pant-et-chip--terminado { border: 2px solid rgba(0, 0, 0, .55); }
.pant-et-chip--incompleto, .pant-et-chip--reasignado { border: 2px dashed rgba(0, 0, 0, .45); }
.pant-et-chip--sin-trabajar {
  border: 1.5px solid rgba(0, 0, 0, .15); background: transparent !important; color: var(--pant-muted) !important; font-weight: 600;
}
.pant-et-chip--asignado {
  border: 2px dashed rgba(0, 0, 0, .3); background: #ece9e4 !important; color: #57524b !important;
}

.pant-et-manzana {
  position: relative; width: 34px; height: 30px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800; flex: none;
}
.pant-et-manzana--hecha { border: 2px solid rgba(0, 0, 0, .5); }
.pant-et-manzana--pendiente {
  border: 1.5px dashed rgba(0, 0, 0, .3); background: var(--pant-panel); color: var(--pant-muted-2);
}
.pant-et-badge-estado {
  position: absolute; top: -6px; right: -6px; width: 15px; height: 15px; border-radius: 50%; background: #fff;
  border: 1.5px solid rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; color: rgba(0, 0, 0, .8);
}
.pant-et-manzana .pant-et-badge-estado { width: 12px; height: 12px; top: -5px; right: -5px; }
.pant-et-chip--clicable { cursor: pointer; }
.pant-et-chip--clicable:hover { filter: brightness(0.94); }

/* Panel derecho: editar/borrar una sesión puntual (corrección de registros duplicados o mal
   cargados) — a diferencia del modal centrado (.pant-modal-*) que ya usa el resto de las
   pantallas, este vive anclado al borde derecho, pensado para no tapar la grilla mientras se
   corrige un dato puntual. */
.pant-et-panel-fondo {
  position: fixed; inset: 0; background: rgba(20, 18, 16, .35); z-index: 1000; display: flex;
  justify-content: flex-end;
}
.pant-et-panel {
  width: 100%; max-width: 400px; background: #fff; height: 100%; overflow-y: auto;
  box-shadow: -8px 0 32px rgba(0, 0, 0, .18); padding: 22px 24px; box-sizing: border-box;
}
.pant-et-panel-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pant-et-panel-titulo { font-size: 16px; font-weight: 700; }
.pant-et-panel-cerrar {
  border: none; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--pant-muted);
  padding: 4px 8px;
}
.pant-et-panel-subtitulo { font-size: 12.5px; color: var(--pant-muted); margin-bottom: 18px; }
.pant-et-panel-campo { margin-top: 12px; }
.pant-et-panel-campo label { display: block; font-size: 12px; color: var(--pant-muted); margin-bottom: 4px; }
.pant-et-panel-campo input, .pant-et-panel-campo select {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--pant-borde-input); border-radius: 10px;
}
.pant-et-panel-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.pant-et-panel-acciones .pant-boton { flex: 1; min-width: 120px; }
.pant-et-panel-borrar { margin-top: 10px; width: 100%; }

/* --- Personales (asignación directa de un territorio a un usuario) --- */
.pers-tile-ocupado { box-shadow: 0 0 0 2px var(--pant-error) inset; }
.pers-tile-reciente { opacity: .45; filter: grayscale(.5); }
.pers-tile-reciente:hover { opacity: .8; filter: none; }

/* --- Modal (reemplaza confirm()/alert() nativos) --- */
.pant-modal-fondo {
  position: fixed; inset: 0; background: rgba(20, 18, 16, .45); display: flex; align-items: center;
  justify-content: center; z-index: 1000; padding: 20px;
}
.pant-modal-caja {
  background: #fff; border-radius: 16px; padding: 22px 24px; max-width: 420px; width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.pant-modal-mensaje { font-size: 14px; line-height: 1.65; color: var(--pant-texto); margin-bottom: 18px; white-space: pre-line; }
.pant-modal-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }