/* ============================================================
   EXTRAS.CSS
   Funcionalidades compartidas entre módulos (Caja y Cotizaciones):
   - Filtros de fecha con rango personalizado
   - Popovers de opciones de exportación
   - Modales de configuración y reporte de comisiones
   Cargado tanto en caja.html como en index.html.
   ============================================================ */

/* ── Preloader de autenticación ── */
#app-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity 0.28s ease;
}

#app-preloader.app-preloader--saliendo {
  opacity: 0;
  pointer-events: none;
}

#app-preloader img {
  width: 130px;
  opacity: .88;
}

#app-preloader-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  animation: appPlSpin .7s linear infinite;
}

@keyframes appPlSpin {
  to { transform: rotate(360deg); }
}

/* ----- Pill: etiqueta cuando muestra el valor del filtro de fecha ----- */
.filtro-pill__valor {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  margin-right: 4px;
  font-size: 11px;
  font-weight: var(--font-peso-medio);
  color: var(--color-acento);
  background: var(--color-acento-claro);
  border-radius: var(--radio-md);
  white-space: nowrap;
}

/* ----- Popover de fecha — sección de rango personalizado ----- */
.popover__seccion-fecha {
  padding: var(--esp-3);
  border-top: 1px solid var(--color-borde);
  background: var(--color-fondo-suave);
}

.popover__rango-fila {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}

.popover__rango-fila .form-input--sm {
  flex: 1;
  min-width: 0;
}

.popover__rango-sep {
  color: var(--color-texto-debil);
  font-size: 14px;
  font-weight: var(--font-peso-bold);
}

.popover__rango-acciones {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
}

/* Variantes pequeñas de inputs y botones (reusables) */
.form-input--sm,
.form-select--sm {
  height: 30px;
  padding: 0 var(--esp-2);
  font-size: var(--font-tam-sm);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-fondo-panel);
  color: var(--color-texto);
}

.btn--sm {
  height: 28px;
  padding: 0 var(--esp-3);
  font-size: var(--font-tam-sm);
}

/* ----- Popover de exportación ----- */
.popover__nota {
  padding: 0 var(--esp-3) var(--esp-3);
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
  line-height: 1.4;
}

.popover__item--rico {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3);
  text-align: left;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--trans-rapida);
}

.popover__item--rico:hover {
  background: var(--color-fondo-hover);
}

.popover__item-icono {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-acento-claro);
  color: var(--color-acento);
  border-radius: var(--radio-md);
}

.popover__item-cuerpo {
  flex: 1;
  min-width: 0;
}

.popover__item-titulo {
  font-size: var(--font-tam-md);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto);
  line-height: 1.3;
}

.popover__item-sub {
  margin-top: 2px;
  font-size: var(--font-tam-xs);
  color: var(--color-texto-debil);
}

/* ----- Modal: Configurar comisiones ----- */
.modal__intro {
  margin: 0 0 var(--esp-4);
  padding: var(--esp-3);
  background: var(--color-fondo-suave);
  border-left: 3px solid var(--color-acento);
  border-radius: var(--radio-md);
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
  line-height: 1.5;
}

/* Nota informativa en modales (ej: aviso de automatización al aprobar) */
.modal__ayuda {
  margin: var(--esp-3) 0 0;
  padding: var(--esp-2) var(--esp-3);
  background: #fff8e7;
  border-left: 3px solid #f5a623;
  border-radius: var(--radio-md);
  font-size: var(--font-tam-sm);
  color: #7a5c00;
  line-height: 1.5;
}

/* ----- Perfil: cambiar contraseña ----- */
.input-pwd-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-pwd-wrap .form-input {
  padding-right: 36px;
  width: 100%;
}

.input-pwd-toggle {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-texto-suave);
  display: flex;
  align-items: center;
}

.input-pwd-toggle:hover {
  color: var(--color-texto);
}

