/* ============================================================
   Plan de Trabajo - Innovar Soluciones Web
   Paleta de marca: tinta #171C91 / azul globo #0153C3
   Reemplaza por completo el archivo anterior.
   ============================================================ */
:root{
  --tinta:#171C91;
  --tinta-osc:#111568;
  --azul:#0153C3;
  --azul-osc:#013F97;
  --azul-claro:#4DA3FF;
  --azul-suave:#EAF1FE;
  --texto:#14161F;
  --gris:#6E7180;
  --gris-claro:#9A9DAB;
  --linea:#E6E8EF;
  --fondo:#F4F5F9;
  --blanco:#FFFFFF;
  --verde:#0E7A45;
  --verde-suave:#E7F7EE;
  --ambar:#8A6100;
  --ambar-suave:#FDF4DF;
  --rojo:#B3261E;
  --rojo-suave:#FBEAE9;
  --r-chico:10px;
  --r:16px;
  --r-pill:100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo);color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:26px;font-weight:600;letter-spacing:-.8px;margin:0 0 2px;color:var(--tinta)}
h2{font-size:15px;font-weight:600;letter-spacing:-.2px;margin:0 0 14px}
h3{font-size:15px;font-weight:600;letter-spacing:-.2px;margin:0}
small{color:var(--gris);font-weight:400;font-size:12px}

