/* =======================================================
   LAURACALIDADE · Tabla de presupuesto estilo BCEXTREM26
   Interactiva, responsiva, modo claro/oscuro
   ======================================================= */

/* ─── Variables ───────────────────────────────────────────────────── */
:root {
  --bc-fondo:          #ffffff;
  --bc-fondo-2:        #f7f7f7;
  --bc-borde:          #d4d4d4;
  --bc-borde-fuerte:   #b0b0b0;
  --bc-texto:          #1a1a1a;
  --bc-texto-2:        #555555;
  --bc-texto-3:        #888888;
  --bc-cap-fondo:      #1f3b5c;      /* azul oscuro institucional */
  --bc-cap-texto:      #ffffff;
  --bc-sub-fondo:      #e8f0f9;
  --bc-sub-texto:      #1f3b5c;
  --bc-alt-fondo:      #f3f7fc;
  --bc-hover-fondo:    #dceeff;
  --bc-total-fondo:    #1f3b5c;
  --bc-total-texto:    #ffffff;
  --bc-rojo:           #c0392b;
  --bc-verde:          #1e7e34;
  --bc-amarillo:       #e67e22;
  --bc-acento:         #2563eb;
  --bc-sombra:         0 2px 16px rgba(31,59,92,.12), 0 1px 4px rgba(0,0,0,.06);
  --bc-radio:          10px;
  --bc-fuente-mono:    'Courier New', Courier, monospace;
  --bc-fuente-tabla:   system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bc-transicion:     0.18s ease;
}

[data-theme='dark'] {
  --bc-fondo:          #1c1c1e;
  --bc-fondo-2:        #2c2c2e;
  --bc-borde:          #3a3a3c;
  --bc-borde-fuerte:   #58585a;
  --bc-texto:          #e5e5ea;
  --bc-texto-2:        #aeaeb2;
  --bc-texto-3:        #636366;
  --bc-cap-fondo:      #0a2240;
  --bc-cap-texto:      #e5e5ea;
  --bc-sub-fondo:      #1a2d40;
  --bc-sub-texto:      #90bce8;
  --bc-alt-fondo:      #23303e;
  --bc-hover-fondo:    #1e3a56;
  --bc-total-fondo:    #0a2240;
  --bc-total-texto:    #e5e5ea;
  --bc-rojo:           #ff6b6b;
  --bc-verde:          #4cd964;
  --bc-acento:         #4fa3ff;
  --bc-sombra:         0 2px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
}

/* ─── Contenedor principal ──────────────────────────────────────────── */
.bc-presupuesto {
  font-family:    var(--bc-fuente-tabla);
  background:     var(--bc-fondo);
  border:         1px solid var(--bc-borde);
  border-radius:  var(--bc-radio);
  box-shadow:     var(--bc-sombra);
  overflow:       hidden;
  margin:         0 auto;
  max-width:      100%;
  transition:     background var(--bc-transicion), border-color var(--bc-transicion);
}

/* ─── Cabecera ─────────────────────────────────────────────────────── */
.bc-header {
  background:       var(--bc-cap-fondo);
  padding:          20px 24px 18px;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              16px;
  flex-wrap:        wrap;
}

.bc-logo-banda {
  display:    flex;
  align-items: center;
  gap:        14px;
  flex:       1 1 auto;
  min-width:  0;
}

.bc-logo {
  height:       52px;
  width:        auto;
  object-fit:   contain;
  border-radius: 6px;
  background:   #fff;
  padding:      3px 6px;
  flex-shrink:  0;
}

.bc-header-datos {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  min-width:      0;
}

.bc-empresa {
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--bc-cap-texto);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.bc-subtitulo {
  font-size:  0.74rem;
  color:      rgba(255,255,255,.70);
  letter-spacing: .3px;
}

.bc-resumen-rapido {
  display:    flex;
  gap:        16px;
  flex-wrap:  wrap;
  flex-shrink: 0;
}

.bc-kpi {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            2px;
}

