/* Paleta oficial de marca Entrez (E1) — fuente: entrez-manual-de-marca-2025-v3
   vía PALETA-ENTREZ-origen.md. Azul petróleo dominante; el amarillo SOLO en
   acentos sutiles y alertas (nunca dominante ni fondo de área grande). */
:root {
  /* Marca */
  --ez-azul:        #00405d;  /* principal */
  --ez-azul-claro:  #9fbfc9;  /* agrupaciones, hover */
  --ez-oscuro:      #18242a;  /* texto principal */
  --ez-gris:        #939598;  /* texto secundario, bordes */
  --ez-amarillo:    #fdd900;  /* acento / alerta sutil */
  --ez-naranja:     #f47b20;  /* advertencia puntual */

  /* Derivados de interfaz */
  --ez-azul-hover:  #003049;  /* botón primario en hover */
  --ez-azul-05:     #f2f7f9;  /* fondo de fila de subcapítulo / zebra */
  --ez-azul-15:     #e3eef2;  /* fila activa / hover de celdas editables */
  --ez-borde:       #e5e9eb;  /* separadores de tabla */
  --ez-fondo:       #ffffff;  /* fondo general */
  --ez-amarillo-tenue: #fff9d6;
  --ez-exito:       #2e7d32;  /* confirmaciones */
  --ez-error:       #c62828;  /* errores y eliminar */

  --ez-fuente:      'Roboto', 'Segoe UI', system-ui, sans-serif;
  --ez-fuente-titulos: 'Antonio', 'Arial Narrow', sans-serif;
  --alto-fila: 2.5rem;

  /* Rediseño sin cuadrícula: superficies y divisores */
  --ez-divisor:     #eef1f3;  /* divisor horizontal muy sutil */
  --ez-hover-fila:  #f6f9fa;  /* fila bajo el cursor */
  --ez-panel:       #fafbfc;  /* panel anidado (APU expandido) */
  --ez-sombra:      0 1px 2px rgba(16, 24, 40, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ez-fuente);
  color: var(--ez-oscuro);
  background: var(--ez-fondo);
}

/* ---- disposición con barra lateral ---- */
.disposicion { display: flex; min-height: 100vh; }

.lateral {
  width: 232px;
  flex-shrink: 0;
  background: var(--ez-azul);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.cab-lateral {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0.8rem 0.8rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.marca-lateral {
  display: block;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  text-decoration: none;
}
.marca-lateral .sutil { color: var(--ez-azul-claro); }

/* ---- menú lateral (D1-D5): tres categorías idénticas, acordeones y rail ---- */
.btn-colapsar {
  background: none; border: none; color: var(--ez-azul-claro); cursor: pointer;
  font: inherit; font-size: 1.2rem; line-height: 1; padding: 0.1rem 0.35rem;
  border-radius: 6px;
}
.btn-colapsar:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.menu-lateral { flex: 1; padding: 0.6rem 0.6rem 1rem; display: grid; gap: 0.15rem; align-content: start; }

/* D1: las tres entradas principales comparten exactamente el mismo estilo */
.entrada-menu {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  color: #fff; text-decoration: none; text-align: left;
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 0.5rem 0.55rem; border-radius: 7px;
  font-size: 0.97rem; font-weight: 600;
}
.entrada-menu svg { flex-shrink: 0; opacity: 0.9; }
.entrada-menu:hover { background: rgba(255, 255, 255, 0.10); }
.entrada-menu.activo {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 3px 0 0 var(--ez-amarillo);
}

/* D2: acordeones de Configuración y Catálogo */
.cabecera-acordeon .flecha {
  margin-left: auto; font-size: 0.7rem; color: var(--ez-azul-claro);
  transition: transform 0.15s;
}
.grupo-acordeon.abierto > .cabecera-acordeon .flecha { transform: rotate(90deg); }
.grupo-acordeon .submenu { display: none; padding: 0.1rem 0 0.25rem; }
.grupo-acordeon.abierto .submenu { display: block; }
.submenu a {
  display: block; color: #fff; text-decoration: none;
  padding: 0.34rem 0.55rem 0.34rem 2.4rem; border-radius: 7px; font-size: 0.92rem;
}
.submenu a:hover { background: rgba(255, 255, 255, 0.10); }
/* D5: la sección activa se marca también dentro del submenú */
.submenu a.activo {
  background: rgba(255, 255, 255, 0.16); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--ez-amarillo);
}
.cabecera-acordeon.activo-padre { background: rgba(255, 255, 255, 0.08); }

/* D3: usuario y cerrar sesión al pie */
.pie-lateral {
  padding: 0.55rem 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid; gap: 0.15rem;
}
.pie-lateral .entrada-menu { font-weight: 500; font-size: 0.92rem; }
.pie-lateral .rol-usuario { display: block; color: var(--ez-azul-claro); font-size: 0.78rem; }
.pie-lateral form { display: contents; }

/* D4: barra colapsable a solo iconos (estado recordado en localStorage) */
body.menu-colapsado .lateral { width: 60px; }
body.menu-colapsado .cab-lateral { justify-content: center; padding: 1rem 0.4rem 0.8rem; }
body.menu-colapsado .marca-lateral { display: none; }
body.menu-colapsado .menu-lateral { padding: 0.6rem 0.4rem 1rem; }
body.menu-colapsado .pie-lateral { padding: 0.55rem 0.4rem; }
body.menu-colapsado .entrada-menu { justify-content: center; padding: 0.55rem 0; gap: 0; }
body.menu-colapsado .entrada-menu .texto-menu,
body.menu-colapsado .entrada-menu .flecha,
body.menu-colapsado .grupo-acordeon .submenu { display: none; }

.contenido { flex: 1; min-width: 0; max-width: 1240px; padding: 1.4rem 1.6rem 4rem; }

@media (max-width: 760px) {
  .disposicion { flex-direction: column; }
  .lateral, body.menu-colapsado .lateral { width: 100%; height: auto; position: static; }
  body.menu-colapsado .marca-lateral { display: block; }
  body.menu-colapsado .entrada-menu .texto-menu { display: inline; }
}

/* Titulares en Antonio (tipografía de marca); el texto corre en Roboto */
h1 {
  font-family: var(--ez-fuente-titulos);
  font-size: 1.6rem; font-weight: 600; letter-spacing: 0.015em;
  margin: 0.2rem 0 0.4rem; color: var(--ez-azul);
}
h2 { font-size: 1.12rem; margin: 1.5rem 0 0.6rem; color: var(--ez-azul); }
h3 { font-size: 1rem; margin: 0 0 0.2rem; color: var(--ez-azul); }
.sutil { color: var(--ez-gris); }

a { color: var(--ez-azul); }

/* nombres de ítems y APUs que navegan: texto neutro, sin azul subrayado */
.enlace-nombre { color: inherit; text-decoration: none; }
.enlace-nombre:hover { color: var(--ez-azul); text-decoration: underline; }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}

