/* =========================================================
   ABN Pipe Systems — Asistente comercial
   style.css (completo + consolidado)

   - Recupera layout “fondo verde + panel blanco centrado”
   - Mantiene IDs/clases actuales
   - Incluye bloque WATER SLIDE
   - Buscador en una sola línea (con responsive)
   - Presupuesto: fuente compacta + cabeceras alineadas
   - FIX DEFINITIVO: dar más ancho a “Descripción” y pegar Cantidad/U.M. a PVP
========================================================= */

:root{
  --abn-green: #B8C320;
  --abn-green-dark: #9aa31a;
  --abn-olive-bg: #788b2a;
  --abn-text: #111;
  --abn-muted: rgba(0,0,0,.70);
  --abn-border: rgba(0,0,0,.14);
  --abn-soft: rgba(0,0,0,.06);
  --abn-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* =========================
   BASE
========================= */
*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  padding: 24px 0;
  background: var(--abn-olive-bg);
  color: var(--abn-text);
  font-family: Arial, Helvetica, sans-serif;
}

/* =========================
   CONTENEDOR PRINCIPAL
========================= */
.contenedor-premium{
  width: min(1180px, 94%);
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--abn-shadow);
  padding: 28px 34px 18px;
}

/* =========================
   HEADER (logos)
========================= */
.header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 10px;
}

.logo{
  display: block;
  height: 120px;
  width: auto;
}

.tarifas-img{
  display: block;
  height: 130px;
  width: auto;
}

/* =========================
   TÍTULO
========================= */
.titulo-centrado{
  text-align: center;
  margin: 8px 0 16px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: .2px;
}

/* =========================
   CATEGORÍAS
========================= */
#categorias{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 10px 0 10px;
}

.categoria{
  border: 1px solid rgba(0,0,0,.22);
  background: #efefef;
  color: #111;
  padding: 12px 26px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 6px 14px rgba(0,0,0,.12);
}
.categoria:hover{ filter: brightness(1.01); }

.categoria.activa{
  background: var(--abn-green);
  border-color: rgba(0,0,0,.30);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 10px 18px rgba(0,0,0,.14);
}

/* =========================
   SUBCATEGORÍAS
========================= */
#subcategorias{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 18px;
}

.subcat-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.subcat{
  border: 1px solid rgba(0,0,0,.22);
  background: #efefef;
  color: #111;
  padding: 10px 18px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .3px;
  min-width: 140px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 6px 14px rgba(0,0,0,.12);
}
.subcat.activa{
  background: var(--abn-green);
  color: #fff;
  border-color: rgba(0,0,0,.30);
}

.subcat-ficha-slot{
  min-height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Botón ficha técnica (inyectado por JS) */
.abn-ficha-btn{
  border: 1px solid rgba(0,0,0,.20);
  background: #efefef;
  color: #111;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 6px 14px rgba(0,0,0,.10);
}
.abn-ficha-btn:hover{ filter: brightness(1.01); }

/* =========================
   BUSCADOR + DESCUENTOS + BOTONES
========================= */
.buscador{
  display: flex;
  flex-wrap: nowrap;              /* misma línea */
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
}

/* Inputs */
#buscar{
  flex: 0 1 420px;
  max-width: 420px;
  min-width: 260px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--abn-border);
  padding: 0 14px;
  font-size: 15px;
  outline: none;
  box-shadow: 0 1px 0 var(--abn-soft);
}

#dto1, #dto2, #dto3{
  width: 78px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--abn-border);
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  box-shadow: 0 1px 0 var(--abn-soft);
}

#dtoTotal{
  width: 110px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--abn-border);
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  box-shadow: 0 1px 0 var(--abn-soft);
}

/* Botones buscador */
.buscador button{
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.20);
  background: #efefef;
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 6px 14px rgba(0,0,0,.12);
  white-space: nowrap;
}

/* Botones “verdes” */
#modificarDtoGlobal,
#verPresupuesto{
  background: var(--abn-green);
  border-color: rgba(0,0,0,.25);
  color: #fff;
}
#modificarDtoGlobal:hover,
#verPresupuesto:hover{ filter: brightness(1.02); }

/* Limpiar en rojo */
#limpiar{
  background: #dc3545 !important;
  color: #fff !important;
  border-color: rgba(0,0,0,.25) !important;
}
#limpiar:hover{ filter: brightness(1.03); }

