/* Herramienta de trabajo: densa y legible. Mismo azul acero que el sistema actual de Lixxus; sin logotipo, solo el nombre en texto. */
:root {
  --fondo: #f2f4f5; --sup: #ffffff; --sup2: #eaeef0; --tinta: #17232b; --tenue: #56636b; --linea: #d6dde1;
  --acento: #1f5c86; --acento-t: #ffffff; --acento-s: #e1ebf3;
  --lat: #133349; --lat-tinta: #dfe9f0; --lat-tenue: #9fb4c3; --lat-activo: #22506f; --lat-linea: #24475f;
  --ok: #2c7548; --ok-s: #e1efe5; --alerta: #8f5a00; --alerta-s: #f6ebd5; --mal: #a83226; --mal-s: #f6e0dc; --pend: #634a9c; --pend-s: #ece6f6;
  --f: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --r: 6px;
  --ancho-lat: 236px;
}
@media (prefers-color-scheme: dark) { :root {
  --fondo: #11181d; --sup: #19232a; --sup2: #222e36; --tinta: #e3eaee; --tenue: #9aa9b2; --linea: #2f3d46;
  --acento: #79b0d9; --acento-t: #0d1a23; --acento-s: #1d3343;
  --lat: #0c151b; --lat-tinta: #dbe5ec; --lat-tenue: #8ea3b1; --lat-activo: #1d3343; --lat-linea: #22323d;
  --ok: #6fc28e; --ok-s: #1d3426; --alerta: #e3a64a; --alerta-s: #3a2e17; --mal: #ef8072; --mal-s: #3e221d; --pend: #b9a2ea; --pend-s: #2d2640; color-scheme: dark; } }
* { box-sizing: border-box }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.5 var(--f) }
button, input, select, textarea { font: inherit; color: inherit }
a { color: var(--acento) }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px }
[hidden] { display: none !important }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---------- estructura: menú lateral + área principal ---------- */
.app { display: grid; grid-template-columns: var(--ancho-lat) minmax(0, 1fr); min-height: 100vh }
.lateral { background: var(--lat); color: var(--lat-tinta); display: flex; flex-direction: column; gap: 18px; padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto }
.lateral-marca { display: grid; padding: 2px 8px 14px; border-bottom: 1px solid var(--lat-linea) }
.lm-nombre { font-weight: 700; font-size: 20px; letter-spacing: .22em }
.lm-sub { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--lat-tenue) }
.menu { display: grid; gap: 16px }
.menu-grupo { display: grid; gap: 2px }
.menu-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--lat-tenue); padding: 0 10px 4px; font-weight: 600 }
.menu a { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-decoration: none; color: var(--lat-tinta); padding: 8px 10px; border-radius: var(--r); font-size: 14.5px; border-left: 3px solid transparent }
.menu a:hover { background: var(--lat-activo) }
.menu a[aria-current="page"] { background: var(--lat-activo); border-left-color: var(--lat-tinta); font-weight: 600 }
.menu a.pend { color: var(--lat-tenue) }
.etq-pend { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; border: 1px dashed var(--lat-tenue); border-radius: 99px; padding: 0 7px; white-space: nowrap }
.simulador { margin-top: auto; border: 1px dashed var(--lat-tenue); border-radius: var(--r); padding: 12px; display: grid; gap: 8px; font-size: 13px }
.simulador h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--lat-tinta) }
.simulador h2::after { content: " · solo demo"; color: var(--lat-tenue); font-weight: 400 }
.simulador p { margin: 0; color: var(--lat-tenue); font-size: 12px; line-height: 1.4 }
.simulador label { font-weight: 600 }
.simulador select { background: var(--lat-activo); border-color: var(--lat-linea); color: var(--lat-tinta) }
.simulador .btn { background: transparent; color: var(--lat-tinta); border-color: var(--lat-tenue) }
.principal { min-width: 0; display: flex; flex-direction: column }
.demo-banda { background: var(--pend-s); color: var(--pend); font-size: 13px; padding: 6px 24px }
.demo-banda b { border: 1px solid currentColor; border-radius: 4px; padding: 0 6px; margin-right: 6px; letter-spacing: .08em; font-size: 11.5px }
.cabecera { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding: 12px 24px; background: var(--sup); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 5 }
.modulo { display: grid; line-height: 1.2; margin-right: auto }
.modulo small, .usuario small { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue) }
.modulo b { font-size: 18px }
.usuario { display: grid; grid-template-columns: auto auto; column-gap: 8px; line-height: 1.25; font-size: 14px }
.usuario small { grid-column: 1 / -1 }
.usuario span { color: var(--tenue) }
.cabecera .menu-boton { display: none }
/* Menú agrupado y desplegable */
details.menu-grupo > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: var(--r) }
details.menu-grupo > summary::-webkit-details-marker { display: none }
details.menu-grupo > summary::after { content: "▸"; font-size: 11px; transition: transform .15s }
details.menu-grupo[open] > summary::after { transform: rotate(90deg) }
details.menu-grupo > summary:hover { background: var(--lat-activo); color: var(--lat-tinta) }
.menu a span:first-child { min-width: 0; overflow-wrap: anywhere }
.etq-parcial { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--lat-tenue); border-radius: 99px; padding: 0 7px; white-space: nowrap; color: var(--lat-tenue) }
/* Menú de usuario con el simulador de roles (solo demo) */
.menu-usuario { position: relative; margin-left: auto }
.menu-usuario > summary { cursor: pointer; list-style: none; padding: 4px 8px; border: 1px solid var(--linea); border-radius: var(--r) }
.menu-usuario > summary::-webkit-details-marker { display: none }
.menu-usuario-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(340px, calc(100vw - 32px)); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 12px }
.menu-usuario-panel .simulador { margin: 0; border-color: var(--linea) }
.menu-usuario-panel .simulador h2 { color: var(--tinta); display: flex; gap: 6px; align-items: center }
.menu-usuario-panel .simulador h2::after { content: none }
.menu-usuario-panel .simulador p { color: var(--tenue) }
.menu-usuario-panel .simulador select { background: var(--sup); border-color: var(--linea); color: var(--tinta); width: 100% }
.menu-usuario-panel .simulador .btn { color: var(--tinta); border-color: var(--linea) }
/* Migas de pan */
.migas { padding: 8px 24px; font-size: 13px; color: var(--tenue); border-bottom: 1px solid var(--linea); background: var(--sup2); overflow-wrap: anywhere }
.migas a { color: var(--acento) }
.migas [aria-current] { color: var(--tinta); font-weight: 600 }
html, body { overflow-x: hidden }
.velo { position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 9 }
.vista { width: 100%; max-width: 1240px; margin: 0 auto; padding: 22px 24px 64px; display: grid; gap: 18px; align-content: start }
.vista > * { min-width: 0 }