/* ---------- Barra superior ---------- */
.top{
  background:var(--tinta);color:#fff;height:62px;
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;
}
.top .marca{display:flex;align-items:center;gap:12px}
.top .marca img{height:30px;width:auto;display:block}
.top .marca .app{
  font-size:12px;color:#B9BEEA;border-left:1px solid #3B41A8;padding-left:12px;
  letter-spacing:.3px;white-space:nowrap;
}
.top .yo{display:flex;align-items:center;gap:10px;font-size:13px;color:#C7CBEC}
.top .yo .nombre{font-weight:500;color:#fff}
.top .rol{background:#2A2FA3;color:#C7CBEC;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;letter-spacing:.3px}
.top .salir{color:#fff;border:1px solid #3B41A8;padding:6px 14px;border-radius:var(--r-pill);font-size:12px}
.top .salir:hover{background:#2A2FA3;border-color:#5057C4;text-decoration:none}

/* ---------- Estructura ---------- */
.cuerpo{display:flex;min-height:calc(100vh - 62px)}
.lateral{
  width:224px;flex:none;background:var(--blanco);
  border-right:1px solid var(--linea);padding:18px 14px;
}
.lateral ul{list-style:none;margin:0;padding:0}
.lateral li{margin-bottom:3px}
.lateral a{
  display:flex;align-items:center;gap:11px;padding:10px 16px;border-radius:var(--r-pill);
  color:#41455A;font-size:14px;font-weight:500;transition:background .12s ease;
}
.lateral a:hover{background:#F0F2F8;text-decoration:none}
.lateral a.activo{background:var(--tinta);color:#fff;position:relative;padding-right:34px}
.lateral a.activo::after{
  content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--azul-claro);
}
.ico{width:19px;height:19px;flex:none;opacity:.7}
.lateral a.activo .ico{opacity:1}
.contenido{flex:1;padding:28px 32px 60px;max-width:1120px}

/* ---------- Tarjetas ---------- */
.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r);padding:22px 24px;margin-bottom:18px;
}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:20px 0 18px}
.kpi{display:flex;flex-direction:column;gap:3px;padding:20px 22px}
.kpi .etq{font-size:11px;color:var(--gris-claro);text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.kpi .dato{font-size:38px;font-weight:600;letter-spacing:-2px;line-height:1.1;margin:2px 0;color:var(--tinta)}
.kpi .pie{font-size:12px;color:var(--gris)}
.bloque{background:#FAFBFE;border:1px solid var(--linea);border-radius:var(--r-chico);padding:14px 16px;margin:12px 0}
.ia{background:var(--azul-suave);border:1px solid #CFDFFA;border-radius:var(--r-chico);padding:14px 16px;margin:12px 0}
.ia b{color:var(--tinta)}
.ia ul{margin:6px 0;padding-left:18px}
.ia li{margin-bottom:3px}

/* ---------- Tablas ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--gris-claro);border-bottom:1px solid var(--linea);
  padding:0 8px 10px;font-weight:600;
}
.tabla td{padding:12px 8px;border-bottom:1px solid #F1F3F8;vertical-align:middle}
.tabla tr:last-child td{border-bottom:none}
.tabla tr.resaltada{background:#F7FAFF}
.tabla tr.resaltada td:first-child{box-shadow:inset 3px 0 0 var(--azul)}

/* ---------- Formularios ---------- */
label{display:block;margin-bottom:14px;font-size:13px;font-weight:500;color:#41455A}
input,select,textarea{
  width:100%;padding:11px 14px;border:1px solid #D9DDE8;border-radius:var(--r-chico);
  font-family:inherit;font-size:14px;color:var(--texto);background:#fff;margin-top:5px;
  transition:border-color .12s ease,box-shadow .12s ease;
}
input::placeholder,textarea::placeholder{color:#AFB3C1}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(1,83,195,.18);
}
textarea{resize:vertical;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid2 .ancho{grid-column:1/-1}
.inline{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 8px 8px 0}
.inline input,.inline select{width:auto;margin-top:0}
.linea{display:flex;width:100%;padding:10px 0;border-bottom:1px solid #F1F3F8}
.botonera{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.fila-titulo{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}

/* ---------- Botones ---------- */
.btn{
  background:var(--azul);color:#fff;border:1px solid var(--azul);
  padding:11px 24px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;letter-spacing:-.1px;cursor:pointer;
  display:inline-block;text-align:center;transition:background .12s ease;
}
.btn:hover{background:var(--azul-osc);border-color:var(--azul-osc);color:#fff;text-decoration:none}
.btn.chico{padding:8px 16px;font-size:13px}
.btn.secundario{background:#fff;color:var(--tinta);border:1px solid #CFD4E4}
.btn.secundario:hover{background:#F0F2F8;border-color:#A9B0C9;color:var(--tinta)}
.btn.oscuro{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.btn.oscuro:hover{background:var(--tinta-osc)}
.btn.peligro{background:#fff;color:var(--rojo);border:1px solid #EFCFCD}
.btn.peligro:hover{background:var(--rojo-suave);color:var(--rojo)}

/* ---------- Etiquetas ---------- */
.badge{
  display:inline-block;padding:4px 12px;border-radius:var(--r-pill);
  font-size:11px;font-weight:700;letter-spacing:.5px;
}
.badge.verde{background:var(--verde-suave);color:var(--verde)}
.badge.amarillo{background:var(--ambar-suave);color:var(--ambar)}
.badge.rojo{background:var(--rojo-suave);color:var(--rojo)}
.estado{
  font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;
  padding:4px 12px;border-radius:var(--r-pill);background:#EEF0F6;color:#5C6076;
}
.estado.entregada{background:var(--azul-suave);color:var(--azul)}
.estado.aprobada{background:var(--verde-suave);color:var(--verde)}
.estado.devuelta{background:var(--rojo-suave);color:var(--rojo)}
.rol{color:var(--gris);font-size:12px}
.nota{color:var(--gris);font-size:12.5px}
.aviso{
  background:var(--azul-suave);border:1px solid #CFDFFA;border-left:4px solid var(--azul);
  border-radius:var(--r-chico);padding:12px 16px;margin-bottom:18px;font-size:13.5px;
}
.error{
  background:var(--rojo-suave);border:1px solid #EFCFCD;border-left:4px solid var(--rojo);
  border-radius:var(--r-chico);padding:12px 16px;margin-bottom:16px;color:var(--rojo);font-size:13.5px;
}

/* ---------- Banner de estado ---------- */
.banner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-radius:var(--r);padding:22px 26px;margin-bottom:4px;
  background:linear-gradient(100deg,var(--tinta) 0%,var(--azul) 130%);color:#fff;
}
.banner h2{margin:0 0 4px;font-size:19px;letter-spacing:-.4px;color:#fff}
.banner p{margin:0;font-size:13.5px;color:#CDD3F0;max-width:70ch}
.banner .btn{background:#fff;border-color:#fff;color:var(--tinta);white-space:nowrap}
.banner .btn:hover{background:#E7EAF7;border-color:#E7EAF7;color:var(--tinta)}
.banner h2::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--azul-claro);margin-right:9px;vertical-align:middle}
.banner.verde{background:linear-gradient(100deg,var(--tinta) 0%,#0E6B4A 135%)}
.banner.verde h2::before{background:#4BE08F}
.banner.amarillo{background:linear-gradient(100deg,var(--tinta) 0%,#7A5A00 140%)}
.banner.amarillo h2::before{background:#F5C518}
.banner.rojo{background:linear-gradient(100deg,#2A1030 0%,#8E211B 135%)}
.banner.rojo h2::before{background:#FF8A80}
.banner.rojo p{color:#F0CFCD}

/* ---------- Barra de progreso ---------- */
.barra{background:#E9ECF4;border-radius:var(--r-pill);height:7px;margin:8px 0 6px;overflow:hidden}
.barra span{display:block;height:100%;background:var(--azul);border-radius:var(--r-pill);transition:width .3s ease}

/* ---------- Tendencia ---------- */
.tend{font-size:12px;font-weight:600;letter-spacing:-.1px}
.tend.sube{color:var(--verde)}
.tend.baja{color:var(--rojo)}
.tend.igual{color:var(--gris)}

/* ---------- Grafico ---------- */
.grafico{width:100%;height:190px;display:block;overflow:visible}
.grafico .gl{stroke:#DFE3EE;stroke-width:1;stroke-dasharray:3 4}
.grafico .gy{fill:var(--gris-claro);font-size:10px;font-weight:600}
.grafico .gx{fill:var(--gris-claro);font-size:10px;text-anchor:middle}
.grafico .glinea{fill:none;stroke:var(--tinta);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.grafico .garea{fill:rgba(1,83,195,.13);stroke:none}

/* ---------- Estado vacio ---------- */
.vacio{
  border:1px dashed #D5DAE8;border-radius:var(--r-chico);padding:26px 20px;text-align:center;
  background:#FAFBFE;
}
.vacio p{margin:0 0 12px;color:var(--gris);font-size:13.5px}
.vacio .btn{margin:0}

/* ---------- Login ---------- */
.login-body{
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;
  padding:20px;background:linear-gradient(160deg,var(--tinta) 0%,#0B0E52 100%);
}
.login-logo{width:230px;max-width:70vw;margin-bottom:26px}
.caja{
  background:var(--blanco);border-radius:22px;padding:34px 32px;
  width:100%;max-width:380px;
}
.caja h1{font-size:19px;margin-bottom:20px;color:var(--tinta)}
.caja h3{margin:18px 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--gris)}
.caja .btn{width:100%;margin-top:6px}
.login-pie{color:#A8ADDE;font-size:12px;margin-top:20px}

/* ---------- Movil ---------- */
@media(max-width:820px){
  .top{padding:0 14px;height:56px}
  .top .marca img{height:24px}
  .top .marca .app{display:none}
  .top .yo .rol{display:none}
  .cuerpo{display:block}
  .lateral{
    position:fixed;bottom:0;left:0;right:0;z-index:50;
    background:var(--blanco);border-top:1px solid var(--linea);border-right:none;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));width:100%;
  }
  .lateral ul{display:flex;justify-content:space-around;gap:0}
  .lateral li{flex:1;margin:0}
  .lateral a{
    flex-direction:column;gap:3px;padding:7px 2px;border-radius:14px;
    font-size:10.5px;font-weight:600;text-align:center;letter-spacing:-.1px;
  }
  .lateral a span{display:block}
  .lateral a.activo{background:transparent;color:var(--tinta);padding-right:2px}
  .lateral a.activo::after{display:none}
  .lateral a.activo span{position:relative}
  .lateral a.activo span::after{
    content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
    width:16px;height:3px;border-radius:3px;background:var(--azul);
  }
  .ico{width:21px;height:21px}
  .contenido{padding:18px 16px 96px}
  .grid2{grid-template-columns:1fr}
  .kpi .dato{font-size:32px}
  h1{font-size:22px}
  .banner{padding:18px}
  .banner h2{font-size:17px}
  .banner .btn{width:100%}
}

/* ---------- Hoja de impresion ---------- */
.hoja-body{background:#E8EAF2;padding:24px 12px}
.hoja{
  background:#fff;max-width:820px;margin:0 auto;padding:44px 48px;
  border-radius:var(--r);border:1px solid var(--linea);
}
.barra-acciones{display:flex;gap:8px;justify-content:flex-end;margin-bottom:22px}
.hoja-logo{height:36px;width:auto;margin-bottom:18px;display:block}
.hoja-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:2px solid var(--tinta);padding-bottom:18px;margin-bottom:22px}
.hoja-top h1{font-size:23px}
.hoja-nota{text-align:right}
.hoja-nota .etq{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--gris-claro);font-weight:700}
.hoja-nota .dato{font-size:44px;font-weight:600;letter-spacing:-2px;line-height:1;color:var(--tinta)}
.hoja h2{margin:26px 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--gris)}
.hoja-datos td{border-bottom:1px solid #F1F3F8;font-size:13px}
.firmas{display:flex;gap:60px;margin-top:64px}
.firmas div{flex:1;text-align:center}
.linea-firma{display:block;border-top:1px solid var(--tinta);margin-bottom:8px}
.firmas p{margin:0;font-size:13px;font-weight:500}
.pie-hoja{text-align:center;margin-top:34px}

@media print{
  .no-imprimir{display:none !important}
  .hoja-body{background:#fff;padding:0}
  .hoja{border:none;border-radius:0;padding:0;max-width:100%}
  body{font-size:12px}
  .tabla td,.tabla th{padding:6px 4px}
  .firmas{margin-top:48px}
  @page{margin:18mm}
}