/* ==========================================================================
   TEMA CORPORATIVO SOFTCONTA - CELESTE CON BLANCO (VIBRANTE Y ANIMADO)
   Paleta: Cyan Eléctrico / Sky Blue / Ice White / Pure White
   Estilo: Modern SaaS UI, Glassmorphism suave, Micro-animaciones y Glows
   ========================================================================== */

:root {
    /* 1. TONOS CELESTE (SKY & CYAN) */
    --sc-celeste-50:  #f0f9ff;
    --sc-celeste-100: #e0f2fe;
    --sc-celeste-200: #bae6fd;
    --sc-celeste-300: #7dd3fc;
    --sc-celeste-400: #38bdf8;
    --sc-celeste-500: #0ea5e9;
    --sc-celeste-600: #0284c7;
    --sc-celeste-700: #0369a1;
    --sc-celeste-800: #075985;
    --sc-celeste-900: #0c4a6e;

    /* 2. TONOS BLANCO Y NEUTROS */
    --sc-blanco-puro:  #ffffff;
    --sc-blanco-hielo: #f8fafc;
    --sc-gris-borde:   #e2e8f0;
    --sc-texto-oscuro: #0f172a;
    --sc-texto-azul:   #0369a1;
    --sc-texto-muted:  #64748b;

    /* 3. SOMBRAS Y GLOWS ANIMADOS */
    --sc-glow-celeste: 0 0 20px rgba(14, 165, 233, 0.35);
    --sc-sombra-card:  0 10px 30px -5px rgba(2, 132, 199, 0.08), 0 4px 6px -2px rgba(2, 132, 199, 0.05);
    --sc-sombra-hover: 0 16px 36px -4px rgba(14, 165, 233, 0.28);

    /* 4. COMPATIBILIDAD CON VARIABLES GLOBALES PREVIAS */
    --primary-dark:    #0284c7 !important;
    --secondary-dark:  #0369a1 !important;
    --brand-mint:      #38bdf8 !important;
    --accent:          #0ea5e9 !important;
    --accent-hover:    #0284c7 !important;
    --text-main:       #0f172a !important;
    --text-muted:      #64748b !important;
    --border-color:    #cbd5e1 !important;
    --sc-menta:        #38bdf8 !important;
    --sc-menta-2:      #0ea5e9 !important;
    --sc-menta-3:      #0284c7 !important;
    --sc-menta-suave:  #f0f9ff !important;
    --sc-texto:        #ffffff !important;
    --sc-texto-2:      #e0f2fe !important;
    --sidebar-bg:      #0284c7 !important;
    --sidebar-hover:   linear-gradient(90deg, #38bdf8, #0ea5e9) !important;
    --card-bg:         #ffffff !important;
    --bg-body:         #f0f9ff !important;
}

/* ==========================================================================
   MICRO-ANIMACIONES GLOBALES
   ========================================================================== */
@keyframes scPulseGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(14, 165, 233, 0.35);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 24px rgba(56, 189, 248, 0.65);
        transform: scale(1.02);
    }
}

@keyframes scFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

@keyframes scShimmerEffect {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes scFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scGlowBadge {
    0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 4px #38bdf8); }
    50% { opacity: 1; filter: drop-shadow(0 0 10px #0ea5e9); }
}

/* ==========================================================================
   PERSONALIZACIÓN DE SCROLLBARS (CELESTE Y BLANCO)
   ========================================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f0f9ff;
}
::-webkit-scrollbar-thumb {
    background: #7dd3fc;
    border-radius: 9999px;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
    background: #0284c7;
}

/* ==========================================================================
   BOTONES PRINCIPALES (CELESTE CON BLANCO, GLOW Y LEVITACIÓN)
   ========================================================================== */
.btn-login,
.btn-save,
.btn-guardar,
.btn-primary,
.sc-btn-primary,
.toolbar-btn.btn-blue,
button.btn-blue {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.38) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    border-radius: 9px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-login:hover:not(:disabled),
.btn-save:hover:not(:disabled),
.btn-guardar:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.sc-btn-primary:hover:not(:disabled),
.toolbar-btn.btn-blue:hover:not(:disabled),
button.btn-blue:hover:not(:disabled) {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.52) !important;
    color: #ffffff !important;
}

.btn-login:active:not(:disabled),
.btn-save:active:not(:disabled),
.toolbar-btn.btn-blue:active:not(:disabled) {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4) !important;
}

/* Botones secundarios en barras superiores */
/* Botones secundarios en barras superiores (solo dentro de cabeceras de módulo) */
.header-bar .toolbar .toolbar-btn:not(.btn-blue):not(.btn-red):not(.btn-green-main):not(.btn-blue-import),
.clientes-header .toolbar .toolbar-btn:not(.btn-blue):not(.btn-red):not(.btn-green-main):not(.btn-blue-import),
.page-header .toolbar .toolbar-btn:not(.btn-blue):not(.btn-red):not(.btn-green-main):not(.btn-blue-import),
.toolbar .toolbar-btn:not(.btn-blue):not(.btn-red):not(.btn-green-main):not(.btn-blue-import),
.header-bar .toolbar-btn:not(.btn-blue):not(.btn-red):not(.btn-green-main):not(.btn-blue-import) {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    backdrop-filter: blur(6px) !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.header-bar .toolbar .toolbar-btn:not(.btn-blue):not(.btn-red):not(.btn-green-main):not(.btn-blue-import):hover:not(:disabled),
.clientes-header .toolbar .toolbar-btn:not(.btn-blue):not(.btn-red):not(.btn-green-main):not(.btn-blue-import):hover:not(:disabled),
.toolbar .toolbar-btn:not(.btn-blue):not(.btn-red):not(.btn-green-main):not(.btn-blue-import):hover:not(:disabled),
.header-bar .toolbar-btn:not(.btn-blue):not(.btn-red):not(.btn-green-main):not(.btn-blue-import):hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   BOTONES DE ACCIÓN EN TARJETAS Y CONTENIDO INTERNO (ALTO CONTRASTE)
   ========================================================================== */
.btn-card-action {
    padding: 6px 13px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border: none !important;
    min-height: 32px !important;
}
.btn-card-action:hover:not(:disabled) {
    transform: translateY(-1px) !important;
}
.btn-card-blue {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35) !important;
}
.btn-card-blue:hover:not(:disabled) {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.45) !important;
}
.btn-card-green {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}
.btn-card-green:hover:not(:disabled) {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}
.btn-card-cf {
    background: #f1f5f9 !important;
    color: #0369a1 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 600 !important;
}
.btn-card-cf:hover:not(:disabled) {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border-color: #38bdf8 !important;
}

