/* Inventario y verificación — colores institucionales Areandina.
   Verde para estructura, magenta solo para resaltar lo pendiente. */
:root{
  --verde:#7FB536; --verde-osc:#4a7a12; --verde-tinta:#1f3a05; --verde-claro:#f0f7e4;
  --magenta:#E6007E; --magenta-osc:#b8005f; --magenta-claro:#fde6f2;
  --texto:#22303c; --gris:#5b6b7b; --borde:#d7dee6; --fondo:#f4f6f9; --blanco:#fff;
  --ok:#1e7e34; --ok-claro:#e6f4ea;
  --mal:#b02a37; --mal-claro:#fdecec;
  --dif:#8a5a00; --dif-claro:#fff4d6;
  --seg:#1f5f99; --seg-claro:#e3f0fb;
  --sol:#476072; --sol-claro:#e8edf1;
  --radio:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font-family:"Segoe UI",system-ui,-apple-system,sans-serif; color:var(--texto);
  background:var(--fondo); font-size:15px; line-height:1.45}
h1,h2,h3{margin:0; line-height:1.25; text-wrap:balance}
h2{font-size:1.25rem}
h3{font-size:1rem}
[hidden]{display:none !important}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--magenta); outline-offset:2px}

/* ---------- cabecera y navegación ---------- */
.cabecera{background:var(--verde); color:var(--verde-tinta); border-bottom:3px solid var(--magenta);
  padding:10px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cabecera h1{font-size:1.1rem; flex:1 1 auto; min-width:0}
.cabecera small{display:block; font-weight:400; font-size:.78rem; opacity:.9}
.cabecera .quien{font-size:.85rem; text-align:right}
.cabecera .btn{background:transparent; border-color:var(--verde-tinta); color:var(--verde-tinta);
  min-height:36px; padding:4px 10px}
.nav{background:var(--blanco); border-bottom:1px solid var(--borde); display:flex; gap:2px;
  overflow-x:auto; padding:0 8px; position:sticky; top:0; z-index:5}
.nav button{border:0; background:none; padding:13px 14px; cursor:pointer; white-space:nowrap;
  color:var(--gris); border-bottom:3px solid transparent; font-weight:600}
.nav button[aria-current="page"]{color:var(--verde-osc); border-bottom-color:var(--verde)}
main{max-width:1180px; margin:0 auto; padding:18px 16px 90px}
.titulo-vista{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:14px}
.ayuda{color:var(--gris); font-size:.88rem; margin:4px 0 0}

/* ---------- controles ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px;
  padding:8px 16px; border-radius:8px; border:1px solid var(--verde-osc); background:var(--verde-osc);
  color:#fff; font-weight:600; cursor:pointer; text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.sec{background:var(--blanco); color:var(--verde-osc)}
.btn.peligro{background:var(--blanco); color:var(--mal); border-color:var(--mal)}
.btn.grande{min-height:56px; font-size:1.05rem; padding:12px 22px}
.btn.chico{min-height:34px; padding:4px 10px; font-size:.85rem}
label{display:block; font-size:.85rem; font-weight:600; color:var(--gris)}
input,select,textarea{width:100%; min-height:44px; padding:8px 10px; border:1px solid var(--borde);
  border-radius:8px; background:var(--blanco); margin-top:3px}
textarea{min-height:76px; resize:vertical}
input[type=checkbox]{width:22px; min-height:22px; height:22px; margin:0; accent-color:var(--verde-osc)}
.casilla{display:flex; align-items:center; gap:8px; font-weight:400; color:var(--texto); font-size:.95rem}
.filtros{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio); padding:12px;
  margin-bottom:14px; align-items:end}
.acciones{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.tarjeta{background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio);
  padding:14px; margin-bottom:14px}
.formulario{display:grid; gap:12px; max-width:520px}
.vacio{text-align:center; color:var(--gris); padding:28px 12px}

/* ---------- etiquetas de estado ---------- */
.chip{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.78rem; font-weight:700;
  white-space:nowrap; border:1px solid transparent}
.chip.bueno{background:var(--ok-claro); color:var(--ok)}
.chip.malo{background:var(--mal-claro); color:var(--mal)}
.chip.dif{background:var(--dif-claro); color:var(--dif)}
.chip.pendiente{background:var(--magenta-claro); color:var(--magenta-osc)}
.chip.en_seguimiento{background:var(--seg-claro); color:var(--seg)}
.chip.solucionada{background:var(--sol-claro); color:var(--sol)}
.chip.neutro{background:#eef1f4; color:var(--gris)}

/* ---------- panel ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:16px}
.kpi{background:var(--blanco); border:1px solid var(--borde); border-left:5px solid var(--verde);
  border-radius:var(--radio); padding:10px 12px}
.kpi b{display:block; font-size:1.7rem; line-height:1.1; font-variant-numeric:tabular-nums}
.kpi span{font-size:.8rem; color:var(--gris)}
.kpi.malo{border-left-color:var(--mal)} .kpi.dif{border-left-color:#d9a400}
.kpi.pend{border-left-color:var(--magenta)} .kpi.gris{border-left-color:#9aa7b3}
.graficos{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}
.barra{display:grid; grid-template-columns:minmax(90px,38%) 1fr 34px; gap:8px; align-items:center;
  font-size:.86rem; margin:7px 0}
.barra .pista{background:#eef1f4; border-radius:6px; height:16px; overflow:hidden}
.barra .relleno{height:100%; background:var(--verde); border-radius:6px}
.barra .relleno.mag{background:var(--magenta)}
.barra b{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- tablas (se vuelven tarjetas en el celular) ---------- */
.tabla-caja{background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio);
  overflow-x:auto; margin-bottom:14px}
table{border-collapse:collapse; width:100%; font-size:.88rem}
th{background:var(--verde-claro); color:var(--verde-tinta); text-align:left; padding:9px 10px;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap}
td{padding:9px 10px; border-top:1px solid var(--borde); vertical-align:top}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr.alerta td{background:#fffafa}
.area-titulo{margin:18px 0 8px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.area-titulo small{color:var(--gris); font-weight:400}
.dif-num{font-weight:700}
.dif-num.neg{color:var(--mal)} .dif-num.pos{color:var(--dif)}
.miniaturas{display:flex; gap:6px; flex-wrap:wrap}
.miniaturas img{width:54px; height:54px; object-fit:cover; border-radius:6px; border:1px solid var(--borde);
  cursor:zoom-in; background:#eef1f4}
.miniaturas .quitar{position:relative}
.miniaturas .quitar button{position:absolute; top:-8px; right:-8px; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--mal); background:#fff; color:var(--mal); cursor:pointer; font-weight:700; line-height:1}
@media (max-width:760px){
  table.apilar thead{display:none}
  table.apilar tr{display:block; padding:10px 12px; border-top:1px solid var(--borde)}
  table.apilar tr:first-child{border-top:0}
  table.apilar td{display:flex; justify-content:space-between; gap:12px; border:0; padding:3px 0; text-align:right}
  table.apilar td::before{content:attr(data-t); font-weight:600; color:var(--gris); text-align:left; flex:0 0 42%}
  table.apilar td:empty{display:none}
  table.apilar td.principal{display:block; text-align:left; font-weight:700; font-size:1rem}
  table.apilar td.principal::before{content:none}
  table.apilar tr.alerta td{background:none}
  table.apilar tr.alerta{background:#fffafa}
}

/* ---------- verificación ---------- */
.progreso{position:sticky; top:47px; z-index:4; background:var(--fondo); padding:8px 0}
.progreso .pista{height:10px; background:#dfe5ea; border-radius:6px; overflow:hidden}
.progreso .relleno{height:100%; background:var(--verde); transition:width .2s}
.item{background:var(--blanco); border:1px solid var(--borde); border-left:6px solid #c5ced6;
  border-radius:var(--radio); padding:14px; margin-bottom:12px; display:grid; gap:10px}
.item.bueno{border-left-color:var(--ok)} .item.malo{border-left-color:var(--mal)}
.item.condif{border-left-color:#d9a400}
.item header{display:flex; justify-content:space-between; gap:8px; align-items:baseline; flex-wrap:wrap}
.item .base{color:var(--gris); font-size:.9rem}
.item .guardado{font-size:.78rem; color:var(--ok); min-height:1em}
.item .guardado.error{color:var(--mal); font-weight:700}
.cantidad{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.paso{display:flex; align-items:stretch}
.paso button{width:52px; min-height:52px; font-size:1.5rem; border:1px solid var(--verde-osc);
  background:var(--verde-claro); color:var(--verde-tinta); cursor:pointer; font-weight:700}
.paso button:first-child{border-radius:8px 0 0 8px} .paso button:last-child{border-radius:0 8px 8px 0}
.paso input{width:84px; min-height:52px; margin:0; border-radius:0; border-left:0; border-right:0;
  text-align:center; font-size:1.3rem; font-weight:700}
.aviso{border-radius:8px; padding:8px 10px; font-size:.9rem; font-weight:600}
.aviso.dif{background:var(--dif-claro); color:var(--dif)}
.aviso.mal{background:var(--mal-claro); color:var(--mal)}
.aviso.info{background:var(--seg-claro); color:var(--seg)}
.aviso.ok{background:var(--ok-claro); color:var(--ok)}
.barra-final{position:fixed; left:0; right:0; bottom:0; background:var(--blanco); border-top:1px solid var(--borde);
  padding:10px 16px; display:flex; gap:10px; justify-content:center; z-index:6; box-shadow:0 -4px 14px rgba(0,0,0,.06)}
.barra-final .btn{flex:1 1 auto; max-width:360px}
.subir{display:flex; gap:8px; flex-wrap:wrap}
.subir input{display:none}

/* ---------- ventana emergente y avisos ---------- */
.modal{position:fixed; inset:0; background:rgba(20,30,40,.55); display:flex; align-items:flex-start;
  justify-content:center; padding:4vh 12px; overflow-y:auto; z-index:20}
.modal .caja{background:var(--blanco); border-radius:14px; width:100%; max-width:640px; padding:18px;
  border-top:5px solid var(--verde)}
.modal .caja.ancha{max-width:980px}
.modal .cierre{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px}
.modal .cierre button{border:0; background:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--gris);
  min-width:40px; min-height:40px}
.modal img.grande{max-width:100%; max-height:76vh; display:block; margin:0 auto; border-radius:8px}
#toast{position:fixed; left:50%; bottom:84px; transform:translateX(-50%); background:#22303c; color:#fff;
  padding:10px 16px; border-radius:8px; z-index:30; max-width:92vw; font-weight:600}
#toast.error{background:var(--mal)}

/* ---------- acceso ---------- */
.acceso{max-width:420px; margin:8vh auto; background:var(--blanco); border:1px solid var(--borde);
  border-top:6px solid var(--verde); border-radius:14px; padding:24px}
.acceso h2{margin-bottom:4px}
.acceso .formulario{margin-top:16px}

/* ---------- importación ---------- */
.mapeo{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:12px 0}
.linea-tiempo{border-left:3px solid var(--verde); margin:8px 0 0 6px; padding-left:14px; display:grid; gap:10px}
.linea-tiempo div{font-size:.9rem}
.linea-tiempo small{color:var(--gris); display:block}

@media print{
  .cabecera,.nav,.no-imprimir,.barra-final,#toast{display:none !important}
  body{background:#fff; font-size:11pt}
  main{max-width:none; padding:0}
  .tarjeta,.tabla-caja,.kpi{break-inside:avoid; border-color:#bbb}
  .tabla-caja{overflow:visible}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}