/* Tokens de marca (branding-la-mia): exactos del logo; estados independientes de la marca. */
:root{
  --navy:#393C89; --gold:#FFF200; --gold-dark:#F9C216; --orange:#F39B3A; --lila:#9184B9;
  --navy-mid:#5A5DA6; --navy-deep:#2B2D6B; --navy-tint:#EBEBF5; --lila-tint:#C9C4E3;
  --page:#F0F1FA; --surface:#FFFFFF; --surface-sunken:#F5F6FC; --ink:#12153D; --ink-secondary:#4D5080; --ink-muted:#6B6F9A; --border:#DDE0F0;
  --status-critical:#C0392B; --status-critical-tint:#FDECEA; --status-serious:#C86A16; --status-serious-tint:#FBE7D2; --status-warning:#B08A00; --status-warning-tint:#FDF3D6;
  --status-good:#1A7A5E; --status-good-tint:#E8F5F1;
  --font:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --page:#15151F; --surface:#1D1E2C; --surface-sunken:#232436; --ink:#F3F3F8; --ink-secondary:#B7B8CC; --ink-muted:#9496B0; --border:#30324A; --navy-tint:#2A2C55;
    --status-critical-tint:#3D1A1A; --status-warning-tint:#3C2C04; --status-good-tint:#123A17; --status-critical:#FF8A7D; --status-good:#5FD3AE; --status-warning:#E3C04A; }
}
*{box-sizing:border-box}
/* Lo oculto se oculta siempre (un display de componente, p. ej. .campo-oc{display:flex}, no debe volver a mostrarlo). */
[hidden]{display:none !important}
body{margin:0;background:var(--page);color:var(--ink);font:15px var(--font);overflow-x:hidden}
.modulo,.contenido,.cab-in{min-width:0}
button,select,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
.mudo{color:var(--ink-muted);font-size:13px}
.error{color:var(--status-critical);font-size:14px}

/* Encabezado */
.cab{background:var(--navy)} .cab-in{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo{height:36px;width:auto} .cab-tit{display:flex;align-items:center;gap:10px;color:#fff;flex-wrap:wrap}
.cab-tit select{background:#fff;color:var(--navy);border:0;border-radius:8px;padding:8px 10px;min-height:40px}
.cab-sp{flex:1} .cab-user{color:var(--lila-tint);font-size:13px}
.cab-btn{background:transparent;border:1px solid var(--lila-tint);color:#fff;border-radius:8px;padding:8px 14px;min-height:40px;cursor:pointer}
.linea{height:4px;background:var(--gold)}
.nav-mod{max-width:1200px;margin:0 auto;padding:14px 16px 0;display:flex;gap:6px}
.tabla input[type=number],.tabla input[type=date]{width:92px;padding:6px 8px;font-size:14px} .tabla input[type=date]{width:150px}
.tabla select{padding:6px 8px;font-size:13px;max-width:210px} .bloque .tabla td{vertical-align:top}
.bloque .tabla td.num{text-align:left;width:150px;white-space:nowrap} .bloque .tabla th:nth-child(2){width:150px}
.grupo-fila td{background:var(--surface-sunken);font-weight:700;font-size:12px}
.reglas{border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:13px} .reglas summary{cursor:pointer;font-weight:600;color:var(--navy)} .reglas li{margin:6px 0}
.reglas .chip{margin-left:8px} .previa-ciclo{display:flex;flex-direction:column;gap:12px}
.cajas{display:flex;flex-direction:column;gap:2px;margin-top:6px} .caja{flex-direction:row;align-items:center;gap:6px;font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-secondary)}
.caja input{width:auto;padding:0}
/* Pestañas de módulos: en cualquier ancho (también tableta) se desplazan dentro de su barra en vez de ensanchar la página
   o quedar debajo del encabezado. La activa: fondo azul oscuro, texto blanco y barra amarilla (distinta del cursor encima). */
.nav-mod{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.nav-mod a{flex:none;white-space:nowrap;cursor:pointer;text-decoration:none;padding:9px 14px;font-weight:600;color:var(--navy);background:var(--surface);border:1px solid var(--border);border-bottom-color:var(--surface);border-radius:10px 10px 0 0}
.nav-mod a:hover{background:var(--navy-tint)}
.nav-mod a[aria-current]{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);box-shadow:inset 0 -4px 0 var(--gold-dark);font-weight:700}
/* 2.º nivel (pantallas del grupo activo): franja azul oscuro unida a la pestaña activa, con botones tipo píldora. */
.nav-sub{max-width:1200px;margin:0 auto;padding:8px 16px;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;border-top:3px solid var(--navy-deep)}
.nav-sub[hidden]{display:none}
.nav-sub a{flex:none;white-space:nowrap;cursor:pointer;text-decoration:none;padding:7px 16px;font-weight:600;font-size:14px;color:var(--navy);background:var(--surface);border:1px solid var(--border);border-radius:999px}
.nav-sub a:hover{background:var(--navy-tint)}
.nav-sub a[aria-current]{background:var(--navy-tint);border-color:var(--navy);color:var(--navy-deep);font-weight:700;box-shadow:inset 0 -3px 0 var(--navy)}
.nav-sub a:focus-visible,.nav-mod a:focus-visible,.sub-compras button:focus-visible,.pestanas-hoja button:focus-visible{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 6px var(--lila-tint)}
.contenido{max-width:1200px;margin:0 auto;padding:0 16px 40px}
/* Distribución amplia (docs/diseno.md): Programación, Compras y Financiero aprovechan el ancho en PC y pantallas grandes
   con márgenes moderados (16–40 px a cada lado, hasta 1680 px de contenido). Encabezado, pestañas y contenido comparten
   el mismo ancho para que queden alineados. Los demás módulos siguen en 1200 px hasta que se apruebe el patrón. */
body[data-ancho=amplio] .cab-in,body[data-ancho=amplio] .nav-mod,body[data-ancho=amplio] .nav-sub,body[data-ancho=amplio] .contenido{max-width:1680px;padding-left:clamp(16px,2.2vw,40px);padding-right:clamp(16px,2.2vw,40px)}

/* Inicio de sesión */
.centro{min-height:100vh;display:grid;place-items:center;padding:16px}
.login{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:min(380px,100%);display:flex;flex-direction:column;gap:12px}
.login h1{font-size:20px;color:var(--navy)} label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.03em}
input,select,textarea{border:1px solid var(--border);border-radius:8px;padding:10px;background:var(--surface);font-size:16px}

/* Botones */
.primario{background:var(--navy);color:#fff;border:0;border-radius:8px;padding:12px 16px;min-height:48px;font-weight:600;cursor:pointer}
.primario:hover{background:var(--navy-deep)} .primario:disabled{opacity:.6;cursor:default}
.ghost{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 12px;min-height:40px;cursor:pointer;color:var(--navy);font-weight:600}
.nav{width:40px;height:40px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--navy);font-weight:700;cursor:pointer}
.icono{width:40px;height:40px;border:1px solid var(--border);border-radius:8px;background:var(--surface-sunken);cursor:pointer}
.enlace{background:none;border:0;color:var(--navy-mid);text-decoration:underline;cursor:pointer;padding:6px 0;text-align:left}

/* Módulo */
.modulo{background:var(--surface);border:1px solid var(--border);border-radius:0 10px 10px 10px;padding:20px;display:flex;flex-direction:column;gap:14px;margin-top:-1px}
.modulo-cab h2{font-size:18px} .modulo-cab p{color:var(--ink-secondary);font-size:13px;margin-top:2px}
.barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .barra select{min-height:40px;padding:6px 10px;font-size:14px}
.sep{flex:1} .ventana{font-size:13px;color:var(--ink-secondary)}
.resumen{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--navy-tint);color:var(--navy)}
.chip::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor}
.chip.good{background:var(--status-good-tint);color:var(--status-good)} .chip.warning{background:var(--status-warning-tint);color:var(--status-warning)} .chip.critical{background:var(--status-critical-tint);color:var(--status-critical)}
.vacio{border:1px dashed var(--border);border-radius:10px;padding:28px;text-align:center;color:var(--ink-secondary);display:flex;flex-direction:column;gap:8px}
.pista{font-size:12px;color:var(--ink-muted)}
.tarjeta-seccion{border:1px solid var(--border);border-radius:10px;padding:14px}
.pendientes{list-style:none;padding:0;margin:8px 0 0}

/* Calendario (PC) */
.gantt{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.g-izq{width:230px;flex:none;border-right:1px solid var(--border);background:var(--surface)}
.g-izq-cab,.g-cab{height:44px;display:flex;align-items:center;padding-left:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-muted);background:var(--surface-sunken);border-bottom:1px solid var(--border)}
.g-der{flex:1;min-width:0;overflow:hidden}
.g-cab{display:grid;padding:0}
.g-sem{display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid var(--border);text-transform:none;letter-spacing:0}
.g-sem strong{font-size:12px;color:var(--ink)} .g-sem small{font-size:10px;color:var(--ink-muted)}
.g-fila{height:36px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;padding:0 10px;position:relative;font-size:12px}
.g-fila.grupo{background:var(--surface-sunken);font-weight:700;font-size:12px}
.g-nombre{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ver{border:1px solid var(--border);background:var(--surface);border-radius:6px;font-size:11px;padding:2px 8px;cursor:pointer;color:var(--navy)}
.g-filas{position:relative;background-image:linear-gradient(to right,var(--border) 1px,transparent 1px);background-size:calc(100% / var(--semanas)) 100%}
.g-filas .g-fila{padding:0}
.g-barra{position:absolute;top:6px;height:24px;border-radius:6px;background:var(--navy-tint);border:1.5px solid var(--navy);overflow:hidden;cursor:pointer;display:flex;align-items:center}
.g-barra.critical{border-color:var(--status-critical)} .g-barra.good{border-color:var(--status-good)}
.g-real{position:absolute;inset:0 auto 0 0;background:var(--navy);opacity:.9} .g-barra.critical .g-real{background:var(--status-critical)} .g-barra.good .g-real{background:var(--status-good)}
.g-txt{position:relative;z-index:1;font-size:11px;font-weight:600;color:var(--ink);padding:0 6px;white-space:nowrap;mix-blend-mode:normal;text-shadow:0 0 3px var(--surface)}
.fuera{position:absolute;top:10px;font-size:11px;color:var(--ink-muted)} .fuera.izq{left:8px} .fuera.der{right:8px}
.g-hoy{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--status-critical);z-index:2;pointer-events:none}
.g-hoy span{position:absolute;top:2px;left:4px;font-size:10px;font-weight:700;color:var(--status-critical)}
.solo-cel{display:none}