.form-ayuda {
  font-size: var(--font-tam-xs);
  color: var(--color-texto-debil);
  margin-top: 4px;
}

.form-error {
  font-size: var(--font-tam-sm);
  color: #dc2626;
  margin-top: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  background: #fef2f2;
  border-left: 3px solid #dc2626;
  border-radius: var(--radio-md);
}

.hidden {
  display: none !important;
}

.config-comisiones__tabs {
  display: flex;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
}

.config-comisiones__tab {
  padding: var(--esp-2) var(--esp-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-tam-md);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto-suave);
  cursor: pointer;
  margin-bottom: -1px;
  transition: all var(--trans-rapida);
}

.config-comisiones__tab:hover {
  color: var(--color-texto);
}

.config-comisiones__tab--activo {
  color: var(--color-acento);
  border-bottom-color: var(--color-acento);
}

.tabla-config-comisiones {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-tam-md);
}

.tabla-config-comisiones th,
.tabla-config-comisiones td {
  padding: var(--esp-2) var(--esp-3);
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
  vertical-align: middle;
}

.tabla-config-comisiones th {
  font-size: var(--font-tam-xs);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--color-fondo-suave);
}

.tabla-config-comisiones__vacio {
  text-align: center;
  padding: var(--esp-6);
  color: var(--color-texto-debil);
  font-style: italic;
}

.input-pct {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100px;
}

.input-pct .form-input {
  width: 100%;
  padding-right: 24px;
  text-align: right;
}

.input-pct__suffix {
  position: absolute;
  right: var(--esp-2);
  font-size: var(--font-tam-sm);
  color: var(--color-texto-debil);
  pointer-events: none;
}

.btn-icono-mini {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radio-md);
  color: var(--color-texto-debil);
  cursor: pointer;
  transition: all var(--trans-rapida);
}

.btn-icono-mini:hover {
  background: var(--color-fondo-hover);
  color: var(--color-estado-vencido);
  border-color: var(--color-borde);
}

/* ----- Modal: Reporte de comisiones ----- */
.reporte-comisiones__filtros {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--esp-3);
  padding: var(--esp-3);
  background: var(--color-fondo-suave);
  border-radius: var(--radio-lg);
  margin-bottom: var(--esp-4);
  align-items: end;
}

.reporte-comisiones__filtros .form-grupo {
  margin: 0;
}

.form-grupo--acciones {
  display: flex;
  align-items: flex-end;
}

.reporte-comisiones__resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}

.reporte-comisiones__kpi {
  padding: var(--esp-3);
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
}

.reporte-comisiones__kpi-titulo {
  font-size: var(--font-tam-xs);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: var(--esp-2);
}

.reporte-comisiones__kpi-valor {
  font-size: 20px;
  font-weight: var(--font-peso-bold);
  color: var(--color-texto);
  line-height: 1.1;
}

.reporte-comisiones__kpi-valor.diff-pos {
  color: #059669;
}

.reporte-comisiones__kpi-valor.diff-neg {
  color: #dc2626;
}

.reporte-comisiones__kpi-sub {
  margin-top: var(--esp-1);
  font-size: var(--font-tam-xs);
  color: var(--color-texto-debil);
}

.tabla-reporte-comisiones {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-tam-md);
}

.tabla-reporte-comisiones th,
.tabla-reporte-comisiones td {
  padding: var(--esp-2) var(--esp-3);
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
}

.tabla-reporte-comisiones th {
  font-size: var(--font-tam-xs);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--color-fondo-suave);
  position: sticky;
  top: 0;
}

.tabla-reporte-comisiones .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabla-reporte-comisiones tfoot th,
.tabla-reporte-comisiones tfoot td {
  font-weight: var(--font-peso-bold);
  background: var(--color-fondo-suave);
  border-top: 2px solid var(--color-borde-fuerte);
}

.tabla-reporte-comisiones__vacio {
  text-align: center;
  padding: var(--esp-6) !important;
  color: var(--color-texto-debil);
  font-style: italic;
}

