/* ============================================================================
 * Cómputo y presupuesto — aspecto
 * ----------------------------------------------------------------------------
 * Sigue el lenguaje visual de Evaluar5: neón cian y magenta sobre azul profundo,
 * bordes redondeados con resplandor y encabezado en degradé. Se reusan los
 * mismos nombres de variables (--e4-*) para que si mañana se retoca la paleta
 * del evaluador, esto acompañe solo.
 * ========================================================================== */

.zmc-presu-modal {
  --e4-cyan: #38e7ff;
  --e4-magenta: #ff43d7;
  --e4-violet: #7655ff;
  --e4-verde: #37f5a8;
  --e4-ambar: #ffc857;
  position: fixed;
  inset: 0;
  /* Por encima de la ventana del modelo. El sitio abre sus modales con
     .modal-overlay en 9999, y el evaluador funciona porque ES uno de ellos;
     este modulo es una capa aparte, asi que en 9000 quedaba DEBAJO del modelo
     y solo se veia al cerrarlo. */
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 32% 22%, rgba(21, 120, 196, .28), transparent 38%), rgba(0, 2, 12, .86);
  backdrop-filter: blur(14px);
}
.zmc-presu-modal[hidden] { display: none; }

.zmc-presu-shell {
  display: flex;
  flex-direction: column;
  width: min(1460px, 96vw);
  height: min(900px, 94vh);
  overflow: hidden;
  border: 1px solid rgba(72, 226, 255, .46);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(3, 8, 30, .98), rgba(5, 26, 49, .97));
  box-shadow: 0 0 70px rgba(47, 160, 255, .38), inset 0 0 50px rgba(31, 222, 255, .05);
}