.tarjeta {
  display: block;
  background: var(--ez-fondo);
  border: 1px solid var(--ez-borde);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tarjeta:hover { border-color: var(--ez-azul-claro); box-shadow: 0 2px 10px rgba(0, 64, 93, 0.10); }
.tarjeta h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.tarjeta p { margin: 0; color: var(--ez-gris); font-size: 0.9rem; }

/* C2: tarjeta de proyecto clicable con datos clave */
.tarjeta-proyecto { display: flex; flex-direction: column; gap: 0.3rem; min-height: 7.5rem; }
.tarjeta-proyecto .pie-tarjeta {
  margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--ez-borde);
  color: var(--ez-azul); font-weight: 600;
}

/* C6: estados vacíos con diseño */
.estado-vacio {
  display: grid; justify-items: center; gap: 0.35rem; text-align: center;
  border: 1px dashed var(--ez-azul-claro); border-radius: 10px;
  padding: 2.6rem 1.5rem; margin: 1.2rem 0; color: var(--ez-gris);
}
.estado-vacio .icono { font-size: 2rem; }
.estado-vacio h2 { margin: 0; color: var(--ez-azul); }
.estado-vacio p { margin: 0 0 0.7rem; }

/* C5: zona de peligro del proyecto */
.zona-peligro {
  border: 1px solid #e5b8b5; border-radius: 10px;
  padding: 1rem 1.1rem; margin-top: 2.2rem;
}
.zona-peligro h3 { color: var(--ez-error); margin: 0 0 0.25rem; }
.zona-peligro p { margin: 0 0 0.7rem; color: var(--ez-gris); font-size: 0.92rem; }

/* C8: migas de pan */
.migas {
  display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
  font-size: 0.88rem; color: var(--ez-gris); margin: 0 0 0.7rem;
}
.migas a { color: var(--ez-gris); text-decoration: none; }
.migas a:hover { color: var(--ez-azul); text-decoration: underline; }
.migas .separador { color: var(--ez-borde); user-select: none; }
.migas .actual { color: var(--ez-oscuro); font-weight: 600; }

/* C7: toasts de confirmación (reemplazan los avisos en bloque) */
.toasts {
  position: fixed; top: 1rem; right: 1rem; z-index: 320;
  display: grid; gap: 0.5rem; max-width: min(24rem, calc(100vw - 2rem));
}
.toast {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: var(--ez-fondo); border: 1px solid var(--ez-borde); border-radius: 8px;
  padding: 0.6rem 0.75rem; font-size: 0.92rem; line-height: 1.35;
  box-shadow: 0 3px 12px rgba(24, 36, 42, 0.12);
  animation: toast-entra 0.18s ease-out;
}
.toast-exito { border-left: 3px solid var(--ez-exito); }
.toast-error { border-left: 3px solid var(--ez-error); }
.toast button {
  background: none; border: none; cursor: pointer; color: var(--ez-gris);
  font-size: 0.85rem; line-height: 1; padding: 0.1rem 0.2rem; margin-left: auto;
}
.toast button:hover { color: var(--ez-oscuro); }
.toast-oculto { opacity: 0; transition: opacity 0.3s; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-4px); } }