.diff-pos {
  color: #059669;
}

.diff-neg {
  color: #dc2626;
}

/* Responsive — filtros del reporte */
@media (max-width: 768px) {
  .reporte-comisiones__filtros {
    grid-template-columns: 1fr;
  }

  .reporte-comisiones__resumen {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MÓDULOS HUBSPOT: PRODUCTOS, DESCUENTOS Y CORREO
   (cotizaciones-productos.js / cotizaciones-descuentos.js /
    cotizaciones-email.js)
   ============================================================ */

/* ----- Sección colapsable del modal de cotización ----- */
.cot-seccion {
  border-top: 1px solid var(--color-borde);
  padding-top: 16px;
}

.cot-seccion__titulo {
  display: flex;
  align-items: center;
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

/* ----- Grid 2 columnas para los datos generales de la cotización ----- */
.cot-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.cot-form-grid .form-grupo {
  margin-bottom: 0;
}

.cot-form-grid .form-grupo--full {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .cot-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ----- Layout buscador | tabla de líneas ----- */
.cot-productos-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

/* Panel catálogo (izquierda) — más alto en el modal extra-ancho */
.cot-catalogo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  max-height: 340px;
}

.cot-catalogo__buscar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-borde);
  background: var(--color-fondo-suave);
}

.cot-catalogo__buscar .campo-busqueda__input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--font-tam-sm);
  color: var(--color-texto);
  padding: 0;
  height: 22px;
}

/* Lista de productos del catálogo */
.productos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.productos-lista__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-borde);
  transition: background var(--trans-rapida);
  font-size: var(--font-tam-sm);
}

.productos-lista__item:last-child {
  border-bottom: none;
}

.productos-lista__item:hover,
.productos-lista__item:focus {
  background: var(--color-fondo-hover);
  outline: none;
}

.productos-lista__vacio {
  padding: 16px 10px;
  font-size: var(--font-tam-sm);
  color: var(--color-texto-debil);
  text-align: center;
  list-style: none;
}

.prod-item__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  margin-right: 6px;
}

.prod-item__nombre {
  font-weight: var(--font-peso-medio);
  color: var(--color-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-item__sku {
  font-size: 10px;
  color: var(--color-texto-debil);
  margin-top: 1px;
}

.prod-item__precio {
  white-space: nowrap;
  font-size: 11px;
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
}

/* Panel tabla de líneas (derecha) */
.cot-lineas {
  width: 100%;
  overflow-x: auto;
}

.tabla-lineas {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-tam-sm);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
}

.tabla-lineas th:first-child,
.tabla-lineas td:first-child {
  width: 35%;
  min-width: 0;
}

.tabla-lineas th {
  padding: 8px 10px;
  background: var(--color-fondo-suave);
  font-size: var(--font-tam-xs);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
}

.tabla-lineas td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-borde);
  vertical-align: middle;
}

.tabla-lineas tr:last-child td {
  border-bottom: none;
}

.th--num,
.linea-td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.linea-td--nombre {
  min-width: 140px;
}

.linea-nombre {
  display: flex;
  flex-direction: column;
}

.linea-nombre__texto {
  font-weight: var(--font-peso-medio);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linea-nombre__desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--color-texto-debil);
  margin-top: 1px;
}

.linea-td--desc .linea-desc-wrap {
  width: 100%;
  display: flex;
  gap: 4px;
  align-items: center;
}

.linea-td--num input.form-input--sm {
  width: 100%;
  text-align: right;
}

.linea-td--desc .linea-desc-wrap input {
  flex: 1;
  min-width: 0;
}

.linea-td--desc .linea-desc-wrap select {
  flex-shrink: 0;
  width: 60px;
}

.tabla-lineas__vacio {
  text-align: center;
  padding: 20px 12px;
  color: var(--color-texto-debil);
  font-style: italic;
}

/* ----- Descuento global ----- */
.cot-descuentos {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--color-fondo-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
}

