/* ============================================================
   Tema de vidrio — hoja compartida para las páginas de módulo.
   Replica el estilo ya aprobado del panel (inicio.html) y del POS
   (ventas.html): fondo con degradado suave de la marca, topbar que
   "flota" con cinta de acento, y tarjetas de vidrio esmerilado.

   Se enlaza DESPUÉS del <style> propio de cada página, así estas
   reglas ganan los empates de especificidad sin usar !important.

   Reglas de seguridad de esta hoja:
   - No toca layout: nada de display/position en tarjetas, ni
     overflow, ni anchos de borde (solo border-color).
   - Los modales (.modal-box y demás) se quedan opacos a propósito:
     el vidrio sobre el velo oscuro se ve sucio y resta contraste.
   ============================================================ */

/* ── Los avisos siempre por encima de los modales ──
   SweetAlert se pinta en z-index 1060, pero los modales del sistema usan
   hasta 9999. Un aviso lanzado con un modal abierto (por ejemplo, "PIN
   incorrecto" al abrir la caja) quedaba DETRÁS y no se veía. */
.swal2-container { z-index: 100000 !important; }

/* ── Fondo: destellos ciruela/turquesa sobre base clara ── */
body {
    background:
        radial-gradient(1050px 620px at 8% -12%,  rgba(113,75,103,.34), transparent 60%),
        radial-gradient(900px 560px at 96% 0%,    rgba(0,160,157,.30),  transparent 62%),
        radial-gradient(820px 560px at 20% 108%,  rgba(0,160,157,.20),  transparent 64%),
        radial-gradient(880px 600px at 88% 104%,  rgba(113,75,103,.26), transparent 64%),
        linear-gradient(165deg, #f6eff7 0%, #ece4f0 42%, #ddeff0 100%);
    background-attachment: fixed;
}

/* ── Topbar flotante: sombra difusa, filo iluminado y cinta de acento ── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 10px 26px -8px rgba(113,75,103,.45);
    border-bottom: 1px solid rgba(255,255,255,.22);
}
.topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        var(--accent, #00A09D) 0%,
        #35b3aa 26%,
        #a874a0 62%,
        #c98fb6 100%);
    box-shadow: 0 2px 12px rgba(0,160,157,.30);
    pointer-events: none;
}

/* ── Encabezado de página: banda translúcida con el fondo detrás ── */
.page-header {
    background: linear-gradient(150deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.46) 100%);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-bottom-color: rgba(255,255,255,.7);
}

/* ── Tarjetas de vidrio esmerilado ──
   Solo contenedores grandes de contenido; nunca botones, inputs,
   dropdowns ni modales. Se cambia el color del borde, no su ancho. */
/* Cotizar: el panel del catálogo tapaba el degradado con un fondo opaco
   (mismo tratamiento que se le dio al catálogo de ventas.html). */
.catalog-panel { background: transparent; }

.card, .table-card, .filter-card, .kpi-card, .section-card, .add-card,
.profile-card, .chart-card, .report-card, .form-card, .summary-card,
.stat-tile, .kpi, .kpi-pill, .cat-card, .hist-card, .cierre-card,
.balance-card, .info-card, .status-card, .doc-card, .help-card,
.alert-card, .prov-kpi, .module-card, .activo-card, .venta-card,
.provider-card, .acc-card, .change-plan-card, .demo-card,
.summary-bar, .save-bar, .options-card, .products-card, .preview-card,
.session-card, .cp-track, .sc-sinconfig, .hm-box, .config-item,
.product-tile, .catalog-toolbar, .lpanel, .pay-sum, .mc {
    background: linear-gradient(150deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 100%);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-color: rgba(255,255,255,.75);
    box-shadow: 0 6px 18px -10px rgba(113,75,103,.28),
                inset 0 1px 0 rgba(255,255,255,.9);
}