/* ---------- tipografía y piezas comunes ---------- */
h1 { font-size: 23px; margin: 0; line-height: 1.25; text-wrap: balance } h2 { font-size: 17px; margin: 0 } h3 { font-size: 15px; margin: 0 }
.titulo-vista { display: grid; gap: 4px }
.titulo-vista p { margin: 0 }
.sub { color: var(--tenue); font-size: 13px }
.bloque { display: block }
.fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.entre { justify-content: space-between }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--linea); background: var(--sup); padding: 7px 13px; border-radius: var(--r); cursor: pointer; font-weight: 500; text-decoration: none; color: var(--tinta); white-space: nowrap }
.btn:hover { border-color: var(--tenue) } .btn.prim { background: var(--acento); border-color: var(--acento); color: var(--acento-t) }
.btn[aria-current="page"] { box-shadow: 0 0 0 2px var(--acento-s) }
.btn:disabled { opacity: .5; cursor: default }
.btn.peligro { color: var(--mal); border-color: var(--mal) } .btn.sm { padding: 4px 10px; font-size: 13px }
.panel { background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px; display: grid; gap: 12px; min-width: 0 }
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 12px }
.filtros .campo.ancho { grid-column: 1 / -1 }
.filtros-pie { border-top: 1px solid var(--linea); padding-top: 10px }
.filtros label, .campo label { font-size: 12px; color: var(--tenue); font-weight: 600; display: block; margin-bottom: 3px }
input, select, textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup2); min-width: 0 }
textarea { min-height: 70px; resize: vertical }
input[type=checkbox] { width: auto }
.tabla { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup) }
table { width: 100%; border-collapse: collapse; font-size: 14px }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); background: var(--sup2); padding: 9px 12px; font-weight: 600 }
td { padding: 10px 12px; border-top: 1px solid var(--linea); vertical-align: top }
tr.clic:hover td { background: var(--acento-s); cursor: pointer }
.mono { font-family: var(--mono); font-size: 12.5px; white-space: nowrap }
.chip { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--sup2); color: var(--tenue); white-space: nowrap }
.chip.ok { background: var(--ok-s); color: var(--ok) } .chip.alerta { background: var(--alerta-s); color: var(--alerta) } .chip.mal { background: var(--mal-s); color: var(--mal) }
.chip.acento { background: var(--acento-s); color: var(--acento) } .chip.pend { background: var(--pend-s); color: var(--pend) }
.bloq { color: var(--pend); font-size: 13px; display: grid; gap: 2px }
.cab { display: grid; gap: 12px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px; border-left: 4px solid var(--acento) }
.cab .bloq { color: var(--mal) }
.cab-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px }
.dato small { display: block; font-size: 11.5px; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em } .dato b { font-weight: 600 }
.pasos { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 2px }
.pasos span { font-size: 11.5px; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--linea); white-space: nowrap; color: var(--tenue) }
.pasos span.hecho { background: var(--ok-s); color: var(--ok); border-color: transparent } .pasos span.actual { background: var(--acento); color: var(--acento-t); border-color: transparent; font-weight: 600 }
.pestanas { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--linea) }
.pestanas a { padding: 8px 12px; text-decoration: none; color: var(--tenue); border-bottom: 3px solid transparent; white-space: nowrap; font-size: 14px }
.pestanas a[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--acento); font-weight: 600 }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px }
.campo { min-width: 0 }
.campo.ancho { grid-column: 1 / -1 }
.accion { border: 1px dashed var(--linea); border-radius: var(--r); padding: 12px; display: grid; gap: 8px; background: var(--sup) }
.accion h3 { color: var(--acento) }
.nota { font-size: 13px; color: var(--tenue); border-left: 3px solid var(--alerta); padding: 4px 10px }
.pendiente-mod { border: 2px dashed var(--pend); color: var(--pend); background: var(--pend-s); border-radius: var(--r); padding: 18px; display: grid; gap: 6px }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.lista li { padding: 8px 10px; background: var(--sup2); border-radius: var(--r); font-size: 13.5px }
.aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; max-width: min(640px, calc(100% - 32px)); background: var(--tinta); color: var(--fondo); padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 20; white-space: pre-line }
.aviso.error { background: var(--mal); color: #fff }
.vacio { padding: 20px; text-align: center; color: var(--tenue); display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center }

/* ---------- expediente: cabecera, recorrido, secciones y decisiones ---------- */
h4 { margin: 0; font-size: 14px }
.cab-titulo { align-items: flex-start }
.mas-acciones { position: relative }
.mas-acciones > summary { list-style: none; cursor: pointer }
.mas-acciones > summary::-webkit-details-marker { display: none }
.mas-acciones > summary::after { content: " ▾" }
.menu-acciones { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; width: min(340px, calc(100vw - 32px)); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: 0 8px 24px rgb(0 0 0 / .15); padding: 12px; display: grid; gap: 14px }
.menu-acciones form { display: grid; gap: 8px }
.menu-acciones form + form { border-top: 1px solid var(--linea); padding-top: 12px }
.aviso-cond { border: 1px solid var(--mal); border-left-width: 4px; background: var(--mal-s); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 8px }
.aviso-cond h3 { color: var(--mal) }
.aviso-cond p { margin: 0 }
.cond-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 8px 16px; margin: 0 }
.cond-comp dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue) }
.cond-comp dd { margin: 0; font-weight: 600 }
.pendiente-avanzar { display: grid; gap: 4px; color: var(--pend) }
ul.bloq { margin: 0; padding-left: 18px }
.bloqueo-accion { border: 1px dashed var(--pend); background: var(--pend-s); color: var(--tinta); border-radius: var(--r); padding: 8px 12px; font-size: 13.5px }
.bloqueo-accion p { margin: 0 0 4px }
.recorrido { display: grid; gap: 6px }
.fases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 6px }
.fase { border: 1px solid var(--linea); border-radius: var(--r); padding: 6px 10px; display: grid; font-size: 13px; color: var(--tenue) }
.fase b { color: var(--tinta); font-size: 13.5px }
.fase.hecha { background: var(--ok-s); border-color: transparent } .fase.hecha span { color: var(--ok) }
.fase.actual { border: 2px solid var(--acento); background: var(--acento-s) } .fase.actual span { color: var(--acento); font-weight: 600 }
.fase.interrumpida, .fase.cerrada { background: var(--mal-s); border-color: transparent } .fase.cerrada span, .fase.interrumpida span { color: var(--mal) }
.recorrido summary { cursor: pointer; font-size: 13px; color: var(--acento); width: fit-content }
.pasos-todo { margin: 6px 0 0; padding-left: 22px; columns: 2 220px; font-size: 13px; color: var(--tenue) }
.pasos-todo li.hecho { color: var(--ok) } .pasos-todo li.actual { color: var(--acento); font-weight: 600 }
.secciones { display: flex; flex-wrap: wrap; gap: 8px 18px; border-bottom: 1px solid var(--linea); padding-bottom: 8px }
.sec-grupo { display: grid; gap: 2px; min-width: 0 }
.sec-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); font-weight: 600; padding-left: 10px }
.sec-enlaces { display: flex; flex-wrap: wrap; gap: 2px }
.sec-enlaces a { padding: 5px 10px; border-radius: var(--r); text-decoration: none; color: var(--tinta); font-size: 14px }
.sec-enlaces a:hover { background: var(--sup2) }
.sec-enlaces a[aria-current="page"] { background: var(--acento); color: var(--acento-t); font-weight: 600 }
.sec-alerta { font-size: 11px; font-weight: 700; color: var(--mal); background: var(--mal-s); border-radius: 99px; padding: 0 6px; white-space: nowrap }
.sec-select { display: none; gap: 3px; font-size: 12px; color: var(--tenue); font-weight: 600 }
.decisiones { display: grid; gap: 12px }
.decision { border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup); padding: 12px 14px; display: grid; gap: 10px; min-width: 0 }
.decision.activa { border-color: var(--acento); box-shadow: inset 3px 0 0 var(--acento) }
.decision.espera { background: var(--fondo) }
.decision h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.decision p { margin: 0 }
.paso { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--acento); color: var(--acento-t); font-size: 13px }
.decision.espera .paso { background: var(--tenue) } .decision.lista .paso { background: var(--ok) }
.decision-estado { margin-left: auto; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 600 }
.sub-accion { display: grid; gap: 8px; min-width: 0 }
.sub-accion + .sub-accion { border-top: 1px dashed var(--linea); padding-top: 10px }
.opciones-cond { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0 }
.opciones-cond:disabled { opacity: .6 }
.casilla { display: flex; gap: 8px; align-items: flex-start; font-weight: 400 !important; color: var(--tinta) !important; font-size: 14px !important }
.revisar { scroll-margin-top: 90px }