.cot-descuentos__titulo {
  font-size: var(--font-tam-xs);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.cot-descuentos__fila {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ----- Resumen de totales ----- */
.cot-resumen {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.cot-resumen__tabla {
  border-collapse: collapse;
  font-size: var(--font-tam-sm);
  min-width: 240px;
}

.cot-resumen__label {
  padding: 4px 12px 4px 0;
  color: var(--color-texto-suave);
  white-space: nowrap;
}

.cot-resumen__valor {
  padding: 4px 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-peso-medio);
  white-space: nowrap;
}

.cot-resumen__fila--total .cot-resumen__label,
.cot-resumen__fila--total .cot-resumen__valor {
  font-size: 15px;
  font-weight: var(--font-peso-bold);
  border-top: 2px solid var(--color-texto);
  padding-top: 8px;
  color: var(--color-texto);
}

/* Responsive */
@media (max-width: 680px) {
  .cot-productos-layout {
    grid-template-columns: 1fr;
  }

  .cot-catalogo {
    max-height: 180px;
  }
}

/* ============================================================
   AUTOCOMPLETE DE CONTACTOS
   (#contacto-autocomplete-wrap / #contacto-sugerencias)
   ============================================================ */

.contacto-autocomplete {
  position: relative;
}

.contacto-sugerencias {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--color-fondo-panel, #fff);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  max-height: 220px;
  overflow-y: auto;
}

.contacto-sugerencias__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background var(--trans-rapida);
  outline: none;
}

.contacto-sugerencias__item:hover,
.contacto-sugerencias__item:focus {
  background: var(--color-fondo-hover);
}

.contacto-sug__nombre {
  font-size: var(--font-tam-md);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacto-sug__empresa {
  font-size: var(--font-tam-xs);
  color: var(--color-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacto-sug__email {
  font-size: var(--font-tam-xs);
  color: var(--color-texto-debil);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacto-sug__tipo {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--font-peso-medio);
  padding: 1px 6px;
  border-radius: 99px;
  line-height: 1.6;
  align-self: flex-start;
}

.contacto-sug__tipo--contacto {
  background: var(--color-fondo-hover);
  color: var(--color-texto-suave);
}

.contacto-sug__tipo--empresa {
  background: #e8f0fe;
  color: #1a73e8;
}

.contacto-sugerencias__vacio {
  padding: 10px 14px;
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
  line-height: 1.4;
  cursor: default;
}

.contacto-sug__hint {
  display: block;
  margin-top: 4px;
  font-size: var(--font-tam-xs);
  color: var(--color-texto-debil);
}

/* ============================================================
   HINT DE CLIENTE VINCULADO DESDE DEAL
   ============================================================ */

.form-hint {
  margin: var(--esp-1) 0 0;
  font-size: var(--font-tam-xs);
  line-height: 1.5;
  color: var(--color-texto-suave);
}

.deal-hint {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--radio-sm);
}

.deal-hint--cargando {
  color: var(--color-texto-suave);
}

.deal-hint--ok {
  color: #065f46;
  background: #d1fae5;
}

.deal-hint--aviso {
  color: #92400e;
  background: #fef3c7;
}

.deal-hint--info {
  color: var(--color-texto-suave);
  background: var(--color-fondo-suave);
}

.deal-hint__limpiar {
  margin-left: var(--esp-2);
  font-size: var(--font-tam-xs);
  font-weight: var(--font-peso-semibold);
  color: inherit;
  background: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  opacity: 0.8;
}

.deal-hint__limpiar:hover {
  opacity: 1;
}

/* ============================================================
   AUTOCOMPLETE DE PRODUCTOS — cotizaciones (dropdown flotante)
   ============================================================ */
.prod-autocomplete__lista {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--color-fondo-panel, #fff);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  max-height: 260px;
  overflow-y: auto;
}

.prod-autocomplete__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background var(--trans-rapida);
}

.prod-autocomplete__item:hover,
.prod-autocomplete__item:focus {
  background: var(--color-fondo-hover);
  outline: none;
}

.prod-ac__nombre {
  flex: 1;
  font-size: var(--font-tam-md);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-ac__precio {
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-semibold);
  color: var(--color-acento);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ============================================================
   PANEL LATERAL: Detalle de cotización / movimiento
   El panel vive dentro de .contenido__body como hermano flex
   de .bloque-tabla — no usa position:fixed ni estilos inline.
   ============================================================ */

/* Fila flex que contiene la tabla y el panel lado a lado */
.contenido__body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Contenedor deslizable del panel: arranca en width:0 */
.panel-detalle {
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  transition: width 240ms ease-out;
  margin: 0 0 var(--esp-6) 0;
}

.panel-detalle.abierto {
  width: calc(420px + var(--esp-6));
}

/* Tarjeta visual: borde, radio, fondo */
.panel-detalle__card {
  flex-shrink: 0;
  width: 420px;
  min-height: 0;
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header mínimo: "Vista previa" + botón cerrar */
.panel-detalle__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-3) var(--esp-5);
  border-bottom: 1px solid var(--color-borde);
  flex-shrink: 0;
}

.panel-detalle__vp-label {
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto-suave);
}

/* Bloque highlight (título, valores, botones de acción) */
.panel-detalle__highlight {
  padding: var(--esp-5);
  border-bottom: 1px solid var(--color-borde);
}

.panel-detalle__highlight-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--esp-3);
}

