/* ── Variables ── */
:root {
  --verde:       #3B4A20;
  --verde-med:   #5A6B31;
  --verde-clar:  #7A9040;
  --verde-bg:    #DFE8C4;
  --verde-light: #F2F5E8;
  --rojo:        #C0392B;
  --rojo-bg:     #FDF0EF;
  --rojo-med:    #E74C3C;
  --amarillo:    #E67E22;
  --azul:        #1E6091;
  --azul-bg:     #EBF5FB;
  --gris:        #6B7280;
  --gris-bg:     #F7F8F3;
  --borde:       #E2E6D8;
  --texto:       #1E2210;
  --texto-sec:   #6B7280;
  --blanco:      #FFFFFF;
  --bg:          #E9EAE0;
  --sombra:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --sombra-md:   0 4px 12px rgba(0,0,0,0.10);
  --radio:       12px;
  --radio-sm:    8px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: 'DM Sans', sans-serif; color: var(--texto); background: var(--bg); font-size: 14px; }

/* ── Topbar ── */
.topbar {
  background: var(--verde);
  padding: 0 24px;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.topbar-brand { font-size: 15px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 10px; }
.topbar-brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-bg); }
.topbar-semana { font-size: 12px; color: #C5D490; font-family: 'DM Mono', monospace; }

/* ── Layout ── */
.layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  height: calc(100vh - 56px);
  overflow: hidden;
}
.panel-izq {
  background: var(--blanco);
  border-right: 1px solid var(--borde);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#map { height: calc(100vh - 56px); width: 100%; }

/* ── Tabs ── */
.tabs { display: flex; border-bottom: 2px solid var(--borde); flex-shrink: 0; }
.tab-btn {
  flex: 1; padding: 12px 4px;
  border: none; background: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--gris);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--verde-med); }
.tab-btn.activo { color: var(--verde); border-bottom-color: var(--verde); font-weight: 600; }

.tab-content { flex: 1; overflow-y: auto; padding: 14px; }
.tab-pane { display: none; }
.tab-pane.activo { display: block; }

/* ── Cards ── */
.card { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 10px; overflow: hidden; border: 1px solid var(--borde); }
.card-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--borde); font-weight: 600; font-size: 13px; background: var(--gris-bg); }
.card-header.alta { background: var(--rojo-bg); }
.card-header.alta .card-title { color: var(--rojo); }
.card-body { padding: 10px 12px; }

/* ── Resumen ── */
.resumen-card { background: var(--verde-light); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 10px 12px; margin-bottom: 10px; }
.resumen-titulo { font-size: 11px; font-weight: 600; color: var(--verde); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.06em; }
.resumen-kpis { display: flex; gap: 14px; flex-wrap: wrap; }
.kpi { font-size: 12px; color: var(--gris); }
.kpi b { color: var(--texto); font-family: 'DM Mono', monospace; }

