/* Panel de administración — Ruta Lista */
.top { background: var(--blanco); border-bottom: 1px solid var(--linea); height: 92px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.usuario { text-align: right; font-size: 13px; line-height: 1.25; }
.usuario b { display: block; font-size: 14px; }
.usuario span { color: var(--apagado); }

.layout { display: grid; grid-template-columns: 236px 1fr; min-height: calc(100vh - 92px); }
.lateral { background: var(--blanco); border-right: 1px solid var(--linea); padding: 16px 12px; position: sticky; top: 92px; height: calc(100vh - 92px); overflow-y: auto; display: flex; flex-direction: column; }
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav button { all: unset; cursor: pointer; padding: 9px 12px; border-radius: 9px; font-weight: 500; font-size: 14.5px; display: flex; align-items: center; justify-content: space-between; color: var(--tinta); }
#nav button:hover { background: var(--fondo); }
#nav button.activo { background: var(--rojo-suave); color: var(--rojo-2); font-weight: 600; box-shadow: inset 3px 0 0 var(--rojo); }
.contador { background: var(--rojo); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 1px 7px; }
.filtros { border-top: 1px solid var(--linea); margin-top: 14px; padding: 14px 4px 0; }
.filtros h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); margin-bottom: 10px; }
.filtros label { font-size: 12.5px; margin-top: 10px; }
.filtros select, .filtros input { padding: 8px 10px; font-size: 14px; }
.lema-lat { margin-top: auto; padding: 16px 4px 0; font-size: 13px; }

main { padding: 24px 28px 48px; min-width: 0; }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.encabezado h1 { font-size: 24px; font-weight: 800; }
.encabezado p { margin: 4px 0 0; color: var(--apagado); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; }
.kpi .v { font-family: var(--f-titulo); font-size: 30px; font-weight: 800; line-height: 1.1; }
.kpi .l { color: var(--apagado); font-size: 13px; }
.kpi.alerta .v { color: var(--rojo); }

.panel { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 16px; }
.panel h3 { font-size: 16px; margin-bottom: 10px; }

.tabla-wrap { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--apagado); padding: 11px 14px; border-bottom: 1px solid var(--linea); background: #fafbfc; white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
td .apagado, .apagado { color: var(--apagado); font-size: 12.5px; }
td.acciones { text-align: right; white-space: nowrap; }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs button { all: unset; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--apagado); background: var(--blanco); border: 1px solid var(--linea); }
.tabs button.activo { color: #fff; background: var(--tinta); border-color: var(--tinta); }

.solicitudes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.sol { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sol .cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sol .cab b { font-family: var(--f-titulo); font-size: 16px; }
.sol dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13.5px; }
.sol dt { color: var(--apagado); }
.sol dd { margin: 0; font-weight: 500; }
.sol .alertas { margin: 0; padding: 8px 10px 8px 26px; background: var(--ambar-suave); color: #7a4d0b; border-radius: 8px; font-size: 13px; }
.sol .nueva { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; background: var(--fondo); border-radius: 8px; padding: 10px; }
.sol .nueva label { font-size: 12px; margin-bottom: 3px; }
.sol .nueva select, .sol .nueva input[type=text] { padding: 7px 8px; font-size: 14px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; grid-column: 1 / -1; }
.chk input { width: auto; }
.sol .acc { display: flex; gap: 8px; margin-top: auto; }
.sol .acc .btn { flex: 1; }
.sol .bloqueo { font-size: 12.5px; color: var(--apagado); background: var(--fondo); border-radius: 8px; padding: 8px 10px; }

.distritos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.dist { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.dist .cab { background: var(--tinta); color: #fff; padding: 14px 16px; }
.dist .cab small { display: block; opacity: .7; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.dist .cab b { font-family: var(--f-titulo); font-size: 20px; }
.dist .cuerpo { padding: 14px 16px; }
.dist .sucs { color: var(--apagado); font-size: 13px; margin: 0 0 12px; }

.vacio { color: var(--apagado); text-align: center; padding: 36px 12px; }

dialog { border: 0; border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(28, 37, 48, .3); }
dialog::backdrop { background: rgba(28, 37, 48, .45); }
dialog form { padding: 22px; }
dialog h3 { font-size: 19px; margin-bottom: 14px; }
.dlg-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 14px; box-shadow: var(--sombra); z-index: 100; max-width: calc(100vw - 32px); }
.toast.error { background: var(--rojo-2); }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linea); padding: 8px 12px; }
  #nav { flex-direction: row; overflow-x: auto; gap: 4px; }
  #nav button { white-space: nowrap; padding: 8px 12px; }
  #nav button.activo { box-shadow: inset 0 -3px 0 var(--rojo); }
  .filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 8px; padding-top: 8px; }
  .filtros h4 { display: none; }
  .filtros label { margin-top: 4px; }
  .filtros label[for=f-buscar], .filtros #f-buscar { grid-column: 1 / -1; }
  .lema-lat { display: none; }
  main { padding: 18px 16px 40px; }
  .top { padding: 0 16px; }
  .usuario span { display: none; }
  .solicitudes { grid-template-columns: 1fr; }
}

/* Checklists (entrega 2) */
tr.clic { cursor: pointer; }
tr.clic:hover td { background: #fafbfc; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.foto { margin: 0; }
.foto img, .foto-pend { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--fondo); display: block; }
.foto-pend { display: grid; place-items: center; color: var(--apagado); font-size: 13px; }
.foto figcaption { font-size: 12px; color: var(--apagado); margin-top: 4px; }
.hall-fila { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--linea); }
.hall-fila:first-of-type { border-top: 0; padding-top: 0; }
.sec-t { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--apagado); margin: 16px 0 4px; }
.v-ok { color: var(--verde); font-weight: 600; }
.v-no { color: var(--rojo); font-weight: 600; }
table.resp { table-layout: fixed; }
table.resp td:nth-child(2) { width: 110px; }
table.resp td:nth-child(3) { width: 130px; }