/* Description list para valor / número / estado */
.panel-detalle__dl {
  margin: var(--esp-3) 0 var(--esp-4);
}

.panel-detalle__dl dt {
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
  font-weight: var(--font-peso-medio);
  margin-bottom: 2px;
}

.panel-detalle__dl dd {
  font-size: var(--font-tam-md);
  color: var(--color-texto);
  margin: 0 0 var(--esp-3);
}

.panel-detalle__dl dd:last-child {
  margin-bottom: 0;
}

/* Texto vacío en secciones sin contenido */
.panel-detalle__vacio {
  font-size: var(--font-tam-sm);
  color: var(--color-texto-debil);
  text-align: center;
  padding: var(--esp-4) var(--esp-5);
  margin: 0;
}

.panel-detalle__cerrar {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-suave);
  border-radius: 50%;
  transition: background-color var(--trans-rapida);
  margin-left: var(--esp-2);
}

.panel-detalle__cerrar:hover {
  background-color: var(--color-fondo-hover);
}

.panel-detalle__titulo {
  font-size: var(--font-tam-xl);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto);
  margin-bottom: var(--esp-4);
  line-height: 1.3;
}

.panel-detalle__campo-stacked {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--esp-3);
}

.panel-detalle__campo-label {
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
  font-weight: var(--font-peso-medio);
  margin-bottom: 2px;
}

.panel-detalle__campo-valor {
  font-size: var(--font-tam-md);
  color: var(--color-texto);
}

.panel-detalle__valor-grande {
  font-size: var(--font-tam-lg);
  font-weight: var(--font-peso-semibold);
  font-variant-numeric: tabular-nums;
}

/* Acciones redondas estilo HubSpot: icono + label */
.panel-detalle__acciones--cot {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--color-borde);
}

.panel-detalle__accion-circ {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--font-tam-xs);
  color: var(--color-texto-suave);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--esp-1);
  border-radius: var(--radio-md);
  transition: background var(--trans-rapida), color var(--trans-rapida);
}

.panel-detalle__accion-circ:hover {
  background: var(--color-fondo-hover);
  color: var(--color-texto-link);
}

.panel-detalle__accion-icono {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-fondo-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-link);
  transition: background var(--trans-rapida);
}

.panel-detalle__accion-circ:hover .panel-detalle__accion-icono {
  background: var(--color-acento-claro);
}