/* Calendario por ciclo: encabezado y nombres fijos, un solo eje de semanas para las dos torres */
.barra-cal select{max-width:270px}
.check-dep{flex-direction:row;align-items:center;gap:6px;font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-secondary);cursor:pointer}
.check-dep input{width:auto;padding:0}
.ciclo-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ciclo-cab h3{font-size:16px;margin-right:4px}
.cal{position:relative;overflow:auto;max-height:max(72vh,calc(100vh - 150px));border:1px solid var(--border);border-radius:8px;background:var(--surface);overscroll-behavior:contain}
.cal-lienzo{position:relative}
.cal-enc{position:sticky;top:0;z-index:10;display:flex;background:var(--surface-sunken);border-bottom:1px solid var(--border)}
.cal-esquina{position:sticky;left:0;z-index:11;flex:none;display:flex;align-items:center;padding-left:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-muted);background:var(--surface-sunken);border-right:1px solid var(--border)}
.cal-eje{position:relative;flex:none}
.cal-meses{position:relative;border-bottom:1px solid var(--border)}
.cal-mes{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:6px;font-size:11px;font-weight:700;color:var(--navy);border-left:1px solid var(--ink-muted);overflow:hidden;white-space:nowrap;text-transform:uppercase}
.cal-semanas{position:relative}
.cal-sem{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid var(--border);overflow:hidden}
.cal-sem strong{font-size:12px} .cal-sem small{font-size:10.5px;color:var(--ink-muted);white-space:nowrap}
.cal-sem.hoy{background:var(--navy-tint)} .cal-sem.hoy strong{color:var(--navy-deep)} /* hoy en azul: el rojo es para «Atrasada» */
.cal-cuerpo{position:relative;display:flex}
.cal-nombres{position:sticky;left:0;z-index:8;flex:none;background:var(--surface);border-right:1px solid var(--border)}
.cal-fila{position:absolute;left:0;right:0;height:30px;display:flex;align-items:center;gap:6px;padding:0 8px 0 10px;border-bottom:1px solid var(--border);border-left:4px solid var(--franja,transparent);font-size:12px;overflow:hidden;box-sizing:border-box}
.cal-torre{background:var(--surface-sunken);font-size:13px}
.cal-torre small,.cal-grupo small{color:var(--ink-muted);font-size:10.5px;margin-left:auto;white-space:nowrap;font-weight:400}
.cal-grupo{background:var(--page);font-weight:700}
.cal-torre strong,.cal-grupo strong{white-space:nowrap}
.cal-grupo small,.cal-torre small{overflow:hidden;text-overflow:ellipsis;min-width:0}
.cal-plegar{border:0;background:none;cursor:pointer;color:var(--navy);width:22px;height:24px;font-size:13px;padding:0}
.cal-act{cursor:pointer} .cal-act:hover{background:var(--navy-tint)} .cal-act.sel{background:var(--navy-tint);font-weight:700}
.cal-nombre{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.1}
/* Atenuadas (no relacionadas con la seleccionada): el fondo se apaga, pero el texto —«Atrasada», el avance, el nombre—
   conserva un contraste legible. */
.cal-fila.tenue{color:var(--ink-muted)}
.cal-barra.tenue{background:var(--surface);border-style:dashed} .cal-barra.tenue .cal-real{opacity:.18}
.cal-barra.tenue .cal-txt{color:var(--ink-secondary)}
/* Secciones por torre (docs/diseno.md §8): cada torre separada de la anterior, con su encabezado fijo arriba mientras
   se recorren sus actividades (nombre y fechas a la izquierda; barra-resumen sobre el eje). */
.cal-sec{position:absolute;left:0;right:0;pointer-events:none}
.cal-sec>*{pointer-events:auto}
.cal-sec>.cal-fila{position:sticky;z-index:3;font-size:14px;border-top:3px solid var(--franja)}
.cal-sec>.cal-banda{position:sticky;z-index:6}
.cal-sep{position:absolute;left:0;right:0;height:30px;background:var(--page)}
.cal-banda-sep{background:var(--page);border-bottom:0}
/* Barras-resumen (torre y grupo): delgadas, oscuras y con remates en los extremos; las de actividad son más altas,
   claras, con borde y relleno de avance. */