/* Detalle del checklist en pestañas */
.pestanas { border-bottom: 1px solid var(--linea); padding-bottom: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { all: unset; cursor: pointer; background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; padding: 7px 11px; font-size: 13.5px; font-weight: 600; }
.chip span { font-weight: 500; color: var(--apagado); margin-left: 4px; }
.chip.con-falla { border-color: #f3c3c6; }
.chip.con-falla span { color: var(--rojo-2); }
.chip.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip.activo span { color: rgba(255,255,255,.75); }
tr.fila-no td { background: var(--rojo-suave); }
.sec-nav { display: flex; justify-content: space-between; margin-top: 14px; }
.foto-btn { all: unset; cursor: zoom-in; display: block; width: 100%; }
.visor { position: fixed; inset: 0; background: rgba(15, 20, 26, .92); z-index: 200; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.visor figure { margin: 0; max-width: min(1100px, calc(100vw - 140px)); text-align: center; }
.visor img { max-width: 100%; max-height: calc(100vh - 90px); border-radius: 8px; display: block; margin: 0 auto; }
.visor figcaption { color: #dfe4ea; font-size: 13.5px; margin-top: 10px; }
.visor figcaption a { color: #fff; }
.visor button { border: 0; background: rgba(255,255,255,.12); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; cursor: pointer; flex: none; }
.visor button:disabled { opacity: .25; cursor: default; }
.visor .v-cerrar { position: absolute; top: 14px; right: 14px; font-size: 26px; }
@media (max-width: 860px) {
  .visor { padding: 8px; gap: 4px; }
  .visor figure { max-width: calc(100vw - 100px); }
  .visor button { width: 40px; height: 40px; }
}
@media (max-width: 860px) {
  .chips, .pestanas { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .chip, .pestanas button { white-space: nowrap; flex: none; }
}
@media (max-width: 860px) {
  table.resp td { padding: 9px 8px; font-size: 13.5px; }
  table.resp td:nth-child(2) { width: 72px; }
  table.resp td:nth-child(3) { width: 98px; }
}

/* Entregas 3 y 4 */
.nav-sep { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); padding: 14px 12px 4px; }
.fila-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sem-verde { color: var(--verde); } .sem-ambar { color: var(--ambar); } .sem-rojo { color: var(--rojo); } .sem-gris { color: var(--apagado); }
.punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--linea); vertical-align: -1px; flex: none; }
.punto.sem-verde { background: var(--verde); } .punto.sem-ambar { background: var(--ambar); } .punto.sem-rojo { background: var(--rojo); } .punto.sem-gris { background: #c9ced6; }
.pill.gris { background: var(--fondo); color: #9aa5b1; }
details.suc { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 10px; overflow: hidden; }
details.suc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
details.suc summary::-webkit-details-marker { display: none; }
details.suc summary::after { content: '▾'; color: var(--apagado); margin-left: auto; transition: transform .15s; }
details.suc[open] summary::after { transform: rotate(180deg); }
.suc-n { min-width: 180px; }
.suc-d { font-size: 14px; }
.suc-cuerpo { padding: 0 16px 16px; overflow-x: auto; }
table.unid td { vertical-align: top; }
.prog-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.prog-u { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--linea); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 400; margin: 0; }
.prog-u:has(input:checked) { border-color: var(--verde); background: var(--verde-suave); }
.prog-u input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--verde); flex: none; }
.pestanas .reabrir { margin-left: auto; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-fila { margin-bottom: 8px; }
.cmp .foto img, .cmp .foto-pend { aspect-ratio: 4 / 3; }
.lb-fila { display: flex; flex-wrap: wrap; gap: 12px; }
.lb-fila label { font-size: 13px; width: 90px; }
.lb-fila input { margin-top: 4px; }
table.editor td { vertical-align: top; }
table.editor input:not([type=checkbox]), table.editor select { padding: 7px 9px; font-size: 14px; }
table.editor input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--rojo); }
.chk-prueba { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; font-weight: 500; margin: 0 8px 0 0; color: #5b3a99; }
.chk-prueba input { width: auto; }
.barras { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: 6px; }
.barra { flex: 1; min-width: 6px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.b-total { width: 100%; background: var(--linea); border-radius: 4px 4px 0 0; display: flex; align-items: flex-end; overflow: hidden; }
.b-ok { width: 100%; }
.sem-bg-verde { background: var(--verde); } .sem-bg-ambar { background: var(--ambar); } .sem-bg-rojo { background: var(--rojo); } .sem-bg-gris { background: #c9ced6; }
.barra span { font-size: 10px; color: var(--apagado); margin-top: 4px; }
@media (max-width: 860px) {
  .cmp { gap: 6px; }
  .barra span { display: none; }
  #nav .nav-sep { display: none; }
}
.cmp { max-width: 820px; }

.lateral { background: rgba(255,255,255,.94); }
.top-der .div-v { align-self: center; height: 32px; }
@media (max-width: 860px) { .rl-sig { display: none; } .top-der .logo-vn, .top-der .div-v { display: none; } }

/* Informe gerencial */
.inf-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.inf-ctrl select, .inf-ctrl input { width: auto; padding: 7px 10px; font-size: 14px; }
.informe { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 28px 32px; }
.inf-cab { display: flex; align-items: center; gap: 18px; border-bottom: 3px solid #B01F27; padding-bottom: 16px; margin-bottom: 18px; }
.inf-cab h1 { font-size: 24px; margin: 4px 0 2px; }
.inf-cab p { margin: 0; color: var(--apagado); font-size: 13.5px; }
.inf-cab > div { flex: 1; min-width: 0; }
.inf-camion { height: 54px; }
.inf-vn { height: 34px; }
.inf-marca .rl-ruta, .inf-marca .rl-lista { font-size: 16px; }
.informe section { margin-bottom: 22px; }
.informe h2 { font-size: 17px; margin-bottom: 10px; color: var(--tinta); }
.informe h4 { font-size: 14px; margin-bottom: 6px; }
.informe .kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.informe .kpi { box-shadow: none; border: 1px solid var(--linea); }
.informe .kpi .v { font-size: 26px; }
.delta { display: block; font-size: 12px; margin-top: 6px; color: var(--apagado); }
.bien { color: var(--verde); } .mal { color: var(--rojo); }
.delta.bien { color: var(--verde); } .delta.mal { color: var(--rojo); }
table.inf-t { font-size: 13.5px; }
table.inf-t th { background: #f6f7f9; }
table.inf-t td, table.inf-t th { padding: 8px 10px; }
table.inf-t .num { text-align: right; white-space: nowrap; }
table.inf-t tr.cero td { color: var(--apagado); }
.inf-rank { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ev { border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; break-inside: avoid; }
.ev-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.ev-inc { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.ev-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.ev-cmp { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 6px; }
.ev-cmp > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ev-f { margin: 0; }
.ev-f img, .ev .foto-pend { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--fondo); display: block; }
.ev-f figcaption { font-size: 11.5px; color: var(--apagado); margin-top: 3px; }
.inf-pie { border-top: 1px solid var(--linea); padding-top: 10px; font-size: 11.5px; color: var(--apagado); }
@media (max-width: 860px) { .informe { padding: 16px; } .inf-rank { grid-template-columns: 1fr; } .inf-vn { display: none; } }

@media print {
  @page { size: letter; margin: 12mm; }
  body { background: #fff !important; }
  .top, .lateral, .no-print, #toast { display: none !important; }
  .layout { display: block; }
  main { padding: 0 !important; }
  .informe { box-shadow: none; padding: 0; border-radius: 0; }
  .informe section { break-inside: auto; }
  .informe .salto { break-before: page; }
  table.inf-t tr, .kpi { break-inside: avoid; }
  .inf-rank { grid-template-columns: 1fr 1fr; }
  .inf-vn { display: block !important; }
  .informe .kpis { grid-template-columns: repeat(5, 1fr); }
  .informe .inf-2, .informe h2 { break-inside: avoid; break-after: avoid; }
  .ev-g { grid-template-columns: repeat(4, 1fr); }
  a { color: inherit; text-decoration: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ───────── VIDRÍ ONE v2: inicio por formularios e ingreso del encargado ───────── */
.nav-inicio { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 1.5px solid var(--linea); background: var(--blanco); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font: 700 15px var(--f-titulo); color: var(--tinta); cursor: pointer; }
.nav-inicio small { font: 500 12px var(--f-texto); color: var(--apagado); }
.nav-inicio.activo { border-color: #D62828; box-shadow: inset 4px 0 0 #D62828; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.tile { background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra); padding: 20px; display: flex; flex-direction: column; gap: 10px; border-top: 6px solid var(--c, #D62828); }
.tile h3 { margin: 0; font-size: 19px; }
.tile .sello { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--c, #D62828); color: #fff; font: 800 italic 20px 'Archivo', var(--f-titulo); }
.tile .cab { display: flex; gap: 12px; align-items: center; }
.tile .cab small { display: block; color: var(--apagado); font-size: 12.5px; font-weight: 500; }
.tile .dato-t { color: var(--apagado); font-size: 14px; margin: 0; }
.tile .num-t { font: 800 30px var(--f-titulo); line-height: 1; }
.tile .acc-t { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tile.prox { border: 2px dashed var(--linea); border-top-width: 2px; box-shadow: none; background: transparent; color: var(--apagado); }
.tile.prox .sello { background: transparent; border: 2px dashed #b9c0c9; color: #8a94a0; font-style: normal; }
.acceso { position: fixed; inset: 0; z-index: 50; background: #f4f6f9; display: grid; place-items: center; padding: 16px; overflow: auto; }
.acceso-caja { width: 100%; max-width: 400px; background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra); padding: 24px 20px; text-align: center; }
.acceso-caja h1 { font-size: 22px; margin: 6px 0 2px; }
.acceso-caja form { text-align: left; margin-top: 12px; }
.acceso-caja input, .acceso-caja select { font-size: 17px; padding: 12px; }
.dv-tipos { display: grid; gap: 10px; }
.dv-tipo { display: flex; gap: 14px; align-items: center; text-align: left; background: var(--blanco); border: 2px solid var(--linea); border-radius: 14px; padding: 14px; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.dv-tipo:hover, .dv-tipo:focus-visible { border-color: var(--c, #D62828); }
.dv-tipo .sello { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--c, #D62828); color: #fff; font: 800 18px var(--f-titulo); }
.dv-tipo b { display: block; font-size: 16px; }
.dv-tipo span { color: var(--apagado); font-size: 13.5px; }
.pill.origen { background: #eef3fb; color: #1B4F8B; }

/* ───────── VIDRÍ ONE · Llenar checklist (personal de Logística) ───────── */
.llenar-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.llenar-u { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.llenar-u:hover { border-color: #1B4F8B; box-shadow: 0 2px 8px rgba(27,79,139,.12); }
.llenar-u b { font-size: 17px; } .llenar-u .ir { color: #D62828; font-weight: 600; margin-top: 4px; }
.pill.azul { background: #e6eef8; color: #1B4F8B; }
.kpi-btn { text-align: left; cursor: pointer; font: inherit; color: inherit; border: 1px solid transparent; }
.kpi-btn.on { border-color: #1B4F8B; box-shadow: 0 0 0 2px rgba(27,79,139,.15); }

/* ───────── Formularios operativos (menú lateral) ───────── */
#nav .nav-op { display: block; width: 100%; text-align: left; }
#nav .nav-op small { display: inline; margin-left: 6px; color: var(--apagado); font-size: 11.5px; }
@media (max-width: 600px) {
  .top-der .usuario { display: none; }
  .top-der { gap: 8px; }
  #btn-salir { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
  #nav .nav-op small { display: none; }
}

/* ───────── Resumen de hoy por distrito (inicio) ───────── */
.rd { margin-bottom: 18px; }
.rd-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rd-cab h3 { margin: 0; }
.rd-kpis { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.rd-tabla td.n, .rd-tabla th.n { text-align: center; }
.rd-dist { cursor: pointer; background: #f7f9fc; }
.rd-dist:hover { background: #eef3fa; }
.rd-suc td:first-child { padding-left: 26px; }
.rd-cumple { min-width: 120px; display: flex; align-items: center; gap: 6px; }
.rd-barra { flex: 1; height: 8px; background: #eef1f5; border-radius: 99px; overflow: hidden; }
.rd-barra i { display: block; height: 100%; background: linear-gradient(90deg, #E89E00, #1f8a4c); }
.acc-conf { display: flex; gap: 10px; align-items: flex-start; background: #fff8e6; border: 1px solid #f0d58a; border-radius: 10px; padding: 12px; margin: 4px 0 14px; font-size: 15px; line-height: 1.35; cursor: pointer; }
.acc-conf input { width: 22px; height: 22px; flex: none; margin-top: 1px; padding: 0; }
.acc-conf span { font-weight: 400; }
/* Reporte Excel consolidado */
.rep-rapidos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rep-rapidos .on { background: var(--azul, #1B4F8B); color: #fff; border-color: transparent; }
.rep-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.rep-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 12px; }
.rep-op { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #dde3ec; border-radius: 10px; padding: 12px; cursor: pointer; background: #fff; }
.rep-op input { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.rep-op small { display: block; color: #5b6475; font-weight: 400; margin-top: 2px; }
.rep #rep-btn { margin-top: 8px; min-width: 220px; }
/* Correo de los formularios */
.vc-pregunta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: #eef4fb; border: 1px solid #c9dbf0; border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.vc-pregunta b { display: block; font-size: 16px; }
.vc-pregunta span { color: #3b4552; font-size: 13.5px; }
.vc-pregunta-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.dv-item-acc, .ps-item-acc { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
/* Dictado por voz */
.vd { background: #f4f7fb; border: 1px dashed #b9c8de; border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.vd-fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vd-btn { white-space: nowrap; }
.vd-est { color: #3b4552; font-size: 13.5px; flex: 1; min-width: 200px; }
.vd-est.rec { color: #b3261e; font-weight: 600; }
.vd-est.mal { color: #b3261e; }
.vd-est.ok { color: #1f8a4c; font-weight: 600; }
.vd-est.pensando { color: #1B4F8B; font-weight: 600; }
.vd.grabando { background: #fdecec; border-color: #e8a3a0; }
.vd.grabando .vd-btn { animation: vd-pulso 1.2s ease-in-out infinite; }
.vd.pensando .vd-btn { opacity: .6; }
@keyframes vd-pulso { 50% { box-shadow: 0 0 0 8px rgba(213,32,42,.18); } }
.vd-orig { margin-top: 8px; font-size: 13px; color: #3b4552; }
.vd-orig summary { cursor: pointer; color: #1B4F8B; }
.vd-orig p { margin: 6px 0 0; white-space: pre-wrap; background: #fff; border-radius: 8px; padding: 8px; }
.ps-audio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.ps-audio audio { max-width: 100%; }
.dv-doc-acc { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .dv-doc-acc .btn { padding: 4px 8px; font-size: 12px; }
/* Reporte ejecutivo del periodo (Rechazos y devoluciones) */
.ej-ctl .ej-per { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ej-ctl .ej-per .on { background: #0F1E3D; color: #fff; border-color: transparent; }
.ej-fil { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ej-acc { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ej-vista { overflow-x: auto; padding: 6px 0 20px; }
.ej-hojas { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.ej-pag { position: relative; width: 816px; height: 1056px; overflow: hidden; background: #fff; box-shadow: 0 6px 24px rgba(15,30,61,.18); flex: none;
  font-family: "IBM Plex Sans", Arial, sans-serif; color: #1c2530; font-size: 12.5px; line-height: 1.4; }
.ej-imprimir .ej-pag { box-shadow: none; }
.ej-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.ej-cab, .ej-cuerpo, .ej-pie { position: relative; }
.ej-cab { display: flex; align-items: center; gap: 14px; padding: 22px 40px 12px; border-bottom: 4px solid #D5202A; background: rgba(255,255,255,.92); }
.ej-cab img:first-child { height: 52px; } .ej-cab img:last-child { height: 34px; }
.ej-cab .t { flex: 1; } .ej-cab b { display: block; font-size: 18px; color: #0F1E3D; } .ej-cab span { color: #5b6475; }
.ej-cuerpo { padding: 18px 40px 0; }
.ej-pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 10px 40px; font-size: 10.5px; color: #fff; background: #0F1E3D; }
.ej-portada { background: rgba(255,255,255,.9); border-left: 8px solid #D5202A; padding: 14px 18px; border-radius: 0 10px 10px 0; margin-bottom: 14px; }
.ej-portada small { color: #D5202A; font-weight: 700; letter-spacing: .14em; } .ej-portada h1 { margin: 2px 0; font-size: 28px; color: #0F1E3D; } .ej-portada p { margin: 2px 0; }
.ej-cuerpo h3 { font-size: 15px; color: #0F1E3D; margin: 14px 0 6px; border-bottom: 2px solid #e3e7ee; padding-bottom: 3px; }
.ej-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ej-kpi { background: rgba(255,255,255,.95); border: 1px solid #dde3ec; border-radius: 10px; padding: 10px 12px; }
.ej-kpi span { display: block; font-size: 11px; color: #5b6475; font-weight: 600; } .ej-kpi b { display: block; font-size: 26px; line-height: 1.15; } .ej-kpi small { color: #5b6475; font-size: 10.5px; }
.ej-var { font-weight: 700; } .ej-var.up { color: #b3261e; } .ej-var.down { color: #1f8a4c; }
.ej-claves { margin: 0; padding-left: 18px; background: rgba(255,255,255,.9); border-radius: 10px; padding: 10px 14px 10px 30px; } .ej-claves li { margin: 3px 0; }
.ej-serie { display: flex; align-items: flex-end; gap: 6px; height: 170px; background: rgba(255,255,255,.9); border-radius: 10px; padding: 10px; }
.ej-serie > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 10px; }
.ej-serie i { display: block; width: 70%; background: #D5202A; border-radius: 4px 4px 0 0; min-height: 2px; } .ej-serie b { font-size: 11px; } .ej-serie span { color: #5b6475; margin-top: 3px; white-space: nowrap; }
.ej-tabla { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.95); font-size: 11.5px; }
.ej-tabla th { background: #0F1E3D; color: #fff; text-align: left; padding: 6px 7px; font-size: 10.5px; } .ej-tabla td { border-bottom: 1px solid #e3e7ee; padding: 5px 7px; vertical-align: top; }
.ej-tabla .n { text-align: right; } .ej-tabla .tot td { font-weight: 700; background: #f3f5f8; }
.ej-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ej-barras { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.9); } .ej-barras td { padding: 4px 6px; font-size: 11.5px; }
.ej-barras .k { width: 48%; } .ej-barras span { display: block; height: 12px; border-radius: 3px; } .ej-barras .n { text-align: right; width: 36px; } .ej-barras .g { width: 40px; }
.ej-pag .g { color: #5b6475; }
.ej-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ej-fotos figure { margin: 0; background: rgba(255,255,255,.95); border-radius: 8px; padding: 5px; } .ej-fotos img { width: 100%; height: 130px; object-fit: cover; border-radius: 6px; display: block; }
.ej-fotos figcaption { font-size: 10px; margin-top: 3px; color: #3b4552; }
.ej-imprimir { gap: 0 !important; width: 816px; } .ej-imprimir .ej-pag { box-shadow: none; }
.ej-chk { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 500; cursor: pointer; } .ej-chk input { width: 18px; height: 18px; margin: 0; }
.ej-lista-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.ej-fila.fuera td { opacity: .45; }
.ej-fila input { width: 18px; height: 18px; }
.vd-det { margin-top: 8px; font-size: 13px; background: #fff; border-radius: 8px; padding: 8px 10px; border-left: 4px solid #b7791f; }
.vd-est.alerta { color: #8a5a00; font-weight: 600; }
.vd-falta textarea, .vd-falta input, .vd-falta .chips, .vd-falta.campo > .dv-mot { outline: 2px solid #d14b45; outline-offset: 1px; border-radius: 8px; }
.vd-nota { color: #b3261e; font-size: 12.5px; margin-top: 4px; font-weight: 600; }
/* Grabación de pantalla (Pulso de sistema) */
.ps-pantalla { border-color: #1B4F8B !important; }
.ps-grabando { position: fixed; z-index: 95; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: #0F1E3D; color: #fff; padding: 10px 14px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 14px; }
.ps-grabando .punto { width: 12px; height: 12px; border-radius: 50%; background: #e53935; animation: vd-pulso 1.2s infinite; }
.ps-grabando .t { font-variant-numeric: tabular-nums; }
.ps-grabando .btn { background: #D5202A; color: #fff; border-color: transparent; }
.ps-ayuda-cel { margin: 10px 0; background: #eef4fb; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.ps-ayuda-cel summary { cursor: pointer; font-weight: 600; color: #1B4F8B; }
.ps-ayuda-cel ol { margin: 8px 0 4px; padding-left: 20px; }
/* Tutoriales */
.tutos { margin-top: 16px; }
.tutos-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.tuto-b { display: flex; gap: 12px; align-items: center; text-align: left; background: #fff; border: 1px solid #dde3ec; border-radius: 12px; padding: 12px; font: inherit; cursor: pointer; }
.tuto-b:hover { border-color: #1B4F8B; }
.tuto-b > span { width: 36px; height: 36px; border-radius: 50%; background: #1B4F8B; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.tuto-b b { display: block; } .tuto-b small { color: #5b6475; }
.vx-btn{white-space:nowrap}
.aviso-version{position:sticky;top:0;z-index:50;background:#0F1E3D;color:#fff;padding:10px 16px;text-align:center;font-weight:500}
.aviso-version button{margin-left:8px;background:#D5202A;color:#fff;border:0;border-radius:8px;padding:6px 14px;font-weight:600;cursor:pointer}
/* ───────── Proyectos ───────── */
.py-lemas{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-8px 0 14px;font-size:13px;color:var(--apagado);font-style:italic}
.py-lemas span:last-child{font-style:normal;font-weight:600;color:#0F1E3D}
.py-sel{display:flex;align-items:center;gap:10px;margin-bottom:12px}.py-sel label{font-weight:600}.py-sel select{max-width:520px}
.py-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:12px}
.py-k{background:var(--blanco);border-radius:12px;box-shadow:var(--sombra);padding:12px 14px;border-top:4px solid #9aa5b1}
.py-k b{display:block;font:800 26px var(--f-titulo);line-height:1.1}.py-k span{font-size:12.5px;color:var(--apagado)}
.py-k.ok{border-color:#2e9e5b}.py-k.curso{border-color:#5aa9e6}.py-k.riesgo{border-color:#e0b100}.py-k.atraso{border-color:#e06666}.py-k.inicia{border-color:#b9c0c9}
.py-kpis2{display:grid;grid-template-columns:2fr 1fr;gap:12px}.py-kpis2 .panel{margin-bottom:12px}
.py-av-t{display:flex;justify-content:space-between;align-items:baseline}.py-av-t b{font:800 28px var(--f-titulo)}
.py-barra{position:relative;height:14px;background:#eceff3;border-radius:8px;margin:8px 0}.py-barra i{position:absolute;inset:0 auto 0 0;background:#0F1E3D;border-radius:8px}
.py-barra em{position:absolute;top:-4px;bottom:-4px;width:3px;background:#C9A227;border-radius:2px}
.py-kpis2 .rojo{color:#c0392b}.py-kpis2 .ambar{color:#b7791f}.py-kpis2 .verde{color:#2e9e5b}
.py-fechas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.py-fechas span{display:block;font-size:12.5px;color:var(--apagado)}.py-fechas b{font:800 20px var(--f-titulo)}
.py-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px}.py-filtros select{width:auto;min-width:150px}
.py-ley{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:12px;color:var(--apagado);margin-left:auto}
.py-ley i{display:inline-block;width:18px;height:9px;border-radius:3px;margin-right:4px;vertical-align:middle}
.py-ley .b-p{background:#1c2530}.py-ley .b-a{background:#C9A227}.py-ley .b-s{background:#D5202A}.py-ley .b-sp{background:#F6C1C4}.py-ley .b-h{background:#1B4F8B;width:10px;height:10px;transform:rotate(45deg);border-radius:1px}.py-ley .b-hoy{background:#f7e7b0}
.py-est{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:#eceff3;color:#5b6573}
.py-est.ok{background:#dff3e7;color:#1d7a45}.py-est.curso{background:#e1f0fb;color:#1f6aa5}.py-est.riesgo{background:#fff4cc;color:#8a6500}.py-est.atraso{background:#fbe0e0;color:#b02a2a}.py-est.inicia{background:#eceff3;color:#5b6573}.py-est.sinf{background:#f5f5f5;color:#9aa5b1}
.py-gantt-caja{padding:0;overflow:hidden}
.py-g{display:flex;font-size:13px}
.py-g-izq{flex:0 0 auto;border-right:2px solid var(--linea);background:var(--blanco);z-index:1}
.py-g-der{flex:1 1 auto;overflow-x:auto}
.py-gh,.py-r{display:flex;align-items:center;height:34px;border-bottom:1px solid #eef0f3}
.py-gh{height:44px;background:#0F1E3D;color:#fff;font-weight:600;font-size:12px}
.py-c{padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.py-c.cod{width:58px;font-family:ui-monospace,monospace;font-size:12px}.py-c.nom{width:300px;display:flex;align-items:center;gap:4px}.py-c.res{width:130px}.py-c.f{width:74px}.py-c.d{width:40px;text-align:right}.py-c.av{width:92px;display:flex;align-items:center;gap:6px}.py-c.es{width:96px}
.py-nm{overflow:hidden;text-overflow:ellipsis}
.py-r{cursor:pointer}.py-r:hover,.py-tr:hover{background:#f7f9fc}
.py-r.n1{background:#f1f3f6;font-weight:700}.py-r.n2{font-weight:600}
.py-pl{border:0;background:none;cursor:pointer;width:18px;padding:0;font-size:13px;color:#5b6573}.py-pl0{display:inline-block;width:18px}
.py-mini{display:inline-block;width:40px;height:6px;background:#eceff3;border-radius:4px;overflow:hidden}.py-mini i{display:block;height:100%;background:#0F1E3D}
.py-gh2{height:44px;background:#0F1E3D;color:#fff;font-size:11px}
.py-meses,.py-ws{display:flex;height:22px;align-items:center}.py-mes{text-align:center;border-left:1px solid #2b3a5a;text-transform:capitalize;font-weight:600}
.py-w{text-align:center;border-left:1px solid #2b3a5a;opacity:.85}.py-w.hoy{background:#C9A227;color:#0F1E3D;font-weight:700;opacity:1}
.py-cuerpo{position:relative;background-image:repeating-linear-gradient(90deg,transparent 0 29px,#eef0f3 29px 30px)}
.py-semhoy{position:absolute;top:0;bottom:0;background:#f7e7b0;opacity:.6}
.py-hoyl{position:absolute;top:0;bottom:0;width:2px;background:#C9A227;z-index:2}
.py-tr{position:absolute;left:0;right:0;height:34px;border-bottom:1px solid #eef0f3;cursor:pointer}
.py-bar{position:absolute;top:10px;height:14px;border-radius:4px;overflow:hidden}
.py-bar u{position:absolute;inset:0 auto 0 0;text-decoration:none}
.py-bar.p{background:#9aa5b1;top:11px;height:12px}.py-bar.p u{background:#1c2530}
.py-bar.a{background:#ecdca0}.py-bar.a u{background:#C9A227}
.py-bar.s{background:#F6C1C4}.py-bar.s u{background:#D5202A}
.py-hito{position:absolute;top:10px;width:13px;height:13px;background:#1B4F8B;transform:rotate(45deg);border-radius:2px}
.py-fab{display:none}
.py-modal{position:fixed;inset:0;z-index:1000;background:rgba(15,30,61,.55);display:flex;align-items:flex-start;justify-content:center;padding:28px 14px;overflow:auto}
.py-mcaja{background:#fff;border-radius:16px;width:100%;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.py-mcab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.py-mcab small{color:var(--apagado)}.py-mcab h2{margin:2px 0 0;font-size:21px}
.py-fresumen{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;background:#f6f8fb;border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:14px}
.py-form{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px}.py-form .campo{margin:0}.py-form .campo.ancho{grid-column:1/-1}
.py-macc{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.py-borrar{color:#b02a2a}
.py-ht{margin:18px 0 6px;font-size:16px}
.py-hist{list-style:none;padding:0;margin:0;max-height:260px;overflow:auto;font-size:13.5px}.py-hist li{padding:7px 0;border-bottom:1px solid #eef0f3}
.py-or{font-size:11.5px;padding:1px 6px;border-radius:6px;background:#eceff3}.py-or.voz{background:#e1f0fb;color:#1f6aa5}.py-or.carga_masiva{background:#fff4cc;color:#8a6500}
.py-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.py-pasos div{background:#f6f8fb;border-radius:10px;padding:10px 12px;font-size:14px}
.py-pasos b:first-child{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0F1E3D;color:#fff;font-size:12px;margin-right:6px}
.py-carga-f{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.py-modo{display:flex;flex-direction:column;gap:4px;margin-left:auto;font-size:14px}
.py-res-cab .py-kpis{grid-template-columns:repeat(6,1fr)}
.py-prev tr.error{background:#fdf0f0}.py-prev tr.aviso{background:#fffbea}.py-msg{font-size:12.5px;min-width:240px}.py-msg .er{color:#b02a2a}.py-msg .av{color:#8a6500}
.py-ok{color:#2e9e5b;font-weight:700}.py-av{color:#b7791f;font-weight:700}.py-er{color:#c0392b;font-weight:700}
.py-grabar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:10px 0}
.py-mic{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:#D5202A;color:#fff;border-radius:18px;padding:18px 26px;cursor:pointer;min-width:200px;font:inherit}
.py-mic span{font-size:38px}.py-mic.rec{background:#0F1E3D;animation:pyPulso 1.2s infinite}
@keyframes pyPulso{50%{box-shadow:0 0 0 10px rgba(213,32,42,.18)}}
.py-gopc{display:flex;flex-direction:column;gap:8px;flex:1;min-width:220px}.py-gopc textarea{width:100%;margin:6px 0}
.py-giro{display:inline-block;width:14px;height:14px;border:3px solid #cfd6e0;border-top-color:#D5202A;border-radius:50%;animation:giro .8s linear infinite;vertical-align:middle;margin-right:6px}
.py-acc{border:1px solid var(--linea);border-left:5px solid #2e9e5b;border-radius:12px;padding:12px 14px;margin:10px 0}.py-acc.falta{border-left-color:#e06666}
.py-acc-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.py-acc-cab .mono{background:#eceff3;border-radius:6px;padding:1px 6px;font-size:12px}
.py-conf{font-size:12px;color:#1d7a45}.py-conf.media{color:#8a6500}.py-conf.baja{color:#b02a2a}
.pv-pregunta{background:#fdf0f0;color:#b02a2a;border-radius:8px;padding:6px 10px;margin-bottom:8px;font-size:13.5px;font-weight:600}
.pv-falta{border-color:#e06666 !important;background:#fff6f6 !important}.pv-c-falta label em{color:#b02a2a;font-style:normal;font-weight:600;font-size:12px}
@media (max-width:900px){
  .py-kpis{grid-template-columns:repeat(3,1fr)}.py-kpis2{grid-template-columns:1fr}.py-form{grid-template-columns:1fr 1fr}.py-pasos{grid-template-columns:1fr}
  .py-c.res,.py-c.f,.py-c.d{display:none}.py-c.nom{width:190px}.py-c.es{width:84px}.py-c.av{width:60px}.py-mini{display:none}
  .py-fab{display:grid;place-items:center;position:fixed;right:16px;bottom:18px;width:64px;height:64px;border-radius:50%;border:0;background:#D5202A;color:#fff;font-size:28px;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:30}
  .py-ley{margin-left:0}.py-modo{margin-left:0}
}
@media (max-width:560px){.py-form{grid-template-columns:1fr}.py-c.es{display:none}}
.py-borr{display:inline-block;vertical-align:middle;font:700 12px var(--f-texto);background:#fff4cc;color:#8a6500;border:1px dashed #e0b100;border-radius:999px;padding:3px 10px;margin-left:8px}
#modulos [data-m=py] .py-borr{margin:4px 0 0;font-size:10.5px;padding:1px 6px}
.py-acc-cab label{display:flex;align-items:center;gap:8px;margin:0}.py-acc-cab input[type=checkbox]{width:18px;height:18px;margin:0}
.py-chk{width:20px;height:20px;border:2px solid #9aa5b1;border-radius:5px;background:#fff;cursor:pointer;padding:0;display:inline-grid;place-items:center;color:#fff;font-size:13px;font-weight:800;line-height:1;flex:0 0 auto}
.py-chk.si{background:#2e9e5b;border-color:#2e9e5b}.py-chk:disabled{cursor:default;opacity:.6}
.py-c.av{font-size:12.5px}
.py-hecha{display:flex !important;gap:12px;align-items:flex-start;background:#f6f8fb;border-radius:10px;padding:12px;cursor:pointer}
.py-hecha input{width:24px;height:24px;margin:2px 0 0;flex:0 0 auto}.py-hecha small{display:block;color:var(--apagado);font-weight:400;margin-top:2px}
/* ───────── Fletes ───────── */
.fl-form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 16px;align-items:end}.fl-form select{min-width:0;width:100%}
@media (max-width:1250px){.fl-form{grid-template-columns:repeat(3,minmax(0,1fr))}}.fl-form .campo{margin:0}
.fl-ton{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--linea);border-radius:10px;overflow:hidden}
.fl-ton button{border:0;border-right:1px solid var(--linea);background:#fff;padding:10px 0;font:600 14px var(--f-texto,inherit);cursor:pointer}.fl-ton button:last-child{border-right:0}
.fl-ton button.sel{background:#D5202A;color:#fff}
.fl-ruta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px}
.fl-od{font:700 19px var(--f-titulo,inherit)}.fl-od span{color:var(--apagado);margin:0 6px;font-weight:500}
.fl-pill{font:700 12px/1 inherit;text-transform:uppercase;letter-spacing:.06em;padding:8px 12px;border-radius:999px}
.fl-pill.ok{background:#e3f3ea;color:#1f7a4d}.fl-pill.no{background:#fbe9ea;color:#9E1B22}.fl-pill.cd{background:#fdf1dc;color:#a15c00}
.fl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:12px}
.fl-card{background:#fff;border-radius:14px;box-shadow:var(--sombra);padding:18px;display:flex;flex-direction:column;gap:10px;border-top:5px solid #D5202A}
.fl-card.sug{border-top-color:#1f7a4d}
.fl-card h3{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--apagado)}
.fl-who{font:700 20px var(--f-titulo,inherit)}
.fl-monto{font:700 38px/1 ui-monospace,'IBM Plex Mono',monospace}.fl-monto small{font:500 13px var(--f-texto,inherit);color:var(--apagado);margin-left:8px}
.fl-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--linea);padding-top:10px;margin:0}
.fl-datos dt{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--apagado)}.fl-datos dd{margin:0;font:600 15px ui-monospace,monospace}
.fl-nota{font-size:13px;color:var(--apagado);margin:0}.fl-nota.alerta{color:#a15c00}
.fl-card a{color:#9E1B22;font-weight:600;font-size:13px}
.fl-pie{font-size:12.5px}
.fl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}.fl-grid .campo{margin:0}
.fl-zonas input{width:100%;max-width:110px;padding:6px 8px}
@media (max-width:900px){.fl-form{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fl-form{grid-template-columns:1fr}.fl-monto{font-size:32px}}

/* Menú lateral que se oculta solo (computadora): queda una franja con el ícono ☰.
   Al pasar el mouse (o tocar) se despliega encima del contenido y se vuelve a ocultar
   unos segundos después de que el mouse sale. */
.lat-rail { display: none; }
@media (min-width: 861px) {
  .layout { grid-template-columns: 48px 1fr; }
  .lat-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; position: sticky; top: 92px; height: calc(100vh - 92px);
    background: var(--blanco); border-right: 1px solid var(--linea); padding-top: 14px; cursor: pointer; border: 0; border-right: 1px solid var(--linea); font: inherit; color: var(--tinta); }
  .lat-rail:hover, .lat-abierto .lat-rail { background: var(--fondo); }
  .lat-rail .ico { font-size: 22px; line-height: 1; }
  .lat-rail .txt { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
  .lat-rail .act { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; color: var(--rojo-2); max-height: 50vh; overflow: hidden; }
  .lateral { background: #fff; position: fixed; left: 0; top: 92px; width: 248px; z-index: 30; transform: translateX(-105%); transition: transform .22s ease, box-shadow .22s; box-shadow: none; }
  .lat-abierto .lateral { transform: none; box-shadow: 8px 0 28px rgba(15, 30, 61, .18); }
}

/* Inicio: resumen en números de cada módulo */
.tile .kpis-t { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.tile .kpi-t { background: var(--fondo, #f4f6f9); border-radius: 10px; padding: 8px 8px; min-width: 0; }
.tile .kpi-t b { display: block; font: 800 20px var(--f-titulo); white-space: nowrap; line-height: 1.1; color: var(--tinta, #1c2530); }
.tile .kpi-t small { display: block; font-size: 11.5px; color: var(--apagado); line-height: 1.25; margin-top: 2px; }
/* Inicio: Semáforo en resumen (mismos colores que la pantalla del Semáforo) */
.ini-sem { margin-bottom: 18px; }
.ini-sem .sm-tabla { table-layout: fixed; width: 100%; }
.ini-sem .sm-tabla thead th { background: #0F1E3D; color: #fff; border-bottom: 0; font-size: 11.5px; line-height: 1.25; padding: 9px 8px; white-space: normal; }
.ini-sem .sm-tabla thead th:first-child { border-top-left-radius: 10px; } .ini-sem .sm-tabla thead th:last-child { border-top-right-radius: 10px; }
.ini-sem .sm-tabla thead th.sm-h-rojo { background: #D5202A; } .ini-sem .sm-tabla thead th.sm-h-amarillo { background: #E89E00; }
.ini-sem .sm-tabla thead th.sm-h-verde { background: #1E8E3E; } .ini-sem .sm-tabla thead th.sm-h-alerta { background: #7A1419; }
.ini-sem .sm-tabla .rd-dist td { background: #E3EAF4; border-top: 2px solid #0F1E3D; cursor: pointer; } .ini-sem .sm-tabla .rd-dist:hover td { background: #d6e0ee; }
.ini-sem .sm-tabla td.n:nth-child(3) { background: rgba(213,32,42,.05); } .ini-sem .sm-tabla td.n:nth-child(4) { background: rgba(232,158,0,.07); } .ini-sem .sm-tabla td.n:nth-child(5) { background: rgba(30,142,62,.06); }
.ini-sem .rd-cumple small { white-space: nowrap; } .ini-sem .sm-vivo { color: #1F8A4C; font-weight: 700; }
@media (max-width: 760px) { .ini-sem .sm-tabla colgroup { display: none; } .ini-sem .sm-tabla { table-layout: auto; } .ini-sem .sm-tabla th, .ini-sem .sm-tabla td { padding: 8px 3px !important; font-size: 11.5px; } .ini-sem .sm-tabla th:nth-child(7), .ini-sem .sm-tabla td:nth-child(7) { display: none; } .ini-sem .rd-dist small { display: none; } }
/* VIDRÍ ONE · Fichas del personal */
.fi-kpis .kpi .v { font-size: 24px; }
.fi-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.fi-filtros .campo { margin-bottom: 0; }
.panel.fi-filtros { margin-bottom: 14px; }
.fi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }
.fi-grid .panel { margin: 0; }
.fi-sec h3 { font-size: 15px; margin: 0 0 10px; }
.fi-dl { display: grid; grid-template-columns: 38% 62%; gap: 6px 10px; margin: 0; font-size: 14px; }
.fi-dl dt { color: var(--apagado); } .fi-dl dd { margin: 0; word-break: break-word; }