.panel-detalle__body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.panel-detalle__seccion {
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--color-borde);
}

.panel-detalle__seccion:last-child {
  border-bottom: none;
}

.panel-detalle__seccion-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-tam-md);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto);
  margin-bottom: var(--esp-3);
  cursor: pointer;
  user-select: none;
}

.chevron-seccion {
  fill: currentColor;
  transition: transform var(--trans-rapida);
  margin-right: 4px;
}

.panel-detalle__seccion--colapsable.colapsado .chevron-seccion {
  transform: rotate(-90deg);
}

.panel-detalle__seccion--colapsable.colapsado .panel-detalle__seccion-cuerpo {
  display: none;
}

.tabla-cotizaciones tbody td .celda-titulo__link,
.tabla-cotizaciones tbody td .btn-vista-previa-fila {
  pointer-events: auto;
}

/* Vista previa: botón inline junto al texto de la celda de descripción */
.tabla-cotizaciones tbody tr td.td-vista-previa {
  position: relative;
  pointer-events: auto;
  /* rehabilita el área completa para no perder tr:hover en el gap */
}

.vista-previa__logo-img {
  display: block;
  max-width: 180px;
  height: auto;
}

.btn-vista-previa-fila {
  display: none;
  height: 22px;
  padding: 0 var(--esp-3);
  margin-left: var(--esp-3);
  font-size: var(--font-tam-xs);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto);
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
  transition: background var(--trans-rapida);
  pointer-events: auto;
}

.btn-vista-previa-fila:hover {
  background: var(--color-fondo-hover);
}

.tabla-cotizaciones tbody tr:hover .btn-vista-previa-fila,
.tabla-cotizaciones tbody tr.fila-activa .btn-vista-previa-fila {
  display: inline-flex;
  align-items: center;
}

/* Fila activa: resaltada cuando el panel está abierto */
.tabla-cotizaciones tbody tr.fila-activa {
  background-color: var(--color-fondo-selec);
}

/* Responsive */
@media (max-width: 1100px) {
  .panel-detalle__card {
    width: 380px;
  }

  .panel-detalle.abierto {
    width: calc(380px + var(--esp-6));
  }
}

@media (max-width: 768px) {
  .contenido__body {
    flex-direction: column;
  }

  .panel-detalle.abierto {
    width: 100%;
    height: 280px;
  }

  .panel-detalle__card {
    width: 100%;
    margin: 0 var(--esp-4) var(--esp-4);
  }
}

/* ============================================================
   VISTA PREVIA PÚBLICA (Overlay full-screen estilo cliente)
   ============================================================ */
.vista-previa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 62, 80, 0.55);
  z-index: 400;
  overflow-y: auto;
  padding: 40px 16px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.vista-previa-overlay[hidden] {
  display: none;
}

.vista-previa {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 920px;
  border-radius: var(--radio-lg);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
  padding: 48px 64px 64px;
}

.vista-previa__cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d3e50;
  color: #fff;
  border-radius: var(--radio-md);
  cursor: pointer;
  transition: background var(--trans-rapida);
}

.vista-previa__cerrar:hover {
  background: #1f2c3a;
}

.vista-previa__logo {
  text-align: center;
  margin-bottom: var(--esp-6);
}

.vista-previa__logo-texto {
  display: inline-block;
  font-size: 36px;
  font-weight: var(--font-peso-bold);
  color: #6b46c1;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #6b46c1 0%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vista-previa__titulo {
  text-align: center;
  font-size: 24px;
  font-weight: var(--font-peso-bold);
  color: var(--color-texto);
  margin-bottom: var(--esp-8);
}

.vista-previa__partes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-8);
  margin-bottom: var(--esp-8);
}

.vista-previa__parte {
  font-size: var(--font-tam-md);
  color: var(--color-texto);
  line-height: 1.6;
}

.vista-previa__parte--derecha {
  text-align: left;
}

.vista-previa__parte-nombre {
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto);
  margin-bottom: 2px;
}