/* Pestañas de filtrado en modales */
.modal-filter-tab {
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #334155 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}
.modal-filter-tab:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
.modal-filter-tab.active {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35) !important;
}

/* Botones de acción en tablas de historial e importables */
.btn-hist-action {
    padding: 5px 11px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}
.btn-hist-cargar {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3) !important;
}
.btn-hist-cargar:hover {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    transform: translateY(-1px) !important;
}
.btn-hist-print {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}
.btn-hist-print:hover {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
    transform: translateY(-1px) !important;
}
.btn-hist-del {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
.btn-hist-del:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}
.btn-hist-import {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}
.btn-hist-import:hover {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
    transform: translateY(-1px) !important;
}

/* Botón de eliminar fila en tabla */
.btn-table-del {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}
.btn-table-del:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
}

/* Botón Rojo (Eliminar / Salir) */
.toolbar-btn.btn-red,
.btn-danger,
.btn-red {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    transition: all 0.2s ease !important;
}
.toolbar-btn.btn-red:hover:not(:disabled),
.btn-danger:hover:not(:disabled) {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

/* ==========================================================================
   CABECERAS DE MÓDULOS (VENTAS, CLIENTES, INVENTARIOS, PROVEEDORES)
   Gradiente Celeste Eléctrico Brillante y Tipografía Blanca
   ========================================================================== */
.clientes-header,
.header-bar,
.page-header,
.top-header {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 55%, #38bdf8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px -4px rgba(2, 132, 199, 0.32) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 14px !important;
    position: relative !important;
}

.clientes-header .title-area h2,
.header-bar .title-text-group h2,
.page-header h2 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    text-shadow: 0 2px 6px rgba(3, 105, 161, 0.35) !important;
}

.clientes-header .title-area p,
.header-bar .title-text-group p {
    color: #e0f2fe !important;
    font-size: 11.5px !important;
}

.clientes-header .title-icon,
.header-bar .title-icon {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.clientes-header:hover .title-icon,
.header-bar:hover .title-icon {
    transform: scale(1.06) rotate(3deg) !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.6) !important;
}

/* ==========================================================================
   PÍLDORAS Y BADGES (ESTILO CELESTE Y BLANCO)
   ========================================================================== */
.badge-pill,
.pill-estab,
.pill-sri,
.badge-sociedad {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(6px) !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
}

/* ==========================================================================
   MENÚ LATERAL (SIDEBAR DE INDEX) - CELESTE MODERNO CON BLANCO
   ========================================================================== */
.sidebar {
    background: linear-gradient(180deg, #0369a1 0%, #0284c7 40%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    box-shadow: 4px 0 24px rgba(2, 132, 199, 0.2) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.sidebar-header {
    background: rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(10px) !important;
}

.sidebar-brand-icon {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 0 12px rgba(56, 189, 248, 0.5) !important;
    border-radius: 12px !important;
    transition: transform 0.3s ease !important;
}
.sidebar-header:hover .sidebar-brand-icon {
    transform: scale(1.08) rotate(-4deg) !important;
}

.menu-item,
.submenu-group-btn,
.submenu-leaf {
    color: #f0f9ff !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 8px !important;
}

.menu-item i.menu-icon,
.submenu-group-left i,
.submenu-leaf i,
.chevron-icon {
    color: #bae6fd !important;
    transition: all 0.25s ease !important;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    transform: translateX(5px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(8px) !important;
}
.menu-item:hover i.menu-icon {
    color: #ffffff !important;
    filter: drop-shadow(0 0 6px #7dd3fc) !important;
    transform: scale(1.1) !important;
}

.menu-item.open {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1) !important;
}
.menu-item.open i.menu-icon {
    color: #ffffff !important;
}

.submenu-group-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transform: translateX(3px) !important;
}
.submenu-group-btn.open {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.submenu-leaf:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
}
.submenu-leaf:hover i {
    color: #ffffff !important;
    transform: scale(1.15) !important;
}

.submenu-tree,
.submenu-leaf-list {
    border-left-color: rgba(255, 255, 255, 0.35) !important;
}

/* ==========================================================================
   TOPBAR Y PESTAÑAS (INDEX.HTML)
   ========================================================================== */
.topbar {
    background-color: #ffffff !important;
    border-bottom: 2px solid #e0f2fe !important;
    box-shadow: 0 4px 20px -2px rgba(2, 132, 199, 0.08) !important;
}

.btn-toggle {
    color: #0284c7 !important;
    transition: all 0.2s ease !important;
}
.btn-toggle:hover {
    background-color: #f0f9ff !important;
    color: #0ea5e9 !important;
    transform: scale(1.05) !important;
}

#badge-sociedad-activa {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.1) !important;
    animation: scPulseGlow 3s infinite !important;
}