.cal-resumen{position:absolute;z-index:2;height:8px;top:11px;border-radius:1px;background:var(--franja);pointer-events:auto}
.cal-resumen::before,.cal-resumen::after{content:"";position:absolute;bottom:-5px;border:5px solid transparent;border-top-color:var(--franja)}
.cal-resumen::before{left:0;border-left-color:var(--franja)} .cal-resumen::after{right:0;border-right-color:var(--franja)}
.cal-resumen.torre{height:10px;top:10px}
.cal-resumen.grupo{opacity:.7}
.leyenda-cal{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:12.5px;color:var(--ink-secondary);margin:6px 0 8px}
.leyenda-cal span{display:inline-flex;align-items:center;gap:6px}
.ley-resumen{display:inline-block;width:28px;height:8px;background:var(--navy);position:relative} .ley-resumen.grupo{opacity:.7;height:6px}
.ley-actividad{display:inline-block;width:28px;height:14px;border-radius:4px;background:var(--navy-tint);border:1.5px solid var(--navy-mid)} .ley-actividad.critical{border-color:var(--status-critical)}
.vista-cal{display:inline-flex;gap:0} .vista-cal button{border-radius:0} .vista-cal button:first-child{border-radius:8px 0 0 8px} .vista-cal button:last-child{border-radius:0 8px 8px 0;margin-left:-1px}
.vista-cal button[aria-pressed=true]{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep)}
.nav-semanas{display:inline-flex;gap:6px;flex:none}
/* Torres y pisos en dos líneas: nombre y, debajo, conteo y fechas completas (sin «…»), dentro de su fila de 44 px. */
.cal-grupo-txt{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.2}
.cal-sec>.cal-torre{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;line-height:1.2}
.cal-grupo small,.cal-torre small{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;margin-left:0 !important;font-size:11.5px}
.cal-torre:focus-visible,.cal-act:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
@media (max-width:700px){
  .cal-plegar{width:36px;height:40px;flex:none;font-size:15px} /* el ▸ ocupa casi todo el alto de la fila; toda la fila también responde */
  .barra-cal button,.barra-cal select{min-height:48px} .barra-cal .nav{width:48px}
  .check-dep{min-height:48px} .check-dep input{width:22px;height:22px}
}
.cal-txt-fuera{position:absolute;z-index:3;font-size:11px;font-weight:700;color:var(--status-critical);white-space:nowrap;pointer-events:none}
.cal-txt-fuera.tenue{color:var(--ink-secondary)}
.cal-grupo{cursor:pointer}
.ley-franja{display:inline-block;width:6px;height:16px;background:var(--franja);margin-left:4px}
.ley-hoy{display:inline-block;width:0;height:16px;border-left:2px dashed var(--navy)}
.cal-barras{position:relative;flex:none;background-image:linear-gradient(to right,var(--border) 1px,transparent 1px)}
.cal-banda{position:absolute;left:0;height:30px;border-bottom:1px solid var(--border);pointer-events:none;box-sizing:border-box}
.cal-banda-torre{background:var(--surface-sunken);border-top:3px solid var(--franja)}
.cal-banda-grupo{background:rgba(127,127,160,.08)}
.cal-linea-mes{position:absolute;top:0;width:0;border-left:1px solid var(--ink-muted);opacity:.45;pointer-events:none}
.cal-hoy{position:absolute;top:0;width:0;border-left:2px dashed var(--navy);z-index:2;pointer-events:none}
.cal-barra{position:absolute;z-index:3;border-radius:5px;background:var(--navy-tint);border:1.5px solid var(--navy-mid);overflow:hidden;cursor:pointer;display:flex;align-items:center;box-sizing:border-box}
.cal-barra.critical{border-color:var(--status-critical)} .cal-barra.good{border-color:var(--status-good)}
.cal-barra.sel{outline:2px solid var(--navy);outline-offset:1px;z-index:5}
.cal-real{position:absolute;inset:0 auto 0 0;background:var(--navy-mid);opacity:.5}
.cal-barra.critical .cal-real{background:var(--status-critical)} .cal-barra.good .cal-real{background:var(--status-good)}
.cal-txt{position:relative;z-index:1;font-size:11px;font-weight:700;color:var(--ink);padding:0 4px;white-space:nowrap;text-shadow:0 0 3px var(--surface)}
.cal-conectores{position:absolute;left:0;top:0;pointer-events:none;z-index:4;overflow:visible}
.cal-con{stroke:var(--ink-muted);stroke-width:1.1;opacity:.6}
.cal-con.inicio_simultaneo{stroke-dasharray:3 2} .cal-con.desfase{stroke-dasharray:1 3;stroke-width:1.5}
.cal-con.sel{stroke:var(--navy);stroke-width:2;opacity:1} .cal-con.tenue{opacity:.1}
.rel{border:1px solid var(--border);border-radius:8px;font-size:12.5px} .rel:empty{display:none}
.rel-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--border)}
.rel-listas{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 12px} .rel-listas h4{font-size:12px;margin-bottom:4px} .rel-listas ul{list-style:none;padding:0;margin:0} .rel-listas li{margin:4px 0}
.rel p{padding:10px 12px;margin:0} .rel-listas p{padding:0}
/* Vista entrelazada (actividad y piso con las dos torres): T6/T7 como rótulo y color, nunca solo color. */
.vista-cal button+button{margin-left:-1px}
.cal-par{align-items:center;justify-content:space-between;gap:6px}
.cal-par.sel{background:var(--navy-tint)}
.cal-par-txt{display:flex;flex-direction:column;min-width:0;line-height:1.15} .cal-par-txt small{font-size:10.5px}
.cal-torres{display:inline-flex;gap:4px;flex:none}
.cal-tb{min-width:30px;height:22px;padding:0 4px;border-radius:4px;border:1.5px solid var(--franja);border-left-width:5px;background:var(--surface);color:var(--ink);font-size:11px;font-weight:700;cursor:pointer}
.cal-tb.sel,.cal-tb[aria-pressed=true]{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep)}
.cal-tb:focus-visible{outline:3px solid var(--navy);outline-offset:1px}
.cal-banda-par{background:transparent}
.cal-barra.con-torre{border-left:5px solid var(--franja)}
.cal-tag{position:relative;z-index:1;flex:none;font-size:10px;font-weight:800;color:#fff;background:var(--franja);border-radius:3px;padding:0 3px;margin-left:2px;line-height:14px}
.cal-tag-res{position:absolute;z-index:2;font-size:10px;font-weight:800;color:var(--franja);background:var(--surface);padding:0 2px;line-height:14px;pointer-events:none}
.cal-txt-torre{position:absolute;z-index:3;font-size:11px;font-weight:800;color:var(--ink);white-space:nowrap;pointer-events:none}
.cal-txt-cal{position:absolute;z-index:3;font-size:11px;font-weight:700;color:var(--ink-secondary);white-space:nowrap;pointer-events:none}
.cal-txt-cal.q-con_observaciones{color:var(--status-critical)} .cal-txt-cal.q-ok{color:var(--status-good)}
/* El amarillo no da contraste en texto de 11 px: texto oscuro y el amarillo solo como subrayado. */
.cal-txt-cal.q-pendiente,.cal-txt-cal.q-ok_desactualizado{color:var(--ink);border-bottom:2px solid var(--status-warning)}
/* Textos fuera de la barra: fondo propio para que la línea de «Hoy» no los cruce. */
.cal-txt-fuera,.cal-txt-cal,.cal-txt-torre{background:var(--surface);padding:0 2px}
.cal-tag.claro{color:var(--navy-deep);background:var(--lila-tint,#e9e5f5);box-shadow:inset 0 0 0 1px var(--franja)}
.modulo-personal h3,.modal .tarjeta-seccion h4,.modal h4{margin-top:12px}
@media (max-width:700px){
  .cal-par{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
  .cal-par .cal-nombre{overflow-wrap:anywhere}
  .cal-hito{min-width:32px;height:32px;line-height:28px} .cal-hito::after{content:"";position:absolute;inset:-8px}
  .modal .enlace{min-height:48px;display:inline-flex;align-items:center}
  .leyenda-cal span{flex-wrap:wrap}
}
.cal-txt-torre.tenue,.cal-txt-cal.tenue{color:var(--ink-muted)}
.cal-hito{cursor:pointer} .cal-hito:focus-visible{outline:3px solid var(--navy);outline-offset:1px}
@media (max-width:700px){
  .cal-tb{min-width:48px;height:48px;font-size:14px} /* área táctil de cada torre: 48 × 48 px */
  .cal-par{padding-right:4px}
}
/* Control de calidad (detalle de la actividad) y Personal del proyecto */
.calidad h4{margin-top:0}
.pasos-calidad{list-style:none;padding:0;margin:8px 0;display:grid;gap:10px}
.paso-calidad{border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--surface)}
.paso-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.historial-calidad,.antecedentes{margin-top:6px;font-size:12.5px} .historial-calidad summary,.antecedentes summary{cursor:pointer;color:var(--navy);min-height:32px}
.historial-personal{font-size:13px;padding-left:18px}
@media (max-width:700px){
  .tabla-personal thead{display:none}
  .tabla-personal,.tabla-personal tbody,.tabla-personal tr,.tabla-personal td{display:block;width:auto}
  .tabla-personal tr{border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:8px}
  .tabla-personal td{border:0;padding:3px 0;overflow-wrap:anywhere}
  .tabla-personal td[data-etq]:not([data-etq=""]):not([data-etq="Función"])::before{content:attr(data-etq) ": ";color:var(--ink-muted);font-size:12px}
  .tabla-personal button{min-height:48px}
}
@media (max-width:700px){ .historial-calidad summary,.antecedentes summary{min-height:48px;display:flex;align-items:center} }
@media (max-width:700px){ .rel-listas{grid-template-columns:1fr} .cal{max-height:68vh} .cal-fila{font-size:12px;padding-left:6px} } /* sin bajar de 12 px en celular */

/* Detalle */
.modal-fondo{position:fixed;inset:0;background:rgba(18,21,61,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal{background:var(--surface);border-radius:12px;width:min(560px,100%);max-height:90vh;overflow:auto}
.modal-cab{display:flex;justify-content:space-between;gap:12px;padding:16px 18px 0} .modal-cab h3{font-size:16px} .modal-cab p{font-size:12px;color:var(--ink-secondary);margin-top:2px}
.modal-cuerpo{padding:14px 18px 18px;display:flex;flex-direction:column;gap:14px}
.modal .acciones{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;flex-wrap:wrap}
/* Compras */
.sub-compras{margin:4px 0 14px} .sub-compras button:hover{background:var(--navy-tint)}
.sub-compras button.activo,.sub-compras button[aria-current]{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);box-shadow:inset 0 -3px 0 var(--gold-dark)}
.barra-oc{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}
.barra-oc select{padding:8px 10px;font-size:14px}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cuerpo-compras,.lista-oc,.form-oc,.form-oc>*,.tabla-scroll{min-width:0} /* las tablas anchas se desplazan dentro, no estiran la página */
.form-oc{display:flex;flex-direction:column;gap:14px} .form-oc .acciones{display:flex;justify-content:flex-end} .form-oc>.ghost:first-child{align-self:flex-start}
.rejilla-oc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 14px;margin-top:10px}
.campo-oc{display:flex;flex-direction:column;gap:4px;font-size:13px} .campo-oc span{color:var(--ink-muted);font-weight:600}
.campo-oc input,.campo-oc select,.campo-oc textarea{padding:8px 10px;font-size:14px;border:1px solid var(--border);border-radius:8px;min-height:40px}
.totales-oc{max-width:420px;margin-top:10px} .totales-oc dd{text-align:right} .totales-oc input{width:150px;text-align:right;padding:6px 8px}
.totales-oc .total{font-size:16px;color:var(--navy)}
.peligro{color:var(--status-critical);border-color:var(--status-critical)}
.peligro-solido{background:var(--status-critical);color:#fff;border:0;border-radius:8px;padding:12px 16px;min-height:48px;font-weight:600;cursor:pointer}
.peligro-solido:disabled{opacity:.6;cursor:default}
.tabla th.num{text-align:right}
.error-form{color:var(--status-critical);font-size:14px;font-weight:600;margin:0}
.acciones-guardar{align-items:center;gap:12px;flex-wrap:wrap}
.acciones-detalle{margin-top:14px} .pregunta{margin:0 0 4px;font-weight:600;color:var(--ink)}
.barra-oc.fin{justify-content:flex-end}
.totales-oc .total{font-size:20px;font-weight:700;color:var(--navy)} .totales-oc dd.total{font-size:22px}
.en-pesos{display:inline-flex;align-items:center;gap:4px;color:var(--ink-muted)}
.tarjetas.solo-cel{display:none} /* .tarjetas (display:flex) no debe anular .solo-cel en PC */
@media (max-width:700px){ .tarjetas.solo-cel{display:flex} }
.tarjeta-fila{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}
.tarjeta-linea{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px}
/* Logo: isotipo sobre placa blanca (branding-la-mia §2: sobre el azul de marca el logo va siempre en placa) */
.placa-logo{background:#fff;border-radius:10px;padding:6px;display:inline-flex;line-height:0} .placa-logo img{height:32px;width:auto}
.modal textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font:inherit}
.campos{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px} .campos dt{color:var(--ink-muted)} .campos dd{margin:0;font-weight:600}
.progreso{height:8px;border-radius:999px;background:var(--navy-tint);overflow:hidden} .progreso div{height:100%;background:var(--navy)}
/* Tablas (patrón de listado aprobado, docs/diseno.md §3): letra de 13 px, encabezado con fondo, importes a la derecha con
   cifras tabulares y en una sola línea. */
.tabla{width:100%;border-collapse:collapse;font-size:13px} .tabla th{text-align:left;color:var(--ink-muted);font-weight:600;font-size:12px;padding:7px 8px;border-bottom:1px solid var(--border);background:var(--surface-sunken);white-space:nowrap} .tabla td{padding:6px 8px;border-bottom:1px solid var(--border)} .num{text-align:right}
.tabla td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Tarjetas de OC (Por pagar, Bodega) en rejilla: dos o más columnas cuando hay ancho. */
.rejilla-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,560px),1fr));gap:12px;align-items:start}
.rejilla-tarjetas>.tarjeta-seccion{margin:0;min-width:0}
.tabla tbody tr:hover{background:var(--navy-tint)}
.candado{background:var(--surface-sunken);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--ink-secondary)}
.form-avance{display:flex;flex-direction:column;gap:8px}
.lia-resp{margin-top:12px} .lia-texto{white-space:pre-wrap;line-height:1.5}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 16px;border-radius:10px;z-index:60;max-width:90vw}
.toast.error{background:var(--status-critical)}
/* Maquinaria */
.filtros-maq{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0} .filtros-maq input,.filtros-maq select{padding:8px 10px;font-size:14px;border:1px solid var(--border);border-radius:8px;min-height:40px}
.filtros-maq input{flex:1 1 260px;min-width:0}
.hoja{display:flex;flex-direction:column;gap:14px;min-width:0} .hoja>.ghost:first-child{align-self:flex-start}
.hoja-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap} .hoja-cab h3{font-size:20px;color:var(--navy)}
.captura-rapida{display:flex;gap:8px;flex-wrap:wrap} .captura-rapida button{min-height:48px}
.pestanas-hoja{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--border);padding-bottom:8px}
.pestanas-hoja button{flex:none;white-space:nowrap} .pestanas-hoja button:hover{background:var(--navy-tint)}
.pestanas-hoja button[aria-current]{background:var(--navy-tint);color:var(--navy-deep);border-color:var(--navy);box-shadow:inset 0 -3px 0 var(--navy);font-weight:700}
.hoja-cuerpo{min-width:0} .hoja-cuerpo h3{font-size:15px;margin-top:6px}
.lista-maq{display:flex;flex-direction:column;gap:8px}
.lista-maq .tarjeta-linea>span{overflow-wrap:anywhere}
.acciones-fila{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.cajas-maq{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.rejilla-maq{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px} .rejilla-maq .ancho{grid-column:1/-1}
.rejilla-maq [hidden]{display:none}
.campo-oc small{font-size:12px;text-transform:none;letter-spacing:0;font-weight:400}
.campo-oc [aria-invalid=true]{border-color:var(--status-critical);outline:2px solid var(--status-critical-tint)}
.campo-error{color:var(--status-critical);font-size:13px;font-weight:600;text-transform:none;letter-spacing:0}
.modal-cab{position:sticky;top:0;background:var(--surface);z-index:1;padding-bottom:8px}
.rejilla-imputacion input[type=number]{text-align:right}
.selector-seccion{display:none;padding:10px 12px;font-size:16px;border:1px solid var(--border);border-radius:8px;min-height:48px;width:100%}
.rejilla-imputacion{display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr auto;gap:8px;align-items:end;background:var(--surface-sunken);border-radius:8px;padding:8px}
.rejilla-imputacion>.ghost{min-height:40px} .rejilla-imputacion>label,.rejilla-imputacion select{min-width:0;width:100%}
.tarjeta-seccion h4{font-size:13px;color:var(--ink-secondary);margin:10px 0 6px}
.imputacion{font-size:12px;color:var(--ink-secondary);padding-left:10px;border-left:3px solid var(--lila-tint)}
@media (max-width:700px){ .rejilla-imputacion{grid-template-columns:1fr 1fr} .rejilla-imputacion>label:first-child{grid-column:1/-1} }
.correccion{border-left:3px solid var(--status-warning);padding-left:8px}
@media (max-width:700px){
  .captura-rapida button{flex:1 1 100%}
  .filtros-maq select{flex:1 1 45%} .filtros-maq input{flex:1 1 100%}
  .barra-maq{flex-direction:column-reverse;align-items:stretch} .barra-maq>.primario{width:100%}
  /* Táctil: sin zoom del iPhone (16 px) y objetivos de 48 px */
  .campo-oc input,.campo-oc select,.campo-oc textarea,.filtros-maq input,.filtros-maq select{font-size:16px;min-height:48px}
  .modulo .ghost,.modal .ghost,.modal .primario{min-height:48px}
  .pestanas-hoja{display:none} .selector-seccion{display:block}
}

/* Compras: entrega y estado; Financiero */
.opciones-entrega{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.opciones-entrega .opcion{display:flex;flex-direction:row;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;padding:10px 14px;min-height:48px;cursor:pointer;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;font-size:14px}
.opciones-entrega .opcion:has(input:checked){border-color:var(--navy);background:var(--navy-tint)}
.opciones-entrega input{width:18px;height:18px;accent-color:var(--navy)}
.opciones-entrega input:disabled+span{color:var(--ink-muted)}
.entrega-proyecto{display:flex;flex-direction:column;gap:8px}
.entrega-proyecto[hidden],.bloque-entrega [hidden]{display:none}
.aviso-accion{background:var(--status-warning-tint);color:var(--ink);border-left:4px solid var(--status-warning, #b26b00);border-radius:8px;padding:10px 12px;font-size:14px;font-weight:600;margin:8px 0}
.aviso-entrega{background:var(--status-warning-tint);color:var(--ink);border-radius:8px;padding:10px 12px;font-size:13px;margin:0}
.estado-oc{align-items:center} .motivo-accion{font-size:13px;color:var(--ink-secondary)}
.resumen-confirmar{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border);padding-top:10px}
.soportes-pago{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px} .soportes-pago h4{width:100%;font-size:13px;margin:0}
.filtros-financiero{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,17rem));gap:10px 12px;margin:6px 0 12px} /* filtros con ancho de filtro, no de página */
/* Listados (docs/diseno.md): letra de 13 px, encabezados claros, cifras tabulares a la derecha, columnas cortas en una
   sola línea y una columna flexible que se corta con «…» (nombre completo en el título). */
.tabla-listado{font-size:13px} .tabla-listado th{font-size:12px;padding:8px 10px;background:var(--surface-sunken);white-space:nowrap}
.tabla-listado td{padding:6px 10px;vertical-align:middle} .nw{white-space:nowrap}
.tabla-listado td.num{font-variant-numeric:tabular-nums}
/* La columna larga (proveedor) toma el ancho que sobra y, si no cabe, pasa a una segunda línea: el nombre completo
   siempre se ve (sin «…» que solo se lee con el cursor). */
.tabla-listado td.flex{width:100%;min-width:12rem} .tabla-listado .corta{display:block;overflow-wrap:anywhere}
.tabla-listado tbody tr:hover{background:var(--navy-tint)}
@media (pointer:fine){ .tabla-listado .ghost{min-height:34px;padding:4px 12px} } /* con dedo se conservan 40–48 px */
/* Pagos: con menos de 820 px de ancho (tableta vertical) las ocho columnas no caben sin cortar al proveedor → tarjetas. */
.lista-pagos{container-type:inline-size;container-name:pagos}
@container pagos (max-width:819px){ .marco-tabla-pagos{display:none} .tarjetas.tarjetas-pagos{display:flex} }
.vacio-listado{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:24px 12px;border:1px dashed var(--border);border-radius:10px;color:var(--ink-secondary)}
.filtros-financiero>label{min-width:0} .filtros-financiero select,.filtros-financiero input{width:100%;min-width:0;box-sizing:border-box}
.tarjeta-linea .tarjeta-fila{flex-wrap:wrap} .tarjeta-linea .motivo-accion{flex:1 1 100%}
label.fila-check{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);
  font-size:13px;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--ink);cursor:pointer}