.vista-previa__parte-detalle {
  color: var(--color-texto-suave);
  font-size: var(--font-tam-md);
}

.vista-previa__total-resumen {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--esp-3);
  border-bottom: 2px solid var(--color-texto);
  margin-bottom: var(--esp-4);
}

.vista-previa__total-label {
  font-size: var(--font-tam-lg);
  font-weight: var(--font-peso-bold);
  color: var(--color-texto);
}

.vista-previa__total-valor {
  font-size: 22px;
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto);
  font-variant-numeric: tabular-nums;
}

.vista-previa__tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--esp-6);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  overflow: hidden;
}

.vista-previa__tabla th {
  background: var(--color-fondo-suave);
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--esp-3) var(--esp-4);
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
}

.vista-previa__tabla th.num,
.vista-previa__tabla td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vista-previa__tabla td {
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
  font-size: var(--font-tam-md);
  color: var(--color-texto);
  vertical-align: top;
}

.vista-previa__tabla tbody tr:last-child td {
  border-bottom: none;
}

.vista-previa__resumen-cabecera td {
  background: var(--color-fondo-suave);
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vista-previa__desc-pct {
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
  margin-top: 2px;
}

.vista-previa__total-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-fondo-suave);
  border: 1px solid var(--color-borde);
  padding: var(--esp-4);
  border-radius: var(--radio-md);
  font-size: var(--font-tam-lg);
  font-weight: var(--font-peso-bold);
  margin-bottom: var(--esp-6);
  max-width: 360px;
  margin-left: auto;
}

.vista-previa__total-box span:last-child {
  font-variant-numeric: tabular-nums;
}

.vista-previa__caja {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--esp-4);
  margin-bottom: var(--esp-4);
}

.vista-previa__caja-titulo {
  font-weight: var(--font-peso-bold);
  color: var(--color-texto);
  margin-bottom: var(--esp-3);
}

.vista-previa__caja-cuerpo {
  font-size: var(--font-tam-md);
  color: var(--color-texto-suave);
  line-height: 1.55;
  white-space: pre-wrap;
}

.vista-previa__acciones {
  margin-top: var(--esp-6);
}

.btn--primario-azul {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio-md);
  font-size: var(--font-tam-md);
  font-weight: var(--font-peso-medio);
  cursor: pointer;
  transition: background var(--trans-rapida);
}

.btn--primario-azul:hover {
  background: #1d4ed8;
}

@media (max-width: 720px) {
  .vista-previa {
    padding: 32px 20px;
  }

  .vista-previa__partes {
    grid-template-columns: 1fr;
    gap: var(--esp-5);
  }
}

/* ============================================================
   MODAL AGREGAR VISTA — dos columnas: lista + panel de detalle
   ============================================================ */

.modal__body--sin-padding {
  padding: 0 !important;
  overflow: hidden;
}

.modal-vistas {
  display: flex;
  height: 440px;
}

.modal-vistas__col--lista {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-borde);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-vistas__col--detalle {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

/* Barra de búsqueda + filtro de categoría */
.modal-vistas__head {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border-bottom: 1px solid var(--color-borde);
  flex-shrink: 0;
}

.modal-vistas__buscar-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}

.modal-vistas__buscar-ico {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-texto-debil);
  pointer-events: none;
}

.modal-vistas__buscar-input {
  width: 100%;
  height: 32px;
  padding: 0 8px 0 30px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  font-size: var(--font-tam-sm);
  color: var(--color-texto);
  background: var(--color-fondo);
  outline: none;
  box-sizing: border-box;
}

.modal-vistas__buscar-input:focus {
  border-color: var(--color-acento);
  box-shadow: 0 0 0 2px var(--color-acento-claro);
}

/* Lista desplazable */
.modal-vistas__lista {
  overflow-y: auto;
  flex: 1;
  padding: var(--esp-1) 0;
}