.zmc-presu-header {
  display: grid;
  /* Cuatro columnas: titulo, material, sello de version y el boton de cerrar.
     Con tres, el sello empujaba a "Cerrar" a ocupar todo el ancho sobrante. */
  grid-template-columns: 1fr auto auto auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(69, 224, 255, .24);
  background: linear-gradient(90deg, rgba(14, 31, 78, .9), rgba(10, 52, 87, .72));
}
.zmc-presu-header p {
  margin: 0;
  color: var(--e4-cyan);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .16em;
}
.zmc-presu-header h3 { margin: 2px 0 0; color: #effdff; font-size: 1rem; }
.zmc-presu-cerrar {
  padding: 6px 14px;
  border: 1px solid rgba(83, 214, 255, .45);
  border-radius: 999px;
  background: rgba(6, 12, 42, .85);
  color: #bff0ff;
  font-size: .66rem;
  font-weight: 800;
  cursor: pointer;
}
.zmc-presu-cerrar:hover { border-color: var(--e4-magenta); color: #fff; box-shadow: 0 0 14px rgba(255, 67, 215, .4); }

.zmc-presu-content {
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  flex: 1 1 auto;
  min-height: 0;
}
.zmc-presu-controles {
  overflow: auto;
  padding: 14px;
  border-right: 1px solid rgba(73, 218, 255, .18);
  background: rgba(2, 9, 29, .82);
}
.zmc-presu-panel { overflow: auto; padding: 16px 18px; }

/* ── Los tres números que importan, arriba de todo ─────────────────────────── */
.zmc-presu-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.zmc-presu-tarjeta {
  position: relative;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--tono, #38e7ff) 40%, transparent);
  border-left: 3px solid var(--tono, #38e7ff);
  border-radius: 12px;
  background: rgba(6, 20, 52, .78);
  box-shadow: 0 0 18px color-mix(in srgb, var(--tono, #38e7ff) 18%, transparent);
}
.zmc-presu-tarjeta span {
  display: block;
  color: #9ddff1;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.zmc-presu-tarjeta b {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 0 14px color-mix(in srgb, var(--tono, #38e7ff) 70%, transparent);
}
.zmc-presu-tarjeta small { display: block; margin-top: 4px; color: #9bc6dc; font-size: .62rem; }

/* ── Tablas ───────────────────────────────────────────────────────────────── */
.zmc-presu-bloque { margin-bottom: 18px; }
.zmc-presu-bloque > h4 {
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(69, 224, 255, .2);
  color: #effdff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.zmc-presu-tabla { width: 100%; border-collapse: collapse; font-size: .68rem; }
.zmc-presu-tabla th {
  padding: 6px 8px;
  color: #9ddff1;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(69, 224, 255, .18);
}
.zmc-presu-tabla th:first-child { text-align: left; }
.zmc-presu-tabla td {
  padding: 6px 8px;
  color: #cfe9ff;
  text-align: right;
  border-bottom: 1px solid rgba(69, 224, 255, .07);
}
.zmc-presu-tabla td:first-child { color: #dff9ff; text-align: left; }
.zmc-presu-tabla tr:hover td { background: rgba(56, 231, 255, .05); }
.zmc-presu-tabla tfoot td {
  padding-top: 9px;
  color: #fff;
  font-weight: 900;
  border-top: 1px solid rgba(69, 224, 255, .3);
  border-bottom: 0;
}
.zmc-presu-tabla .es-total td { color: #fff; font-size: .8rem; font-weight: 900; }

/* ── Controles de la izquierda ────────────────────────────────────────────── */
.zmc-presu-campo { display: block; margin: 9px 0; color: #b9dced; font-size: .64rem; }
.zmc-presu-campo > span { display: block; margin-bottom: 3px; color: #9ddff1; font-weight: 700; }
.zmc-presu-campo input,
.zmc-presu-campo select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(83, 214, 255, .3);
  border-radius: 8px;
  background: #101941;
  color: #eafcff;
  font-size: .68rem;
}
.zmc-presu-campo input:focus,
.zmc-presu-campo select:focus { border-color: var(--e4-magenta); outline: none; box-shadow: 0 0 10px rgba(255, 67, 215, .3); }
.zmc-presu-grupo {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid rgba(122, 84, 255, .25);
  border-radius: 10px;
  background: rgba(13, 16, 54, .62);
}
.zmc-presu-grupo > b { display: block; margin-bottom: 4px; color: #cfe9ff; font-size: .66rem; }
.zmc-presu-grupo > p { margin: 0 0 6px; color: #9fc4dd; font-size: .58rem; line-height: 1.45; }

/* ── Avisos: lo que el usuario tiene que saber antes de creerle al número ─── */
.zmc-presu-aviso {
  margin: 10px 0;
  padding: 9px 11px;
  border: 1px solid rgba(255, 200, 87, .45);
  border-left: 3px solid var(--e4-ambar);
  border-radius: 10px;
  background: rgba(52, 38, 6, .5);
  color: #ffe3a6;
  font-size: .63rem;
  line-height: 1.45;
}
.zmc-presu-aviso.es-falta {
  border-color: rgba(255, 67, 215, .45);
  border-left-color: var(--e4-magenta);
  background: rgba(48, 6, 40, .5);
  color: #ffd4f4;
}
.zmc-presu-fuente {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(69, 224, 255, .15);
  color: #7fa8c4;
  font-size: .58rem;
  line-height: 1.5;
}

/* ── Barra de composición del costo ───────────────────────────────────────── */
.zmc-presu-barra {
  display: flex;
  height: 22px;
  margin: 10px 0 6px;
  overflow: hidden;
  border: 1px solid rgba(69, 224, 255, .25);
  border-radius: 999px;
}
.zmc-presu-barra > i {
  display: block;
  height: 100%;
  background: var(--tono, #38e7ff);
  opacity: .8;
}
.zmc-presu-leyenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: .6rem; color: #9bc6dc; }
.zmc-presu-leyenda span { display: flex; align-items: center; gap: 5px; }
.zmc-presu-leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--tono, #38e7ff); }

@media (max-width: 900px) {
  .zmc-presu-content { grid-template-columns: 1fr; }
  .zmc-presu-controles { border-right: 0; border-bottom: 1px solid rgba(73, 218, 255, .18); max-height: 40vh; }
}

/* ── Pestañas ─────────────────────────────────────────────────────────────── */
.zmc-presu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 18px;
  background: rgba(6, 20, 32, .55);
  border-bottom: 1px solid rgba(73, 218, 255, .18);
}
.zmc-presu-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  color: #8fbdd4;
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.zmc-presu-tab:hover { color: #dff9ff; }
.zmc-presu-tab.es-activa {
  color: #effdff;
  border-bottom-color: var(--e4-cyan);
  text-shadow: 0 0 10px rgba(56, 231, 255, .5);
}
.zmc-presu-tab > span { opacity: .75; font-size: .78rem; }
.zmc-presu-tab-n {
  min-width: 16px;
  padding: 1px 5px;
  color: #04121c;
  font-size: .58rem;
  font-style: normal;
  font-weight: 900;
  text-align: center;
  background: var(--e4-cyan);
  border-radius: 8px;
}

/* ── Planilla de cómputo y presupuesto ────────────────────────────────────── */
.zmc-presu-planilla-encabezado {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.zmc-presu-planilla-encabezado h4 {
  margin: 0 0 4px;
  color: #effdff;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.zmc-presu-nota { margin: 6px 0 0; color: #9fc4dd; font-size: .62rem; line-height: 1.5; }
.zmc-presu-nota b { color: #cfe9ff; }
.zmc-presu-acciones { display: flex; flex: 0 0 auto; gap: 6px; }
.zmc-presu-btn {
  padding: 6px 11px;
  color: #9ddff1;
  font: inherit;
  font-size: .62rem;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(56, 231, 255, .08);
  border: 1px solid rgba(73, 218, 255, .35);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.zmc-presu-btn:hover { color: #fff; border-color: var(--e4-magenta); box-shadow: 0 0 12px rgba(255, 67, 215, .3); }

/* La fila de rubro es el renglón que se lee; los ítems son el detalle. */
.zmc-presu-tabla .es-rubro td {
  padding-top: 10px;
  color: #effdff;
  font-weight: 800;
  background: rgba(56, 231, 255, .06);
  border-top: 1px solid rgba(69, 224, 255, .22);
}
.zmc-presu-tabla .es-item td { color: #a9cfe4; font-size: .64rem; }
.zmc-presu-tabla .es-item td:first-child { padding-left: 20px; opacity: .7; }
.zmc-presu-tabla .es-subtotal td { color: #cfe9ff; font-size: .7rem; }
.zmc-presu-tabla td.num, .zmc-presu-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.zmc-presu-planilla { font-size: .66rem; }
.zmc-presu-planilla td:first-child { width: 3.2rem; }

/* Marca lo que no está computado sino estimado: no es lo mismo y se tiene que ver. */
.zmc-presu-supuesto {
  padding: 1px 5px;
  color: var(--e4-ambar);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(255, 200, 87, .12);
  border-radius: 4px;
}

/* ── Estados y comparación ────────────────────────────────────────────────── */
.zmc-presu-estados tr.es-activa td { background: rgba(56, 231, 255, .1); }
.zmc-presu-estados input[type="radio"], .zmc-presu-estados input[type="checkbox"] { accent-color: var(--e4-cyan); cursor: pointer; }
.zmc-presu-comparar tr.es-mejor td { color: #eaffe9; background: rgba(55, 245, 168, .1); }
.zmc-presu-comparar tr.es-mejor td:first-child { box-shadow: inset 3px 0 0 var(--e4-verde); }

.zmc-presu-vacio {
  padding: 28px 22px;
  color: #9fc4dd;
  text-align: center;
  background: rgba(56, 231, 255, .04);
  border: 1px dashed rgba(73, 218, 255, .28);
  border-radius: 10px;
}
.zmc-presu-vacio b { display: block; margin-bottom: 6px; color: #dff9ff; font-size: .8rem; }
.zmc-presu-vacio p { margin: 0; font-size: .66rem; line-height: 1.55; }

/* En las tablas nuevas el texto va a la izquierda y solo los números a la
   derecha. Las viejas siguen con el default de la derecha. */
.zmc-presu-planilla td:not(.num), .zmc-presu-planilla th:not(.num),
.zmc-presu-estados td:not(.num), .zmc-presu-estados th:not(.num),
.zmc-presu-comparar td:not(.num), .zmc-presu-comparar th:not(.num) { text-align: left; }
.zmc-presu-planilla th:nth-child(2) { width: 34%; }
.zmc-presu-planilla th:nth-child(3) { width: 2.6rem; }
.zmc-presu-planilla th:last-child { width: 3rem; }
.zmc-presu-lista td:not(.num) { text-align: left; }
.zmc-presu-lista td small { opacity: .7; }

/* ── Llamada a la memoria de cálculo, desde la pestaña de cómputo ─────────── */
.zmc-presu-memoria-llamada {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(118, 85, 255, .14), rgba(56, 231, 255, .08));
  border: 1px solid rgba(118, 85, 255, .35);
  border-radius: 10px;
}
.zmc-presu-memoria-llamada b { display: block; margin-bottom: 3px; color: #effdff; font-size: .8rem; }
.zmc-presu-memoria-llamada p { margin: 0; color: #a9cfe4; font-size: .64rem; line-height: 1.5; }
.zmc-presu-btn--fuerte {
  flex: 0 0 auto;
  color: #04121c;
  background: var(--e4-cyan);
  border-color: var(--e4-cyan);
  font-weight: 900;
}
.zmc-presu-btn--fuerte:hover { color: #04121c; background: #7fefff; border-color: #7fefff; }
.zmc-presu-btn[disabled] { opacity: .55; cursor: progress; }

/* ── La memoria, leída dentro de la ventana ───────────────────────────────── */
/* Es un documento: fondo claro y tipografía de lectura, aunque el resto de la
   ventana sea oscuro. Se lee y se imprime, no se mira. */
.zmc-doc {
  padding: 26px 30px;
  color: #0f172a;
  font: 15px/1.6 Georgia, "Times New Roman", serif;
  background: #fdfdfb;
  border-radius: 10px;
}
.zmc-doc-h1 { margin: 0 0 .25rem; color: #0b3a5b; font-size: 1.5rem; line-height: 1.25; }
.zmc-doc-sub { margin: 0 0 1.6rem; color: #5b6b80; font-family: system-ui, sans-serif; font-size: .78rem; }
.zmc-doc-h2 { margin: 1.9rem 0 .55rem; color: #0b3a5b; font-size: 1.06rem; }
.zmc-doc-p { margin: 0 0 .8rem; text-align: justify; }
.zmc-doc-nota {
  margin: .7rem 0 1.1rem;
  padding-left: .8rem;
  color: #4b5b70;
  font-size: .88rem;
  font-style: italic;
  border-left: 2px solid #2563a8;
}
.zmc-doc-nota b { font-style: normal; }
.zmc-doc-ul { margin: .35rem 0 1.1rem; padding-left: 1.2rem; }
.zmc-doc-ul li { margin-bottom: .5rem; text-align: justify; }
.zmc-doc-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: .7rem 1.3rem;
  margin: 1.1rem 0 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid #dbe4ee;
  border-bottom: 1px solid #dbe4ee;
}
.zmc-doc-kv span {
  display: block;
  color: #5b6b80;
  font-family: system-ui, sans-serif;
  font-size: .62rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.zmc-doc-kv b { color: #0b3a5b; font-size: 1.12rem; }
.zmc-doc-tabla {
  width: 100%;
  margin: .6rem 0 1.1rem;
  font-family: system-ui, sans-serif;
  font-size: .74rem;
  border-collapse: collapse;
}
.zmc-doc-tabla th {
  padding: .4rem .55rem;
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  text-align: left;
  background: #0b3a5b;
}
.zmc-doc-tabla td { padding: .35rem .55rem; vertical-align: top; border-bottom: 1px solid #dbe4ee; }
.zmc-doc-tabla tr:nth-child(even) td { background: #f1f6fc; }
.zmc-doc-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zmc-doc-tabla td.fuerte { font-weight: 700; }
.zmc-doc-tabla td.cambiado { color: #a61482; }
.zmc-doc-corte { margin: 1.6rem 0; border: 0; border-top: 1px dashed #c3d2e2; }
.zmc-doc-firma {
  margin-top: 2.2rem;
  padding-top: .7rem;
  color: #5b6b80;
  font-family: system-ui, sans-serif;
  font-size: .74rem;
  border-top: 1px solid #dbe4ee;
}
.zmc-presu-nota.es-trabajando { color: var(--e4-cyan); }
.zmc-presu-nota.es-bien { color: var(--e4-verde); }
.zmc-presu-nota.es-mal { color: #ff8f8f; }

/* ── Espera al abrir ──────────────────────────────────────────────────────── */
/* La ventana se abre en cuanto se hace clic: sin esto el botón parecía muerto
   mientras el backend devolvía los resultados de cada iteración. */
.zmc-presu-espera {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 20, 32, .92);
  backdrop-filter: blur(2px);
}
.zmc-presu-espera[hidden] { display: none; }
.zmc-presu-espera-caja { padding: 0 24px; text-align: center; }
.zmc-presu-espera-aro {
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  border: 3px solid rgba(56, 231, 255, .18);
  border-top-color: var(--e4-cyan);
  border-radius: 50%;
  animation: zmc-presu-girar .9s linear infinite;
}
@keyframes zmc-presu-girar { to { transform: rotate(360deg); } }
.zmc-presu-espera-caja b { display: block; color: #effdff; font-size: .86rem; letter-spacing: .03em; }
.zmc-presu-espera-caja span {
  display: block;
  margin-top: 5px;
  color: var(--e4-cyan);
  font-size: 1.35rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.zmc-presu-espera-caja small {
  display: block;
  max-width: 30rem;
  margin: 8px auto 0;
  color: #9fc4dd;
  font-size: .68rem;
  line-height: 1.5;
}
/* La capa se posiciona contra la ventana, no contra la página. */
.zmc-presu-shell { position: relative; }
@media (prefers-reduced-motion: reduce) { .zmc-presu-espera-aro { animation-duration: 3s; } }
/* El encabezado queda POR ENCIMA del velo: si la espera se cuelga, "Cerrar"
   tiene que seguir andando o el usuario queda encerrado en la ventana. */
.zmc-presu-header { position: relative; z-index: 5; }

/* Sello de version y fecha de precios, en el encabezado. */
.zmc-presu-sello {
  padding: 3px 8px;
  color: #8fbdd4;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  background: rgba(56, 231, 255, .07);
  border: 1px solid rgba(73, 218, 255, .22);
  border-radius: 999px;
}
@media (max-width: 640px) { .zmc-presu-sello { display: none; } }

/* ── Monto contratado por rubro ───────────────────────────────────────────── */
.zmc-presu-monto-input {
  width: 100%;
  min-width: 6.5rem;
  padding: 3px 6px;
  color: #effdff;
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: rgba(56, 231, 255, .06);
  border: 1px solid rgba(73, 218, 255, .28);
  border-radius: 4px;
}
.zmc-presu-monto-input::placeholder { color: #8fbdd4; font-weight: 400; opacity: .75; }
.zmc-presu-monto-input:focus { border-color: var(--e4-magenta); outline: none; box-shadow: 0 0 10px rgba(255, 67, 215, .3); }
.zmc-presu-monto-input:disabled { opacity: .35; cursor: not-allowed; }

.zmc-presu-contratado {
  padding: 1px 5px;
  color: var(--e4-verde);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(55, 245, 168, .13);
  border-radius: 4px;
}
/* El cómputo queda tachado al lado del precio contratado: es la comparación. */
.zmc-presu-tachado { color: #8fbdd4; font-size: .62rem; text-decoration: line-through; opacity: .8; }

.zmc-presu-tabla tr.es-contratado td { background: rgba(55, 245, 168, .07); }
.zmc-presu-tabla tr.es-apagado td { opacity: .42; }
.zmc-presu-tabla tr.es-apagado .zmc-presu-activo { opacity: 1; }

.zmc-presu-activo { display: inline-flex; gap: .35rem; align-items: center; cursor: pointer; }
.zmc-presu-activo input { accent-color: var(--e4-cyan); cursor: pointer; }

/* ── Guardado por obra ────────────────────────────────────────────────────── */
.zmc-presu-guardado {
  padding: 3px 9px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  border-radius: 999px;
}
.zmc-presu-guardado[hidden] { display: none; }
.zmc-presu-guardado.es-guardado  { color: var(--e4-verde); background: rgba(55, 245, 168, .12); }
.zmc-presu-guardado.es-guardando { color: var(--e4-cyan);  background: rgba(56, 231, 255, .12); }
.zmc-presu-guardado.es-pendiente { color: var(--e4-ambar); background: rgba(255, 200, 87, .12); }
.zmc-presu-guardado.es-error     { color: #ff8f8f;         background: rgba(255, 143, 143, .12); }
@media (max-width: 780px) { .zmc-presu-guardado { display: none; } }

/* ── Acceso a la documentación, en el encabezado ──────────────────────────── */
.zmc-presu-doc {
  padding: 6px 13px;
  color: #04121c;
  font: inherit;
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
  background: var(--e4-cyan);
  border: 1px solid var(--e4-cyan);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.zmc-presu-doc:hover { background: #7fefff; border-color: #7fefff; }
/* En pantallas chicas se queda el ícono: el rótulo lo lleva el title. */
@media (max-width: 720px) { .zmc-presu-doc { font-size: 0; padding: 6px 10px; } .zmc-presu-doc::before { content: "📄"; font-size: .85rem; } }

/* ── Moneda ───────────────────────────────────────────────────────────────── */
/* Una planilla sin decir en qué moneda está no se puede leer. Va al pie, que es
   donde uno mira después de ver el total. */
.zmc-presu-moneda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 20px;
  padding: 15px 17px;
  background: rgba(56, 231, 255, .05);
  border: 1px solid rgba(73, 218, 255, .26);
  border-radius: 10px;
}
.zmc-presu-moneda-texto b { display: block; margin-bottom: 4px; color: #effdff; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.zmc-presu-moneda-texto p { margin: 0; color: #a9cfe4; font-size: .65rem; line-height: 1.55; }
.zmc-presu-moneda-texto b + p b { display: inline; margin: 0; color: #effdff; font-size: inherit; letter-spacing: 0; text-transform: none; }

.zmc-presu-moneda-caja { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.zmc-presu-moneda-caja label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #9ddff1;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.zmc-presu-moneda-campo { display: flex; align-items: center; gap: 5px; }
.zmc-presu-moneda-campo input {
  width: 6.5rem;
  padding: 5px 8px;
  color: #effdff;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: rgba(6, 12, 42, .6);
  border: 1px solid rgba(73, 218, 255, .35);
  border-radius: 6px;
}
.zmc-presu-moneda-campo input:focus { border-color: var(--e4-magenta); outline: none; box-shadow: 0 0 10px rgba(255, 67, 215, .3); }
.zmc-presu-moneda-campo i { color: #8fbdd4; font-size: .62rem; font-style: normal; }

.zmc-presu-moneda-total {
  padding-left: 14px;
  border-left: 1px solid rgba(73, 218, 255, .22);
}
.zmc-presu-moneda-total span {
  display: block;
  color: #8fbdd4;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.zmc-presu-moneda-total b { display: block; color: var(--e4-verde); font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.zmc-presu-moneda-total small { display: block; color: #8fbdd4; font-size: .58rem; }
.zmc-presu-moneda-pie { grid-column: 1 / -1; margin: 0; font-size: .6rem; }

@media (max-width: 780px) {
  .zmc-presu-moneda { grid-template-columns: 1fr; }
  .zmc-presu-moneda-total { padding-left: 0; border-left: 0; }
}
/* Un rubro apagado se lee como apagado, no como un cero mudo. */
.zmc-presu-fuera {
  padding: 1px 5px;
  color: #9fc4dd;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(159, 196, 221, .14);
  border-radius: 4px;
}
.zmc-presu-fuera-nota { color: #8fbdd4; font-size: .64rem; font-style: italic; }

/* ── Conmutador de moneda ─────────────────────────────────────────────────── */
/* El cálculo es en dólares; esto solo cambia cómo se lo mira. */
.zmc-presu-mon {
  display: inline-flex;
  padding: 2px;
  background: rgba(6, 12, 42, .6);
  border: 1px solid rgba(73, 218, 255, .28);
  border-radius: 999px;
}
.zmc-presu-mon button {
  padding: 4px 12px;
  color: #8fbdd4;
  font: inherit;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .04em;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.zmc-presu-mon button.es-activa { color: #04121c; background: var(--e4-cyan); }
.zmc-presu-mon button:not(.es-activa):hover { color: #dff9ff; }

.zmc-presu-moneda-sug { display: flex; flex-wrap: wrap; gap: 6px; }
.zmc-presu-moneda-texto p + p { margin-top: .5rem; }

/* ── Hoja de precios y fuentes ────────────────────────────────────────────── */
.zmc-presu-precio {
  margin-bottom: 16px;
  padding: 13px 15px;
  background: rgba(56, 231, 255, .04);
  border: 1px solid rgba(73, 218, 255, .2);
  border-radius: 10px;
}
.zmc-presu-precio-cab {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.zmc-presu-precio-cab b { color: #effdff; font-size: .84rem; }
.zmc-presu-precio-cab small { display: block; margin-top: 2px; color: #8fbdd4; font-size: .62rem; }
.zmc-presu-precio-valor { flex: 0 0 auto; text-align: right; }
.zmc-presu-precio-valor b { color: var(--e4-verde); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.zmc-presu-precio-valor small { color: #8fbdd4; }

.zmc-presu-criterios { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.zmc-presu-crit {
  padding: 4px 11px;
  color: #9ddff1;
  font: inherit;
  font-size: .63rem;
  font-weight: 700;
  background: rgba(6, 12, 42, .5);
  border: 1px solid rgba(73, 218, 255, .28);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.zmc-presu-crit:hover { color: #fff; border-color: var(--e4-magenta); }
.zmc-presu-crit.es-activo { color: #04121c; background: var(--e4-cyan); border-color: var(--e4-cyan); }

.zmc-presu-propio {
  margin-bottom: 10px;
  padding: 9px 11px;
  background: rgba(255, 200, 87, .07);
  border: 1px solid rgba(255, 200, 87, .28);
  border-radius: 8px;
}
.zmc-presu-propio label { display: flex; gap: 7px; align-items: center; color: #9ddff1; font-size: .64rem; font-weight: 700; }
.zmc-presu-propio label span { color: #8fbdd4; font-weight: 400; }
.zmc-presu-propio input {
  width: 7rem;
  padding: 4px 7px;
  color: #effdff;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  text-align: right;
  background: rgba(6, 12, 42, .6);
  border: 1px solid rgba(255, 200, 87, .4);
  border-radius: 5px;
}
.zmc-presu-propio small { display: block; margin-top: 5px; color: #c9b98d; font-size: .6rem; line-height: 1.5; }

.zmc-presu-cotiz td { vertical-align: top; }
.zmc-presu-cotiz td:not(.num) { text-align: left; }
.zmc-presu-cotiz tr.es-elegida td { background: rgba(56, 231, 255, .08); }
.zmc-presu-cotiz-btn {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  color: #8fbdd4;
  font-size: .8rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.zmc-presu-cotiz-btn.es-activo { color: var(--e4-cyan); }
.zmc-presu-cotiz-nota { margin-top: 2px; color: #9fc4dd; font-size: .6rem; line-height: 1.5; }
.zmc-presu-cotiz-fuente { margin-top: 3px; color: #8fbdd4; font-size: .58rem; }
.zmc-presu-cotiz-fuente i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; }
.zmc-presu-cotiz-fuente i.es-alta { background: var(--e4-verde); }
.zmc-presu-cotiz-fuente i.es-media { background: var(--e4-ambar); }
.zmc-presu-cotiz-fuente i.es-baja { background: #ff8f8f; }

/* ── Hoja de Precios: los 15 ítems con su fuente y su campo editable ────────
   Antes esta hoja mostraba solo los cuatro precios que tenían varias
   cotizaciones. Ahora están todos, así que hace falta separarlos por grupo y
   dejar el campo propio siempre a la vista: si se esconde detrás de un botón,
   nadie lo encuentra. */
.zmc-presu-precio-grupo {
  margin: 20px 0 9px;
  padding-bottom: 5px;
  color: #9ddff1;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(73, 218, 255, .2);
}
.zmc-presu-precio-grupo:first-child { margin-top: 6px; }

/* Los que no tienen cotizaciones alternativas se ven más sobrios: no hay nada
   que elegir, solo un valor de referencia y el campo para corregirlo. */
.zmc-presu-precio.es-simple { background: rgba(56, 231, 255, .02); }

/* El punto de fiabilidad al lado de la unidad, con la misma escala de color
   que ya usan las cotizaciones. */
.zmc-presu-precio-cab small i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: middle;
}
.zmc-presu-precio-cab small i.es-alta { background: var(--e4-verde); }
.zmc-presu-precio-cab small i.es-media { background: var(--e4-ambar); }
.zmc-presu-precio-cab small i.es-baja { background: #ff8f8f; }

/* El campo propio, al costado del valor vigente. */
.zmc-presu-propio-inline {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
}
.zmc-presu-propio-inline label {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #9ddff1;
  font-size: .62rem;
  font-weight: 700;
}
.zmc-presu-propio-inline input {
  width: 6.2rem;
  padding: 5px 8px;
  color: #effdff;
  font-family: inherit;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: rgba(3, 18, 28, .75);
  border: 1px solid rgba(73, 218, 255, .35);
  border-radius: 6px;
}
.zmc-presu-propio-inline input:focus {
  outline: none;
  border-color: var(--e4-cyan);
  box-shadow: 0 0 0 2px rgba(56, 231, 255, .18);
}
/* Un precio propio cargado se distingue del valor de referencia: es la señal
   de que ese número lo pusiste vos y no sale del relevamiento. */
.zmc-presu-propio-inline input:not([value=""]) { border-color: var(--e4-verde); color: #d9ffe8; }
.zmc-presu-volver {
  padding: 4px 7px;
  color: #8fbdd4;
  font-family: inherit;
  font-size: .6rem;
  background: none;
  border: 1px solid rgba(73, 218, 255, .25);
  border-radius: 6px;
  cursor: pointer;
}
.zmc-presu-volver:hover { color: #fff; border-color: var(--e4-magenta); }

.zmc-presu-cotiz-vacia {
  margin: 0;
  color: #9fc4dd;
  font-size: .63rem;
  line-height: 1.6;
}

/* En pantallas angostas el encabezado se apila: valor, campo propio y rótulo
   no entran en una línea. */
@media (max-width: 720px) {
  .zmc-presu-precio-cab { flex-wrap: wrap; }
  .zmc-presu-propio-inline { width: 100%; justify-content: flex-end; }
}

/* ── Superficie cubierta, cargable desde el módulo ──────────────────────────
   El modelo paramétrico devuelve volúmenes, no superficie. Hasta ahora el
   único lugar para escribirla era el panel de administración, así que el
   costo por m² —la cifra con la que se compara una obra contra otra— quedaba
   fuera del alcance de quien arma el presupuesto. */
.zmc-presu-superficie {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 11px 14px;
  background: rgba(255, 200, 87, .06);
  border: 1px solid rgba(255, 200, 87, .28);
  border-radius: 10px;
}
.zmc-presu-superficie label {
  display: flex;
  gap: 9px;
  align-items: center;
  color: #ffd98a;
  font-size: .72rem;
  font-weight: 700;
}
.zmc-presu-superficie input {
  width: 7rem;
  padding: 6px 9px;
  color: #effdff;
  font-family: inherit;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: rgba(3, 18, 28, .75);
  border: 1px solid rgba(255, 200, 87, .4);
  border-radius: 6px;
}
.zmc-presu-superficie input:focus {
  outline: none;
  border-color: #ffc857;
  box-shadow: 0 0 0 2px rgba(255, 200, 87, .18);
}
.zmc-presu-superficie label b { color: #c9a961; font-weight: 400; font-size: .75rem; }

@media (max-width: 560px) {
  .zmc-presu-superficie { flex-wrap: wrap; }
}

/* De dónde salió la superficie. Se distingue la que da el modelo de la que
   corrigió el usuario: son dos cosas distintas y el $/m² depende de cuál. */
.zmc-presu-superficie-origen {
  color: #8fbdd4;
  font-size: .62rem;
  white-space: nowrap;
}
.zmc-presu-superficie.es-manual {
  background: rgba(55, 245, 168, .06);
  border-color: rgba(55, 245, 168, .3);
}
.zmc-presu-superficie.es-manual label { color: #9dffcf; }
.zmc-presu-superficie.es-manual input { border-color: rgba(55, 245, 168, .45); }
.zmc-presu-superficie.es-manual .zmc-presu-superficie-origen { color: var(--e4-verde); }

/* ── Zona salarial y búsqueda de precios ────────────────────────────────────
   La zona gobierna los dos jornales de una sola vez: son la misma escala y
   dejarlos elegir por separado permitía cruzarlos, que no existe. */
.zmc-presu-zona {
  margin: 6px 0 16px;
  padding: 11px 14px;
  background: rgba(255, 67, 215, .05);
  border: 1px solid rgba(255, 67, 215, .22);
  border-radius: 10px;
}
.zmc-presu-zona > b { display: block; margin-bottom: 7px; color: #ffb3ec; font-size: .72rem; }
.zmc-presu-zona-botones { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.zmc-presu-zona small { display: block; color: #d3a8c6; font-size: .62rem; line-height: 1.55; }

.zmc-presu-buscar-fila { display: flex; gap: 5px; margin: 8px 0 0; }
.zmc-presu-buscar { flex: 0 0 auto; }

.zmc-presu-busqueda {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: rgba(3, 18, 28, .5);
  border: 1px solid rgba(73, 218, 255, .2);
  border-radius: 8px;
}
.zmc-presu-busqueda .zmc-presu-nota { margin-top: 0; }
.zmc-presu-busqueda-mal { color: #ffc9a8; }

/* Los enlaces a las fuentes. El que publica lista se distingue del que no:
   de uno salen los números, del otro hay que ir a mirar. */
.zmc-presu-fuentes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.zmc-presu-fuente-link {
  padding: 4px 9px;
  color: #9ddff1;
  font-size: .63rem;
  font-weight: 600;
  text-decoration: none;
  background: rgba(56, 231, 255, .07);
  border: 1px solid rgba(73, 218, 255, .28);
  border-radius: 99px;
}
.zmc-presu-fuente-link:hover {
  color: #fff;
  border-color: var(--e4-cyan);
  background: rgba(56, 231, 255, .16);
}

/* ── Qué estado se está computando, y recalcular ────────────────────────────
   Con cinco iteraciones guardadas, mirar una planilla sin saber de cuál salió
   es mirar números sueltos. Va en el encabezado para que se vea desde
   cualquier pestaña del módulo. */
.zmc-presu-estado-activo {
  padding: 3px 10px;
  color: #04121c;
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20rem;
  background: var(--e4-cyan);
  border-radius: 99px;
}
.zmc-presu-estado-activo.es-vacio {
  color: #c9b98d;
  background: rgba(255, 200, 87, .14);
  border: 1px solid rgba(255, 200, 87, .4);
  font-weight: 400;
  font-style: italic;
}
.zmc-presu-recalcular {
  padding: 4px 11px;
  color: #9ddff1;
  font: 600 .68rem inherit;
  background: none;
  border: 1px solid rgba(73, 218, 255, .35);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.zmc-presu-recalcular:hover { color: #fff; border-color: var(--e4-cyan); background: rgba(56, 231, 255, .12); }
.zmc-presu-recalcular:disabled { opacity: .5; cursor: default; }