/* ---------- solicitud de servicio y cotización ---------- */
.flujo-sol { gap: 12px }
.paso-sol { border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 14px; display: grid; gap: 8px; background: var(--sup); min-width: 0 }
.paso-sol.espera { background: var(--fondo) }
.paso-sol > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.paso-sol h4, .paso-sol > summary b { display: flex; align-items: center; gap: 8px; font-size: 15px }
.paso-sol p { margin: 0 }
.paso-sol .rejilla h4 { margin: 6px 0 0; color: var(--acento); font-size: 14px }
.conceptos input { min-width: 70px }
.conceptos td:first-child { width: 36px; color: var(--tenue) }
.compartir { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px }
.compartir > div { display: grid; gap: 6px; align-content: start }
.compartir .btn { width: fit-content }
.visor-pdf { width: 100%; height: min(80vh, 900px); border: 1px solid var(--linea); border-radius: var(--r); background: #fff }
.marco-impresion { position: fixed; right: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0 }

/* ---------- solicitudes de servicio y catálogo de trabajos ---------- */
.sol-resumen .chips { justify-content: flex-end }
.indice-sol { gap: 6px }
.sol-sec { scroll-margin-top: 90px }
.sol-sec h3 { font-size: 15px; color: var(--acento) }
.panel-interno { border-top: 1px solid var(--linea); padding-top: 10px; display: grid; gap: 8px }
.acc-version { display: flex; flex-wrap: wrap; gap: 4px; min-width: 150px }
.tabla-solicitudes td, .tabla-catalogo td { vertical-align: top }
.tabla-solicitudes th, .tabla-solicitudes td { padding: 8px }
.tabla-solicitudes .chip { white-space: normal }
.tabla-solicitudes td:nth-child(5) { min-width: 88px }
.tabla-solicitudes td:nth-child(8) { max-width: 170px }
.tabla-solicitudes .acc-version { display: grid; min-width: 136px }
.tabla-catalogo td:nth-child(4) { min-width: 220px; font-size: 13px }
.tabla-catalogo td:nth-child(6) { min-width: 160px; font-size: 13px }
.barra-des { gap: 8px }
.pasos-sol { margin: 0; padding-left: 20px; font-size: 14px; display: grid; gap: 2px }
.tarjeta-sol { background: var(--sup2) }
/* Seguimiento de la visita técnica y el presupuesto */
.pasos-visita { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; counter-reset: paso }
.pasos-visita li { counter-increment: paso; flex: 1 1 140px; min-width: 0; padding: 6px 8px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup); font-size: 12.5px; color: var(--tenue); display: grid; gap: 2px }
.pasos-visita li span::before { content: counter(paso) ". "; font-weight: 600 }
.pasos-visita li.hecho { border-color: var(--ok); background: var(--ok-s); color: var(--ok) }
.pasos-visita li.actual { border-color: var(--acento); background: var(--acento-s); color: var(--tinta); font-weight: 600 }
.pasos-visita li.omitido { border-style: dashed }
.pasos-visita li.omitido span { text-decoration: line-through }
.pasos-visita li small { font-size: 11px }
.tabla-visita th { text-align: left; width: 34%; font-weight: 600; color: var(--tenue) }
.forms-visita { display: grid; gap: 8px; margin: 10px 0 }
.forms-visita details > summary { cursor: pointer; color: var(--acento); font-size: 13.5px }
.tabla-trabajos td:nth-child(2) { min-width: 160px }
/* Constructoras, clientes y expediente */
.logo-mini { width: 40px; height: 40px; object-fit: contain; border-radius: var(--r); border: 1px solid var(--linea); background: var(--sup); display: inline-grid; place-items: center }
.logo-grande { width: 72px; height: 72px; object-fit: contain; border-radius: var(--r); border: 1px solid var(--linea); background: var(--sup); display: inline-grid; place-items: center; flex: none }
.sin-logo { font-weight: 700; color: var(--tenue); font-size: 13px }
.logo-grande.sin-logo { font-size: 20px }
.cab-exp { display: grid; gap: 8px; margin-bottom: 8px }
.cab-exp-fila { align-items: center; gap: 14px }
.cab-exp h1 { margin: 0 }
.tabs-exp { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--linea); padding-bottom: 6px }
.tabs-exp a { padding: 6px 10px; border-radius: var(--r) var(--r) 0 0; text-decoration: none; color: var(--acento); font-size: 13.5px }
.tabs-exp a[aria-current="page"] { background: var(--acento); color: var(--acento-t); font-weight: 600 }
.exp-cuerpo { display: grid; gap: 12px }
.rejilla-exp { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.rejilla-exp > * { min-width: 0 }
dl.datos { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 6px 10px; margin: 0 }
dl.datos dt { color: var(--tenue); font-size: 13px }
dl.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere }
.tabla-docs tr.doc-previa td { opacity: .75; background: var(--sup2) }
.tabla-revision tr.fila-aviso th, .tabla-revision tr.fila-aviso td { background: var(--alerta-s) }
.tabla-revision input { min-width: 160px; width: 100% }
.sel-docs label.deshabilitada { color: var(--tenue) }
.texto-plantilla { white-space: pre-wrap; font-size: 12.5px; max-height: 260px; overflow: auto; background: var(--sup2); padding: 8px; border-radius: var(--r) }
.revision-contrato, .revision-paquete { display: grid; gap: 8px; border: 1px solid var(--linea); border-radius: var(--r); padding: 10px; background: var(--sup) }
.grupo-funciones { border: 1px solid var(--linea); border-radius: var(--r); padding: 8px 10px }
.campos-contrato code { font-size: 12px }
.respaldo { margin-top: 12px }
/* Comercial y comisiones */
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 10px 0 }
.kpi { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup); text-decoration: none; color: var(--tinta) }
.kpi span { font-size: 13px; color: var(--tenue) }
.kpi b { font-size: 22px }
.indicador h2 { margin-bottom: 2px }
.valor-ind { font-size: 18px; white-space: nowrap }
.guia-sol { display: grid; gap: 4px; margin: 8px 0 }
.siguiente-paso { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.acciones-borrador { gap: 8px }
.componentes-alcance { border: 1px solid var(--linea); border-radius: var(--r); padding: 8px 10px }
.alcance-sol { margin-top: 4px; padding: 4px 6px; border-left: 3px solid var(--acento); background: var(--acento-s); font-size: 12.5px }
.dlg-pdf { width: min(1000px, 96vw); height: 92vh; padding: 0; border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup); color: var(--tinta) }
.dlg-pdf::backdrop { background: rgb(0 0 0 / .45) }
.dlg-pdf[open] { display: flex; flex-direction: column }
.dlg-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--linea) }
.dlg-visor { flex: 1; width: 100%; border: 0; background: #fff }

/* ---------- asistente de desglose de trabajos ---------- */
.desglose-panel { border-top: 2px solid var(--acento-s); padding-top: 12px; display: grid; gap: 10px; min-width: 0 }
.desglose-panel h4 { font-size: 15px; color: var(--acento) }
.desc-original { background: var(--sup2); border-left: 4px solid var(--tenue); border-radius: var(--r); padding: 8px 12px }
.desc-original small { font-size: 11px; letter-spacing: .06em; color: var(--tenue); font-weight: 600 }
.desc-original p { margin: 4px 0 0; white-space: pre-line }
.paquetes-detectados { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px }
.filtros-des .btn[aria-pressed="true"] { background: var(--acento-s); border-color: var(--acento); color: var(--acento); font-weight: 600 }
.tabla-desglose-op { font-size: 13px }
.tabla-desglose-op th, .tabla-desglose-op td { padding: 8px 8px; overflow-wrap: break-word }
.tabla-desglose-op td:nth-child(1) { width: 30px }
.tabla-desglose-op td:nth-child(2) { min-width: 66px }
.tabla-desglose-op td:nth-child(3) { min-width: 170px }
.tabla-desglose-op td:nth-child(4) { min-width: 120px }
.tabla-desglose-op td:nth-child(5) { min-width: 96px }
.tabla-desglose-op td:nth-child(7) { min-width: 130px }
.tabla-desglose-op td:nth-child(8) { min-width: 116px }
.tabla-desglose-op td .sub { font-size: 12px }
.item-des.descartado > tr:first-child td { opacity: .6 }
.item-des.descartado > tr:first-child td:nth-child(3) b { text-decoration: line-through }
.item-des.incluido > tr:first-child td:first-child { box-shadow: inset 4px 0 0 var(--ok) }
.item-des.sugerido > tr:first-child td:first-child { box-shadow: inset 4px 0 0 var(--alerta) }
.estado-item { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 4px }
.estado-item.sugerido { color: var(--alerta); background: var(--alerta-s) }
.estado-item.incluido { color: var(--ok); background: var(--ok-s) }
.estado-item.descartado { color: var(--tenue); background: var(--sup2) }
.chips { display: flex; flex-wrap: wrap; gap: 4px }
.chips .chip { white-space: normal }
.por-cuantificar { color: var(--alerta); font-weight: 600; font-size: 12.5px }
.acc-item { display: grid; gap: 4px; min-width: 120px }
.editor-item { display: grid; gap: 8px }
.agregar-des { align-items: start }
.res-cat { margin-top: 6px }
.res-cat .lista li { font-size: 13px }
.tabla-concepto th { width: 32%; text-transform: none; letter-spacing: 0; font-size: 12.5px; vertical-align: top }
.tabla-concepto td { font-size: 13.5px }
.paquete-cat { border-top: 1px solid var(--linea); padding-top: 10px; display: grid; gap: 6px }
.paquete-cat h3 { color: var(--acento) }
[data-cat-item] > summary { cursor: pointer; list-style: none }
[data-cat-item] > summary::-webkit-details-marker { display: none }

/* ---------- comisión del vendedor y desglose ---------- */
.ayuda { margin: 0; font-size: 13px; color: var(--acento); background: var(--acento-s); border-radius: var(--r); padding: 6px 10px }
.desglose-caja { border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 8px; background: var(--sup2); min-width: 0 }
.desglose-caja p { margin: 0 }
.tabla-desglose { font-size: 14px; background: var(--sup); border-radius: var(--r) }
.tabla-desglose th { text-transform: none; letter-spacing: 0; font-size: 13px; background: none; color: var(--tenue); width: 55%; font-weight: 600; vertical-align: top }
.tabla-desglose td { font-variant-numeric: tabular-nums; font-weight: 600 }
.tabla-desglose tr:last-child th, .tabla-desglose tr:last-child td { color: var(--tinta); border-top: 2px solid var(--linea) }
.alerta-desglose { color: var(--mal); background: var(--mal-s); border-left: 4px solid var(--mal); padding: 6px 10px; border-radius: var(--r); font-weight: 600 }

/* ---------- archivos del trabajo solicitado ---------- */
.anexos { border: 1px solid var(--linea); border-radius: var(--r); padding: 12px 14px 14px; margin: 0; display: grid; gap: 8px; min-width: 0 }
.anexos legend { font-weight: 600; font-size: 15px; padding: 0 6px }
.anexos p { margin: 0 }
.ejemplos { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-size: 14px }
.selector { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center }
.nota-demo { margin: 0; font-size: 13px; color: var(--pend); background: var(--pend-s); border-radius: var(--r); padding: 4px 10px; flex: 1 1 260px }
#anexos-sel h4 { margin-bottom: 6px }

/* ---------- prioridades ---------- */
.prioridades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px }
.prioridad { text-align: left; display: grid; gap: 2px; align-content: start; background: var(--sup); border: 1px solid var(--linea); border-top: 4px solid var(--tenue); border-radius: var(--r); padding: 12px 14px; cursor: pointer }
.prioridad:hover { border-color: var(--tenue) }
.prioridad[aria-pressed="true"] { background: var(--acento-s); border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento) }
.p-nombre { font-weight: 600; font-size: 14px }
.p-num { font-size: 28px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums }
.p-desc { font-size: 12.5px; color: var(--tenue); line-height: 1.35 }
.p-activa { font-size: 12px; color: var(--acento); font-weight: 600; margin-top: 4px }
.p-mias { border-top-color: var(--acento) } .p-vencidas { border-top-color: var(--mal) } .p-hoy { border-top-color: var(--alerta) }
.p-bloqueadas { border-top-color: var(--pend); border-top-style: dashed } .p-sin_responsable { border-top-color: var(--alerta); border-top-style: dotted }
.p-vencidas .p-num { color: var(--mal) } .p-hoy .p-num { color: var(--alerta) } .p-bloqueadas .p-num { color: var(--pend) }