label.fila-check input[type=checkbox]{width:22px;height:22px;min-height:0;flex:0 0 22px;margin:0}
@media (max-width:700px){ label.fila-check{min-height:48px;align-items:center;font-size:14px} }
.enlace{background:none;border:0;padding:0;color:var(--navy);font-weight:600;text-decoration:underline;cursor:pointer;font:inherit}
@media (max-width:700px){ .opciones-entrega .opcion{flex:1 1 100%} .filtros-financiero{grid-template-columns:1fr 1fr} .filtros-financiero>label:first-child{grid-column:1/-1} }

/* Celular: sin tablas; tarjetas */
.tarjetas{display:flex;flex-direction:column;gap:8px}
.tarjeta{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px;cursor:pointer;min-height:48px}
@media (max-width:700px){
  .solo-pc,.pista{display:none} .solo-cel{display:block}
  .modulo{padding:14px;border-radius:0 0 10px 10px} .cab-user{display:none}
  .cab-tit{flex:1;min-width:0} .cab-tit select{flex:1 1 100%;min-width:0;max-width:100%}
}
@media (max-width:480px){
  /* En celular el selector de proyecto necesita el ancho: el título "Panel de Obra" se oculta (el isotipo identifica) */
  .cab-tit strong{display:none} .cab-tit select{min-width:150px}
  .barra{display:grid;grid-template-columns:1fr 1fr;gap:8px} .barra .sep{display:none}
  .barra .ventana{grid-column:1/-1;order:3;text-align:center} .barra .nav{order:4;width:100%} .barra .ghost,.barra select{width:100%}
  .barra button[aria-label='Semana anterior']{order:4} .barra button[aria-label='Semana siguiente']{order:5} .barra .ghost{order:6}
}

/* Flujo integrado de compras (docs/flujo-compras.md) */
.casilla{display:flex;flex-direction:row;align-items:center;gap:8px;min-height:48px;font-size:14px;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:400}
.ficha-linea{font-size:13px;color:var(--ink-secondary);background:var(--surface-sunken);border-radius:8px;padding:6px 10px}
.modal.ancha{width:min(760px,100%)}
/* Ventana amplia (detalle de OC): datos en varias columnas, tabla de líneas con columnas proporcionadas e importes en una
   sola línea, alineados a la derecha y con cifras tabulares; totales a la derecha, debajo de las líneas. */
.modal.amplia{width:min(1240px,100%)}
.modal.amplia .detalle-oc>.campos{grid-template-columns:repeat(auto-fill,minmax(7.5rem,9rem) minmax(13rem,1fr))}
.modal.amplia .totales-oc{margin-left:auto;min-width:min(420px,100%)}
.tabla-lineas-oc{font-size:13px} .tabla-lineas-oc td,.tabla-lineas-oc th{vertical-align:top}
.tabla-lineas-oc td.num,.tabla-lineas-oc th.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.tabla-lineas-oc th:first-child{width:2rem} .tabla-lineas-oc td:nth-child(2){width:15%} .tabla-lineas-oc td:nth-child(3){min-width:16rem}
.tabla-lineas-oc td:nth-child(7){white-space:nowrap}
.tabla-lineas-oc tbody tr:nth-child(even){background:var(--surface-sunken)}
.casilla input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--navy)}
.casilla input:disabled+span{color:var(--ink-muted)}
/* ───── OC de material nueva (docs/diseno.md) ─────
   Disposición por ANCHO DISPONIBLE (consultas de contenedor, sirven igual con zoom del navegador):
   · <1000 px: una columna (datos, entrega, líneas, tarifas, notas, resumen y Guardar).
   · ≥1000 px: datos y entrega lado a lado; líneas a todo el ancho; tarifas y notas a la izquierda y resumen + Guardar
     a la derecha, fijo al desplazarse dentro de su columna (no tapa nada).
   Las líneas siempre van a todo el ancho (también en pantalla grande): el material necesita el espacio más que el resumen. */
