/* ═══════════════════════════════════════════════════════════════
   SITE-BG — Fondo blurred global + sistema glass
   Activo cuando html.has-site-bg está presente (siteBg configurado)
   ═══════════════════════════════════════════════════════════════ */

/* ── Capa de fondo blurred (fixed, detrás de todo) ── */
.site-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: var(--site-bg-url);
  background-size: cover;
  background-position: center;
  filter: blur(var(--site-blur, 14px));
  transform: scale(1.08);
  pointer-events: none;
}
.site-bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 4, var(--site-overlay, 0.30));
}

/* ── Safe areas iOS (Dynamic Island, home bar) ──────────────────────────────
   viewport-fit=cover permite que el fondo llene toda la pantalla.
   El color de html cubre los márgenes de la notch/home indicator.
   ── */
html:has(.adm-topbar) {
  background: #053018;
}
html:has(.lobby-app),
html:has(.cotizador-page),
html:has(.s3-shell) {
  background: #0d2e1a;
}

/* ── Empujar contenido por debajo de la topbar + Dynamic Island ── */
body:has(.adm-topbar) {
  padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
@media (max-width: 640px) {
  body:has(.adm-topbar) {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ── Cuando hay fondo: el body no muestra su propio color sólido ── */
html.has-site-bg body {
  background: transparent !important;
}

/* ── El overlay usa la opacidad configurada, pero con un tope de 0.38 ── */
html.has-site-bg .site-bg-layer::after {
  background: rgba(2, 8, 4, min(var(--site-overlay, 0.30), 0.38)) !important;
}

/* ── Todo el contenido del sitio sube sobre la capa de fondo ── */
html.has-site-bg .app-header,
html.has-site-bg .main-container,
html.has-site-bg .sidebar,
html.has-site-bg .page-content,
html.has-site-bg .app-layout,
html.has-site-bg .app-shell,
html.has-site-bg .lobby-app,
html.has-site-bg .s3-shell,
html.has-site-bg .cotizador-page,
html.has-site-bg #dashboard-hub,
html.has-site-bg .bi-layout,
html.has-site-bg .kb-wrap,
html.has-site-bg .sv-hub {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   VARIABLES GLASS — valores por defecto reutilizables
   ══════════════════════════════════════════════════════════ */
html.has-site-bg {
  --glass-bg:     rgba(4, 14, 8, 0.42);
  --glass-blur:   blur(22px) saturate(1.3);
  --glass-border: rgba(255, 255, 255, 0.13);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
}

/* ══════════════════════════════════════════════════════════
   COMPONENTES GLASS — tarjetas, paneles, cabeceras
   ══════════════════════════════════════════════════════════ */

/* Cabecera sticky del admin / app */
html.has-site-bg .app-header {
  background: rgba(2, 8, 4, 0.78) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Sidebar */
html.has-site-bg .sidebar {
  background: rgba(2, 8, 4, 0.82) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

/* Tarjetas bento (admin dashboard) */
html.has-site-bg .bento-card,
html.has-site-bg .bento-item {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Tarjeta cotizador */
html.has-site-bg .cotz-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
html.has-site-bg .cotz-card::before { display: none !important; }

/* Tarjetas genéricas (.card) — solo en contexto admin/app, no lobby.
   .main-container es el wrapper de las páginas admin; la lobby usa
   su propio sistema de tarjetas (.lb-panel-card) con variables --lb-*. */
html.has-site-bg .main-container .card,
html.has-site-bg .page-content .card,
html.has-site-bg .app-layout .card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Paneles de sección del cotizador */
html.has-site-bg .cotz-section-card,
html.has-site-bg .cotz-fields-card,
html.has-site-bg .cotz-stepper-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Step2 — resumen de cotización */
html.has-site-bg .app-shell {
  background: transparent !important;
  box-shadow: none !important;
}
html.has-site-bg .qt-sheet {
  background: transparent !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
}
html.has-site-bg .qt-card,
html.has-site-bg .qt-total-card,
html.has-site-bg .qt-bank-card,
html.has-site-bg .qt-includes,
html.has-site-bg .qt-next-steps,
html.has-site-bg .qt-bottom-cta,
html.has-site-bg .qt-section {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 18px !important;
}

/* Step2 — secciones de contenido como tarjetas glass */
html.has-site-bg .qt-client {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--glass-shadow) !important;
}
html.has-site-bg .qt-chips {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--glass-shadow) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
html.has-site-bg .qt-stitle { margin-top: 6px; }
html.has-site-bg .qt-svc-table,
html.has-site-bg table.qt-svc-table {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Step2 — topbar */
html.has-site-bg .qt-topbar {
  background: rgba(2, 8, 4, 0.78) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* Step3 — confirmación */
html.has-site-bg .s3-header {
  background: rgba(2, 8, 4, 0.78) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
html.has-site-bg .s3-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
html.has-site-bg .s3-action {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
html.has-site-bg .s3-bottom-bar {
  background: rgba(2, 8, 4, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
html.has-site-bg .s3-deposit-notice {
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* Admin — tablas, paneles, modales */
html.has-site-bg .table-container,
html.has-site-bg .admin-panel,
html.has-site-bg .modal-content,
html.has-site-bg .dropdown-menu {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ══════════════════════════════════════════════════════════
   ADMIN SHELL — topbar, sidebar drawer, body bg
   ══════════════════════════════════════════════════════════ */

/* Body sin fondo sólido en admin */
html.has-site-bg body {
  background: transparent !important;
}

/* Topbar admin → glass en vez de gradiente */
html.has-site-bg .adm-topbar {
  background: rgba(2, 10, 6, 0.72) !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Sidebar drawer → glass */
html.has-site-bg #sidebar,
html.has-site-bg .sb.sb-v2 {
  background: rgba(2, 10, 6, 0.85) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}

/* Panel de notificaciones */
html.has-site-bg #jardin-notif-panel {
  background: rgba(4, 20, 12, 0.90) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* main-container admin → transparente para ver el fondo */
html.has-site-bg .main-container {
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════
   BENTO CARDS (dashboard y admin general)
   ══════════════════════════════════════════════════════════ */
html.has-site-bg .bento-stat,
html.has-site-bg .bento-hero,
html.has-site-bg .bento-accent-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Gradientes decorativos del hero → remover cuando hay foto de fondo */
html.has-site-bg .bento-hero::before,
html.has-site-bg .bento-hero::after {
  opacity: 0.4 !important;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD HUB — dh-kpi, dh-card, dh-next, dh-upcoming
   ══════════════════════════════════════════════════════════ */
html.has-site-bg .dh-kpi,
html.has-site-bg .dh-card,
html.has-site-bg .dh-next,
html.has-site-bg .dh-upcoming,
html.has-site-bg .dh-agenda,
html.has-site-bg .dh-featured,
html.has-site-bg .dh-hero__welcome {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* dh-hero no necesita tarjeta propia — es solo layout */
html.has-site-bg .dh-hero,
html.has-site-bg #dashboard-hub {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════
   VISTAS ADMIN ESPECÍFICAS — admin-section, stat-box, etc.
   ══════════════════════════════════════════════════════════ */
html.has-site-bg .admin-section,
html.has-site-bg .stat-box,
html.has-site-bg .item-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ══════════════════════════════════════════════════════════
   TABLA GLOBAL (.tbl) y formularios admin
   ══════════════════════════════════════════════════════════ */
html.has-site-bg .tbl {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
}
html.has-site-bg .tbl thead th {
  background: rgba(4, 20, 12, 0.60) !important;
}
html.has-site-bg .tbl tbody td {
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}

/* ══════════════════════════════════════════════════════════
   BOT INBOX (.bi-*) — bandeja WhatsApp
   ══════════════════════════════════════════════════════════ */

/* El bi-layout y bi-sidebar tienen bg oscuro propio — transparentarlos */
html.has-site-bg .bi-layout,
html.has-site-bg .bi-layout .bi-sidebar,
html.has-site-bg .bi-chat {
  background: transparent !important;
}

/* Sidebar de conversaciones → glass */
html.has-site-bg .bi-sidebar__header {
  background: rgba(6, 4, 10, 0.72) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
html.has-site-bg .bi-conv-list {
  background: rgba(8, 6, 14, 0.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
html.has-site-bg .bi-conv-item {
  background: transparent !important;
}
html.has-site-bg .bi-conv-item:hover {
  background: rgba(255, 126, 179, 0.08) !important;
}
html.has-site-bg .bi-conv-item.is-active {
  background: rgba(255, 126, 179, 0.14) !important;
}

/* Panel de chat → glass */
html.has-site-bg .bi-chat__header {
  background: rgba(6, 4, 10, 0.78) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
html.has-site-bg .bi-messages {
  background: transparent !important;
}
html.has-site-bg .bi-compose {
  background: rgba(6, 4, 10, 0.82) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* Panel lateral (notas/etiquetas) → glass */
html.has-site-bg .bi-side-panel {
  background: rgba(8, 5, 16, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}

/* Burbujas de mensajes → mantener sus colores originales */
html.has-site-bg .bi-bubble--out {
  background: rgba(255, 126, 179, 0.25) !important;
}
html.has-site-bg .bi-bubble--in {
  background: rgba(28, 25, 35, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Modal de plantillas → glass */
html.has-site-bg .bi-modal__panel {
  background: rgba(8, 5, 16, 0.94) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* ══════════════════════════════════════════════════════════
   BOT KNOWLEDGE (.kb-*) — base de conocimiento
   ══════════════════════════════════════════════════════════ */
html.has-site-bg .kb-wrap {
  background: transparent !important;
}
html.has-site-bg .kb-item {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ══════════════════════════════════════════════════════════
   SERVICIOS & PROVEEDORES HUB (.sv-*)
   Override servicios-hub.css que fuerza body.sv-bg background
   ══════════════════════════════════════════════════════════ */

/* Cancelar el fondo sólido que servicios-hub.css aplica con :has y .sv-bg */
html.has-site-bg body,
html.has-site-bg body.sv-bg,
html.has-site-bg body.sv-bg .main-container {
  background: transparent !important;
}
/* Cancelar el ::before pseudo-element de fondo de servicios-hub.css */
html.has-site-bg body:has(.sv-hub)::before,
html.has-site-bg body.sv-bg::before {
  display: none !important;
}

/* El .sv-hub → glass */
html.has-site-bg .sv-hub {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
/* El gradiente decorativo del hub se puede mantener tenue */
html.has-site-bg .sv-hub::before {
  opacity: 0.35 !important;
}

/* Tarjetas de servicios/proveedores dentro del hub */
html.has-site-bg .sv-kpi,
html.has-site-bg .sv-card,
html.has-site-bg .sv-row,
html.has-site-bg .sv-item {
  background: rgba(4, 20, 12, 0.50) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* ══════════════════════════════════════════════════════════
   FORMULARIOS DE SERVICIOS Y PROVEEDORES
   ══════════════════════════════════════════════════════════ */

/* Secciones de formulario (fondo blanco → glass) */
html.has-site-bg .pf-section,
html.has-site-bg .svc-section,
html.has-site-bg .svc-container-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  color: #f2fff7 !important;
}
/* Textos y labels dentro de formularios */
html.has-site-bg .pf-section h3,
html.has-site-bg .pf-section label,
html.has-site-bg .pf-hint,
html.has-site-bg .svc-section h3,
html.has-site-bg .svc-section label {
  color: rgba(220, 255, 240, 0.85) !important;
}
/* Inputs dentro de formularios sobre fondo foto */
html.has-site-bg .pf-section input,
html.has-site-bg .pf-section select,
html.has-site-bg .pf-section textarea,
html.has-site-bg .svc-section input,
html.has-site-bg .svc-section select,
html.has-site-bg .svc-section textarea {
  background: rgba(4, 20, 12, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #f2fff7 !important;
}