/* ---------- bandeja: sin desplazamiento horizontal ---------- */
.estado-venc { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--tenue); margin-top: 2px }
.estado-venc.mal { color: var(--mal); background: var(--mal-s); padding: 1px 8px; border-radius: 4px }
.estado-venc.alerta { color: var(--alerta); background: var(--alerta-s); padding: 1px 8px; border-radius: 4px }
.estado-bloq { display: inline-block; width: fit-content; font-size: 12.5px; font-weight: 600; color: var(--pend); border: 1px dashed var(--pend); padding: 0 8px; border-radius: 99px; margin-top: 4px }
table.bandeja { table-layout: fixed; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r); border-collapse: separate; border-spacing: 0; overflow: hidden }
.bandeja th:nth-child(1) { width: 27% } .bandeja th:nth-child(2) { width: 15% } .bandeja th:nth-child(3) { width: 22% }
.bandeja th:nth-child(4) { width: 13% } .bandeja th:nth-child(5) { width: 14% } .bandeja th:nth-child(6) { width: 104px }
.bandeja td { overflow-wrap: anywhere }
.bandeja .chip { white-space: normal }
.bandeja tbody.op:hover > tr:first-child td { background: var(--fondo) }
.bandeja tbody.es-vencida > tr:first-child td:first-child { box-shadow: inset 4px 0 0 var(--mal) }
.c-op { display: grid; gap: 1px; align-content: start }
.folio { font-family: var(--mono); font-size: 13px; font-weight: 600; width: fit-content }
.cliente { font-weight: 600 }
.c-acc { text-align: right }
.c-acc .btn { width: 100%; margin-bottom: 6px }
.detalle td { border-top: 1px dashed var(--linea); background: var(--sup2) }
.det-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px 18px }
.det-bloq ul { margin: 2px 0 0; padding-left: 18px }