.user-profile {
    background: #ffffff !important;
    border: 1px solid #bae6fd !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08) !important;
    transition: all 0.2s ease !important;
}
.user-profile:hover {
    border-color: #0ea5e9 !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.2) !important;
    transform: translateY(-1px) !important;
}

.user-avatar {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4) !important;
    font-weight: 700 !important;
}

.user-name {
    color: #0369a1 !important;
    font-weight: 600 !important;
}

/* Barra de Pestañas */
.tabs-wrapper {
    background-color: #e0f2fe !important;
    border-bottom: 1px solid #bae6fd !important;
}

.tab {
    background-color: #f0f9ff !important;
    color: #64748b !important;
    border: 1px solid #bae6fd !important;
    border-bottom: none !important;
    transition: all 0.2s ease !important;
}
.tab:hover:not(.active) {
    background-color: #ffffff !important;
    color: #0284c7 !important;
    transform: translateY(-1px) !important;
}

.tab.active {
    background-color: #ffffff !important;
    color: #0284c7 !important;
    border-top: 3px solid #0ea5e9 !important;
    border-left-color: #bae6fd !important;
    border-right-color: #bae6fd !important;
    font-weight: 700 !important;
    box-shadow: 0 -3px 12px rgba(14, 165, 233, 0.15) !important;
}

/* ==========================================================================
   PANTALLA DE BIENVENIDA (HOME SCREEN - ANIMADA EN CELESTE Y BLANCO)
   ========================================================================== */
.welcome-screen {
    background: radial-gradient(ellipse at top, #f0f9ff 0%, #e0f2fe 45%, #ffffff 100%) !important;
}

.welcome-brand-box {
    background: linear-gradient(145deg, #0284c7 0%, #0ea5e9 55%, #38bdf8 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 24px 50px rgba(14, 165, 233, 0.32) !important;
    border-radius: 26px !important;
    animation: scFloat 6s ease-in-out infinite !important;
}

/* ==========================================================================
   TARJETAS Y PANELES (MÓDULOS DE FORMULARIO)
   ========================================================================== */
.card,
.panel,
.box,
.filter-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #e0f2fe !important;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.05) !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.card:hover {
    border-color: #bae6fd !important;
    box-shadow: 0 8px 26px rgba(2, 132, 199, 0.09) !important;
}

.card-header {
    border-bottom: 2px solid #f0f9ff !important;
}
.card-header h3 {
    color: #0369a1 !important;
    font-weight: 700 !important;
}
.card-header i {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border-radius: 8px !important;
    border: 1px solid #bae6fd !important;
}

/* ==========================================================================
   CAMPOS DE FORMULARIO (INPUTS, SELECTS, TEXTAREAS)
   ========================================================================== */
.input-group label,
.form-group label {
    color: #334155 !important;
    font-weight: 600 !important;
}

.input-group input,
.input-group select,
.input-group textarea,
.form-control {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border-radius: 8px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus,
.form-control:focus {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3.5px rgba(14, 165, 233, 0.22) !important;
    background: #ffffff !important;
    outline: none !important;
}

.input-group input:disabled,
.input-group select:disabled,
.input-group textarea:disabled {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
}

/* ==========================================================================
   TABLAS Y GRILLAS DE DATOS
   ========================================================================== */
table thead th {
    background: #f0f9ff !important;
    color: #0369a1 !important;
    border-bottom: 2px solid #bae6fd !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11.5px !important;
    letter-spacing: 0.4px !important;
}

table tbody tr:hover {
    background-color: #f8fafc !important;
}

table tbody tr.activa,
table tbody tr.selected {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
}

/* Segmented Buttons (Tarjetas auxiliares) */
.segmented-nav {
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
}
.seg-btn.active {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(14, 165, 233, 0.35) !important;
}

/* Contenedores de alerta o retenciones */
.retenciones-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
}
.retenciones-title {
    color: #0369a1 !important;
}

/* Tarjeta Bancaria decorativa */
.bank-preview-card {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25) !important;
}

/* ==========================================================================
   MÓDULO DE FACTURAS (VENTAS.HTML) - VIBRANTE CELESTE Y BLANCO
   ========================================================================== */
.btn-green-main {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.38) !important;
    transition: all 0.25s ease !important;
}
.btn-green-main:hover:not(:disabled) {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.52) !important;
}

.btn-blue-import {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.28) !important;
}
.btn-blue-import:hover:not(:disabled) {
    background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%) !important;
    transform: translateY(-2px) !important;
}

.view-tabs-bar {
    border-bottom: 2px solid #bae6fd !important;
    gap: 8px !important;
}
.view-tab-btn {
    background: #f0f9ff !important;
    color: #64748b !important;
    border: 1px solid #bae6fd !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    transition: all 0.2s ease !important;
}
.view-tab-btn:hover:not(.active) {
    background: #ffffff !important;
    color: #0284c7 !important;
    transform: translateY(-1px) !important;
}
.view-tab-btn.active {
    background: #ffffff !important;
    color: #0284c7 !important;
    border-color: #bae6fd !important;
    border-top: 3px solid #0ea5e9 !important;
    box-shadow: 0 -3px 10px rgba(14, 165, 233, 0.12) !important;
    font-weight: 700 !important;
}

.section-card {
    background: #ffffff !important;
    border: 1px solid #e0f2fe !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.05) !important;
}
.card-title {
    color: #0369a1 !important;
    font-weight: 700 !important;
}