/* El mismo patrón sirve a los demás formularios largos (factura, pago, recibido): clases genéricas disp-* junto a las de la OC. */
.oc-nueva,.disp-form{container-type:inline-size;container-name:ocnueva}
.oc-disposicion,.disp{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;grid-template-areas:"cab" "lin" "sec" "lado"}
.oc-cabecera,.disp-cab{grid-area:cab;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.oc-lineas,.disp-lin{grid-area:lin;min-width:0} .oc-secundario,.disp-sec{grid-area:sec;display:flex;flex-direction:column;gap:14px;min-width:0}
.oc-lado,.disp-lado{grid-area:lado;display:flex;flex-direction:column;gap:12px;min-width:0}
.oc-lado .acciones-guardar,.disp-lado .acciones{display:flex;flex-direction:column;align-items:stretch;gap:8px} .oc-lado .acciones-guardar .primario,.disp-lado .acciones>.primario{width:100%}
.disp-lado .acciones{justify-content:flex-start;margin-top:0} .disp-lado .resumen-confirmar .acciones{flex-direction:column}
/* Resumen de confirmación en la columna lateral: la pregunta y los botones arriba (el primario primero) y el detalle
   después, así «Sí, registrar…» se ve sin desplazar aunque la lista sea larga. */
.disp-lado .resumen-confirmar>.pregunta{order:-2} .disp-lado .resumen-confirmar>.acciones{order:-1} .disp-lado .resumen-confirmar .acciones>.primario{order:-1}
.oc-lado .totales-oc,.disp-lado .totales-oc{max-width:none}
.disp-lin>.tarjeta-seccion,.disp-cab>.tarjeta-seccion,.disp-sec>.tarjeta-seccion,.disp-lado>.tarjeta-seccion{margin:0}
@container ocnueva (min-width:600px){ .rejilla-datos-oc{grid-template-columns:minmax(150px,11rem) repeat(auto-fit,minmax(200px,1fr))} }
/* Campos numéricos de tarifas: ancho de número, no de columna. */
[data-tarifas-oc] .rejilla-oc{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
[data-tarifas-oc] .campo-oc input,[data-tarifas-oc] .campo-oc select{max-width:11rem}
@container ocnueva (min-width:1000px){
  .oc-disposicion{grid-template-columns:minmax(0,1fr) minmax(320px,400px);grid-template-areas:"cab cab" "lin lin" "sec lado"}
  .oc-cabecera{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .oc-lado{position:sticky;top:12px;align-self:start}
}
/* Formularios en ventana (factura, pago, recibido): las líneas a la izquierda y el resumen con la acción, a la derecha,
   visible mientras se recorren las líneas. Desde 820 px, para que se conserve también con la Ayuda abierta al lado. */
@container ocnueva (min-width:820px){
  .disp{grid-template-columns:minmax(0,1fr) minmax(260px,340px);grid-template-areas:"cab lado" "lin lado" "sec lado"}
  .disp-lado{grid-row:1/span 3;position:sticky;top:12px;align-self:start}
}
/* Las dos secciones de la cabecera, lado a lado solo si caben sin montarse (si no, una debajo de la otra). */
@container ocnueva (min-width:1100px){ .disp-cab{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)} }
/* Resumen en la columna lateral: concepto a la izquierda (puede partirse), cifra a la derecha sin partirse. */
.oc-lado .totales-oc,.disp-lado .totales-oc{grid-template-columns:minmax(0,1fr) auto} .oc-lado .totales-oc dd,.disp-lado .totales-oc dd{white-space:nowrap}
.oc-lado .totales-oc .total,.disp-lado .totales-oc .total{font-size:17px} .oc-lado .totales-oc dd.total,.disp-lado .totales-oc dd.total{font-size:19px}
/* Nombre completo de un campo que no cabe en su columna (vigilarNombres en ui.ts): visible sin cursor. */
.nombre-completo{grid-column:1/-1;margin:0;font-size:13px;line-height:1.35;color:var(--ink-secondary);overflow-wrap:anywhere}
.nombre-completo[hidden]{display:none}

/* Líneas: la misma línea se presenta como fila de tabla (PC), tarjeta compacta (tableta) o tarjeta (celular). */
.lineas-marco{container-type:inline-size;container-name:lineas;min-width:0}
.lineas-oc{display:flex;flex-direction:column;gap:8px}
.linea-oc-cab{display:none}
.linea-oc{display:grid;gap:8px 10px;align-items:end;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"num num" "mat mat" "paq paq" "cant uni" "vu iva" "ret ica" "val qui"}
.linea-oc{position:relative} .linea-oc>*{min-width:0}
.lc-num{grid-area:num;font-size:12px;font-weight:700;color:var(--ink-muted)} .lc-num::before{content:"Línea "}
.lc-paq{grid-area:paq} .lc-mat{grid-area:mat} .lc-cant{grid-area:cant} .lc-uni{grid-area:uni} .lc-vu{grid-area:vu} .lc-iva{grid-area:iva}
.lc-ret{grid-area:ret} .lc-ica{grid-area:ica} .lc-val{grid-area:val} .lc-qui{grid-area:qui;display:flex;justify-content:flex-end}
.linea-oc .campo-oc input,.linea-oc .campo-oc select{width:100%;min-width:0}
.linea-oc .en-pesos{display:flex} .linea-oc .en-pesos input{flex:1}
.lc-cant input,.lc-vu input,.lc-iva input{text-align:right;font-variant-numeric:tabular-nums}
.lc-val strong{font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.lc-transporte{display:flex;align-items:center;min-height:40px;color:var(--navy)}
.linea-oc .ficha-linea{display:flex;align-items:center;min-height:40px}
.quitar-icono{display:none}
.linea-oc[data-linea-error]{border-color:var(--status-critical);box-shadow:0 0 0 2px var(--status-critical-tint)}
.error-linea{grid-column:1/-1;margin:0}
/* Tableta (≥560 px de ancho de líneas): tarjeta compacta de tres filas, con etiquetas. */
@container lineas (min-width:560px){
  .linea-oc{grid-template-columns:2.2rem minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"num mat mat mat paq" "num cant uni vu iva" "num ret ica val qui"}
  .lc-num{align-self:start;padding-top:22px;text-align:center} .lc-num::before{content:""}
}
/* PC (≥1190 px): tabla editable, una fila por línea; los encabezados reemplazan a las etiquetas visibles (que siguen
   para el lector de pantalla). Columnas proporcionadas: material y paquete crecen con el ancho; cantidad, IVA y reteICA,
   angostas; «Sin retención» cabe completa. Mínimos: 1186 px (por eso el umbral). */
@container lineas (min-width:1190px){
  .lineas-oc{gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .linea-oc-cab,.linea-oc{display:grid;grid-template-columns:1.75rem minmax(140px,1fr) minmax(240px,3fr) 5.5rem 4.25rem 7.25rem 4.5rem 8.5rem 3rem 6.75rem 2.5rem;
    grid-template-areas:"num paq mat cant uni vu iva ret ica val qui";column-gap:8px;align-items:center}
  .linea-oc-cab{padding:8px 10px;background:var(--surface-sunken);border-bottom:1px solid var(--border);font-size:12px;font-weight:600;color:var(--ink-muted);position:sticky;top:0;z-index:1}
  .linea-oc-cab .num{text-align:right}
  .linea-oc{border:0;border-bottom:1px solid var(--border);border-radius:0;padding:6px 10px;row-gap:4px}
  .linea-oc:last-child{border-bottom:0}
  .linea-oc .nombre-completo{grid-column:2/-2}
  .linea-oc:nth-child(odd){background:var(--surface-sunken)}
  .linea-oc:focus-within{background:var(--navy-tint)}
  .lc-num{padding:0;text-align:right;font-variant-numeric:tabular-nums} .lc-num::before{content:""}
  .linea-oc .campo-oc>span:first-child,.linea-oc .casilla>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .linea-oc .casilla{min-height:40px;justify-content:center}
  .lc-val{align-items:flex-end} .lc-val strong{font-size:14px}
  .quitar-linea{min-height:36px;min-width:36px;padding:4px 8px} .quitar-icono{display:inline} .quitar-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* En columnas angostas las flechas del campo numérico tapaban el número. */
  .linea-oc input[type=number]{-moz-appearance:textfield;appearance:textfield}
  .linea-oc input[type=number]::-webkit-inner-spin-button,.linea-oc input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
}
/* «Unidad» y «Tipo» (texto, no campo) llevan la misma etiqueta que los demás campos. */
div.campo-oc>span:first-child{font-size:12px;text-transform:uppercase;letter-spacing:.03em}

/* ───── Tablas editables de factura, recibido y distribución de un pago (docs/diseno.md) ─────
   Mismo patrón que las líneas de la OC: la misma fila se presenta como tarjeta con etiquetas (celular), tarjeta compacta
   (tableta) o fila de tabla con encabezados (PC), según el ancho de su recuadro (.lineas-marco). */
.filas-ed{display:flex;flex-direction:column;gap:8px}
.fila-cab{display:none}
.fila-ed{display:grid;gap:8px 10px;align-items:end;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;position:relative}
.fila-ed>*{min-width:0}
.fila-ed .campo-oc input,.fila-ed .campo-oc select{width:100%;min-width:0;box-sizing:border-box}
.fila-ed .en-pesos{display:flex} .fila-ed .en-pesos input{flex:1;min-width:0}
.fila-ed input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
.fila-ed .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.fila-ed[data-linea-error]{border-color:var(--status-critical);box-shadow:0 0 0 2px var(--status-critical-tint)}
.fila-ed .quitar-linea{min-height:40px}
/* Factura: línea del documento + su asignación a líneas de OC. */
.fila-fac{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"num num" "desc desc" "cant vu" "iva val" "nom nom" "rep rep" "qui qui"}
.ff-num{grid-area:num;font-size:12px;font-weight:700;color:var(--ink-muted)} .ff-num::before{content:"Línea "}
.ff-desc{grid-area:desc} .ff-cant{grid-area:cant} .ff-vu{grid-area:vu} .ff-iva{grid-area:iva} .ff-val{grid-area:val;align-items:flex-end;text-align:right} .ff-qui{grid-area:qui;display:flex;justify-content:flex-end}
.fila-fac>.nombre-completo{grid-area:nom}
.ff-val strong{font-size:15px} .ff-val small{display:block;font-size:12px;font-weight:400;color:var(--ink-secondary);white-space:nowrap}
.ff-reparto{grid-area:rep;border-left:3px solid var(--lila-tint);padding-left:10px;display:flex;flex-direction:column;gap:6px}
.ff-reparto-tit{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-secondary)}
.ff-reparto [data-cuadre-reparto]:empty{display:none}
.partes-fac{display:flex;flex-direction:column;gap:6px}
.parte-fac{display:grid;gap:6px 10px;align-items:end;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"lin lin" "fic fic" "cant cant" "base iva" "qui qui"}
.pf-linea{grid-area:lin} .pf-cant{grid-area:cant} .pf-base{grid-area:base} .pf-iva{grid-area:iva} .pf-qui{grid-area:qui;display:flex;justify-content:flex-end} .pf-ficha{grid-area:fic;margin:0}
.parte-fac input[readonly]{background:var(--surface-sunken);color:var(--ink-secondary)}
.campo-oc .cifra-viva{font-size:13px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums} .cifra-viva:empty{display:none}
.totales-oc .dif-doc{grid-column:1/-1;text-align:left;font-size:12px;font-weight:600;color:var(--ink);background:var(--status-warning-tint);border-radius:6px;padding:2px 8px;white-space:normal}
/* Recibido de bodega. */
.fila-rec{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"num num" "item item" "pend rech" "rec ac" "nota nota" "avi avi"}
.fr-num{grid-area:num;font-size:12px;font-weight:700;color:var(--ink-muted)} .fr-num::before{content:"Línea "}
.fr-item{grid-area:item} .fr-item strong{font-size:15px;overflow-wrap:anywhere} .fr-pend{grid-area:pend} .fr-pend strong{text-align:left} .fr-rec{grid-area:rec} .fr-ac{grid-area:ac} .fr-rech{grid-area:rech;text-align:right}
.fr-nota{grid-area:nota} .fila-rec>.fr-nota[hidden]{display:none} .fr-aviso{grid-area:avi;margin:0} .fr-aviso:empty{display:none}
.fila-rec .en-pesos>span{flex:none;min-width:2.5rem;font-size:13px;text-transform:none;letter-spacing:0}
/* Distribución de un pago. */
.fila-dist{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"num num" "oc max" "con con" "val queda"}
.fd-num{grid-area:num;font-size:12px;font-weight:700;color:var(--ink-muted)} .fd-num::before{content:"Fila "}
.fd-oc{grid-area:oc} .fd-con{grid-area:con} .fd-max{grid-area:max;text-align:right} .fd-val{grid-area:val} .fd-queda{grid-area:queda;text-align:right}
.lista-disponible{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.lista-disponible li{display:flex;justify-content:space-between;gap:10px}
.disp-lado [data-valor-pago]{font-weight:600;margin:0}
.disp-lado h4{font-size:13px;color:var(--ink-secondary);margin:10px 0 4px}
@container lineas (min-width:560px){
  .fila-fac{grid-template-columns:2.2rem minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"num desc desc desc" "num cant vu iva" "num val val qui" "num nom nom nom" "num rep rep rep"}
  .parte-fac{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"lin cant base iva qui" "fic fic fic fic fic"}
  .fila-rec{grid-template-columns:2.2rem minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"num item item pend" "num rec ac rech" "num nota nota nota" "num avi avi avi"}
  .fila-dist{grid-template-columns:2.2rem minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);grid-template-areas:"num oc con max" "num val val queda"}
  .ff-num,.fr-num,.fd-num{align-self:start;padding-top:22px;text-align:center} .ff-num::before,.fr-num::before,.fd-num::before{content:""}
}
/* PC (≥780 px de ancho de líneas): tabla editable con encabezados; las etiquetas de cada campo siguen para el lector. */
@container lineas (min-width:780px){
  .filas-ed{gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .fila-cab{display:grid;column-gap:8px;align-items:end;padding:8px 10px;background:var(--surface-sunken);border-bottom:1px solid var(--border);font-size:12px;font-weight:600;color:var(--ink-muted)}
  .fila-cab .num{text-align:right}
  .fila-ed{border:0;border-bottom:1px solid var(--border);border-radius:0;padding:8px 10px;column-gap:8px;row-gap:6px;align-items:center}
  .fila-ed:last-child{border-bottom:0}
  .fila-ed:focus-within{background:var(--navy-tint)}
  .fila-ed>.campo-oc>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fila-ed .quitar-linea{min-height:36px;min-width:36px;padding:4px 8px} .fila-ed .quitar-icono{display:inline} .fila-ed .quitar-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fila-ed input[type=number]{-moz-appearance:textfield;appearance:textfield}
  .fila-ed input[type=number]::-webkit-inner-spin-button,.fila-ed input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  .ff-num,.fr-num,.fd-num{padding:0;text-align:right;font-variant-numeric:tabular-nums}
  .fila-cab.fila-fac,.fila-fac{grid-template-columns:1.75rem minmax(200px,1fr) 5.75rem 8.25rem 4.5rem 9rem 2.5rem;grid-template-areas:"num desc cant vu iva val qui" ". nom nom nom nom nom ." ". rep rep rep rep rep rep"}
  .ff-val{text-align:right}
  /* Las partes de la asignación llevan sus etiquetas visibles (no tienen encabezado de columna). */
  .parte-fac{grid-template-columns:minmax(220px,1fr) 5.75rem 8.25rem 7.5rem 2.5rem;grid-template-areas:"lin cant base iva qui" "fic fic fic fic ."}
  /* El motivo del rechazo va en un segundo renglón de la fila, con su etiqueta visible (no cabe como columna). */
  .fila-cab.fila-rec,.fila-rec{grid-template-columns:1.75rem minmax(220px,1fr) 6.5rem 8.5rem 8.5rem 6.5rem;grid-template-areas:"num item pend rec ac rech" ". nota nota nota nota nota" ". avi avi avi avi avi"}
  .fila-rec>.fr-nota{display:flex;flex-direction:row;align-items:center;gap:10px} .fila-rec>.fr-nota>span:first-child{position:static;width:auto;height:auto;clip:auto;flex:none}
  .fila-rec>.fr-nota input{flex:1}
  .fr-item{display:flex;flex-direction:column} .fr-pend,.fr-rech,.fr-pend strong{text-align:right}
  .fila-cab.fila-dist,.fila-dist{grid-template-columns:1.75rem 7.5rem minmax(160px,1fr) 8.5rem 10rem 8.5rem;grid-template-areas:"num oc con max val queda"}
  .fd-con{display:flex;flex-direction:column}
}
/* En ventana, la columna lateral fija queda debajo del encabezado de la ventana (también fijo) y, si crece (resumen de
   confirmación largo), se desplaza dentro de sí: la acción siempre se alcanza. */
.modal .disp-lado{top:84px;max-height:calc(90vh - 110px);overflow:auto}
body.ayuda-abierta .modal-cab p{display:none} /* celular con la Ayuda abierta: más espacio para el formulario */
.modal.amplia .disp-form .rejilla-valores{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* OC de maquinaria: cada línea en una fila de campos con la descripción más ancha; debajo, su reparto entre equipos. */
.lineas-maq-oc{container-type:inline-size;container-name:lineasmaq;min-width:0}
.rejilla-oc .en-pesos,.rejilla-imputacion .en-pesos{display:flex;min-width:0} .rejilla-oc .en-pesos input,.rejilla-imputacion .en-pesos input{flex:1;min-width:0;width:100%}
.rejilla-oc>.campo-oc{min-width:0} .rejilla-oc>.campo-oc>input,.rejilla-oc>.campo-oc>select{width:100%;min-width:0;box-sizing:border-box}
.linea-maq-oc{margin:0 0 10px} .linea-maq-oc[data-linea-error]{border-color:var(--status-critical);box-shadow:0 0 0 2px var(--status-critical-tint)}
@container lineasmaq (min-width:1000px){
  .rejilla-linea-maq{align-items:end;grid-template-columns:minmax(220px,3fr) minmax(90px,1fr) minmax(90px,1fr) minmax(140px,1.4fr) minmax(80px,.8fr) minmax(130px,1.3fr) minmax(110px,1fr)}
}

/* Confirmación tributaria: cada retención en una fila de campos cuando hay ancho. */
[data-retenciones-editar] .rejilla-oc{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* Formularios largos por secciones (solicitud de posventa, disparadores…): en PC, dos secciones por fila. */
.secciones-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:12px;align-items:start}
.secciones-form>.tarjeta-seccion{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.secciones-form>.tarjeta-seccion>h4{margin-top:0}

/* ───── Expediente con columna de estado y acciones (OT de posventa) y hoja de vida de un equipo ───── */
.ficha-disp,.hoja{container-type:inline-size;container-name:ficha}
.ficha-rejilla{display:flex;flex-direction:column-reverse;gap:14px} /* celular y tableta: estado y acciones arriba */
.ficha-principal,.ficha-lado{display:flex;flex-direction:column;gap:12px;min-width:0}
.ficha-principal>.tarjeta-seccion,.ficha-lado>.tarjeta-seccion{margin:0}
.ficha-estado .resumen{margin:0 0 8px} .ficha-estado>.ghost{margin-top:8px;width:100%}
.ficha-lado .acciones-fila,.ficha-lado>.acciones{flex-direction:column;align-items:stretch;margin-top:0} .ficha-lado .acciones-fila>button,.ficha-lado>.acciones>button{width:100%}
.ficha-lado>.acciones:empty{display:none}
.hoja-disp{display:flex;flex-direction:column;gap:14px;min-width:0}
.hoja-ficha{display:flex;flex-direction:column;gap:12px;min-width:0} .hoja-ficha>.tarjeta-seccion{margin:0}
.hoja-ficha .campos dd{overflow-wrap:anywhere}
.hoja-secciones{display:flex;flex-direction:column;gap:12px;min-width:0}
@container ficha (min-width:900px){
  .ficha-rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);align-items:start}
  .ficha-lado{position:sticky;top:84px}
  .ficha-principal>.tarjeta-seccion>.campos{grid-template-columns:repeat(auto-fill,minmax(8rem,10rem) minmax(14rem,1fr))}
  .hoja-disp{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);align-items:start}
  .hoja-ficha{position:sticky;top:12px}
  .hoja-ficha .captura-rapida{flex-direction:column} .hoja-ficha .captura-rapida button{width:100%}
  .hoja-secciones .pestanas-hoja{flex-wrap:wrap;overflow:visible} /* las siete secciones a la vista, sin desplazar */
  .hoja-secciones .campos{grid-template-columns:repeat(auto-fill,minmax(9rem,11rem) minmax(14rem,1fr))}
}
.campo-oc>.campo-error{margin-top:2px}
.nota-oc{background:var(--surface-sunken);border-radius:8px;padding:10px 12px;font-size:13px;margin-top:8px}
.nota-oc.privada{border:1px dashed var(--lila)}
.lista-alertas{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.lista-alertas li{background:var(--surface-sunken);border-radius:8px;padding:8px 10px}
.fila-alerta td{background:var(--status-warning-tint)}
.expediente-oc{border-top:1px solid var(--border);margin-top:12px;padding-top:8px}
.expediente-oc details{margin:8px 0} .expediente-oc summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center;list-style:none}
.expediente-oc summary::-webkit-details-marker{display:none}
.expediente-oc summary::before{content:"▸";display:inline-block;width:1.2em;color:var(--ink-secondary)}
.expediente-oc details[open]>summary::before{content:"▾"}
.lista-cuentas{padding-left:18px;display:flex;flex-direction:column;gap:6px}
.lista-cuentas li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.impresion-oc{display:none}
@media print{
  body.imprimiendo>*:not(.impresion-oc){display:none !important}
  body.imprimiendo .impresion-oc{display:block;color:#000;background:#fff;font-size:11pt;padding:0}
  .impresion-oc h1{font-size:16pt;margin:0 0 4px} .impresion-oc table{width:100%;border-collapse:collapse}
  .impresion-oc th,.impresion-oc td{border-bottom:1px solid #999;padding:4px;text-align:left} .impresion-oc .num{text-align:right}
}

/* Barra de herramientas del calendario, compacta en celular */
@media (max-width:700px){
  .barra-cal{display:flex;flex-wrap:wrap;gap:6px}
  .barra-cal select{flex:1 1 44%;min-width:0;max-width:none;width:auto}
  .barra-cal .nav{width:44px;flex:none}
  .barra-cal .ghost{width:auto;flex:1 1 auto;padding:6px 10px}
  .barra-cal .check-dep{flex:1 1 100%}
}

/* Gestión Interna: capa del calendario (hitos previstos L/C/F; el estado también va en el texto del marcador) */
.cal-banda-gi{background:rgba(156,140,200,.10)}
.cal-gi .cal-nombre{font-style:italic;padding-right:6px} .cal-gi-sin{color:var(--status-warning);font-weight:600;white-space:nowrap;margin-left:4px}
.celda-estado .chip{white-space:nowrap} .celda-estado .casilla{min-height:36px;margin-top:4px}
.fila-atencion td{font-weight:600}
.lista-materiales{display:none;flex-direction:column;gap:6px}
[data-bodega-ot] .rejilla-imputacion{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 12px}
@media (max-width:700px){ .lista-materiales.solo-cel{display:flex} [data-bodega-ot] .rejilla-imputacion{grid-template-columns:1fr;gap:10px}
  [data-bodega-ot] .campo-oc input,[data-bodega-ot] .campo-oc select{font-size:16px;min-height:48px;width:100%;box-sizing:border-box} [data-bodega-ot] button{min-height:48px} }
.cal-hito{position:absolute;min-width:22px;height:20px;padding:0 4px;box-sizing:border-box;border-radius:4px;border:2px solid var(--lila);background:var(--surface);color:var(--ink);font-size:11px;font-weight:700;line-height:16px;text-align:center;z-index:2;white-space:nowrap}
.cal-hito.critical{border-color:var(--status-critical);background:var(--status-critical-tint)} .cal-hito.good{border-color:var(--status-good);background:var(--status-good-tint)}
.cal-hito.warning{border-color:var(--status-warning);background:var(--status-warning-tint)}
.cal-gi-sinfecha{position:absolute;font-size:11px;color:var(--status-warning);font-weight:600}
.cal-con-gi{stroke:var(--lila);stroke-dasharray:4 3;stroke-width:1.5}
.modulo-gi .pestanas-hoja{margin:8px 0 12px}
.pestanas-hoja[hidden],.selector-seccion[hidden],.grupos-gi[hidden]{display:none}
/* Grupos de Gestión Interna: Actividades · Posventas · Datos base (el activo, oscuro y con barra amarilla) */
.grupos-gi{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.grupos-gi button{min-height:44px;padding:8px 16px;font-size:15px} .grupos-gi button:hover{background:var(--navy-tint)}
.grupos-gi button[aria-pressed=true]{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);box-shadow:inset 0 -3px 0 var(--gold-dark)}
.grupos-gi button:focus-visible{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 6px var(--lila-tint)}
.grupo-unico{font-size:13px;font-weight:700;color:var(--navy);text-transform:none;letter-spacing:0;margin:0}
/* Barra de filtros y acción de Gestión Interna: en celular la acción va debajo, a todo el ancho; el texto no se encima */
.barra-oc>.mudo{flex:1 1 100%}
@media (max-width:700px){ .modulo-gi .barra-oc{flex-direction:column;align-items:stretch} .modulo-gi .barra-oc>.primario{width:100%} }
@media (max-width:700px){ .grupos-gi button{flex:1 1 0;min-height:48px;padding:8px 6px;font-size:14px} }
.modulo-gi .tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.modulo-gi .rejilla-imputacion,.modal .rejilla-imputacion{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 12px}
.modulo-gi .campo-oc input,.modulo-gi .campo-oc select,.modulo-gi .campo-oc textarea,.modal .campo-oc input,.modal .campo-oc select,.modal .campo-oc textarea{width:100%;box-sizing:border-box}
/* Tableta (técnico en obra): controles grandes */
@media (max-width:1024px){
  .modulo-gi .campo-oc input,.modulo-gi .campo-oc select,.modulo-gi .campo-oc textarea,.modulo-gi .filtros-financiero select,.modulo-gi .filtros-maq select,.modulo-gi .filtros-maq input,
  .modal .campo-oc input,.modal .campo-oc select,.modal .campo-oc textarea,.modulo-gi .barra select{font-size:16px;min-height:48px}
  .modulo-gi button.ghost,.modulo-gi .primario,.modulo-gi .peligro-solido,.modal button.ghost,.modal .primario,.modal .peligro-solido,.modulo-gi .pestanas-hoja button{min-height:48px}
  .modulo-gi .tarjeta{min-height:64px}
}
@media (max-width:700px){ .modulo-gi .tarjetas{grid-template-columns:1fr} .modulo-gi .rejilla-imputacion,.modal .rejilla-imputacion{grid-template-columns:1fr} }

/* Ayuda / Guíame (src/ayuda): botón permanente EN EL ENCABEZADO (no flota sobre la página: nunca tapa campos ni acciones,
   tampoco al desplazarse; conserva la clase histórica .ayuda-flotante), panel no modal y marco de resaltado. */
.contenido{padding-bottom:32px}
:root{--ancho-ayuda:min(400px,40vw)}
.cab-ayuda{display:contents}
.ayuda-flotante{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px 6px 8px;border-radius:20px;border:2px solid var(--gold-dark);
  background:var(--navy-deep);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.ayuda-flotante>span[aria-hidden]{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold-dark);color:var(--navy-deep);font-weight:800}
.ayuda-flotante[aria-expanded=true]{background:#fff;color:var(--navy-deep)} /* abierta: blanco (ningún botón es amarillo) */
.ayuda-flotante:hover{background:var(--navy)} .ayuda-flotante:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--gold-dark)}
.ayuda-punto{width:10px;height:10px;border-radius:50%;background:var(--gold-dark);display:inline-block}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* PC: el panel es una columna propia a la derecha, de alto completo; la página y las ventanas se angostan a su lado
   (body.ayuda-lateral), así nada queda debajo de él. */
.ayuda-panel{position:fixed;top:0;right:0;bottom:0;z-index:72;width:var(--ancho-ayuda);overflow:auto;background:var(--surface);color:var(--ink);box-sizing:border-box;
  border-left:1px solid var(--border);border-top:4px solid var(--navy);box-shadow:-6px 0 20px rgba(18,21,61,.18);padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:15px}
body.ayuda-lateral{padding-right:var(--ancho-ayuda)}
/* Con la página más angosta, las pestañas de módulos pasan a una segunda fila en vez de esconderse detrás del desplazamiento. */
body.ayuda-lateral .nav-mod,body.ayuda-lateral .nav-sub{flex-wrap:wrap;row-gap:4px}
body.ayuda-lateral .toast{left:calc((100vw - var(--ancho-ayuda)) / 2)}
.ayuda-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .ayuda-cab h2{font-size:17px;color:var(--navy)} .ayuda-cab h2:focus{outline:none}
.ayuda-tabs{display:flex;gap:4px;flex-wrap:wrap}
.ayuda-tabs button{flex:1 1 auto;min-height:44px;border:1px solid var(--border);background:var(--surface);color:var(--navy);border-radius:8px;padding:6px 8px;font-weight:600;font-size:13px;cursor:pointer}
.ayuda-tabs button:hover{background:var(--navy-tint)} .ayuda-tabs button[aria-selected=true]{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep)}
.ayuda-tabs button:focus-visible,.ayuda-panel button:focus-visible{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 6px var(--lila-tint)}
.ayuda-cuerpo{display:flex;flex-direction:column;gap:8px} .ayuda-cuerpo h3{font-size:15px;margin-top:4px} .ayuda-cuerpo h4{font-size:13px;color:var(--ink-secondary);margin-top:4px}
.ayuda-cuerpo ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.ayuda-lista{list-style:none;padding-left:0 !important} .ayuda-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--border);padding-bottom:6px}
.ayuda-item button{flex:none;min-height:44px}
.ayuda-motivos li{line-height:1.4}
.ayuda-retomar,.ayuda-fin{background:var(--navy-tint);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.ayuda-contador{font-size:13px;font-weight:700;color:var(--ink-muted)} .ayuda-texto{font-size:16px;font-weight:600;line-height:1.4}
.ayuda-paso .acciones-fila{display:flex;gap:8px;flex-wrap:wrap} .ayuda-paso .acciones-fila button{min-height:48px;flex:1 1 auto}
.ayuda-foco{position:fixed;z-index:71;pointer-events:none;border:3px solid var(--navy);border-radius:10px;box-shadow:0 0 0 3px var(--gold-dark),0 0 0 7px rgba(57,60,137,.25);transition:top .15s,left .15s,width .15s,height .15s}
.modal-cab-botones,.ayuda-cab-botones{display:flex;gap:8px;align-items:flex-start;flex:none}
.ayuda-en-ventana{font-weight:800;color:var(--navy)} .ayuda-en-ventana:focus-visible{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 6px var(--lila-tint)}
.ayuda-expandir{display:none}
/* PC: con la Ayuda abierta, las ventanas se centran en el espacio libre al lado del panel (no quedan debajo de él) */
body.ayuda-lateral .modal-fondo{right:var(--ancho-ayuda)}
/* Celular y tableta: el panel va abajo a todo el ancho con su alto real (--ayuda-alto, lo mide ayuda.ts) y la página se
   desplaza SOLO en el espacio de arriba (el cuerpo se vuelve el contenedor que se desplaza): nada queda debajo del panel,
   tampoco al desplazarse. Las ventanas se acomodan arriba de él. Al escribir fuera de la Ayuda el panel se compacta solo
   (título y paso actual) y vuelve a su tamaño al tocarlo o con «Ver paso». */
@media (max-width:1024px){
  body.ayuda-lateral{padding-right:0}
  .ayuda-panel{top:auto;left:0;right:0;bottom:0;width:100%;max-height:48vh;border-left:0;border-radius:14px 14px 0 0;padding:12px 16px 16px;box-shadow:0 -6px 20px rgba(18,21,61,.2)}
  .ayuda-panel:has(.ayuda-paso){max-height:40vh}
  .ayuda-panel.compacta{gap:6px;padding-top:8px;padding-bottom:10px}
  .ayuda-panel.compacta [data-ayuda-contexto],.ayuda-panel.compacta .ayuda-tabs,.ayuda-panel.compacta .ayuda-cuerpo:not(.ayuda-paso),
  .ayuda-panel.compacta .ayuda-paso>:not(.ayuda-texto):not([data-ayuda-estado]){display:none}
  .ayuda-panel.compacta .ayuda-texto{font-size:15px}
  .ayuda-panel.compacta .ayuda-expandir{display:inline-flex;align-items:center}
  html:has(body.ayuda-abierta){overflow:hidden}
  body.ayuda-abierta{height:calc(100dvh - var(--ayuda-alto,40vh));overflow-y:auto;overscroll-behavior:contain}
  body.ayuda-abierta .modal-fondo{bottom:var(--ayuda-alto,40vh)}
  body.ayuda-abierta .modal{max-height:100%}
  body.ayuda-abierta .toast{bottom:calc(var(--ayuda-alto,40vh) + 12px)}
  .ayuda-tabs button,.ayuda-item button,.ayuda-panel .icono,.ayuda-expandir,.ayuda-en-ventana,.ayuda-flotante{min-height:48px;min-width:48px} .ayuda-tabs button{font-size:15px}
}
@media (max-width:700px){
  .nav-mod a,.nav-sub a{min-height:48px;display:inline-flex;align-items:center}
  /* Encabezado del celular: el botón Ayuda muestra solo «?» (su nombre sigue siendo «Ayuda») y mide 48 px. */
  .ayuda-flotante{min-width:48px;min-height:48px;padding:0;justify-content:center;border-radius:50%}
  .ayuda-flotante>span[aria-hidden]{width:26px;height:26px;font-size:16px}
  .ayuda-rotulo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ayuda-flotante .ayuda-punto{position:absolute;margin:-30px 0 0 30px}
}
@media (max-width:480px){ .cab-in{gap:8px} .cab-tit select{min-width:120px} .cab-btn{padding:8px 10px} }
@media print{ .ayuda-flotante,.ayuda-panel,.ayuda-foco{display:none !important} }

/* Formatos impresos de posventa (corporativo único: logo oficial de La Mía, sin logo de proyecto ni notas internas) */
@media print{
  html,body.imprimiendo{background:#fff !important}
  body.imprimiendo .impresion-gi{font-size:10pt;line-height:1.35}
  .impresion-gi .gi-enc{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--navy, #393C89);padding-bottom:6px;margin-bottom:8px}
  .impresion-gi .gi-logo{height:52px;width:auto} .impresion-gi .gi-enc-tit{flex:1} .impresion-gi .gi-enc-tit h1{font-size:14pt;margin:0} .impresion-gi .gi-enc-tit p{margin:0}
  .impresion-gi .gi-enc-num{text-align:right;display:flex;flex-direction:column} .impresion-gi .gi-enc-num strong{font-size:12pt}
  .impresion-gi h2{font-size:11pt;margin:10px 0 4px;border-bottom:1px solid #999;break-after:avoid}
  .impresion-gi .gi-datos{width:100%;border-collapse:collapse} .impresion-gi .gi-datos th{width:38%;font-weight:600;border:1px solid #999;padding:3px 5px;background:#f2f2f2}
  .impresion-gi .gi-datos td{border:1px solid #999;padding:3px 5px}
  .impresion-gi .gi-tabla th,.impresion-gi .gi-tabla td{border:1px solid #999;padding:4px 5px;height:8mm}
  .impresion-gi .gi-linea{border-bottom:1px solid #666;height:20px} .impresion-gi .gi-texto{white-space:pre-wrap;margin:2px 0 6px}
  .impresion-gi .gi-casilla{display:inline-flex;align-items:center;gap:4px;margin-right:18px} .impresion-gi .gi-cuadro{display:inline-block;width:12px;height:12px;border:1px solid #000}
  .impresion-gi .gi-clausula{font-size:8.5pt;color:#222;margin:6px 0}
  .impresion-gi .gi-firmas{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px;break-inside:avoid} .impresion-gi .gi-firma .gi-linea{height:36px;margin-bottom:4px}
  .impresion-gi .gi-pie{margin-top:14px;border-top:1px solid #999;padding-top:4px;font-size:8pt;color:#333;text-align:center}
  .impresion-gi .gi-pequeno{font-size:8pt}
}
.modulo-lia .tarjeta-seccion{max-width:760px} .modulo-lia textarea{width:100%}
/* Cronograma en tres bloques: encabezado de bloque (más fuerte que un piso), avisos de bloque vacío y referencias de GI. */
.cal-bloque{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;line-height:1.2;background:var(--navy-deep);color:#fff;font-size:13.5px;border-left:6px solid var(--gold-dark)}
.cal-bloque strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cal-bloque small{color:var(--lila-tint);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cal-bloque-eje{position:absolute;font-size:12.5px;font-weight:700;color:var(--navy-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.cal-bloque.bloque-X{background:var(--surface-sunken);color:var(--navy-deep);border-left-color:var(--status-warning)} .cal-bloque.bloque-X small{color:var(--ink-secondary)}
.cal-bloque.bloque-C{background:var(--lila-tint);color:var(--navy-deep);border-left-color:var(--lila)} .cal-bloque.bloque-C small{color:var(--ink-secondary)}
.cal-banda-bloque{background:rgba(18,21,61,.10);border-top:2px solid var(--navy-deep)} .cal-banda-bloque.bloque-C{background:rgba(145,132,185,.14);border-top-color:var(--lila)}
.cal-aviso{align-items:flex-start;padding-top:6px;white-space:normal;line-height:1.3;color:var(--ink);font-size:12px;background:var(--surface)}
.cal-banda-aviso{background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(127,127,160,.06) 8px 16px)}
.cal-aviso-eje{position:absolute;font-size:12.5px;color:var(--ink-secondary);background:var(--surface);padding:4px 8px;border:1px dashed var(--border);border-radius:6px;line-height:1.35}
/* El trazo de la referencia va tenue (no compite con «Hoy» ni con la obra); su círculo de origen conserva el contraste. */
.cal-con-ref{stroke:var(--lila);stroke-dasharray:7 4;stroke-width:1.6;stroke-opacity:.55}
.ley-dep{display:inline-block;width:28px;height:0;border-top:1.5px solid var(--ink-muted);position:relative;top:-3px}
.ley-ref{display:inline-block;width:28px;height:0;border-top:2px dashed var(--lila);position:relative;top:-3px}
.ley-dep.rayada{border-top-style:dashed} .ley-dep.punteada{border-top-style:dotted;border-top-width:2px}
.aviso-neutro{color:var(--ink-secondary);background:var(--surface-sunken);border-radius:8px;padding:8px 12px}
@media (max-width:700px){ .cal-bloque{font-size:12.5px} .cal-aviso{font-size:12px} .cal-aviso-eje{display:none}
  /* En celular las pestañas de los dos niveles pasan a otra fila en vez de quedar escondidas fuera de la pantalla. */
  .nav-mod,.nav-sub{flex-wrap:wrap;row-gap:4px} }
/* Pantallas táctiles (también tableta): pestañas y píldoras de 48 px. */
@media (pointer:coarse){ .nav-mod a,.nav-sub a{min-height:48px;display:inline-flex;align-items:center} }
/* Gerencia › Usuarios (docs/usuarios.md) */
.filtros-usuarios{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.filtros-usuarios input,.filtros-usuarios select{flex:1 1 220px;min-width:0}
.rejilla-casillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 12px}
.grupo-permisos{border:1px solid var(--border);border-radius:8px;padding:6px 12px 10px;margin:0 0 10px;min-width:0}
.grupo-permisos legend{font-weight:700;font-size:13px;padding:0 4px;color:var(--ink)}
.permiso-fila{display:flex;flex-direction:column;padding:2px 0 6px}
.permiso-fila small{padding-left:30px;line-height:1.35}
.avisos-permisos{background:var(--surface-sunken);border-radius:8px;padding:0 12px}
.avisos-permisos:not(:empty){padding:8px 12px;margin-bottom:10px}
.detalle-usuario .tarjeta-seccion{margin-bottom:12px}
@media (max-width:700px){
  .rejilla-casillas{grid-template-columns:1fr}
  .filtros-usuarios input,.filtros-usuarios select{font-size:16px;min-height:48px}
  .permiso-fila small{padding-left:0}
}
.modulo-usuarios .rejilla-imputacion,.detalle-usuario .rejilla-imputacion{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
.detalle-usuario input:disabled,.modulo-usuarios input:disabled:not([type=checkbox]){background:var(--surface-sunken);color:var(--ink-muted);cursor:not-allowed}
.tabla-usuarios .chip{white-space:nowrap}
@media (max-width:700px){ .modulo-usuarios .rejilla-imputacion,.detalle-usuario .rejilla-imputacion{grid-template-columns:1fr} }
@media (max-width:900px){
  .tabla-usuarios thead{display:none}
  .tabla-usuarios,.tabla-usuarios tbody,.tabla-usuarios tr,.tabla-usuarios td{display:block;width:auto;text-align:left}
  .tabla-usuarios tr{border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:8px}
  .tabla-usuarios td{border:0;padding:3px 0;overflow-wrap:anywhere}
  .tabla-usuarios td[data-etq]:not([data-etq=""]):not([data-etq="Persona"])::before{content:attr(data-etq) ": ";color:var(--ink-muted);font-size:12px}
  .tabla-usuarios button{min-height:48px}
}