:root{
  --navy:#1f3864; --navy2:#2e75b6; --azul-claro:#ebf3fb;
  --bg:#f0f4f8; --card:#ffffff; --texto:#1a1a2e; --gris:#5b6b7f; --linea:#dfe6ee;
  --alta:#c0392b; --media:#b9770e; --baja:#5b6b7f;
  --hecho:#1e7e34; --curso:#2e75b6; --pend:#8592a3; --repro:#8e44ad; --bloq:#c0392b;
  --validar:#0e7c86; --vencida:#c0392b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--texto);font-family:Segoe UI,Arial,sans-serif;font-size:14px}
header{background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 22px;flex-wrap:wrap}
.brand strong{display:block;font-size:16px;letter-spacing:.5px}
.brand span{font-size:11px;color:#bdd7ee}
.fecha-sel{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fecha-sel input[type=date]{padding:6px 8px;border-radius:6px;border:0;font-size:13px}
.ghost{background:transparent;border:1px solid #6f8fbf;color:#fff;border-radius:6px;padding:6px 12px;cursor:pointer}
.ghost:hover{background:#2a4a7a}

nav.tabs{display:flex;gap:2px;background:#e4ebf3;padding:0 12px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
nav.tabs button{background:transparent;border:0;padding:12px 18px;cursor:pointer;color:var(--gris);font-size:13px;border-bottom:3px solid transparent}
nav.tabs button.activo{color:var(--navy);font-weight:700;border-bottom-color:var(--navy2)}

main{max-width:1080px;margin:0 auto;padding:22px}
.tab{display:none}
.tab.activo{display:block}
.barra{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:14px}
h2{color:var(--navy);margin:0;font-size:18px}
.resumen{font-size:12px;color:var(--gris)}
.resumen b{color:var(--texto)}
.ayuda{font-size:12px;color:var(--gris);background:var(--azul-claro);border-left:3px solid var(--navy2);padding:10px 12px;border-radius:4px}

.tarjeta{background:var(--card);border:1px solid var(--linea);border-radius:8px;padding:16px;margin-bottom:18px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.form-grid .ancho{grid-column:1/-1}
.form-grid .derecha{text-align:right}
label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--gris);margin-bottom:4px}
input,select{width:100%;padding:8px 10px;border:1px solid var(--linea);border-radius:6px;font-size:13px;font-family:inherit;background:#fff}
input:focus,select:focus{outline:2px solid var(--navy2);outline-offset:-1px}
button{background:var(--navy);color:#fff;border:0;border-radius:6px;padding:9px 18px;font-size:13px;cursor:pointer}
button:hover{background:#2a4a7a}

.grupo{margin-bottom:18px}
.grupo h3{color:var(--navy);font-size:14px;margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid var(--azul-claro);display:flex;justify-content:space-between}
.grupo h3 small{color:var(--gris);font-weight:400}

.item{background:var(--card);border:1px solid var(--linea);border-left:4px solid var(--pend);border-radius:6px;padding:10px 12px;margin-bottom:8px;display:flex;gap:12px;align-items:flex-start}
.item.p-alta{border-left-color:var(--alta)}
.item.p-media{border-left-color:var(--media)}
.item.p-baja{border-left-color:var(--baja)}
.item .cuerpo{flex:1;min-width:0}
.item .desc{font-weight:600}
.item .meta{font-size:12px;color:var(--gris);margin-top:3px}
.item .nota{font-size:12px;color:var(--texto);margin-top:6px;background:#f6f8fb;border-radius:4px;padding:6px 8px;white-space:pre-wrap}
.item .acciones{display:flex;gap:6px;flex-shrink:0;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:320px}
.chip{font-size:11px;padding:2px 8px;border-radius:20px;color:#fff;white-space:nowrap}
.chip.alta{background:var(--alta)} .chip.media{background:var(--media)} .chip.baja{background:var(--baja)}
.est{font-size:11px;padding:2px 8px;border-radius:4px;color:#fff}
.est.pendiente{background:var(--pend)} .est.en_curso{background:var(--curso)} .est.hecho{background:var(--hecho)}
.est.reprogramada{background:var(--repro)} .est.bloqueada{background:var(--bloq)} .est.por_validar{background:var(--validar)}
.mini{background:#eef2f7;color:var(--navy);padding:5px 10px;font-size:12px}
.mini:hover{background:#dde6f1}
.mini.rojo{color:var(--alta)}
.mini.verde{color:var(--hecho)}
select.estado-sel{width:auto;padding:5px 8px;font-size:12px}

/* ---- hora de entrega / vencida ---- */
.hlim{font-size:11px;color:var(--gris);white-space:nowrap}
.hlim.vencida{color:var(--vencida);font-weight:700}
.tag-tipo{font-size:10px;padding:1px 6px;border-radius:3px;background:#eef2f7;color:var(--gris);text-transform:uppercase;letter-spacing:.3px}
.tag-tipo.recurrente{background:#e6f0f7;color:var(--navy2)}

/* ---- control de tiempos ---- */
.tiempo-box{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--navy);white-space:nowrap}
.tiempo-box .h{font-weight:700}
.btn-crono{background:#eef2f7;color:var(--navy);border-radius:5px;padding:3px 8px;font-size:12px;line-height:1}
.btn-crono.corriendo{background:#c0392b;color:#fff;animation:pulso 1.4s infinite}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.55}}
.tiempos-lista{font-size:11px;color:var(--gris);margin-top:5px}
.tiempos-lista div{padding:2px 0;display:flex;gap:8px;align-items:center}

/* ---- validación cruzada ---- */
.val-badge{font-size:11px;padding:2px 8px;border-radius:20px;white-space:nowrap;display:inline-flex;gap:4px;align-items:center}
.val-badge.pendiente{background:#e6f4f5;color:var(--validar);border:1px solid var(--validar)}
.val-badge.aprobada{background:#e8f5ea;color:var(--hecho)}
.val-badge.rechazada{background:#fbe9e7;color:var(--alta)}
.val-caja{background:#f6f8fb;border:1px solid var(--linea);border-left:3px solid var(--validar);border-radius:6px;padding:10px 12px;margin-bottom:8px}
.val-caja .desc{font-weight:600}
.val-caja .acc{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}

/* ---- indicadores: selector de periodo + metas ---- */
.periodo-sel{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.periodo-sel button{background:#eef2f7;color:var(--navy);padding:7px 14px;font-size:12px}
.periodo-sel button.activo{background:var(--navy);color:#fff}
.kpi-card .meta{font-size:11px;margin-top:5px}
.kpi-card .meta.ok{color:var(--hecho)} .kpi-card .meta.bad{color:var(--alta)}

/* ---- recurrentes ---- */
.rec-item{background:var(--card);border:1px solid var(--linea);border-radius:6px;padding:10px 12px;margin-bottom:8px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.rec-item .desc{font-weight:600}
.rec-item .patron{font-size:12px;color:var(--gris);margin-top:3px}
.rec-item.inactivo{opacity:.55}
.patron-box{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px}
.dias-check{display:flex;gap:6px;flex-wrap:wrap}
.dias-check label{display:flex;align-items:center;gap:3px;font-size:12px;text-transform:none;letter-spacing:0;color:var(--texto);cursor:pointer}
.dias-check input{width:auto}
.vacio{color:var(--gris);font-style:italic;padding:16px;text-align:center;background:var(--card);border:1px dashed var(--linea);border-radius:6px}

.tabla{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--linea);border-radius:8px;overflow:hidden}
.tabla th,.tabla td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--linea);font-size:13px}
.tabla th{background:var(--azul-claro);color:var(--navy);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.tabla tr:last-child td{border-bottom:0}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--navy);color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;transition:transform .3s;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:99}
#toast.ver{transform:translateX(-50%) translateY(0)}

/* ---- KPI / indicadores ---- */
.kpi-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.kpi-card{background:var(--card);border:1px solid var(--linea);border-radius:8px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.kpi-card .rot{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--gris)}
.kpi-card .val{font-size:28px;font-weight:800;margin:3px 0 8px;color:var(--navy)}
.kpi-card .val.ok{color:var(--hecho)} .kpi-card .val.warn{color:var(--media)} .kpi-card .val.bad{color:var(--alta)}
.kpi-card .pie{font-size:11px;color:var(--gris);margin-top:5px}
.barra-prog{background:#e4ebf3;border-radius:6px;height:9px;overflow:hidden}
.barra-prog > span{display:block;height:9px;background:var(--navy2);border-radius:6px}
.fila-resp{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--linea);font-size:13px}
.fila-resp:last-child{border-bottom:0}
.fila-resp .nom{flex:1;min-width:0}
.fila-resp .cnt{color:var(--gris);font-size:12px;white-space:nowrap}
.fila-resp .barra-prog{width:130px;flex-shrink:0}
.fila-resp .pct{width:38px;text-align:right;font-weight:700;color:var(--navy)}
.sem-bars{display:flex;gap:10px;align-items:flex-end;height:130px;padding-top:8px}
.sem-bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.sem-bars .tubo{flex:1;width:70%;background:#eef2f7;border-radius:5px;display:flex;align-items:flex-end;overflow:hidden}
.sem-bars .tubo > span{width:100%;background:var(--navy2);border-radius:5px 5px 0 0}
.sem-bars .col.hoy .tubo > span{background:var(--navy)}
.sem-bars .et{font-size:10px;color:var(--gris)}
.sem-bars .vv{font-size:11px;font-weight:700;color:var(--navy)}

/* ---- plan semanal (matriz responsables x días) ---- */
.ps-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ps-nav .ps-rango{font-weight:700;color:var(--navy);font-size:13px}
.ps-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:8px;background:var(--card)}
.ps-tabla{border-collapse:collapse;width:100%;min-width:720px}
.ps-tabla th,.ps-tabla td{border:1px solid var(--linea);vertical-align:top;padding:6px 8px}
.ps-tabla thead th{background:var(--azul-claro);color:var(--navy);font-size:11px;text-transform:uppercase;letter-spacing:.3px;text-align:center;white-space:nowrap;position:sticky;top:0}
.ps-tabla thead th span{font-weight:400;text-transform:none;color:var(--gris)}
.ps-tabla th.ps-resp{text-align:left;background:#f6f8fb;font-size:12px;text-transform:none;letter-spacing:0;position:sticky;left:0;z-index:1;min-width:130px;max-width:150px}
.ps-tabla td{min-width:120px;font-size:12px}
.ps-tabla td.ps-hoy,.ps-tabla th.ps-hoy{background:#eaf1fb}
.ps-tabla tfoot th,.ps-tabla tfoot td{background:#f6f8fb;font-weight:700;text-align:center;color:var(--navy)}
.ps-cnt{display:inline-block;margin-left:6px;background:var(--navy);color:#fff;border-radius:20px;font-size:10px;padding:0 6px;font-weight:700}
.ps-t{display:flex;gap:5px;align-items:flex-start;padding:3px 0;line-height:1.3}
.ps-t + .ps-t{border-top:1px dashed var(--linea)}
.ps-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.ps-done{text-decoration:line-through;color:var(--gris)}
.ps-leyenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:11px;color:var(--gris)}
.ps-leyenda span{display:flex;align-items:center;gap:5px}

/* ---- avance % en cierre ---- */
.avance-box{display:flex;align-items:center;gap:6px}
.avance-box input{width:56px;padding:4px 6px;font-size:12px;text-align:right}
.avance-box .rango{width:90px}

/* ---- modal ---- */
.modal-fondo{position:fixed;inset:0;background:rgba(15,25,45,.45);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:80;overflow:auto}
.modal-fondo.ver{display:flex}
.modal{background:#fff;border-radius:10px;max-width:640px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.modal-cab{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--linea)}
.modal-cab strong{color:var(--navy);font-size:15px}
#modal-cuerpo{padding:16px 18px}
#modal-cuerpo textarea{width:100%;min-height:200px;font-family:Consolas,monospace;font-size:12px;border:1px solid var(--linea);border-radius:6px;padding:10px;white-space:pre}
.aviso{border-radius:6px;padding:10px 12px;font-size:13px;margin-bottom:12px}
.aviso.ok{background:#e8f5ea;color:#1e5b2c;border-left:3px solid var(--hecho)}
.aviso.warn{background:#fdf3e3;color:#7a4e0a;border-left:3px solid var(--media)}
.aviso.bad{background:#fbe9e7;color:#8a2a1e;border-left:3px solid var(--alta)}

@media(max-width:900px){
  .form-grid{grid-template-columns:1fr 1fr}
  .kpi-cards{grid-template-columns:1fr 1fr}
  .item{flex-direction:column}
  .item .acciones{max-width:none;justify-content:flex-start}
}