/* Encabezado de grupo */
.modal-vistas__grupo {
  padding: var(--esp-2) var(--esp-3) var(--esp-1);
  font-size: 11px;
  font-weight: var(--font-peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-texto-debil);
  user-select: none;
}

/* Ítem de vista */
.modal-vistas__item {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 8px var(--esp-3);
  font-size: var(--font-tam-sm);
  color: var(--color-texto);
  cursor: pointer;
  user-select: none;
  transition: background var(--trans-rapida);
}

.modal-vistas__item:hover {
  background: var(--color-fondo-suave);
}

.modal-vistas__item--seleccionado {
  background: var(--color-acento-claro);
  color: var(--color-acento);
  font-weight: var(--font-peso-medio);
}

.modal-vistas__item--seleccionado .modal-vistas__item-icono {
  color: var(--color-acento);
}

.modal-vistas__item--agregada {
  cursor: default;
}

.modal-vistas__item--agregada .modal-vistas__item-nombre {
  color: var(--color-texto-suave);
}

.modal-vistas__item-icono {
  flex-shrink: 0;
  color: var(--color-texto-debil);
}

.modal-vistas__item-nombre {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-vistas__item-check {
  flex-shrink: 0;
  display: none;
  color: #00bda5;
}

.modal-vistas__item--agregada .modal-vistas__item-check {
  display: block;
}

/* Panel de detalle (columna derecha) */
.modal-vistas__detalle {
  padding: var(--esp-5);
}

.modal-vistas__detalle-cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin-bottom: var(--esp-2);
}

.modal-vistas__detalle-cabecera svg {
  color: var(--color-texto-suave);
  flex-shrink: 0;
  margin-top: 2px;
}

.modal-vistas__detalle-cabecera span {
  font-size: 15px;
  font-weight: var(--font-peso-semibold);
  color: var(--color-texto);
  line-height: 1.3;
}

.modal-vistas__detalle-desc {
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
  margin: 0 0 var(--esp-4);
  line-height: 1.5;
}

.modal-vistas__ya-agregada {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #00bda5;
  font-weight: var(--font-peso-medio);
  margin-bottom: var(--esp-3);
}

.modal-vistas__campo {
  margin-bottom: var(--esp-3);
}

.modal-vistas__campo-label {
  display: block;
  font-size: 11px;
  font-weight: var(--font-peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-texto-debil);
  margin-bottom: 4px;
}

.modal-vistas__campo-valor {
  font-size: var(--font-tam-sm);
  color: var(--color-texto);
}

.modal-vistas__vacio {
  font-size: var(--font-tam-sm);
  color: var(--color-texto-suave);
  font-style: italic;
}

.modal-vistas__filtros-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.modal-vistas__filtros-lista li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--font-tam-sm);
  color: var(--color-texto);
}

.modal-vistas__filtro-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-acento);
  flex-shrink: 0;
}

/* ============================================================
   MODAL FILTROS ACTIVOS (lápiz) y MODAL FILTROS AVANZADOS
   ============================================================ */
.filtros-activos-lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-height: 60px;
}

.filtros-activos-vacios {
  color: var(--color-texto-suave);
  font-size: var(--font-tam-md);
  padding: var(--esp-4) 0;
  text-align: center;
}

.filtro-activo-fila {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-md);
  background: var(--color-fondo-secundario);
}

.filtro-activo-fila__nombre {
  font-size: var(--font-tam-sm);
  font-weight: var(--font-peso-medio);
  color: var(--color-texto-suave);
  min-width: 120px;
}

.filtro-activo-fila__valor {
  flex: 1;
  font-size: var(--font-tam-sm);
  color: var(--color-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filtro-activo-fila__remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--color-texto-suave);
  transition: background-color var(--trans-rapida), color var(--trans-rapida);
  flex-shrink: 0;
}

.filtro-activo-fila__remover:hover {
  background-color: var(--color-borde);
  color: var(--color-texto);
}