/* Botón nueva oferta (si se muestra en pantalla principal) */
#nuevaOferta{ background: #efefef; }

/* =========================
   TABLA TARIFA
========================= */
#tabla-tarifa{
  width: 100%;
  border: 1px solid var(--abn-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
#tabla-tarifa table{
  width: 100%;
  border-collapse: collapse;
}
#tabla-tarifa thead th{
  background: var(--abn-green);
  color: #fff;
  font-weight: 900;
  text-align: center;
  padding: 12px 10px;
  font-size: 14px;
  white-space: nowrap;
  vertical-align: middle;
}

}
#tabla-tarifa td{
  padding: 10px 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
}
#tabla-tarifa tbody tr:nth-child(even){
  background: rgba(0,0,0,.02);
}

/* Botón + */
.btnAdd{
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.20);
  background: var(--abn-green);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.btnAdd:hover{ filter: brightness(1.02); }

.resaltadoABN{
  background: rgba(184,195,32,.25);
  border-radius: 4px;
  padding: 0 2px;
}

/* =========================
   RESULTADO ÚNICO
========================= */
#resultado-unico-container{ width: 100%; }
#resultado-unico{ width: 100%; border-collapse: collapse; }

/* =========================
   PRESUPUESTO
========================= */
#presupuesto-container{ width: 100%; }

#presupuesto-container table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--abn-border);
  border-radius: 10px;
  overflow: hidden;
}

#presupuesto-container thead th{
  background: var(--abn-green);
  color: #fff;
  font-weight: 900;
  padding: 10px 8px;
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

#presupuesto-container td{
  padding: 9px 8px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: 11px;
  line-height: 1.15;
}

/* Descripción: compacta + máximo 2 líneas */
#presupuesto-container tbody td:nth-child(2){
  font-size: 10.5px;
  line-height: 1.05;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Acciones */
.acciones{
  display: inline-flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

.btnEdit{
  background: #6c757d;
  color: #fff;
  border: 1px solid rgba(0,0,0,.20);
  border-radius: 10px;
  padding: 5px 8px;
  cursor: pointer;
  font-weight: 800;
  font-size: 11px;
}

.btnDelete{
  background: #dc3545;
  color: #fff;
  border: 1px solid rgba(0,0,0,.20);
  border-radius: 10px;
  padding: 5px 8px;
  cursor: pointer;
  font-weight: 800;
  font-size: 11px;
}

/* Botones verdes en presupuesto */
.botonVerde{
  background: var(--abn-green);
  color: #fff;
  border: 1px solid rgba(0,0,0,.22);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 900;
  margin-top: 10px;
  margin-right: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 8px 16px rgba(0,0,0,.12);
}

.btn-danger{
  background: #dc3545;
  color: #fff;
  border: 1px solid rgba(0,0,0,.22);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 900;
  margin-top: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 8px 16px rgba(0,0,0,.12);
}

/* Filas especiales */
.fila-total-oferta td{ font-weight: 900; }
.fila-observaciones td{ background: rgba(0,0,0,.03); }
.fila-portes td{ background: rgba(0,0,0,.02); }

/* =========================
   TOAST
========================= */
#toastOferta{
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #28a745;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  display: none;
  z-index: 99999;
}

/* =========================
   FOOTER
========================= */
footer{
  text-align: center;
  margin-top: 18px;
  padding-top: 10px;
  color: rgba(0,0,0,.65);
  font-size: 13px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1020px){
  .buscador{ flex-wrap: wrap; }
  #buscar{ flex: 1 1 100%; max-width: 100%; }
}

@media (max-width: 920px){
  body{ padding: 14px 0; }
  .contenedor-premium{ padding: 18px 16px 14px; }
  .logo{ height: 95px; }
  .tarifas-img{ height: 105px; }
  .titulo-centrado{ font-size: 34px; }
}

/* =========================================================
   ✅ WATER SLIDE (Tarifas)
   - Solo cuando body tenga class="abn-ws"
========================================================= */

/* Ocultar descuentos */
body.abn-ws #dto1,
body.abn-ws #dto2,
body.abn-ws #dto3,
body.abn-ws #dtoTotal{
  display: none !important;
}