/* Totales e Impuestos SRI en Facturas */
.totals-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.08) !important;
}
.total-line {
    color: #334155 !important;
}
.total-line.grand-total {
    border-top: 2px solid #bae6fd !important;
    color: #0369a1 !important;
}
.total-line.grand-total span.amount {
    color: #0284c7 !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 6px rgba(14, 165, 233, 0.25) !important;
}

.filter-bar-history {
    background: #f0f9ff !important;
    border-bottom: 1px solid #bae6fd !important;
}

/* ==========================================================================
   CATÁLOGO DE PRODUCTOS (CATALOGO_PRODUCTOS.HTML)
   ========================================================================== */
.softconta-showcase {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25) !important;
}

.softconta-price-banner {
    background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
    border-radius: 10px !important;
}
.sc-price-col span.lbl {
    color: #0369a1 !important;
    font-weight: 700 !important;
}
.sc-price-col span.val {
    color: #0284c7 !important;
    font-weight: 800 !important;
}
.sc-price-tags strong {
    color: #0369a1 !important;
}

/* Barra inferior de navegación de registros */
.bottom-bar {
    background: #ffffff !important;
    border: 1px solid #e0f2fe !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.06) !important;
}
.nav-controls button {
    border-color: #cbd5e1 !important;
    color: #0369a1 !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}
.nav-controls button:hover:not(:disabled) {
    background: #f0f9ff !important;
    border-color: #0ea5e9 !important;
    color: #0ea5e9 !important;
    transform: translateY(-1px) !important;
}
.nav-badge {
    background: #f0f9ff !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}

/* Notificaciones y Diálogos SoftConta */
.sc-brand-badge {
    color: #0284c7 !important;
}
.sc-brand-dot {
    background: #0ea5e9 !important;
    box-shadow: 0 0 8px #38bdf8 !important;
}

/* ==========================================================================
   SISTEMA RESPONSIVO INTEGRAL MÓVIL Y TABLET (SOFTCONTA ERP - VISTA CELULAR)
   Permite operar, facturar, consultar y gestionar completamente el sistema 
   desde cualquier teléfono móvil (Android / iOS) o tablet con máxima comodidad.
   ========================================================================== */

/* 1. DISPOSITIVOS TABLETS Y PANTALLAS MEDIANAS (<= 992px) */
@media screen and (max-width: 992px) {
    .content-grid,
    .content-grid-2,
    .factura-grid,
    .main-grid,
    .top-cards-grid,
    .bottom-split-grid,
    .bottom-grid,
    .bottom-summary-grid,
    .middle-grid,
    .oc-footer-grid,
    .workspace-split,
    .grid-panel,
    .form-grid,
    .filters-grid,
    .charts-grid,
    .kpi-cards-grid,
    .kpi-grid,
    .audit-info-grid,
    .cert-grid-info,
    .receipt-grid,
    .sri-grid,
    .quick-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 2. CELULARES Y SMARTPHONES (<= 768px) */
@media screen and (max-width: 768px) {
    /* --- ESTRUCTURA GENERAL, VIEWPORT Y SCROLL FLUIDO --- */
    html {
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden;
    }

    body {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 10px 85px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: var(--sc-celeste-50, #f0f9ff) !important;
        box-sizing: border-box !important;
    }

    /* --- CABECERAS DE MÓDULO Y TÍTULOS --- */
    .clientes-header, 
    .header-bar, 
    .panel-header, 
    .main-header,
    header.header-bar,
    header.clientes-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .title-area {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .title-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }

    .title-text-group {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }

    .title-text-group h2, 
    .title-area h2 {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .title-text-group p,
    .title-area p {
        font-size: 10px !important;
        color: #e0f2fe !important;
        line-height: 1.2 !important;
    }

    .header-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* --- TOOLBAR DE BOTONES PRINCIPALES (AGREGAR, EDITAR, ELIMINAR, BUSCAR) --- */
    .toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        justify-content: stretch !important;
        margin-top: 4px !important;
    }

    .toolbar .toolbar-btn, 
    .toolbar button, 
    .clientes-actions button,
    .header-actions button {
        flex: 1 1 calc(33.333% - 6px) !important;
        min-width: 80px !important;
        min-height: 42px !important;
        padding: 7px 6px !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        border-radius: 9px !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
        box-sizing: border-box !important;
    }

    /* --- PESTAÑAS DE VISTA INTERNA (VIEW TABS) --- */
    .view-tabs-bar {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid #bae6fd !important;
        padding-bottom: 2px !important;
    }

    .view-tab-btn {
        flex: 1 1 auto !important;
        padding: 9px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        min-height: 40px !important;
        border-radius: 8px 8px 0 0 !important;
    }

    /* --- TODOS LOS CONTENEDORES DE GRILLAS PASAN A 1 COLUMNA COMPLETA --- */
    .content-grid,
    .content-grid-2,
    .factura-grid,
    .main-grid,
    .top-cards-grid,
    .bottom-split-grid,
    .bottom-grid,
    .bottom-summary-grid,
    .middle-grid,
    .oc-footer-grid,
    .workspace-split,
    .grid-panel,
    .form-grid,
    .filters-grid,
    .charts-grid,
    .kpi-cards-grid,
    .kpi-grid,
    .audit-info-grid,
    .cert-grid-info,
    .receipt-grid,
    .sri-grid,
    .quick-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        overflow-y: visible !important;
        height: auto !important;
        flex: none !important;
        width: 100% !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* --- TARJETAS DE MÓDULOS (CARDS) --- */
    .card, 
    .section-card, 
    .panel {
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 14px 12px !important;
        border-radius: 12px !important;
        margin-bottom: 4px !important;
        box-shadow: 0 3px 12px rgba(2, 132, 199, 0.06) !important;
        box-sizing: border-box !important;
    }

    .card-header, 
    .card-header-line {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }

    .card-header h3, 
    .card-title {
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    /* --- FILAS DE FORMULARIO E INPUTS AL 100% DE ANCHO --- */
    .form-row {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .input-group, 
    .input-box,
    .form-group,
    .form-group-cxc,
    .showcase-field,
    .cert-field,
    .search-input-box,
    .form-row > div {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        grid-column: auto !important;
        margin-bottom: 3px !important;
        box-sizing: border-box !important;
    }

    /* Anular cualquier span o flex inline */
    [style*="grid-column"],
    [style*="grid-column: span"],
    [style*="flex:"] {
        grid-column: auto !important;
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .input-group label, 
    .input-box label,
    .form-label {
        font-size: 11.5px !important;
        font-weight: 600 !important;
        margin-bottom: 3px !important;
    }

    .input-group input, 
    .input-group select, 
    .input-group textarea,
    .input-box input,
    .input-box select,
    .input-box textarea,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="password"],
    select,
    textarea,
    .form-control {
        font-size: 14px !important; /* Previene auto-zoom molesto en Safari iOS */
        min-height: 42px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- VITRINA DE PRODUCTO (SHOWCASE) --- */
    .softconta-showcase {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 14px !important;
        gap: 12px !important;
    }
    .showcase-info {
        width: 100% !important;
    }
    .showcase-codes {
        flex-direction: column !important;
        width: 100% !important;
        gap: 6px !important;
    }
    .showcase-photo-btns {
        justify-content: center !important;
        width: 100% !important;
        margin-top: 6px !important;
    }

    /* --- TABLAS RESPONSIVAS CON SCROLL TÁCTIL --- */
    .table-responsive, 
    .table-container, 
    .tbl-wrapper, 
    .table-items-wrapper,
    .details-table-wrapper, 
    .table-box,
    .tabla-scroll,
    .grid-container,
    [class*="table-wrap"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 10px !important;
        border: 1px solid #cbd5e1 !important;
        margin: 8px 0 !important;
        display: block !important;
        background: #ffffff !important;
    }

    table,
    .cartera-table,
    .cheques-table,
    .clientes-table,
    .comp-table,
    .cxp-table,
    .data-table,
    .diario-table,
    .history-table,
    .items-table,
    .kardex-table,
    .mini-table,
    .mov-table,
    .oc-table,
    .prov-table,
    .report-table,
    .tabla-clientes,
    .table-letras {
        min-width: 620px !important;
        width: 100% !important;
    }

    .card table,
    .section-card table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }

    th, td {
        padding: 8px 10px !important;
        font-size: 11.5px !important;
        white-space: nowrap !important;
    }

    td button, td .btn-action {
        min-height: 34px !important;
        min-width: 34px !important;
        padding: 4px 8px !important;
    }

    /* --- BOTONES DE GUARDAR / CANCELAR FLUIDOS --- */
    .action-controls, 
    .card-footer, 
    .form-actions, 
    .footer-actions,
    .action-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        padding-top: 12px !important;
        margin-top: auto !important;
    }

    .action-controls button, 
    .card-footer button, 
    .form-actions button, 
    .footer-actions button,
    .btn-save, 
    .btn-cancel,
    button.btn-save,
    button.btn-cancel,
    #btn-grabar,
    #btn-cancelar,
    #btn-guardar,
    #btn-grabar-factura,
    #btn-cancelar-factura {
        flex: 1 1 calc(50% - 6px) !important;
        min-height: 44px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        border-radius: 9px !important;
        box-sizing: border-box !important;
    }

    /* --- PANELES LATERALES (OFFCANVAS / BÚSQUEDA) A PANTALLA COMPLETA --- */
    .offcanvas-panel, 
    .side-drawer, 
    .panel-historial, 
    .offcanvas {
        width: 100% !important;
        max-width: 100vw !important;
        right: -100% !important;
        z-index: 10001 !important;
    }

    .offcanvas-panel.active, 
    .side-drawer.active,
    .panel-historial.active,
    .offcanvas.active {
        right: 0 !important;
    }

    .offcanvas-header {
        padding: 14px 16px !important;
    }

    .offcanvas-search {
        padding: 10px 14px !important;
    }

    .offcanvas-body {
        padding: 10px 14px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* --- MODALES OPTIMIZADOS PARA CELULAR --- */
    .modal-overlay {
        padding: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .modal-card,
    .modal-content, 
    .modal-dialog,
    .dialog-content {
        width: 96% !important;
        max-width: 96vw !important;
        margin: 0 auto !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        max-height: 88vh !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 !important;
        max-height: 70vh !important;
        padding: 12px 6px !important;
    }

    .modal-body .form-row,
    .modal-body [style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    .modal-footer {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .modal-footer button {
        flex: 1 1 calc(50% - 6px) !important;
        min-height: 42px !important;
    }

    /* --- RESUMEN DE TOTALES EN VENTAS Y COMPRAS --- */
    .totales-grid, 
    .summary-card,
    .totals-card,
    .totales-box {
        width: 100% !important;
        padding: 14px 14px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .total-line {
        display: flex !important;
        justify-content: space-between !important;
        font-size: 13px !important;
        padding: 5px 0 !important;
    }

    .total-line.grand-total,
    .total-grand {
        font-size: 18px !important;
        font-weight: 800 !important;
        padding-top: 8px !important;
        margin-top: 6px !important;
    }
}

/* 3. CELULARES MUY PEQUEÑOS (<= 420px - iPhone SE, Galaxy Mini, etc.) */
@media screen and (max-width: 420px) {
    body {
        padding: 6px 6px 85px 6px !important;
    }

    .toolbar .toolbar-btn, 
    .toolbar button, 
    .clientes-actions button,
    .header-actions button {
        flex: 1 1 calc(50% - 4px) !important;
        min-height: 42px !important;
        font-size: 11px !important;
        padding: 6px 4px !important;
    }

    .title-text-group h2, 
    .title-area h2 {
        font-size: 13.5px !important;
    }

    .action-controls button, 
    .card-footer button, 
    .form-actions button,
    .btn-save, 
    .btn-cancel,
    #btn-grabar,
    #btn-cancelar {
        flex: 1 1 100% !important; /* En pantallas diminutas, 1 botón por fila para comodidad */
        min-height: 44px !important;
    }
}

/* ==========================================================================
   AJUSTES FINALES DE ESTRUCTURA RESPONSIVA
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Layout antiguo con barra lateral */
    .app-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 100vh !important;
        height: auto !important;
        overflow: visible !important;
    }

    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
        position: relative !important;
    }

    .sidebar-brand {
        padding: 12px 16px !important;
    }

    .sidebar-menu {
        display: flex !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sidebar-menu li {
        flex: 0 0 auto !important;
        min-height: 44px !important;
        padding: 12px 14px !important;
        white-space: nowrap !important;
    }

    .main-content {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: calc(100vh - 100px) !important;
        overflow: visible !important;
    }

    .dashboard-body,
    .main-content > .dashboard-body {
        width: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    /* Dashboard ejecutivo */
    .app-topbar {
        width: 100% !important;
        min-height: 58px !important;
        height: auto !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }

    .topbar-brand,
    .topbar-actions,
    .title-area,
    .header-badges {
        min-width: 0 !important;
    }

    .topbar-brand {
        flex: 1 1 auto !important;
    }

    .topbar-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .topbar-actions > * {
        max-width: 100% !important;
    }

    .executive-nav-ribbon {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .ribbon-item-btn {
        flex: 0 0 auto !important;
    }

    /* Evita que estilos inline fuercen un ancho mayor al dispositivo */
    .main-content > *,
    .dashboard-body > *,
    .view-container,
    .section-card,
    .card,
    .panel,
    .table-card,
    .filter-card {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Tablas grandes: se conserva toda la información con desplazamiento táctil */
    .table-container,
    .table-responsive,
    .table-scroll,
    .table-scroll-wrap,
    .table-items-wrapper,
    .table-box,
    .tbl-wrapper,
    .data-table-wrapper,
    [class*="table-wrap"] {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Modales utilizables en teléfonos angostos */
    .modal-overlay,
    .modal-backdrop {
        padding: 6px !important;
    }

    .modal-card,
    .modal-content,
    .modal-dialog {
        width: min(96vw, 680px) !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
        margin: 0 auto !important;
    }

    .modal-header,
    .modal-footer {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

@media screen and (max-width: 420px) {
    body {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .dashboard-body,
    .main-content > .dashboard-body {
        padding: 8px !important;
    }

    .toolbar .toolbar-btn,
    .toolbar button {
        min-width: 0 !important;
        font-size: 10.5px !important;
    }

    .user-meta,
    .user-details,
    .badge-sociedad {
        display: none !important;
    }
}


/* ==========================================================================
   ESTADOS DE BOTONES GLOBALES ERP (ACTIVO / DESHABILITADO SAP SAAS)
   ========================================================================== */
button:disabled,
.toolbar-btn:disabled,
.btn-save:disabled,
.btn-guardar:disabled,
.btn-cancel:disabled,
.btn-cancelar:disabled,
.btn-blue:disabled,
.btn-red:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
    filter: grayscale(40%) !important;
}

button:not(:disabled),
.toolbar-btn:not(:disabled),
.btn-save:not(:disabled),
.btn-guardar:not(:disabled),
.btn-cancel:not(:disabled),
.btn-cancelar:not(:disabled),
.btn-blue:not(:disabled),
.btn-red:not(:disabled) {
    cursor: pointer !important;
    pointer-events: auto !important;
    filter: none !important;
}

/* Fallback de seguridad global: cualquier .toolbar-btn fuera de cabeceras nunca queda blanco sobre blanco */
.toolbar-btn:not(.header-bar *):not(.clientes-header *):not(.page-header *):not(.toolbar *):not(.btn-blue):not(.btn-red):not(.btn-green-main):not(.btn-green-tool):not(.btn-sky) {
    color: #1e293b !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

/* Acciones de Conversión a Factura (Proformas y Cotizaciones) */
.toolbar-btn.btn-orange-convert,
.btn-orange-convert {
    background: #ea580c !important;
    border-color: #c2410c !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
.toolbar-btn.btn-orange-convert:hover:not(:disabled),
.btn-orange-convert:hover:not(:disabled) {
    background: #c2410c !important;
}
.btn-hist-convert {
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #ffedd5 !important;
}
.btn-hist-convert:hover:not(:disabled) {
    background: #ffedd5 !important;
}

/* Acciones de Guías de Remisión */
.toolbar-btn.btn-teal-auth,
.btn-teal-auth {
    background: #0d9488 !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
.toolbar-btn.btn-teal-auth:hover:not(:disabled),
.btn-teal-auth:hover:not(:disabled) {
    background: #0f766e !important;
}
.btn-card-orange {
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #ffedd5 !important;
}
.btn-card-orange:hover:not(:disabled) {
    background: #ffedd5 !important;
}


/* ==========================================================================
   ESTADOS ACTIVOS Y DESHABILITADOS DE BOTONES GUARDAR / CANCELAR (SAP SAAS)
   ========================================================================== */
.btn-save:not(:disabled),
.btn-guardar:not(:disabled),
#btn-guardar:not(:disabled),
#btn-grabar:not(:disabled),
#btn-guardar-prov:not(:disabled) {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    filter: none !important;
}

.btn-save:hover:not(:disabled),
.btn-guardar:hover:not(:disabled),
#btn-guardar:hover:not(:disabled),
#btn-grabar:hover:not(:disabled) {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45) !important;
}

.btn-cancel:not(:disabled),
.btn-cancelar:not(:disabled),
#btn-cancelar:not(:disabled) {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1.5px solid #94a3b8 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    filter: none !important;
}

.btn-cancel:hover:not(:disabled),
.btn-cancelar:hover:not(:disabled),
#btn-cancelar:hover:not(:disabled) {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #64748b !important;
}

.btn-save:disabled,
.btn-guardar:disabled,
#btn-guardar:disabled,
#btn-grabar:disabled,
.btn-cancel:disabled,
.btn-cancelar:disabled,
#btn-cancelar:disabled {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    border: 1px solid #cbd5e1 !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Catálogo de productos: ventana centrada con buscador e imágenes visibles */
#panel-buscar {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    width: min(920px, calc(100vw - 40px)) !important;
    height: min(820px, calc(100vh - 56px)) !important;
    max-width: 920px !important;
    max-height: calc(100vh - 56px) !important;
    border-radius: 16px !important;
    transform: translate(-50%, -50%) scale(0.98) !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
    opacity: 0 !important;
}

#panel-buscar.active {
    right: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
}

#panel-buscar .offcanvas-search {
    display: flex !important;
    justify-content: center !important;
    padding: 22px 28px !important;
}

#panel-buscar .search-box {
    width: 100% !important;
    max-width: 780px !important;
}

#panel-buscar #input-busqueda-prod {
    height: 56px !important;
    padding: 10px 18px 10px 48px !important;
    font-size: 17px !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(2, 132, 199, 0.12) !important;
}

/* Previsualización grande de la imagen del producto */
.softconta-showcase .showcase-img-wrap {
    width: 180px !important;
    height: 180px !important;
    border-radius: 14px !important;
}

.softconta-showcase .showcase-placeholder {
    font-size: 12px !important;
}

.softconta-showcase .showcase-placeholder i {
    font-size: 38px !important;
}

#panel-buscar .offcanvas-body {
    padding: 16px 28px 28px !important;
}

#panel-buscar .prod-item {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 136px !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

#panel-buscar .prod-thumb {
    width: 112px !important;
    height: 112px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    font-size: 30px !important;
}

#panel-buscar .prod-info h4 {
    font-size: 15px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

#panel-buscar .prod-info p,
#panel-buscar .prod-price,
#panel-buscar .prod-code {
    font-size: 13px !important;
}

@media screen and (max-width: 600px) {
    #panel-buscar {
        width: calc(100vw - 16px) !important;
        height: calc(100vh - 24px) !important;
        max-height: calc(100vh - 24px) !important;
    }

    #panel-buscar .offcanvas-search {
        padding: 14px 12px !important;
    }

    #panel-buscar .offcanvas-body {
        padding: 10px 12px 18px !important;
    }

    #panel-buscar .prod-item {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        gap: 12px !important;
        min-height: 96px !important;
        padding: 10px !important;
    }

    #panel-buscar .prod-thumb {
        width: 78px !important;
        height: 78px !important;
    }

    #panel-buscar .prod-meta {
        grid-column: 2 !important;
        text-align: left !important;
    }

    #panel-buscar #input-busqueda-prod {
        height: 48px !important;
        font-size: 15px !important;
    }

    .softconta-showcase .showcase-img-wrap {
        width: 140px !important;
        height: 140px !important;
    }
}
/* Catálogo visual para el selector de bienes y servicios en ventas. */
body.ventas-facturacion-page #modal-buscar-producto .modal-card { width: min(1280px, 96vw) !important; max-width: 1280px !important; max-height: 94vh !important; }
body.ventas-facturacion-page #modal-buscar-producto .modal-body > div:last-child { max-height: min(70vh, 760px) !important; overflow: auto !important; }
body.ventas-facturacion-page #modal-buscar-producto table thead { display: none !important; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-row td { padding: 6px !important; border: 0 !important; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-card {
    display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 16px; align-items: center;
    min-height: 176px; padding: 14px; border: 1px solid #dbe5ef; border-radius: 13px;
    background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-foto {
    width: 150px; height: 150px; display: grid; place-items: center; overflow: hidden;
    border: 1px solid #dbe5ef; border-radius: 12px; background: #f8fafc;
}
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-foto img { width: 100%; height: 100%; object-fit: contain; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-sin-foto { display: grid; gap: 8px; justify-items: center; color: #94a3b8; font-size: 12px; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-sin-foto i { font-size: 38px; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-info { min-width: 0; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-titulo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-titulo h4 { margin: 0; color: #075985; font-size: 16px; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-titulo span { color: #475569; font-size: 12px; font-weight: 700; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-detalles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin-top: 10px; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-detalles span { color: #334155; font-size: 12px; overflow-wrap: anywhere; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-detalles b { display: block; color: #64748b; font-size: 10px; text-transform: uppercase; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-ficha { margin-top: 10px; padding: 9px 11px; border-radius: 8px; background: #f1f8fc; color: #334155; font-size: 12px; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-ficha b { color: #0369a1; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-ficha p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-accion { display: grid; gap: 8px; justify-items: stretch; text-align: right; color: #64748b; font-size: 11px; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-accion small { display: block; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-accion strong { color: #15803d; font-size: 21px; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-accion .con-stock { color: #15803d; font-weight: 700; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-accion .sin-stock { color: #dc2626; font-weight: 700; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-seleccionar, body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-ficha-btn {
    min-height: 38px; border: 0; border-radius: 8px; padding: 0 12px; cursor: pointer; font-weight: 700;
}
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-seleccionar { background: #079b70; color: #fff; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-seleccionar:disabled { background: #cbd5e1; cursor: not-allowed; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-ficha-btn { border: 1px solid #bae6fd; background: #e0f2fe; color: #0369a1; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-vacio { display: grid; justify-items: center; gap: 10px; padding: 42px; color: #64748b; }
body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-vacio i { color: #94a3b8; font-size: 28px; }

/* Vista compacta para servicios: sin fotografía y sin tarjetas voluminosas. */
body.ventas-facturacion-page #modal-buscar-producto .servicio-catalogo-row td { padding: 5px 6px !important; border: 0 !important; }
body.ventas-facturacion-page #modal-buscar-producto .servicio-catalogo-card {
    display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: center;
    padding: 11px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fafcff;
}
body.ventas-facturacion-page #modal-buscar-producto .servicio-catalogo-card h4 { margin: 0 0 5px; color: #075985; font-size: 14px; }
body.ventas-facturacion-page #modal-buscar-producto .servicio-catalogo-card p { margin: 3px 0; color: #64748b; font-size: 11px; }
body.ventas-facturacion-page #modal-buscar-producto .servicio-catalogo-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #475569; font-size: 11px; }
body.ventas-facturacion-page #modal-buscar-producto .servicio-catalogo-meta b { color: #64748b; margin-right: 3px; }
body.ventas-facturacion-page #modal-buscar-producto .servicio-catalogo-accion { display: grid; gap: 5px; text-align: right; }
body.ventas-facturacion-page #modal-buscar-producto .servicio-catalogo-accion strong { color: #15803d; font-size: 17px; }
body.ventas-facturacion-page #modal-buscar-producto .servicio-catalogo-accion button { min-height: 32px; border: 0; border-radius: 7px; background: #079b70; color: #fff; font-weight: 700; cursor: pointer; }
@media screen and (max-width: 760px) {
    body.ventas-facturacion-page #modal-buscar-producto .modal-card { width: calc(100vw - 16px) !important; max-height: calc(100vh - 18px) !important; }
    body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-card { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 10px; }
    body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-foto { width: 88px; height: 88px; }
    body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-detalles { grid-template-columns: 1fr 1fr; }
    body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-accion { grid-column: 2; grid-template-columns: 1fr auto; align-items: center; text-align: left; }
    body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-accion .venta-catalogo-ficha-btn { grid-column: 1; }
    body.ventas-facturacion-page #modal-buscar-producto .venta-catalogo-accion .venta-catalogo-seleccionar { grid-column: 2; grid-row: 1 / span 3; }
}

/* Los estados de modo son internos; no se muestran como etiquetas en los encabezados. */
.clientes-header .title-area > .status-pill-header,
.clientes-header .title-area > .mode-badge-pill {
    display: none !important;
}

/* Ocultar estados iniciales como PENDIENTE/BORRADOR en los encabezados de fichas. */
.card-header-sm > .badge-status,
.card-header-sm > div > .badge-status,
.card-header-sm > div > .badge-reception {
    display: none !important;
}

/* Los botones de acción deben tener un área estable y fácil de pulsar. */
.toolbar .toolbar-btn,
.toolbar button {
    min-height: 36px;
    touch-action: manipulation;
}
.toolbar .toolbar-btn:not(:disabled):hover,
.toolbar button:not(:disabled):hover,
.toolbar .toolbar-btn:not(:disabled):active,
.toolbar button:not(:disabled):active {
    transform: none !important;
}

/* Interacción directa: sin desplazamientos ni rebotes que hagan perder el clic. */
button:not(:disabled),
.toolbar-btn:not(:disabled),
.btn-mini-action:not(:disabled),
.btn-save:not(:disabled),
.btn-guardar:not(:disabled),
.btn-cancel:not(:disabled),
.btn-cancelar:not(:disabled) {
    min-height: 38px;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease !important;
    animation: none !important;
    transform: none !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

button:not(:disabled):hover,
button:not(:disabled):active,
button:not(:disabled):focus-visible {
    transform: none !important;
}

button:not(:disabled) > *,
.toolbar-btn:not(:disabled) > * {
    pointer-events: none !important;
}

/* Ningún efecto hover debe mover el área de clic de un botón. */
html body button[class]:hover:not(:disabled),
html body button[class]:active:not(:disabled),
html body button[class]:focus-visible:not(:disabled),
html body #btn-grabar:hover:not(:disabled),
html body #btn-grabar:active:not(:disabled),
html body #btn-guardar:hover:not(:disabled),
html body #btn-guardar:active:not(:disabled),
html body #btn-cancelar:hover:not(:disabled),
html body #btn-cancelar:active:not(:disabled) {
    transform: none !important;
}

/* Los paneles transparentes/inactivos no deben cubrir los formularios debajo. */
.offcanvas-overlay:not(.active),
.offcanvas-panel:not(.active) {
    pointer-events: none !important;
}
.offcanvas-overlay.active,
.offcanvas-panel.active {
    pointer-events: auto !important;
}