/* ---------- pantallas medianas: el menú lateral se vuelve desplegable ---------- */
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr) }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, 85vw); z-index: 10; transform: translateX(-105%); transition: transform .2s ease; visibility: hidden }
  .app.menu-abierto .lateral { transform: none; visibility: visible }
  .cabecera .menu-boton { display: inline-flex }
  .cabecera { padding: 10px 16px }
  .demo-banda { padding: 6px 16px }
  .vista { padding: 18px 16px 56px }
  .migas { padding: 6px 16px }
  .menu-usuario-panel { position: fixed; left: 16px; right: 16px; top: auto; width: auto }
}
@media (prefers-reduced-motion: reduce) { .lateral { transition: none } }

/* ---------- teléfono: cada operación es una tarjeta ---------- */
@media (max-width: 720px) {
  h1 { font-size: 20px }
  .modulo b { font-size: 16px }
  .usuario { font-size: 13px }
  .cabecera .btn.prim { flex: 1 1 100% }
  .prioridades { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .p-num { font-size: 24px }
  table.bandeja, .bandeja tbody, .bandeja tr, .bandeja td { display: block; width: 100% }
  table.bandeja { border: 0; background: none; overflow: visible }
  .bandeja thead { display: none }
  .bandeja tbody.op { background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r); margin-bottom: 12px; overflow: hidden }
  .bandeja tbody.es-vencida { border-left: 4px solid var(--mal) }
  .bandeja tbody.es-vencida > tr:first-child td:first-child { box-shadow: none }
  .bandeja tr:first-child { display: grid; grid-template-columns: 1fr 1fr }
  .bandeja tr:first-child td { border-top: 0; padding: 6px 14px }
  .cabecera { position: static }
  .secciones { display: none }
  .sec-select { display: grid }
  .mas-acciones[open] { flex-basis: 100% }
  .menu-acciones { position: static; width: 100%; margin-top: 6px; box-shadow: none }
  .bandeja td.c-op { display: grid; grid-column: 1 / -1; padding-top: 12px; border-bottom: 1px solid var(--linea); padding-bottom: 10px }
  .bandeja td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); font-weight: 600 }
  .bandeja td.c-acc { grid-column: 1 / -1; display: flex; gap: 8px; padding-bottom: 12px }
  .c-acc .btn { width: auto; flex: 1; margin: 0 }
  .bandeja tbody.op:hover > tr:first-child td { background: none }
}