.bc-kpi-label {
  font-size:  0.68rem;
  color:      rgba(255,255,255,.60);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.bc-kpi-valor {
  font-size:   1.0rem;
  font-weight: 700;
  color:       var(--bc-cap-texto);
}

.bc-kpi-total .bc-kpi-valor {
  color:       #7ecbff;
  font-size:   1.15rem;
}

/* ─── Tabla wrap (scroll horizontal en móvil) ──────────────────────── */
.bc-tabla-wrap {
  overflow-x:            auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ─── Tabla ─────────────────────────────────────────────────────────── */
.bc-tabla {
  width:           100%;
  min-width:       640px;
  border-collapse: separate;
  border-spacing:  0;
  font-size:       0.84rem;
  color:           var(--bc-texto);
  transition:      color var(--bc-transicion);
}

/* Cabecera de tabla */
.bc-thead-row {
  background: #e8f0f9;
  position:   sticky;
  top:        0;
  z-index:    2;
}

[data-theme='dark'] .bc-thead-row {
  background: #1a2d40;
}

.bc-th {
  padding:        9px 12px;
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color:          var(--bc-sub-texto);
  border-bottom:  2px solid var(--bc-borde-fuerte);
  white-space:    nowrap;
  user-select:    none;
}

.bc-th-cod  { width: 11%; }
.bc-th-desc { width: auto; }
.bc-th-ud   { width: 6%;  text-align: center; }
.bc-th-cant { width: 10%; text-align: right; }
.bc-th-pu   { width: 13%; text-align: right; }
.bc-th-imp  { width: 13%; text-align: right; }

/* Fila capítulo */
.bc-row-capitulo {
  background: var(--bc-cap-fondo);
}

.bc-td-capitulo {
  padding:       8px 14px;
  font-size:     0.72rem;
  font-weight:   700;
  letter-spacing: 1.2px;
  color:         var(--bc-cap-texto);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Fila partida */
.bc-row-partida {
  background:  var(--bc-fondo);
  transition:  background var(--bc-transicion);
  cursor:      pointer;
  outline:     none;
}

.bc-row-alt {
  background: var(--bc-fondo-2);
}

[data-theme='dark'] .bc-row-alt {
  background: var(--bc-alt-fondo);
}

.bc-row-partida:hover,
.bc-row-partida:focus-visible {
  background: var(--bc-hover-fondo);
}

.bc-td {
  padding:     8px 12px;
  border-bottom: 1px solid var(--bc-borde);
  vertical-align: top;
  line-height: 1.4;
  transition:  border-color var(--bc-transicion);
}

.bc-td-cod {
  font-family: var(--bc-fuente-mono);
  font-size:   0.75rem;
  color:       var(--bc-texto-2);
  white-space: nowrap;
}

.bc-td-desc {
  min-width: 200px;
}

/* Descripción corta visible por defecto */
.bc-desc-short {
  display:     block;
  font-weight: 500;
  color:       var(--bc-texto);
}

/* Descripción larga solo visible en tooltip / expandido */
.bc-desc-full {
  display:    none;
  font-size:  0.76rem;
  color:      var(--bc-texto-3);
  margin-top: 3px;
}

.bc-row-partida:hover  .bc-desc-full,
.bc-row-partida:focus-visible .bc-desc-full,
.bc-row-expanded .bc-desc-full {
  display: block;
}

.bc-td-ud {
  text-align: center;
  color:      var(--bc-texto-3);
  font-size:  0.78rem;
  white-space: nowrap;
}

.bc-td-cant,
.bc-td-pu,
.bc-td-imp {
  text-align:  right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bc-td-cant { color: var(--bc-texto-2); }
.bc-td-pu   { color: var(--bc-texto-2); }
.bc-td-imp  { font-weight: 600; color: var(--bc-texto); }

/* Fila subtotal capítulo */
.bc-row-subtotal {
  background: var(--bc-sub-fondo);
  transition: background var(--bc-transicion);
}

.bc-td-subtotal-label {
  padding:        8px 14px;
  font-size:      0.74rem;
  font-weight:    700;
  letter-spacing: .5px;
  color:          var(--bc-sub-texto);
  border-bottom:  2px solid var(--bc-borde-fuerte);
  text-align:     right;
}

.bc-td-subtotal-val {
  padding:        8px 12px;
  font-weight:    700;
  font-size:      0.86rem;
  text-align:     right;
  color:          var(--bc-sub-texto);
  border-bottom:  2px solid var(--bc-borde-fuerte);
  white-space:    nowrap;
  font-variant-numeric: tabular-nums;
}

/* ─── Panel de totales ──────────────────────────────────────────── */
.bc-totales {
  display:     flex;
  align-items: flex-start;
  justify-content: space-between;
  gap:         24px;
  padding:     20px 24px;
  flex-wrap:   wrap;
  border-top:  2px solid var(--bc-borde-fuerte);
  background:  var(--bc-fondo-2);
  transition:  background var(--bc-transicion), border-color var(--bc-transicion);
}

.bc-totales-tabla {
  flex:    1 1 320px;
  display: flex;
  flex-direction: column;
  gap:     4px;
  min-width: 0;
}

.bc-total-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             16px;
  padding:         7px 12px;
  font-size:       0.84rem;
  color:           var(--bc-texto-2);
  border-bottom:   1px solid var(--bc-borde);
  font-variant-numeric: tabular-nums;
}

.bc-total-row:last-child { border-bottom: none; }

.bc-total-row > span:last-child {
  font-weight: 600;
  white-space: nowrap;
}

.bc-total-base {
  background:  #eaf2fb;
  font-size:   0.92rem;
  font-weight: 700;
  color:       var(--bc-sub-texto);
  border-radius: 6px;
  margin-top:  4px;
}

[data-theme='dark'] .bc-total-base {
  background: #1a2d40;
  color:      #90bce8;
}

.bc-total-iva {
  color:    var(--bc-texto-3);
  font-size: 0.82rem;
  font-style: italic;
}

.bc-total-final {
  background:   var(--bc-total-fondo);
  color:        var(--bc-total-texto);
  font-size:    1.05rem;
  font-weight:  800;
  border-radius: 8px;
  margin-top:   8px;
  padding:      10px 14px;
  border:       none;
}

.bc-total-final > span:last-child {
  color: #7ecbff;
  font-size: 1.1rem;
}

/* Rango ±10% */
.bc-rango {
  flex:           0 0 auto;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            6px;
  padding:        14px 18px;
  background:     var(--bc-cap-fondo);
  border-radius:  var(--bc-radio);
  min-width:      200px;
}

.bc-rango-label {
  font-size:  0.70rem;
  color:      rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.bc-rango-val {
  font-size:   1.25rem;
  font-weight: 800;
  color:       #7ecbff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bc-rango-nota {
  font-size:  0.68rem;
  color:      rgba(255,255,255,.55);
  text-align: right;
  max-width:  200px;
  line-height: 1.4;
}

/* ─── Nota al pie ───────────────────────────────────────────────────── */
.bc-nota {
  padding:     14px 24px;
  font-size:   0.76rem;
  color:       var(--bc-texto-3);
  border-top:  1px solid var(--bc-borde);
  background:  var(--bc-fondo);
  line-height: 1.5;
  transition:  background var(--bc-transicion), color var(--bc-transicion);
}

.bc-nota strong {
  color: var(--bc-texto-2);
}

/* ─── Responsivo ────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .bc-header {
    padding:        14px 16px 12px;
    flex-direction: column;
    align-items:    flex-start;
    gap:            12px;
  }

  .bc-resumen-rapido {
    flex-direction: row;
    justify-content: flex-start;
    gap:            12px;
    width:          100%;
  }

  .bc-kpi {
    align-items: flex-start;
  }

  .bc-totales {
    flex-direction: column;
    padding:        16px;
    gap:            16px;
  }

  .bc-rango {
    width:      100%;
    align-items: flex-start;
  }

  .bc-rango-nota {
    text-align: left;
    max-width:  none;
  }

  /* En móvil: la tabla hace scroll horizontal */
  .bc-tabla {
    min-width: 540px;
    font-size:  0.80rem;
  }

  .bc-th, .bc-td {
    padding: 6px 8px;
  }

  /* Esconder descripción larga en móvil en hover (usa tap) */
  .bc-row-partida:focus-visible .bc-desc-full {
    display: block;
  }
}

@media (max-width: 440px) {
  .bc-empresa {
    font-size: 0.90rem;
  }

  .bc-logo {
    height: 38px;
  }

  .bc-rango-val {
    font-size: 1.05rem;
  }

  .bc-total-final {
    font-size: 0.92rem;
  }
}

/* ─── Animación entrada ─────────────────────────────────────────────── */
@keyframes bc-slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bc-presupuesto {
  animation: bc-slide-in 0.38s cubic-bezier(.16,1,.3,1) both;
}

@media (prefers-reduced-motion: reduce) {
  .bc-presupuesto { animation: none; }
}

/* ─── Botón WhatsApp del presupuesto ──────────────────────────────── */
.btn-whatsapp-budget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 22px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 211, 102, .35);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-whatsapp-budget:hover,
.btn-whatsapp-budget:focus-visible {
  background: #1ebe5b;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, .45);
}
.pp-whatsapp-wrap { text-align: center; padding: 4px 0 14px; }

/* ─── Impreso (PDF nativo del navegador) ──────────────────────────── */
@media print {
  .bc-tabla-wrap  { overflow: visible; }
  .bc-tabla       { min-width: 0; font-size: 9pt; }
  .bc-row-partida { break-inside: avoid; }
  .bc-presupuesto { box-shadow: none; border: 1px solid #999; border-radius: 0; }
  .bc-header      { background: #1f3b5c !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bc-row-capitulo { background: #1f3b5c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bc-total-final  { background: #1f3b5c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bc-rango        { background: #1f3b5c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ═══ Cabecera del resumen: rejilla ordenada (filas y columnas alineadas) ═══ */
.bc-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 18px 22px;
}

.bc-resumen-rapido {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.bc-kpi {
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 0;
}

.bc-kpi-valor {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 560px) {
  .bc-resumen-rapido { grid-template-columns: 1fr 1fr; }
  .bc-kpi-total { grid-column: 1 / -1; }
}

/* Columnas de la tabla simplificada (sin precios por partida) */
.bc-th-cod  { width: 9%;  }
.bc-th-cant { width: 16%; text-align: right; }
.bc-th-ud   { width: 10%; text-align: left; padding-left: 14px; }
.bc-td-cant { text-align: right; font-variant-numeric: tabular-nums; }
.bc-td-ud   { text-align: left; padding-left: 14px; opacity: .75; }