* { box-sizing: border-box; margin: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f2f5f8; color: #1c2b3a; display: flex; min-height: 100vh; }
.lateral { width: 215px; background: #0e2a43; color: #dce8f2; padding: 18px 0; flex-shrink: 0; }
.lateral .logo { font-size: 1.25em; font-weight: 700; padding: 0 18px 16px; color: #7fc4ff; }
.lateral .logo span { display: block; font-size: .55em; font-weight: 400; color: #9ab4c8; letter-spacing: 1px; text-transform: uppercase; }
.lateral .logo .gep-innovacion { display: inline-block; margin-top: 7px; padding: 3px 10px; border-radius: 20px; background: linear-gradient(90deg, #1670c4, #7fc4ff); color: #fff; font-size: .5em; font-weight: 700; letter-spacing: .5px; text-transform: none; }
.lateral a { display: block; padding: 10px 18px; color: #dce8f2; text-decoration: none; font-size: .95em; }
.lateral a:hover { background: #164166; }
main { flex: 1; padding: 24px 30px; max-width: 1250px; }
h1 { font-size: 1.5em; margin-bottom: 14px; color: #0e2a43; }
h2 { font-size: 1.1em; margin: 18px 0 8px; color: #164166; }
.aviso { background: #d8f3dc; border: 1px solid #74c69d; padding: 9px 14px; border-radius: 6px; margin-bottom: 14px; }
.tarjetas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.tarjeta { background: #fff; border-radius: 10px; padding: 14px 18px; min-width: 175px; box-shadow: 0 1px 4px rgba(14,42,67,.08); }
.tarjeta .valor { font-size: 1.45em; font-weight: 700; margin-top: 3px; }
.tarjeta .sub { font-size: .8em; color: #5a7184; margin-top: 2px; }
.verde { color: #1b7a3d; } .rojo { color: #c1121f; } .ambar { color: #b07d0a; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(14,42,67,.08); font-size: .9em; }
th { background: #164166; color: #fff; padding: 8px 10px; text-align: left; font-weight: 600; }
td { padding: 7px 10px; border-bottom: 1px solid #e8eef3; }
tr:hover td { background: #f4f9fd; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
input, select, textarea { padding: 7px 9px; border: 1px solid #b9c9d6; border-radius: 6px; font-size: .92em; font-family: inherit; }
button, .boton { background: #1670c4; color: #fff; border: 0; padding: 8px 15px; border-radius: 6px; cursor: pointer; font-size: .92em; text-decoration: none; display: inline-block; }
button:hover, .boton:hover { background: #0e5aa0; }
.boton.gris { background: #607789; } .boton.rojo { background: #c1121f; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .8em; font-weight: 600; }
.chip.ok { background: #d8f3dc; color: #1b7a3d; }
.chip.parcial { background: #fff3cd; color: #8a6d00; }
.chip.no { background: #ffd7d9; color: #a4161a; }
.chip.info { background: #dbeafe; color: #1e4c8f; }
.matriz td { padding: 3px 5px; text-align: center; font-size: .78em; }
.matriz .ok { background: #b7e4c7; } .matriz .parcial { background: #ffe59a; }
.matriz .no { background: #ffb3b8; } .matriz .fuera { background: #edf1f4; color: #b0bec9; }
.fila-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* pastilla de depto coloreada por atraso */
.depto-pill { display: inline-block; padding: 2px 10px; border-radius: 20px; font-weight: 700; font-size: .88em; text-decoration: none; }
.depto-pill:hover { filter: brightness(.92); }
.at-ok { background: #b7e4c7; color: #14532d; }
.at-leve { background: #ffe59a; color: #7a5c00; }
.at-medio { background: #ffc078; color: #7c3a00; }
.at-grave { background: #ffb3b8; color: #7f1d1d; }
/* ayuda por boton: signo ? con globito al pasar el mouse o tocar */
.ayuda { display: inline-block; width: 17px; height: 17px; line-height: 17px; text-align: center;
  border-radius: 50%; background: #164166; color: #fff; font-size: .75em; font-weight: 700;
  cursor: help; position: relative; vertical-align: middle; }
.ayuda::after { content: attr(data-ayuda); position: absolute; left: 50%; bottom: 130%;
  transform: translateX(-50%); background: #0e2a43; color: #fff; padding: 8px 12px;
  border-radius: 8px; font-size: .95em; font-weight: 400; line-height: 1.45; width: 240px;
  white-space: normal; text-align: left; opacity: 0; pointer-events: none; transition: opacity .15s;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); z-index: 50; }
.ayuda:hover::after, .ayuda:focus::after { opacity: 1; }
.caja-blanca { background: #fff; border-radius: 10px; padding: 16px 20px; box-shadow: 0 1px 4px rgba(14,42,67,.08); margin-bottom: 16px; }
.mini { font-size: .82em; color: #5a7184; }
.grilla-form { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; max-width: 560px; align-items: center; }
@media print {
  .lateral, .filtros, button, .boton, .aviso { display: none !important; }
  body { background: #fff; } main { padding: 0; max-width: none; }
  table { box-shadow: none; font-size: .8em; }
}