/* C7: estado de carga del botón que envía un formulario */
button.cargando, input.cargando { opacity: 0.75; pointer-events: none; }
button.cargando::after {
  content: ''; display: inline-block; width: 0.8em; height: 0.8em;
  margin-left: 0.45em; vertical-align: -0.08em; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girar 0.7s linear infinite;
}

.aviso {
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  margin-bottom: 0.9rem;
  border: 1px solid;
}
.aviso-exito { background: var(--ez-azul-05); border-color: var(--ez-azul-claro); color: var(--ez-azul); }
.aviso-error { background: var(--ez-amarillo-tenue); border-color: var(--ez-amarillo); color: var(--ez-oscuro); }

/* ---- tablas: SIN cuadrícula — el dato se alinea con tipografía y espacio;
   la separación entre filas es un divisor horizontal muy sutil y el hover ---- */
table { border-collapse: collapse; width: 100%; background: transparent; }
th, td {
  border: none;
  border-bottom: 1px solid var(--ez-divisor);
  padding: 0.42rem 0.65rem;
  text-align: left;
  font-size: 0.9rem;
  height: var(--alto-fila);
  white-space: nowrap;
}
/* encabezado: texto gris discreto en mayúsculas pequeñas, sin franja de color */
th {
  background: transparent;
  color: var(--ez-gris);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* hover que resalta la fila (excepto paneles anidados y la fila de total) */
tbody tr:not(.fila-apu-detalle):not(.fila-total):hover > td { background: var(--ez-hover-fila); }
tbody tr:hover > td.editable { background: var(--ez-azul-15); }
/* E5: unidades y códigos centrados */
.centro, td.centro, th.centro { text-align: center; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.trunca, th.trunca {
  max-width: 26rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boton {
  display: inline-block;
  background: var(--ez-azul);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 0.45rem 0.95rem;
  font-size: 0.93rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.boton:hover { background: var(--ez-azul-hover); }
.boton-secundario { background: var(--ez-fondo); color: var(--ez-azul); border: 1px solid var(--ez-azul-claro); }
.boton-secundario:hover { background: var(--ez-azul-05); }
.boton-mini { padding: 0.2rem 0.55rem; font-size: 0.85rem; }
.boton-peligro { background: var(--ez-error); }
.boton-peligro:hover { background: #8f1e18; }

input, select {
  padding: 0.38rem 0.55rem;
  border: 1px solid var(--ez-borde);
  border-radius: 6px;
  font: inherit;
  background: var(--ez-fondo);
  color: var(--ez-oscuro);
}
input:focus, select:focus { outline: 2px solid var(--ez-azul-05); border-color: var(--ez-azul); }
input[readonly] { background: var(--ez-azul-05); color: var(--ez-gris); }

.formulario { display: grid; gap: 0.7rem; max-width: 640px; background: var(--ez-fondo); border: 1px solid var(--ez-borde); border-radius: 10px; padding: 1.1rem; }
.campo { display: grid; gap: 0.25rem; }
.campo label { font-size: 0.86rem; color: var(--ez-azul); font-weight: 600; }

.encabezado-seccion { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.filtros { display: flex; gap: 0.5rem; margin: 0.8rem 0; }
.formulario-linea { display: flex; gap: 0.5rem; max-width: none; align-items: center; padding: 0.8rem; margin-bottom: 0.8rem; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.dos-columnas .formulario { max-width: none; }

.panel-vu {
  display: flex; align-items: baseline; gap: 0.6rem;
  background: var(--ez-azul); color: #fff; border-radius: 10px;
  padding: 0.55rem 1rem; font-size: 1rem;
}
.panel-vu strong { font-size: 1.25rem; }

/* estado de cotización del APU (derivado de sus insumos) */
.chip-cotizado {
  margin-left: auto; font-size: 0.82rem; border-radius: 999px;
  padding: 0.15rem 0.7rem; background: rgba(255, 255, 255, 0.14); color: #fff;
}
.chip-cotizado.completo { background: var(--ez-amarillo); color: var(--ez-oscuro); font-weight: 600; }

.fila-subtotal td { font-weight: 600; color: var(--ez-azul); }
.fila-total td {
  background: var(--ez-fondo); color: var(--ez-oscuro); font-weight: 700;
  border-top: 2px solid var(--ez-azul); border-bottom: none;
}

td.acciones, .acciones { white-space: nowrap; }
.acciones form { display: inline; }
.acciones a { margin-right: 0.5rem; }

.resumen-accion { cursor: pointer; font-weight: 700; color: var(--ez-azul); }
.resumen-accion.sutil { font-weight: 500; color: var(--ez-gris); }
.resumen-accion:hover { color: var(--ez-azul-hover); }

/* APU sin armar: estado de trabajo normal, resaltado hasta que tenga componentes.
   Las dos primeras columnas se fijan con .con-scroll-h y su fondo opaco tiene
   más especificidad: hay que igualarla para que la fila se vea roja completa. */
tr.fila-apu-vacio > td { background: #fdeeed; }
tr.fila-apu-vacio:hover > td { background: #fbe2e0; }
.con-scroll-h #tabla-ppto > tbody > tr.fila-apu-vacio:not(.fila-apu-detalle) > td:nth-child(1),
.con-scroll-h #tabla-ppto > tbody > tr.fila-apu-vacio:not(.fila-apu-detalle) > td:nth-child(2) {
  background: #fdeeed;
}
.con-scroll-h #tabla-ppto > tbody > tr.fila-apu-vacio:not(.fila-apu-detalle):hover > td:nth-child(1),
.con-scroll-h #tabla-ppto > tbody > tr.fila-apu-vacio:not(.fila-apu-detalle):hover > td:nth-child(2) {
  background: #fbe2e0;
}
.marca-vacio {
  display: inline-block; margin-left: 0.4rem; cursor: help;
  background: var(--error); color: #fff; border-radius: 4px;
  padding: 0 0.32rem; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em; vertical-align: middle;
}
/* letrero compacto de ítems con el APU sin armar: vive en la barra del
   presupuesto, con un botón que los filtra (reemplaza al aviso grande) */
.chip-vacios {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  background: #fdeeed; border: 1px solid #f3c2bf; color: var(--ez-error);
  border-radius: 999px; padding: 0.15rem 0.4rem 0.15rem 0.7rem;
  font-size: 0.82rem; font-weight: 600; cursor: help;
}
.chip-vacios button {
  background: none; border: 1px solid currentColor; border-radius: 999px;
  color: inherit; cursor: pointer; font: inherit; padding: 0 0.45rem;
}
.chip-vacios button:hover { background: rgba(198, 40, 40, 0.12); }

/* cantidad que calcula el motor (insumos con base_calculo): no se edita */
.valor-calculado {
  display: inline-block; font-variant-numeric: tabular-nums; cursor: help;
  background: var(--suave-tenue); color: var(--principal); font-weight: 600;
  border: 1px dashed var(--suave); border-radius: 5px; padding: 0.1rem 0.35rem;
}

.btn-lapiz {
  background: none; border: none; cursor: pointer; font-size: 0.95rem;
  color: var(--ez-gris); padding: 0 0.25rem; vertical-align: middle;
}
.btn-lapiz:hover { color: var(--ez-azul); }

.enlace-peligro {
  background: none; border: none; color: var(--ez-error); cursor: pointer;
  font: inherit; font-size: 0.88rem; padding: 0; text-decoration: underline;
}

/* ---- pestañas del presupuesto ---- */
.pestanas { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--ez-borde); margin: 0.35rem 0 0.7rem; }
.pestanas a {
  padding: 0.45rem 0.9rem; text-decoration: none; color: var(--ez-gris);
  border-radius: 8px 8px 0 0; font-size: 0.95rem;
}
.pestanas a:hover { background: var(--ez-azul-05); color: var(--ez-azul); }
.pestanas a.activo {
  background: var(--ez-azul-05); color: var(--ez-azul); font-weight: 600;
  border-bottom: 3px solid var(--ez-amarillo); margin-bottom: -2px;
}
/* acción de la vista, pegada a la derecha de la fila de pestañas */
.pestanas .accion-pestanas {
  margin: 0 0 0.25rem auto; align-self: center; color: #fff;
}
.pestanas .accion-pestanas:hover { color: #fff; }

/* ---- jerarquía del presupuesto: indentación + tipografía, SIN franjas ----
   Único acento de color: la barrita vertical de 3 px a la izquierda de las
   filas de agrupación (azul petróleo en tipo de costo, azul claro en capítulo). */
#tabla-ppto > tbody > tr > td:first-child { border-left: 3px solid transparent; }
#tabla-ppto > tbody > tr.fila-tipo-costo > td:first-child { border-left-color: var(--ez-azul); }
#tabla-ppto > tbody > tr.fila-capitulo > td:first-child { border-left-color: var(--ez-azul-claro); }

.fila-tipo-costo td {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ez-oscuro);
}
.fila-capitulo td { font-weight: 600; }
.fila-capitulo .codigo-fijo { color: var(--ez-azul); }
.fila-subcapitulo .codigo-fijo, .fila-item .codigo-fijo { color: var(--ez-gris); }
/* indentación creciente por nivel */
.fila-subcapitulo .cel-codigo { padding-left: 1.55rem; }
.fila-item .cel-codigo { padding-left: 2.35rem; }
/* (v11) los ítems indirectos son fila-item normales: sin estilos propios */

.cel-codigo { white-space: nowrap; }
/* chevron suave que rota al abrir (la clase .abierto la pone el JS) */
.btn-toggle {
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--ez-gris); padding: 0 0.25rem; width: 1.4rem;
  display: inline-block; font-size: 0.78rem;
  transition: transform 0.15s ease, color 0.12s;
}
.btn-toggle.abierto { transform: rotate(90deg); }
.btn-toggle:hover { color: var(--ez-azul); }
.codigo-fijo { font-variant-numeric: tabular-nums; padding: 0.05rem 0.3rem; }

/* ---- arrastrar y soltar para reordenar ---- */
.dnd-manija {
  visibility: hidden; cursor: grab; user-select: none;
  color: var(--ez-gris); font-size: 0.85rem; padding: 0 0.25rem;
}
/* la manija solo aparece al posar el cursor sobre la fila */
tr.dnd-arrastrable:hover .dnd-manija { visibility: visible; }
tr.dnd-arrastrando { opacity: 0.45; }
tr.dnd-destino-antes td { box-shadow: inset 0 3px 0 0 var(--ez-azul); }
tr.dnd-destino-despues td { box-shadow: inset 0 -3px 0 0 var(--ez-azul); }
.fila-tipo-costo.dnd-destino-antes td { box-shadow: inset 0 3px 0 0 var(--ez-amarillo); }
.fila-tipo-costo.dnd-destino-despues td { box-shadow: inset 0 -3px 0 0 var(--ez-amarillo); }

.btn-expandir {
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--ez-gris); padding: 0 0.25rem; margin-right: 0.1rem;
  display: inline-block; font-size: 0.78rem;
  transition: transform 0.15s ease, color 0.12s;
}
.btn-expandir.abierto { transform: rotate(90deg); }
.btn-expandir:hover { color: var(--ez-azul); }
/* editor de cantidad: se crea al hacer doble clic y se destruye al salir */
.campo-cantidad { width: 100%; min-width: 3rem; padding: 0.15rem 0.3rem; text-align: right; }

.boton-mas {
  background: none; border: none; border-radius: 4px;
  color: inherit; cursor: pointer; font-weight: 700; font-size: 1.05rem;
  line-height: 1; padding: 0.05rem 0.35rem; margin-right: 0.3rem;
}
.boton-mas:hover { background: rgba(0, 64, 93, 0.12); }

.btn-eliminar {
  background: none; border: none; border-radius: 4px; color: var(--ez-error);
  cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0.1rem 0.3rem;
}
.btn-eliminar:hover { background: #fdeeed; }

/* ---- tablas de datos con anchos fijos (caben en pantalla, texto con …) ---- */
.tabla-fija { table-layout: fixed; width: 100%; }
.tabla-fija td, .tabla-fija th { overflow: hidden; text-overflow: ellipsis; }
/* contenedor tipo tarjeta: fondo blanco, esquinas suaves, sombra muy sutil;
   si la tabla no cabe, el scroll es interno del contenedor, nunca de la página */
.envoltura-tabla {
  overflow-x: auto;
  background: var(--ez-fondo); border: 1px solid var(--ez-divisor);
  border-radius: 8px; box-shadow: var(--ez-sombra);
}
.envoltura-tabla tbody tr:last-child td,
.envoltura-ppto tbody tr:last-child td { border-bottom: none; }

/* ---- tooltip flotante para texto truncado (ver base.html) ---- */
#tooltip-texto {
  position: fixed; z-index: 200; display: none; max-width: 34rem;
  background: var(--ez-azul); color: #fff; font-size: 0.85rem; line-height: 1.35;
  padding: 0.4rem 0.65rem; border-radius: 6px;
  white-space: normal; overflow-wrap: break-word; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 64, 93, 0.30);
}

/* cantidad fija: doble clic para editar */
.cantidad-fija {
  display: inline-block; min-width: 3.5rem; padding: 0.1rem 0.25rem;
  border-radius: 4px; cursor: text; font-variant-numeric: tabular-nums;
}
.cantidad-fija:hover { background: var(--ez-azul-15); outline: 1px dashed var(--ez-azul-claro); }

/* celdas editables con doble clic (insumos del presupuesto) */
td.editable { cursor: text; }
td.editable:hover { background: var(--ez-azul-15); box-shadow: inset 0 0 0 1px var(--ez-azul-claro); }
td.editable input { padding: 0.15rem 0.3rem; border-radius: 4px; }
@keyframes destello-guardado {
  from { background: #dff2e6; }
  to { background: transparent; }
}
.celda-guardada { animation: destello-guardado 1s ease-out; }

/* fila destacada al llegar por ancla (#ins-N desde Cotizaciones) */
tr:target td { background: var(--ez-amarillo-tenue); }

/* ---- tabla del presupuesto: anchos fijos y redimensionables ---- */
/* B1: la tabla vive en un contenedor con scroll propio (ambos ejes); la
   página, su encabezado y la barra lateral nunca se mueven */
.envoltura-ppto {
  /* el encabezado mínimo (migas + pestañas + fila compacta) ocupa ~10 rem:
     el resto de la ventana es para el presupuesto */
  overflow: auto; max-height: calc(100vh - 11rem);
  background: var(--ez-fondo); border: 1px solid var(--ez-divisor);
  border-radius: 8px; box-shadow: var(--ez-sombra);
}
#tabla-ppto { table-layout: fixed; min-width: 50rem; }
#tabla-ppto td, #tabla-ppto th { overflow: hidden; text-overflow: ellipsis; }

/* B1: encabezado pegajoso al hacer scroll vertical (dentro del contenedor).
   position:sticky también sirve de ancla para el redimensionador absoluto.
   Fondo blanco opaco: las filas pasan por debajo sin verse a través. */
#tabla-ppto > thead th {
  position: sticky; top: 0; z-index: 12;
  background: var(--ez-fondo);
  box-shadow: inset 0 -1px 0 var(--ez-divisor);
  border-bottom: none;
}

/* B1: columnas Código y Descripción fijas SOLO cuando hay desbordamiento
   horizontal real (clase .con-scroll-h puesta por JS). Con miles de filas,
   celdas sticky permanentes congelan el navegador: por eso se activan bajo
   demanda; sin desbordamiento no hay nada que fijar. */
.con-scroll-h #tabla-ppto > tbody > tr:not(.fila-apu-detalle) > td:nth-child(1) {
  position: sticky; left: 0; z-index: 6; background: var(--ez-fondo);
}
.con-scroll-h #tabla-ppto > tbody > tr:not(.fila-apu-detalle) > td:nth-child(2) {
  position: sticky; left: var(--ancho-col1, 6.5rem); z-index: 5; background: var(--ez-fondo);
}
.con-scroll-h #tabla-ppto > thead tr > th:nth-child(1) {
  position: sticky; left: 0; z-index: 14; background: var(--ez-fondo);
}
.con-scroll-h #tabla-ppto > thead tr > th:nth-child(2) {
  position: sticky; left: var(--ancho-col1, 6.5rem); z-index: 14; background: var(--ez-fondo);
}
/* el hover de fila también aplica a las celdas fijas (su fondo blanco opaco
   tiene más especificidad que el hover genérico) */
