/* ============================================================
   Predios — Monitoreo de existencias en predio
   Capa sobre base.css (sistema JOS Acopios, estilo Meta):
   azul marino = identidad y datos · azul #0A78BE = acciones
   ============================================================ */

:root{
	--bg:#F3F5F8;
	--navy:#1F3864;
	--navy-700:#172B4F;
	--navy-soft:#E8EDF5;
	--teal:#1F9E91;
	--teal-soft:rgba(31,158,145,.12);
	--amber:#D99A1E;
	--amber-ink:#9A6200;
	--amber-soft:rgba(230,144,0,.14);
	--ok:var(--green);
	--bad:#C0392B;
	--bad-soft:rgba(192,57,43,.09);
	--m1:#B38B2D;--m2:#3E5C8F;--m3:#5FA3A5;--m4:#7A5FA8;
}

body{background:var(--bg)}
.num,.kpi .valor,table.data td.n{font-variant-numeric:tabular-nums}

/* ---------- Topbar azul marino ---------- */
.topbar--brand{background:var(--navy);border-bottom:0;gap:14px;height:58px}
.topbar--brand .brand{gap:12px;min-width:0}
.topbar--brand .brand img{height:30px;filter:brightness(0) invert(1)}
.topbar--brand .brand:hover{text-decoration:none}
.brand-txt{color:rgba(255,255,255,.92);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border-left:1px solid rgba(255,255,255,.25);padding-left:12px}
.brand-txt b{color:#fff;font-weight:800;letter-spacing:.1em}
.brand-txt em{font-style:normal;color:rgba(255,255,255,.65);font-weight:500}
.topbar--brand .top-nav{gap:2px;margin-left:8px}
.topbar--brand .top-nav a{color:rgba(255,255,255,.8);font-weight:600;font-size:13.5px;padding:7px 11px;border-radius:6px;display:inline-flex;align-items:center;gap:6px}
.topbar--brand .top-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.topbar--brand .top-nav a.active{background:rgba(255,255,255,.16);color:#fff}
.nav-count{background:#E5533D;color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:0 6px;line-height:17px;min-width:17px;text-align:center}
.topbar--brand .user-chip:hover{background:rgba(255,255,255,.08)}
.topbar--brand .user-chip-nombre{color:#fff}
.topbar--brand .user-chip-rol{color:rgba(255,255,255,.65)}
.topbar--brand .user-chip-flecha{color:rgba(255,255,255,.8)}
.avatar.avatar-cliente,.user-chip .avatar.avatar-cliente{background:var(--teal)}
.nav-toggle{display:none;background:none;border:0;color:#fff;width:36px;height:36px;cursor:pointer;padding:6px;border-radius:6px}
.nav-toggle svg{width:22px;height:22px}
.banda-demo{background:#FFF4D6;color:#7A5300;text-align:center;font-size:12.5px;font-weight:600;padding:5px 12px;border-bottom:1px solid #F2DFA6}

@media (max-width:1320px){.brand-txt{display:none}}
@media (max-width:1040px){
	.nav-toggle{display:block}
	.topbar--brand .top-nav{display:none;position:absolute;top:58px;left:0;right:0;background:var(--navy-700);flex-direction:column;align-items:stretch;padding:8px;margin:0;z-index:40;box-shadow:0 8px 20px rgba(0,0,0,.25)}
	.topbar--brand .top-nav.abierto{display:flex}
	.topbar--brand .top-nav a{padding:11px 14px;font-size:15px}
}

.main{padding:24px 28px 40px}
.main-contenida{max-width:1320px}
@media (max-width:700px){.main{padding:16px 14px 32px}}

/* ---------- Encabezado de página y barra de filtros ---------- */
.page-head{margin-bottom:16px}
.page-head h1{font-size:23px;color:var(--ink)}
.page-head .sub{color:var(--ink-secondary);font-size:13.5px;margin-top:2px}
.breadcrumb{color:var(--ink-secondary);font-size:13px;margin-bottom:6px}
.breadcrumb a{color:var(--ink-secondary)}
.breadcrumb b{color:var(--ink)}

.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.filterbar .spacer{flex:1}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg a{padding:7px 13px;font-size:13px;font-weight:600;color:var(--ink-secondary);border-right:1px solid var(--line-soft)}
.seg a:last-child{border-right:0}
.seg a:hover{background:#F5F7F9;text-decoration:none;color:var(--ink)}
.seg a.on{background:var(--navy);color:#fff}
.chip-filter{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:0 4px 0 11px;height:34px;font-size:13px;color:var(--ink-secondary)}
.chip-filter select{border:0;background:transparent;font:inherit;font-weight:700;color:var(--ink);height:32px;padding:0 6px;cursor:pointer;max-width:190px}
.chip-filter select:focus{outline:none}
.periodo-nav{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:7px;height:34px;font-size:13px}
.periodo-nav a{padding:0 9px;color:var(--ink-secondary);font-size:16px;line-height:32px}
.periodo-nav a:hover{text-decoration:none;color:var(--blue)}
.periodo-nav span{padding:0 6px;font-weight:700;color:var(--ink);white-space:nowrap}
.tol-chip{background:#fff;border:1px solid var(--line);border-radius:7px;height:34px;display:inline-flex;align-items:center;padding:0 12px;font-size:13px;color:var(--ink-secondary)}
.tol-chip b{color:var(--ink);margin-left:4px}

/* ---------- KPIs ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
@media (max-width:1200px){.kpi-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.kpi-row{grid-template-columns:1fr 1fr}}
.kpi{background:#fff;border-radius:var(--radius);box-shadow:0 1px 4px rgba(28,43,51,.09);padding:15px 18px;min-width:0}
.kpi .etq{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-secondary)}
.kpi .valor{font-size:29px;font-weight:700;color:var(--navy);line-height:1.15;margin-top:6px;white-space:nowrap}
.kpi .sub{font-size:12.5px;color:var(--ink-secondary);margin-top:2px}
.kpi--destacado{background:var(--navy)}
.kpi--destacado .etq,.kpi--destacado .sub{color:rgba(255,255,255,.75)}
.kpi--destacado .valor{color:#fff}
.kpi--neg .valor{color:var(--bad)}
.kpi--warn .valor{color:var(--amber-ink)}
.kpi--ok .valor{color:var(--ok)}

/* ---------- Paneles ---------- */
.panel-head h2{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.panel-head .acciones{display:flex;gap:8px;align-items:center}
.panel-body.compacto{padding:14px 18px}
.grid{display:grid;gap:18px;margin-bottom:0}
.grid > .panel{margin-bottom:0}
.g-2{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-7-5{grid-template-columns:7fr 5fr}
.g-8-4{grid-template-columns:8fr 4fr}
.grid + .grid,.grid + .panel,.panel + .grid{margin-top:18px}
@media (max-width:1000px){.g-2,.g-3,.g-7-5,.g-8-4{grid-template-columns:1fr}}
.chart-box{position:relative;height:270px}
.chart-box.alto{height:320px}
.chart-box.bajo{height:210px}
.chart-note{font-size:12px;color:var(--ink-secondary);margin-top:10px}
table.data.plain th{background:transparent}
table.data td.n,table.data th.n{text-align:right}
table.data td,table.data th{padding-left:16px;padding-right:16px}
table.data a{font-weight:600}
table.data tr.clic{cursor:pointer}
.muted{color:var(--ink-secondary)}
.chico{font-size:12.5px}

/* ---------- Semáforo ---------- */
.sem{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;white-space:nowrap;padding:3px 10px 3px 8px;border-radius:999px}
.sem i{width:8px;height:8px;border-radius:50%;display:inline-block}
.sem-ok{background:var(--green-soft);color:var(--green)}.sem-ok i{background:var(--green)}
.sem-revisar{background:var(--amber-soft);color:var(--amber-ink)}.sem-revisar i{background:var(--amber)}
.sem-urgente{background:var(--bad-soft);color:var(--bad)}.sem-urgente i{background:var(--bad)}
.sem-sin_libro{background:var(--line-soft);color:var(--ink-secondary)}.sem-sin_libro i{background:#8A9AA9}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:1px}
.badge-validada{background:var(--green-soft);color:var(--green)}
.badge-cargada{background:var(--amber-soft);color:var(--amber-ink)}
.badge-info{background:var(--blue-soft);color:var(--blue)}
.badge-gris{background:var(--line-soft);color:var(--ink-secondary)}
.neg{color:var(--bad)}
.pos{color:var(--green)}

/* ---------- Ficha de pila ---------- */
.ficha-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ficha-head h1{font-size:26px;color:var(--navy)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tags span{background:var(--navy-soft);color:var(--navy);font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:5px}
.estado-pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.facts{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-radius:var(--radius);box-shadow:0 1px 4px rgba(28,43,51,.09);margin-bottom:18px}
.facts > div{padding:14px 18px;border-right:1px solid var(--line-soft);min-width:0}
.facts > div:last-child{border-right:0}
.facts .etq{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-secondary)}
.facts .val{font-size:15.5px;font-weight:700;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){.facts{grid-template-columns:1fr 1fr}.facts > div{border-bottom:1px solid var(--line-soft)}}
.selector-visita{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-secondary)}
.kv{width:100%;border-collapse:collapse;font-size:13.5px}
.kv td{padding:8px 0;border-bottom:1px solid var(--line-soft)}
.kv td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.kv tr:last-child td{border-bottom:0}
.callout{background:var(--navy-soft);border-radius:6px;padding:11px 14px;font-size:13px;color:var(--ink);margin-top:14px;line-height:1.6}
.callout b{color:var(--navy)}
.callout a{font-weight:600}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:700px){.galeria{grid-template-columns:1fr 1fr}}
.foto{border:1px solid var(--line-soft);border-radius:7px;overflow:hidden;background:#fff}
.foto .img{aspect-ratio:4/3;background:#EEF1F5 center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#9AA8B5;position:relative}
.foto .img svg{width:34px;height:34px}
.foto .img .origen{position:absolute;top:8px;left:8px;background:rgba(31,56,100,.85);color:#fff;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.04em}
.foto .img .origen.manual{background:rgba(31,158,145,.9)}
.foto .cap{font-size:12px;color:var(--ink-secondary);padding:8px 10px;line-height:1.35}
.foto.subir{border-style:dashed;cursor:pointer}
.foto.subir .img{background:#FAFBFC;color:var(--blue);flex-direction:column;gap:6px;font-size:12.5px;font-weight:700}
.foto.subir:hover .img{background:#F0F6FC}
.minimapa{height:190px;border-radius:7px;overflow:hidden;background:#E8EEE8}
.loc-txt{font-size:12.5px;color:var(--ink-secondary);margin-top:10px;line-height:1.55}
.loc-txt b{color:var(--ink)}

/* Barra de tolerancia: --pos (0–100) */
.tolbar{margin-top:16px}
.tolbar .etq{font-size:12px;color:var(--ink-secondary);margin-bottom:6px}
.tolbar .pista{position:relative;height:14px;border-radius:999px;background:linear-gradient(90deg,#CFE6D8 0 30%,#F3E1B8 30% 50%,#F2CFCA 50% 100%)}
.tolbar .marca{position:absolute;top:-5px;bottom:-5px;border-left:2px dashed #6B7B8A;left:50%}
.tolbar .punto{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);left:calc(var(--pos) * 1%)}
.tolbar .escala{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-secondary);margin-top:8px}
.tolbar .valor{text-align:center;font-weight:800;font-size:14px;margin-top:2px}

.alarm-banner{display:flex;gap:14px;align-items:flex-start;border-radius:var(--radius);padding:15px 18px;margin:18px 0;border-left:4px solid}
.alarm-banner svg{width:24px;height:24px;flex-shrink:0;margin-top:1px}
.alarm-banner .tit{font-weight:800;font-size:14px}
.alarm-banner .det{font-size:13px;margin-top:2px}
.alarm-banner .meta{margin-left:auto;font-size:12.5px;font-weight:700;white-space:nowrap}
.alarm-urgente{background:#FCEDEB;border-color:var(--bad);color:#8E2A1F}
.alarm-revisar{background:#FDF4E1;border-color:var(--amber);color:#7A5300}

/* ---------- Bitácora ---------- */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.timeline li:last-child{border-bottom:0}
.timeline .av{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.timeline .av.sis{background:var(--line-soft);color:var(--ink-secondary)}
.timeline .av.cli{background:var(--teal)}
.timeline .cuerpo{min-width:0;flex:1}
.timeline .quien{font-size:12.5px;color:var(--ink-secondary)}
.timeline .quien b{color:var(--ink)}
.timeline .msg{font-size:13.5px;margin-top:2px;white-space:pre-line;word-wrap:break-word}
.timeline .tipo{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:4px;margin-left:6px}
.tipo-accion{background:var(--teal-soft);color:var(--teal)}
.tipo-evento{background:var(--line-soft);color:var(--ink-secondary)}
.tipo-foto{background:var(--blue-soft);color:var(--blue)}
.timeline .foto-mini{display:block;margin-top:8px;max-width:220px;border-radius:6px;border:1px solid var(--line-soft)}
.bitacora-form{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line-soft);margin-top:4px}
.textarea{width:100%;min-height:70px;padding:9px 11px;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:var(--radius-sm);resize:vertical;color:var(--ink)}
.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.bitacora-form .fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bitacora-form .fila .spacer{flex:1}
.scroll-y{max-height:460px;overflow-y:auto}

/* ---------- Mapa ---------- */
.mapa-wrap{position:relative}
.mapa{height:calc(100vh - 230px);min-height:480px;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 4px rgba(28,43,51,.09);background:#dfe6df}
.map-zoombadge{position:absolute;top:12px;left:56px;z-index:500;background:#fff;border-radius:7px;box-shadow:0 1px 6px rgba(0,0,0,.18);padding:7px 12px;font-size:12.5px;color:var(--ink-secondary)}
.map-zoombadge b{color:var(--ink)}
.map-legend{position:absolute;bottom:22px;left:12px;z-index:500;background:#fff;border-radius:7px;box-shadow:0 1px 6px rgba(0,0,0,.18);padding:10px 13px;font-size:12px;line-height:1.75}
.map-legend .tit{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-secondary)}
.map-chip{background:#fff;border-radius:7px;padding:6px 10px;box-shadow:0 1px 5px rgba(0,0,0,.25);font-size:12px;line-height:1.3;white-space:nowrap;border:1.5px solid #fff;cursor:pointer}
.map-chip b{font-size:12.5px;display:block;color:var(--ink)}
.map-chip span{color:var(--ink-secondary)}
.map-chip.revisar{border-color:var(--amber)}
.map-chip.urgente{border-color:var(--bad)}
.map-chip.ok{border-color:var(--green)}
.pila-pin{background:#fff;border-radius:6px;padding:3px 8px 3px 6px;box-shadow:0 1px 4px rgba(0,0,0,.3);font-size:11.5px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.pila-pin i{width:8px;height:8px;border-radius:50%}
.leaflet-div-icon{background:transparent;border:0}
.map-popup .leaflet-popup-content-wrapper{padding:0;border-radius:8px;overflow:hidden}
.map-popup .leaflet-popup-content{margin:0;width:260px !important;font-family:var(--font)}
.pop-head{background:var(--navy);color:#fff;font-weight:800;padding:10px 14px;font-size:14px;display:flex;align-items:center;gap:7px}
.pop-body{padding:8px 14px 12px}
.pop-body table{width:100%;font-size:12.5px;border-collapse:collapse}
.pop-body td{padding:4px 0}
.pop-body td:last-child{text-align:right;font-weight:700}
.pop-body .sep td{border-top:1px solid var(--line-soft);padding-top:7px}
.pop-body .btn{margin-top:10px;width:100%;height:32px;font-size:13px;color:#fff}

/* ---------- Carpeta del predio: 4 momentos ---------- */
.momentos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media (max-width:1000px){.momentos{grid-template-columns:1fr 1fr}}
.momento{background:#fff;border-radius:var(--radius);box-shadow:0 1px 4px rgba(28,43,51,.09);overflow:hidden}
.momento .cab{color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:9px 13px;display:flex;align-items:center;gap:8px}
.momento .cab i{background:rgba(255,255,255,.25);border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11px}
.momento .cuerpo{padding:11px 13px;font-size:13px;min-height:62px}
.momento .cuerpo .quien{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-secondary);margin-bottom:4px}
.momento.inactivo{opacity:.62}
.m1 .cab{background:var(--m1)}.m2 .cab{background:var(--m2)}.m3 .cab{background:var(--m3)}.m4 .cab{background:var(--m4)}

/* ---------- Listas, barras horizontales ---------- */
.hbar-list{display:flex;flex-direction:column;gap:13px}
.hbar .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.hbar .top b{font-variant-numeric:tabular-nums}
.hbar .track{height:9px;background:var(--line-soft);border-radius:999px;overflow:hidden}
.hbar .fill{height:100%;background:var(--navy);border-radius:999px}
.alerta-item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.alerta-item:last-child{border-bottom:0}
.alerta-item .badge{flex-shrink:0;min-width:66px;text-align:center}
.alerta-item .tit{font-weight:700;font-size:13.5px}
.alerta-item .det{font-size:12.5px;color:var(--ink-secondary)}
.badge-urgente{background:var(--bad-soft);color:var(--bad)}
.badge-revisar{background:var(--amber-soft);color:var(--amber-ink)}

/* ---------- Próximamente ---------- */
.proximo{max-width:760px;margin:30px auto}
.proximo .icono{width:62px;height:62px;border-radius:50%;background:var(--navy-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.proximo .icono svg{width:30px;height:30px}
.proximo h1{font-size:24px;color:var(--navy);margin-bottom:6px}
.proximo .etapa{display:inline-block;background:var(--amber-soft);color:var(--amber-ink);font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px;margin-bottom:14px}
.proximo ul{margin:14px 0 0 20px;line-height:1.8}

/* ---------- Varios ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:7px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:all .2s ease;z-index:200}
.toast.ver{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--bad)}
.vacio{padding:26px;text-align:center;color:var(--ink-secondary);font-size:13.5px}
.buscador{height:34px;border:1px solid var(--line);border-radius:7px;padding:0 12px;font:inherit;font-size:13.5px;min-width:220px}
.buscador:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.login-wrap .login-card .app-nombre{font-size:30px;font-weight:800;color:var(--navy);letter-spacing:.14em;margin-top:6px}
.login-wrap .login-card .tagline{margin-bottom:24px}
@media print{.topbar,.banda-demo,.filterbar,.bitacora-form,.btn{display:none !important}.main{padding:0}}
.data.compacta td,.data.compacta th{white-space:nowrap;padding-left:12px;padding-right:12px}
table.data tr.destacada td{background:#FFF8E6}