:root { --mobil: #c8102e; --mobil-osc: #9e0c24; --azul: #003b71; }
body { background: #f4f6f9; font-size: .92rem; }
.bg-mobil { background: linear-gradient(90deg, var(--azul), #00508f); }
.btn-mobil { background: var(--mobil); border-color: var(--mobil); color: #fff; }
.btn-mobil:hover, .btn-mobil:focus { background: var(--mobil-osc); border-color: var(--mobil-osc); color: #fff; }
.btn-mobil:disabled { background: #d98a97; border-color: #d98a97; }
a { color: var(--azul); }

.login-wrap { min-height: calc(100vh - 2rem); display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; border: 0; border-top: 4px solid var(--mobil); }
.login-logo { width: 56px; height: 56px; border-radius: 50%; background: var(--azul); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; }

.seccion { font-weight: 600; color: var(--azul); border-bottom: 2px solid #e3eaf3; padding-bottom: .25rem; margin-bottom: .6rem; }
.card { border: 0; }

.mapa { width: 100%; border-radius: .5rem; border: 1px solid #dfe3e8; background: #e9eef3; }
.mapa-detalle { height: 360px; }
.mapa-grande { height: 560px; }
.mapa-general { height: calc(100vh - 180px); min-height: 420px; }
.pin-icon { background: none; border: 0; }

.leyenda { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 2px; vertical-align: middle; }
.leyenda-actual { background: #0d6efd; } .leyenda-dir { background: #fd7e14; } .leyenda-nuevo { background: #198754; }
.leyenda-mapa { background: #fff; padding: 6px 10px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.25); font-size: 12px; line-height: 1.6; }
.leyenda-mapa span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 2px solid #fff; box-shadow: 0 0 0 1px #999; }

table.dataTable td { vertical-align: top; }
#tablaClientes .small { font-size: .8rem; }
@media (max-width: 576px) { .mapa-grande { height: 420px; } }

/* Ficha de cliente */
.ficha { padding-bottom: 80px; }
.ficha .seccion { font-size: .95rem; }
.ficha .form-control, .ficha .form-select { font-size: .9rem; }
.mapa-ficha { height: 380px; }
.ficha-indice a { padding: .2rem .55rem; border-radius: 99px; background: #fff; border: 1px solid #dfe3e8; text-decoration: none; color: #445; }
.ficha-indice a:hover { background: #eef3f9; }
section[id] { scroll-margin-top: 70px; }
.btn.chip { border-radius: 99px; font-size: .8rem; padding: .2rem .7rem; }
.btn-check:checked + .btn.chip { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn.dia { min-width: 46px; }
.credito { background: #f6f8fb; border-radius: .5rem; padding: .6rem .5rem; }
.cr-lbl { font-size: .72rem; color: #6c757d; }
.cr-val { font-weight: 600; font-size: .88rem; white-space: nowrap; }
.barra-guardar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: rgba(255,255,255,.96); border-top: 1px solid #dfe3e8; padding: .6rem 0; box-shadow: 0 -2px 8px rgba(0,0,0,.05); }
#tablaClientes tbody tr[data-href] { cursor: pointer; }
@media (max-width: 576px) { .mapa-ficha { height: 300px; } }

/* Lista de clientes */
.kpi { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid transparent; border-radius: .6rem; padding: .7rem .9rem; text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; }
.kpi:hover { border-color: #cfd8e3; }
.kpi.activo { border-color: var(--azul); box-shadow: 0 0 0 2px rgba(0,59,113,.15); }
.kpi-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: none; }
.kpi-num { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.kpi-num small { font-size: .75rem; font-weight: 500; color: #6c757d; }
.kpi-lbl { font-size: .78rem; color: #6c757d; }
.filtros .form-select.filtro-activo { border-color: var(--azul); background-color: #eef4fb; font-weight: 600; }
.tabla-clientes thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; font-weight: 600; border-bottom-width: 1px; white-space: nowrap; }
.tabla-clientes td { padding-top: .55rem; padding-bottom: .55rem; }
.cli-nombre { font-weight: 600; text-decoration: none; color: #1d2b3a; }
.cli-nombre:hover { color: var(--azul); text-decoration: underline; }
.cli-sub { font-size: .76rem; color: #6c757d; max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dias-pills { display: inline-flex; gap: 2px; }
.dias-pills span { width: 18px; height: 18px; border-radius: 4px; font-size: .62rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: #eef0f3; color: #b0b7c0; }
.dias-pills span.on { background: var(--azul); color: #fff; }
div.dt-container .dt-search { display: none; }
div.dt-container .dt-buttons .btn { padding: .2rem .6rem; }
.suc-selector .form-select { background-color: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); min-width: 170px; }
.suc-selector .form-select option { color: #212529; }
.suc-tag { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 0 .4rem; border-radius: 4px; background: #eef0f3; color: #6c757d; }
.suc-tag.suc-arica { background: #e7f0fb; color: #0b4f9c; }
.suc-tag.suc-iquique { background: #fdeee6; color: #a3410f; }

/* Análisis por zona */
.mapa-zonas { height: 520px; min-height: 360px; cursor: crosshair; }
.mapa-zonas.modo-zona { cursor: pointer; }
.vertice { background: #fff; border: 3px solid #0000ff; border-radius: 50%; cursor: move; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.vertice-medio { background: rgba(255,255,255,.85); border: 2px solid #4285f4; border-radius: 50%; cursor: copy; opacity: .8; }
.vertice-medio:hover { opacity: 1; background: #4285f4; }
.z-filtro { font-size: .8rem; }
#tablaZona tbody tr { cursor: pointer; }
#tablaZona tbody tr.fila-sel > td { background: #c8f7d4 !important; }

/* Fotos */
.foto-prev { aspect-ratio: 4 / 3; border-radius: .5rem; overflow: hidden; background: #f1f3f6; border: 1px solid #dfe3e8; }
.foto-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-vacia { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9aa4b0; font-size: .75rem; gap: .25rem; text-align: center; }
.foto-vacia i { font-size: 1.6rem; }
.kpi.kpi-info { cursor: default; }
.kpi.kpi-info:hover { border-color: transparent; }