.con-scroll-h #tabla-ppto > tbody > tr:not(.fila-apu-detalle):hover > td:nth-child(1),
.con-scroll-h #tabla-ppto > tbody > tr:not(.fila-apu-detalle):hover > td:nth-child(2) {
  background: var(--ez-hover-fila);
}

/* B4: acciones por fila discretas, aparecen al posar el cursor */
#tabla-ppto td.acciones .boton-mas,
#tabla-ppto td.acciones .btn-eliminar,
#tabla-ppto td.acciones .btn-renombrar { opacity: 0; transition: opacity 0.12s; }
#tabla-ppto tr:hover td.acciones .boton-mas,
#tabla-ppto tr:hover td.acciones .btn-eliminar,
#tabla-ppto tr:hover td.acciones .btn-renombrar,
#tabla-ppto td.acciones .boton-mas:focus-visible,
#tabla-ppto td.acciones .btn-eliminar:focus-visible,
#tabla-ppto td.acciones .btn-renombrar:focus-visible { opacity: 1; }
.btn-renombrar {
  background: none; border: none; border-radius: 4px; cursor: pointer;
  color: inherit; font-size: 0.85rem; line-height: 1; padding: 0.1rem 0.3rem;
}
.btn-renombrar:hover { background: rgba(0, 64, 93, 0.12); }