/* Compat selector */
#wsTarifa{
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 0 10px;
  font-weight: 700;
}

/* Selector tarifa “nuevo” */
#abnWsTarifaWrap{
  display: none;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#abnWsTarifaWrap label{
  font-size: 12px;
  font-weight: 700;
  opacity: .85;
}
#abnWsTarifaSel{
  height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  cursor: pointer;
}
.buscador #abnWsTarifaWrap{ justify-content: flex-start; }

/* Tabla WATER SLIDE (6 columnas) */
body.abn-ws #tabla-tarifa thead th:nth-child(3),
body.abn-ws #tabla-tarifa tbody td:nth-child(3),
body.abn-ws #tabla-tarifa thead th:nth-child(4),
body.abn-ws #tabla-tarifa tbody td:nth-child(4),
body.abn-ws #tabla-tarifa thead th:nth-child(5),
body.abn-ws #tabla-tarifa tbody td:nth-child(5){
  width: 10%;
  text-align: right;
  padding-right: 10px;
  white-space: nowrap;
}
body.abn-ws #tabla-tarifa thead th:nth-child(6),
body.abn-ws #tabla-tarifa tbody td:nth-child(6){
  width: 12%;
  text-align: center;
  white-space: nowrap;
}

/* =========================================================
   ✅ FIX DEFINITIVO (PRESUPUESTO):
   Más ancho a "Descripción" y pegar Cantidad/U.M. a PVP
========================================================= */

#presupuesto-container table{
  table-layout: fixed !important;
  width: 100% !important;
}

/* 1 Código | 2 Descripción | 3 Cantidad | 4 U.M. | 5 PVP | 6 Dto | 7 Neto | 8 Total | 9 Acción */
#presupuesto-container thead th:nth-child(1),
#presupuesto-container tbody td:nth-child(1){ width: 150px !important; }

#presupuesto-container thead th:nth-child(3),
#presupuesto-container tbody td:nth-child(3){
  width: 90px !important;
  text-align: right !important;
  padding-right: 2px !important;
  white-space: nowrap !important;
}

#presupuesto-container thead th:nth-child(4),
#presupuesto-container tbody td:nth-child(4){
  width: 48px !important;
  text-align: center !important;
  padding-left: 2px !important;
  padding-right: 0px !important;   /* <- pegado real con PVP */
  white-space: nowrap !important;
}

#presupuesto-container thead th:nth-child(5),
#presupuesto-container tbody td:nth-child(5){
  width: 78px !important;
  text-align: right !important;
  padding-left: 0px !important;    /* <- pegado real con U.M. */
  white-space: nowrap !important;
}

#presupuesto-container thead th:nth-child(6),
#presupuesto-container tbody td:nth-child(6){ width: 150px !important; text-align: center !important; }

#presupuesto-container thead th:nth-child(7),
#presupuesto-container tbody td:nth-child(7){ width: 78px !important; text-align: right !important; white-space: nowrap !important; }

#presupuesto-container thead th:nth-child(8),
#presupuesto-container tbody td:nth-child(8){ width: 92px !important; text-align: right !important; white-space: nowrap !important; }

#presupuesto-container thead th:nth-child(9),
#presupuesto-container tbody td:nth-child(9){ width: 150px !important; text-align: center !important; }

/* La Descripción se queda con TODO el ancho restante */
#presupuesto-container thead th:nth-child(2),
#presupuesto-container tbody td:nth-child(2){ width: auto !important; text-align: left !important; }

/* Código y descripción a la izquierda */
#presupuesto-container thead th:nth-child(1),
#presupuesto-container tbody td:nth-child(1){ text-align: left !important; }

/* Ajuste fino: evita “desplazamientos” por espaciado */
#presupuesto-container thead th:nth-child(3),
#presupuesto-container thead th:nth-child(4),
#presupuesto-container thead th:nth-child(5),
#presupuesto-container tbody td:nth-child(3),
#presupuesto-container tbody td:nth-child(4),
#presupuesto-container tbody td:nth-child(5){
  letter-spacing: 0 !important;
}
/* =========================================================
   ✅ FIX: Acortar DTOs para que NO se salgan los botones
   (pegar al final del style.css)
========================================================= */