/* ── Badges ── */
.badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.badge-alta  { background: var(--rojo);  color: #fff; }
.badge-media { background: var(--azul);  color: #fff; }
.badge-baja  { background: var(--gris);  color: #fff; }
.badge-ok    { background: var(--verde-bg); color: var(--verde); }
.badge-num   { background: var(--gris-bg); color: var(--gris); font-family: 'DM Mono', monospace; }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--radio-sm); border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  transition: background 0.15s, transform 0.1s; white-space: nowrap; text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary  { background: var(--verde);    color: #fff; }
.btn-primary:hover { background: var(--verde-med); }
.btn-danger   { background: var(--rojo);     color: #fff; }
.btn-danger:hover  { background: var(--rojo-med);  }
.btn-outline  { background: transparent; color: var(--gris); border: 1.5px solid var(--borde); }
.btn-outline:hover { border-color: var(--gris); background: var(--gris-bg); color: var(--texto); }
.btn-sm  { padding: 4px 10px; font-size: 12px; }
.btn-xs  { padding: 2px 6px;  font-size: 11px; border-radius: 5px; }
.btn-full { width: 100%; justify-content: center; margin-top: 4px; }
.btn-icon { background: none; border: none; cursor: pointer; padding: 3px 5px; border-radius: 4px; color: var(--gris); font-size: 13px; }
.btn-icon:hover { background: var(--rojo-bg); color: var(--rojo); }

/* ── Inputs ── */
.input {
  width: 100%; padding: 8px 10px;
  border: 1.5px solid var(--borde); border-radius: var(--radio-sm);
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--texto);
  background: var(--gris-bg); outline: none;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none; appearance: none;
}
.input:focus { border-color: var(--verde-clar); background: var(--blanco); }
.input-sm  { padding: 4px 7px; font-size: 12px; }
.input-num { font-family: 'DM Mono', monospace; width: 68px; text-align: right; }
.input-num-w { width: 82px; }
.search-wrap { position: relative; margin-bottom: 8px; }
.search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--gris); pointer-events: none; }

/* ── Semana row ── */
.semana-row { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; }

/* ── Lista productores ── */
.prod-lista { max-height: 250px; overflow-y: auto; }
.prod-item { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 6px; cursor: pointer; transition: background 0.1s; }
.prod-item:hover { background: var(--verde-light); }
.prod-item.selected { background: var(--verde-bg); }
.prod-item input[type=checkbox] { accent-color: var(--verde); flex-shrink: 0; }
.prod-nombre { font-size: 12px; font-weight: 500; flex: 1; }
.prod-comuna { font-size: 11px; color: var(--gris); }

/* ── Vehículos ── */
.veh-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.veh-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
input[type=checkbox] { accent-color: var(--verde); }

/* ── Plan por día ── */
.dia-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; font-size: 12px; background: var(--gris-bg); border-bottom: 1px solid var(--borde); }
.dia-header.fijo { background: var(--rojo-bg); }
.dia-meta { display: flex; align-items: center; gap: 6px; }
.dia-kpis { font-size: 11px; color: var(--gris); display: flex; align-items: center; gap: 6px; }

/* ── Tabla plan ── */
.tabla-plan { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabla-plan th { padding: 4px 7px; font-size: 10px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla-plan td { padding: 5px 7px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-plan tr:last-child td { border-bottom: none; }
.tabla-plan tr.completada td { background: var(--verde-light); }
.tabla-plan tr:hover td { background: var(--gris-bg); }
.tabla-plan tr.completada:hover td { background: var(--verde-bg); }

/* ── Tabla productores ── */
.tabla-prod { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-prod th { padding: 7px 9px; font-size: 10px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--borde); text-align: left; background: var(--gris-bg); }
.tabla-prod td { padding: 7px 9px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-prod tr:hover td { background: var(--verde-light); }

/* ── Resultado rutas ── */
.ruta-card { border-left: 4px solid; border-radius: var(--radio-sm); background: var(--blanco); margin-bottom: 8px; box-shadow: var(--sombra); border: 1px solid var(--borde); }
.ruta-card.v0 { border-left-color: var(--rojo); }
.ruta-card.v1 { border-left-color: var(--azul); }
.ruta-card.v2 { border-left-color: var(--verde-clar); }
.ruta-header { padding: 7px 10px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.ruta-body { padding: 4px 10px 8px; }
.ruta-body ol { padding-left: 16px; font-size: 12px; color: var(--texto-sec); }
.ruta-body li { padding: 2px 0; }
.ruta-body li b { color: var(--texto); }
.tag { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-family: 'DM Mono', monospace; background: var(--gris-bg); color: var(--gris); }

/* ── Misc ── */
.vacio { padding: 10px; font-size: 12px; color: var(--gris); }
.vacio a { color: var(--verde-clar); text-decoration: none; }
.alerta-warn { padding: 8px 10px; border-radius: var(--radio-sm); font-size: 13px; background: #FEF9F0; color: var(--amarillo); border: 1px solid rgba(230,126,34,0.3); margin-bottom: 8px; }
.seccion-titulo { font-size: 10px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; margin-top: 2px; }
input[type=number]::-webkit-inner-spin-button { opacity: 1; }

/* ── Modal ── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 500; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: var(--blanco); border-radius: 16px; width: 100%; max-width: 460px; margin: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.modal-header h3 { font-size: 15px; font-weight: 600; color: var(--verde); }
.modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.modal-footer { padding: 12px 18px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: 8px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 11px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: 0.05em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 3px; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 45vh; height: auto; }
  #map { height: 45vh; }
  .panel-izq { max-height: 55vh; overflow-y: auto; }
}