/* TRM del presupuesto, junto al total */
.campo-trm { display: inline-flex; align-items: center; gap: 0.35rem; }
.campo-trm label { font-size: 0.85rem; color: var(--gris); font-weight: 600; }
.campo-trm input {
  width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.4rem;
}
/* en reposo va en gris y no se puede escribir: se abre con doble clic */
.campo-trm input[readonly] {
  background: var(--ez-divisor); border-color: var(--ez-borde);
  color: var(--ez-oscuro); cursor: default;
}
/* el display de .boton le gana a [hidden] del navegador: hay que decirlo aquí */
.campo-trm button[hidden] { display: none; }

/* B7: chip de estado de la búsqueda */
.chip-busqueda {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ez-azul-05); border: 1px solid var(--ez-azul-claro);
  color: var(--ez-azul); border-radius: 999px; padding: 0.2rem 0.4rem 0.2rem 0.8rem;
  font-size: 0.88rem;
}
.chip-busqueda button {
  background: none; border: none; cursor: pointer; color: var(--ez-azul);
  font-size: 0.9rem; line-height: 1; padding: 0.1rem 0.3rem; border-radius: 999px;
}
.chip-busqueda button:hover { background: rgba(0, 64, 93, 0.12); }

/* B6: tabla de ítems indirectos */
.tabla-indirectos { margin-top: 0.4rem; }
.tabla-indirectos td, .tabla-indirectos th { height: var(--alto-fila); }