#dto1, #dto2, #dto3{
  width: 58px !important;        /* antes 78px */
  padding: 0 6px !important;
  font-size: 13px !important;
}

#dtoTotal{
  width: 86px !important;        /* antes 110px */
  padding: 0 6px !important;
  font-size: 13px !important;
}

/* Opcional: el buscador un pelín más corto para ganar espacio */
#buscar{
  flex: 0 1 360px !important;    /* antes 420px */
  max-width: 360px !important;
}
/* =========================================================
   FIX: Acortar campos %Dto1 %Dto2 %Dto3 %DtoTotal
   (ponlo al FINAL del style.css)
========================================================= */

#dto1, #dto2, #dto3{
  width: 64px !important;      /* <-- más corto */
  min-width: 64px !important;
  max-width: 64px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

#dtoTotal{
  width: 92px !important;      /* <-- un poco más ancho */
  min-width: 92px !important;
  max-width: 92px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* (Opcional) si aún roza, reduce un pelín el buscador */
#buscar{
  max-width: 320px !important;
}

/* Responsive: en pantallas pequeñas, aún más compactos */
@media (max-width: 1100px){
  #dto1, #dto2, #dto3{ width: 56px !important; min-width: 56px !important; max-width: 56px !important; }
  #dtoTotal{ width: 84px !important; min-width: 84px !important; max-width: 84px !important; }
  #buscar{ max-width: 280px !important; }
}
/* =========================================================
   ✅ FIX BUSCADOR: 2 líneas
   - "Descargar PDF" abajo (centrado)
   - Lo demás en la línea 1 centrado
   - Anchos controlados (pisan el CSS inyectado por JS)
========================================================= */

/* 1) La barra puede hacer wrap y tiene aire a los lados */
.contenedor-premium .buscador{
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;

  /* “aire” lateral para que no pegue con bordes */
  padding: 0 18px !important;

  /* espacio entre elementos */
  gap: 10px 10px !important;
}

/* 2) Buscador un poco más corto */
.contenedor-premium .buscador #buscar{
  flex: 0 1 340px !important;
  max-width: 340px !important;
  min-width: 240px !important;
}

/* 3) Descuentos: tamaño razonable (ni enorme ni recortado) */
.contenedor-premium .buscador #dto1,
.contenedor-premium .buscador #dto2,
.contenedor-premium .buscador #dto3{
  width: 76px !important;
}

.contenedor-premium .buscador #dtoTotal{
  width: 110px !important;
}

/* 4) Botones un pelín más compactos (ayuda a que quepan) */
.contenedor-premium .buscador button{
  padding: 0 12px !important;
}

/* 5) Descargar PDF SIEMPRE en 2ª línea y centrado
      (cuando JS lo muestre, bajará abajo) */
.contenedor-premium .buscador #descargarPdfBtn{
  order: 999 !important;         /* se va al final */
  flex-basis: 100% !important;   /* ocupa toda la fila */
  width: fit-content !important; /* no se estira */
  margin-left: 0 !important;     /* quita el margin inline del HTML */
  justify-self: center !important;
}
/* ✅ Tabla más compacta: menos alto de fila */
#tabla-tarifa table td,
#tabla-tarifa table th,
#tabla-tarifa td,
#tabla-tarifa th {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 1.15 !important;
}

/* Opcional: texto un pelín más compacto */
#tabla-tarifa td {
  font-size: 13px !important; /* ajusta a 14 si lo ves pequeño */
}
/* FICHA TÉCNICA más pequeña */
.abn-ficha-btn{
  padding: 4px 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 3px 8px rgba(0,0,0,.10) !important;
  height: auto !important;
  min-height: 0 !important;
}

.abn-ficha-btn .abn-ficha-icon{
  font-size: 11px !important;
  line-height: 1.05 !important;
}
#tabla-tarifa table{
  table-layout: fixed; /* clave */
  width: 100%;
}

#tabla-tarifa thead th{
  text-align: center !important;
  vertical-align: middle;
}

#tabla-tarifa thead th:nth-child(1){ width: 15%; }
#tabla-tarifa thead th:nth-child(2){ width: 55%; }
#tabla-tarifa thead th:nth-child(3){ width: 10%; }
#tabla-tarifa thead th:nth-child(4){ width: 10%; }
#tabla-tarifa thead th:nth-child(5){ width: 10%; }