/* Tablero de control operativo: tarjetas que filtran el listado y filas de seguimiento que se apilan en pantallas angostas. */
button.kpi { font: inherit; text-align: left; cursor: pointer }
.kpi small { font-size: 12px; color: var(--tenue) }
.kpi.activa { border-color: var(--acento, #0066c8); box-shadow: 0 0 0 2px var(--acento, #0066c8) inset }
.lista-seg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.seg details { border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup) }
.seg-fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer }
.seg-fila > * { min-width: 0; overflow-wrap: anywhere }
.seg details > .rejilla-exp { padding: 0 12px 12px }
@media (max-width: 760px) { .seg-fila { grid-template-columns: 1fr; gap: 4px } }
/* Tablero: filas con dos acciones; bloqueo breve y formulario de seguimiento solo cuando se pide. */
.seg-cab { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.1fr) auto; gap: 10px; padding: 0 12px 6px; font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .03em }
.seg { border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup) }
.seg-fila { cursor: default }
.seg-bloqueo { margin: 0; padding: 0 12px 10px; font-size: 13px }
.seg-form { padding: 0 12px 12px }
.sub.bloque, .bloque { display: block }
@media (max-width: 760px) { .seg-cab { display: none } }
/* Resumen integral: bloques compactos de solo consulta. */
.resumen-integral { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) }
.bloque-res { border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup); padding: 12px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.bloque-res header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center }
.bloque-res h3 { margin: 0; font-size: 15px }
.bloque-res .letra { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sup2, #eef3f9); font-size: 12px }
.bloque-res footer { gap: 6px; flex-wrap: wrap }
.datos.compacta { grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 13.5px }
.datos.compacta dd { margin: 0; overflow-wrap: anywhere }
.estado-vacio { display: inline-block; padding: 1px 8px; border-radius: 10px; border: 1px dashed var(--linea); color: var(--tenue); font-size: 12.5px }
.estado-vacio.restringido { border-style: solid }
/* ---------- modo con base de datos (servidor PHP + MySQL) ---------- */
.demo-banda.con-servidor { background: var(--acento-s); color: var(--tinta); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center }
.demo-banda.con-servidor b { color: var(--acento) }
.sv-estado { font-weight: 600 }
.sv-guardado { color: var(--ok) } .sv-guardando { color: var(--tenue) } .sv-otros { color: var(--alerta) }
.sv-error, .sv-conflicto, .sv-sesion { color: var(--mal) } .sv-lectura { color: var(--tenue) }
.acceso { min-height: 100vh; display: grid; place-items: center; background: var(--fondo); padding: 24px 16px }
.acceso-caja { width: 100%; max-width: 440px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r); padding: 28px; display: grid; gap: 14px; color: var(--tinta) }
.acceso-caja .lateral-marca { background: var(--lat); color: var(--lat-tinta); border-radius: var(--r); padding: 12px 16px }
.acceso-caja h1 { font-size: 20px; margin: 0 }
.acceso-caja pre { background: var(--sup2); padding: 8px; border-radius: var(--r); white-space: pre-wrap; font-family: var(--mono); font-size: 12px }
.acceso-form { display: grid; gap: 12px }
.acceso-form label { display: grid; gap: 4px; font-size: 13px; color: var(--tenue) }
.acceso-form label.op { display: flex; gap: 8px; align-items: center; justify-content: flex-start; text-align: left; color: var(--tinta) }
.acceso-form label.op input { width: auto; flex: none; margin: 0 }
.acceso-form input:not([type=radio]), .acceso-form select { font: inherit; padding: 8px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup); color: var(--tinta) }
.acceso-form fieldset { border: 1px solid var(--linea); border-radius: var(--r); display: grid; gap: 6px; padding: 10px }
.acceso-error { color: var(--mal); background: var(--mal-s); padding: 8px; border-radius: var(--r); margin: 0 }