/* B8: velo con spinner mientras se recarga la página */
#velo-carga {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(1px);
  align-items: center; justify-content: center;
  pointer-events: none;   /* red de seguridad: si quedara puesto, no bloquea la app */
}
body.cargando #velo-carga { display: flex; }
#velo-carga .rueda {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 4px solid var(--ez-azul-05); border-top-color: var(--ez-azul);
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
/* anchos de arranque (antes de que el JS mida el contenido): col-desc absorbe
   el resto. La regla definitiva la aplica ajustarAnchosPpto(): código, unidad,
   cantidad y valores SIEMPRE completos; solo Descripción trunca con … */
#tabla-ppto col.col-codigo { width: 6.5rem; }
#tabla-ppto col.col-und { width: 3.6rem; }
#tabla-ppto col.col-cant { width: 6.5rem; }
#tabla-ppto col.col-vu { width: 8.5rem; }
#tabla-ppto col.col-parcial { width: 9rem; }
#tabla-ppto col.col-acciones { width: 6.8rem; }
.redimensionador {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 5; user-select: none;
}
.redimensionador:hover { background: var(--ez-azul-claro); }

/* ---- encabezado mínimo del presupuesto: una sola fila compacta ---- */
.barra-ppto {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 0.1rem 0 0.6rem;
}
.barra-ppto .selector-nivel { margin-bottom: 0; }
.barra-ppto select, .barra-ppto input[type="search"] {
  padding: 0.3rem 0.5rem; font-size: 0.88rem;
}
.barra-ppto input[type="search"] { width: 13rem; }
.total-mini {
  margin-left: auto; color: var(--ez-gris); font-size: 0.88rem; white-space: nowrap;
}
.total-mini strong {
  color: var(--ez-azul); font-size: 1.02rem;
  font-variant-numeric: tabular-nums; margin-left: 0.25rem;
}

.grupo-botones { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.selector-nivel {
  display: inline-flex; border: 1px solid var(--ez-azul-claro); border-radius: 8px;
  overflow: hidden; margin-bottom: 0.9rem;
}
.selector-nivel button {
  background: var(--ez-fondo); border: none; border-right: 1px solid var(--ez-azul-claro);
  padding: 0.4rem 0.9rem; font: inherit; font-size: 0.9rem;
  color: var(--ez-azul); cursor: pointer;
}
.selector-nivel button:last-child { border-right: none; }
.selector-nivel button:hover { background: var(--ez-azul-05); }
.selector-nivel button.activo { background: var(--ez-azul); color: #fff; font-weight: 600; }

.segmentos { display: inline-flex; border: 1px solid var(--ez-azul-claro); border-radius: 8px; overflow: hidden; }
.segmentos button {
  background: var(--ez-fondo); border: none; border-right: 1px solid var(--ez-azul-claro);
  padding: 0.38rem 0.8rem; font: inherit; font-size: 0.9rem;
  color: var(--ez-azul); cursor: pointer;
}
.segmentos button:last-child { border-right: none; }
.segmentos button.activo { background: var(--ez-azul); color: #fff; font-weight: 600; }

/* ---- modales ---- */
dialog.modal {
  border: 1px solid var(--ez-borde); border-radius: 10px; padding: 1.2rem 1.3rem;
  width: min(460px, 94vw); box-shadow: 0 8px 26px rgba(24, 36, 42, 0.18);
}
dialog.modal::backdrop { background: rgba(24, 36, 42, 0.45); }
dialog.modal-ancho { width: min(880px, 96vw); }
dialog.modal form > .campo, dialog.modal .campo { margin-bottom: 0.6rem; }
.modal-pie {
  display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem;
  margin-top: 1rem;
}
.modal-pie .texto-error { margin-right: auto; }
.texto-error { color: var(--ez-error); font-size: 0.9rem; }
.titulo-modal {
  width: 100%; font-size: 1.15rem; font-weight: 600; color: var(--ez-azul);
  border: none; border-bottom: 2px solid var(--ez-azul-claro); border-radius: 0;
  padding: 0.3rem 0.1rem; margin-bottom: 0.8rem;
}
.titulo-modal:focus { outline: none; border-bottom-color: var(--ez-azul); }
.fila-modal { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 0.7rem; }

.tabla-builder { margin: 0.4rem 0; }
.tabla-builder td, .tabla-builder th { padding: 0.22rem 0.45rem; }
.tabla-builder .fila-nuevo { display: flex; gap: 0.4rem; }
.tabla-builder .fila-nuevo .c-desc { flex: 1; }
.agregar-comp { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.4rem; }
#mi-chooser { display: inline-flex; gap: 0.4rem; align-items: center; color: var(--ez-azul); }

/* ---- APU incrustado en el ítem: panel anidado, no tabla de Excel ---- */
.fila-apu-detalle > td {
  background: transparent; padding: 0.7rem 0.9rem 1rem; height: auto;
}
.apu-incrustado {
  background: var(--ez-panel);
  border: 1px solid var(--ez-divisor);
  border-left: 3px solid var(--ez-azul);
  border-radius: 8px;
  padding: 0.8rem 1rem 0.9rem;
}
.apu-cabecera { display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.4rem; }
.apu-vu { margin-left: auto; }
/* B3: mismo alto de fila que la tabla principal, también dentro del APU */
.tabla-apu-mini td, .tabla-apu-mini th { padding: 0.3rem 0.55rem; font-size: 0.87rem; height: var(--alto-fila); }
/* controles compactos dentro de tablas para no estirar las filas */
.tabla-fija select, .tabla-fija input, .tabla-apu-mini input, .tabla-apu input {
  padding: 0.15rem 0.4rem;
}
/* disposición fija: la descripción absorbe el resto y trunca con … (tooltip) */
.tabla-apu-mini, .tabla-apu { table-layout: fixed; }
.tabla-apu-mini td, .tabla-apu td { overflow: hidden; text-overflow: ellipsis; }
/* filas de categoría del APU: texto azul semibold, sin franja */
.fila-categoria-apu td { color: var(--ez-azul); font-weight: 600; }
.form-agregar-comp {
  display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap;
  margin-top: 0.6rem; background: var(--ez-azul-05); border-radius: 8px; padding: 0.5rem 0.7rem;
}
.form-agregar-comp span[data-para] { display: inline-flex; gap: 0.45rem; }

.desplegable-cotizaciones { position: relative; display: inline-block; }
.desplegable-cotizaciones summary { list-style: none; cursor: pointer; }
.desplegable-cotizaciones summary::-webkit-details-marker { display: none; }
.panel-cotizaciones {
  position: absolute; right: 0; z-index: 30; min-width: 20rem;
  background: var(--ez-fondo); border: 1px solid var(--ez-borde); border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12); padding: 0.7rem; margin-top: 0.3rem;
  text-align: left; white-space: normal;
}
.linea-cotizacion { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0.15rem 0; }
.linea-cotizacion form { display: inline; }

.usuario-barra { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; }
.usuario-barra form { display: inline; }

/* login: todo sobre azul suave de marca, sin recuadro blanco */
.pagina-login { display: grid; place-items: center; min-height: 100vh; background: var(--ez-azul-claro); }
.marca-login { text-align: center; margin-bottom: 1.2rem; }
.logo-login { width: 150px; max-width: 55%; height: auto; display: block; margin: 0 auto 0.6rem; }
.marca-login h1 { margin: 0; font-size: 2rem; letter-spacing: 0.04em; color: var(--ez-azul); }
.boton-microsoft {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; background: var(--ez-azul); color: #fff; padding: 0.65rem;
  font-weight: 600; font-size: 1rem;
}
.boton-microsoft:hover { background: var(--ez-azul-hover); }
.caja-login { width: min(420px, 92vw); background: transparent; border: none; padding: 1.6rem; }
.caja-login h1 { margin-top: 0; }
.caja-login h2, .caja-login p { color: var(--ez-oscuro); }
.caja-login .formulario { border: none; padding: 0; max-width: none; background: transparent; }
.caja-login .campo label { color: var(--ez-azul); }
.caja-login .sutil { color: #3c545e; }
.caja-login summary.sutil:hover { color: var(--ez-azul); }

select.estado { font-size: 0.85rem; padding: 0.25rem 0.4rem; border-radius: 6px; font-weight: 600; }
.estado-ok { background: #ecf9f0; color: var(--ez-exito); border-color: #bfe8cc; }
.estado-pendiente { background: var(--ez-amarillo-tenue); color: #6b5c00; border-color: var(--ez-amarillo); }
.estado-solicitada { background: var(--ez-azul-05); color: var(--ez-azul); border-color: var(--ez-azul-claro); }
.estado-na { background: #f4f4f4; color: var(--ez-gris); }

.lista-checkboxes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.2rem 1rem; max-height: 16rem; overflow-y: auto;
  border: 1px solid var(--ez-borde); border-radius: 8px; padding: 0.6rem; background: var(--ez-fondo);
}
.lista-checkboxes label { font-size: 0.9rem; display: flex; gap: 0.4rem; align-items: baseline; }