:root {
    --f7-theme-color: #1e90ff;
    --f7-theme-color-rgb: 30, 144, 255;
    --f7-theme-color-shade: #1c86ee;
    --f7-theme-color-tint: #63b8ff;

    --f7-page-bg-color: linear-gradient(135deg, #f7faff 0%, #e3f0ff 100%);
    --f7-navbar-bg-color: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
    --f7-navbar-text-color: #fff;
    --f7-navbar-border-color: transparent;

    --f7-button-bg-color: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
    --f7-button-text-color: #fff;
    --f7-button-border-color: #fff;

    --f7-card-bg-color: rgba(255,255,255,0.85);
    --f7-card-border-color: #e3f0ff;
    --f7-card-box-shadow: 0 8px 32px rgba(30, 144, 255, 0.10);

    --f7-text-color: #1e293b;
    --f7-text-color-secondary: #1e90ff;

    --f7-block-strong-bg-color: rgba(255,255,255,0.7);
    --f7-block-strong-border-color: #e3f0ff;
    --f7-link-color: #1e90ff;
    --f7-link-hover-color: #63b8ff;
    --f7-glass-blur: blur(12px);
}

/* Fondo animado glassmorphism */
body::before {
    content: "";
    position: fixed;
    left: -50vw;
    top: -50vh;
    width: 200vw;
    height: 200vh;
    background: radial-gradient(circle at 70% 30%, #1e90ff33 0, #ffffff00 60%),
                radial-gradient(circle at 20% 80%, #63b8ff22 0, #ffffff00 70%);
    z-index: 0;
    pointer-events: none;
    animation: fondoAnimado 12s linear infinite alternate;
    filter: var(--f7-glass-blur);
}

/* Navbar moderno */
.navbar {
    background: var(--f7-navbar-bg-color);
    color: var(--f7-navbar-text-color);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 4px 24px rgba(30, 144, 255, 0.10);
    padding: 8px 0;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    min-height: 52px !important;
}

/* --- MEJORAS BUSCADOR Y TITULO EN NAVBAR --- */
.title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0 8px;
    gap: 10px;
}

.navbar .title {
    font-size: 1.08rem;
    margin-bottom: 0;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    font-weight: 700;
    flex-shrink: 0;
    padding-right: 12px;
    letter-spacing: 0.5px;
}

.navbar-search {
    width: 100%;
    max-width: 420px !important; /* Cambia el ancho máximo del buscador */
    margin-left: 0;
    margin-right: 0;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 2px 8px #1e90ff22;
    display: flex;
    align-items: center;
    height: 38px;
    transition: box-shadow 0.2s;
    border: 1.5px solid #e3f0ff;
}

.navbar-search:focus-within {
    box-shadow: 0 4px 16px #1e90ff33;
    border-color: #1e90ff;
}

/* Cambia el layout del buscador para que el botón esté a la derecha del input */
.search-input-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
}

/* Ajusta el input para que no ocupe el 100% y deja espacio al botón */
.navbar-search input[type="search"] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    height: 38px;
    padding: 0 16px 0 16px;
    font-size: 1rem;
    color: #1e293b;
    border-radius: 22px;
    box-shadow: none;
    background: transparent;
    border: none;
    outline: none;
}

.navbar-search input[type="search"]::placeholder {
    color: #1e90ff;
    opacity: 0.7;
    font-weight: 500;
}

/* El botón de buscar separado visualmente del input */
/* Botón de buscar */
.search-btn {
    margin-left: 12px;
    background: #1e90ff;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    z-index: 2;
    transition: background 0.2s, transform 0.2s; /* Transición suave */
    -webkit-tap-highlight-color: transparent; /* Elimina el efecto de clic en móviles */
}

.search-btn:hover, .search-btn:focus {
    background: #1565c0;
}

.search-btn:active {
    transform: scale(0.95); /* Efecto de clic */
    box-shadow: none; /* Sin sombra adicional */
}

.search-icon {
    color: #fff;
    font-size: 1.3rem;
    pointer-events: none;
}
/* Centrar verticalmente el icono de visibility en la navbar */
.navbar .right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important; 
}

.navbar .right a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* Ajuste para móviles */
@media (max-width: 480px) {
    .search-btn {
        height: 28px;
        width: 28px;
        margin-left: 8px;
    }
    .search-icon {
        font-size: 1rem;
    }
    .navbar-search input[type="search"] {
        height: 38px;
        font-size: 0.85rem;
        padding: 0 10px 0 10px;
    }
    .navbar-search {
        max-width: 100%; /* Ocupa todo el ancho disponible */
    }
}

/* Responsive ajustes */
@media (max-width: 768px) {
    .title-container {
        gap: 6px;
        padding: 0 4px;
    }
    .navbar .title {
        font-size: 0.98rem;
        padding-right: 8px;
    }
    .navbar-search {
        max-width: 180px;
        height: 32px;
    }
    .navbar-search input[type="search"] {
        height: 32px;
        font-size: 0.92rem;
        padding: 0 32px 0 10px;
    }
    .search-icon {
        font-size: 1.1rem;
    }
    .navbar-search {
        max-width: 90% !important; /* Ocupa el 90% del ancho de la pantalla */
    }
}

@media (max-width: 480px) {
    .search-btn {
        height: 32px;
        width: 32px;
        margin-left: 6px;
    }
    .search-icon {
        font-size: 1.5rem !important; /* Solo la lupa más pequeña */
    }
    .navbar-search input[type="search"] {
        height: 28px;
        font-size: 0.85rem;
        padding: 0 10px 0 10px;
        
    }
}

/* --- Buscador más pequeño y compacto en móviles --- */
@media (max-width: 600px) {
    .title-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 0 2px;
    }
    .navbar .title {
        font-size: 0.93rem;
        padding-right: 0;
        margin-bottom: 2px;
        width: 100%;
        text-align: left;
    }
    .navbar-search {
        max-width: 350px !important;
        width: 90%;
        height: 35px !important;
        margin: 0;
        border-radius: 14px;
        box-shadow: 0 2px 8px #1e90ff22;
        padding: 0;
    }
    .navbar-search input[type="search"] {
        height: 28px;
        font-size: 0.78rem;
        padding: 0 24px 0 8px;
        border-radius: 14px;
    }
}

/* Tarjetas glassmorphism */
.vendedor-card,
.pedido-card,
.cliente-card,
.page-ver-pedidos-cerrados .list .card {
    border-radius: 24px;
    background: var(--f7-card-bg-color);
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.10), 0 1.5px 8px #1e90ff11;
    border: 1.5px solid var(--f7-card-border-color);
    backdrop-filter: var(--f7-glass-blur);
    transition: transform 0.18s, box-shadow 0.18s, border 0.18s;
    overflow: hidden;
}

.vendedor-card:hover,
.pedido-card:hover,
.cliente-card:hover,
.page-ver-pedidos-cerrados .list .card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 16px 48px rgba(30, 144, 255, 0.18);
    border-color: #1e90ff;
}

/* Avatares circulares con borde azul y sombra */
.vendedor-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 18px auto;
    background: linear-gradient(135deg, #fff 60%, #63b8ff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e90ff;
    font-size: 2.8rem;
    box-shadow: 0 4px 16px #1e90ff33;
    border: 4px solid #1e90ff;
    transition: box-shadow 0.2s, background 0.2s;
}

.vendedor-card:hover .vendedor-avatar {
    background: linear-gradient(135deg, #1e90ff 60%, #fff 100%);
    color: #fff;
    box-shadow: 0 8px 32px #1e90ff55;
}

/* Botones modernos */
.button
 {
    background: var(--f7-button-bg-color);
    color: var(--f7-button-text-color);
    font-weight: 600;
    border-radius: 12px;
    padding: 12px 24px;
    border: none;
    box-shadow: 0 2px 12px #1e90ff22;
    transition: background 0.3s, box-shadow 0.3s, transform 0.15s;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.button:hover
 {
    background: linear-gradient(90deg, #1c86ee 0%, #1e90ff 100%);
    box-shadow: 0 6px 24px #1e90ff33;
    transform: translateY(-2px) scale(1.03);
}

/* Inputs modernos */
input,
select,
textarea {
    background: rgba(255,255,255,0.8);
    color: #1e293b;
    border: 1.5px solid #1e90ff44;
    border-radius: 10px;
    padding: 5px;
    font-size: 1.08rem;
    margin-bottom: 10px;
    box-shadow: 0 1px 6px #1e90ff11;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #1e90ff;
    box-shadow: 0 0 12px #1e90ff33;
    outline: none;
}

/* Placeholder blanco y elegante */
input::placeholder,
textarea::placeholder {
    color: #1e90ff;
    opacity: 0.7;
    font-weight: 500;
}

/* Banner de bienvenida glassmorphism */
.welcome-banner {
    background: rgba(255,255,255,0.7);
    border-radius: 20px;
    padding: 28px 20px;
    box-shadow: 0 4px 24px #1e90ff11;
    margin-bottom: 24px;
    color: #1e293b;
    font-size: 1.18rem;
    font-weight: 500;
    backdrop-filter: var(--f7-glass-blur);
}

/* Footer elegante */
.block-footer {
    margin-top: 44px;
    color: #1e90ff;
    text-align: center;
    font-size: 1.08rem;
    opacity: 0.96;
    text-shadow: 0 2px 8px #1e90ff22;
    padding-bottom: 16px;
}

.block-footer a {
    color: var(--f7-theme-color);
    text-decoration: underline;
    font-weight: 600;
}

/* Títulos y textos */
h1, h2, h3, h4, h5, h6 {
    color: #1e90ff;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
}

p, span, label, li, a {
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
    color: var(--f7-text-color);
}

/* Listas y enlaces */
.links-list ul li a {
    background: rgba(255,255,255,0.8);
    color: #1e90ff;
    border-radius: 12px;
    box-shadow: 0 2px 8px #1e90ff11;
    font-weight: 600;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.links-list ul li a:hover {
    background: var(--f7-theme-color);
    color: #fff;
    box-shadow: 0 4px 16px #1e90ff33;
}

/* Íconos navbar */
.navbar .material-icons {
    color: #fff;
    font-size: 2rem;
    transition: color 0.3s;
}

.navbar .material-icons:hover {
    color: #63b8ff;
}

/* Responsive para móviles */
@media (max-width: 600px) {
    .navbar {
        font-size: 1rem;
        padding: 6px 0;
        border-radius: 0 0 16px 16px;
        min-height: 44px !important;
    }
    .welcome-banner {
        padding: 18px 10px;
        font-size: 1rem;
    }
    .vendedor-avatar {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    .button {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
    .vendedor-card,
    .pedido-card,
    .cliente-card {
        border-radius: 14px;
    }
}
.menu-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
    margin: 0 0 24px 0;
    padding: 0 8px;
}

.menu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--f7-card-bg-color);
    border-radius: 18px;
    box-shadow: 0 4px 16px #1e90ff22;
    padding: 28px 10px 18px 10px;
    text-decoration: none;
    color: #1e90ff;
    font-weight: 600;
    font-size: 1.08rem;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s;
    position: relative;
    min-height: 120px;
}

.menu-card .material-icons {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #1e90ff;
    transition: color 0.2s;
}

.menu-card:hover, .menu-card:focus {
    background: linear-gradient(135deg, #1e90ff 60%, #63b8ff 100%);
    color: #fff;
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 8px 32px #1e90ff33;
}

.menu-card:hover .material-icons,
.menu-card:focus .material-icons {
    color: #fff;
}

.menu-card.salir {
    background: rgba(255, 0, 0, 0.08);
    color: #e53935;
}

.menu-card.salir:hover {
    background: linear-gradient(135deg, #e53935 60%, #ffbaba 100%);
    color: #fff;
}

@media (max-width: 600px) {
    .menu-dashboard {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 2px;
    }
    .menu-card {
        padding: 18px 4px 12px 4px;
        font-size: 0.98rem;
        min-height: 90px;
    }
    .menu-card .material-icons {
        font-size: 2rem;
    }
}

/* Página de saldo CXC */
.page-saldo-cxc {
    background: linear-gradient(135deg, #f7faff 0%, #e3f0ff 100%);
    color: #1e293b;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
}

/* Navbar */
.navbar-custom {
    background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.2);
    border-radius: 0 0 16px 16px;
    min-height: 52px !important;
    padding: 8px 0;
    font-size: 1rem;
}

/* Información del cliente */
.client-info {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 20px;
    text-align: left;
}

.client-info h2 {
    color: #1e90ff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Tabla de saldos */
.balance-table {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
}

.balance-table h2 {
    color: #1e90ff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.balance-table .list ul {
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
}

.balance-table .list ul li {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(30, 144, 255, 0.1);
}

.balance-table .list ul li.header {
    background: #1e90ff;
    color: #fff;
    font-weight: bold;
}

.balance-table .list ul li:last-child {
    border-bottom: none;
}

/* Saldo total */
.total-balance {
    text-align: center;
    margin-top: 20px;
}

.total-balance h3 {
    color: #1e90ff;
    font-size: 1.8rem;
    font-weight: bold;
}

.total-balance h3 span {
    color: #1e293b;
    font-size: 2rem;
}

/* Página de productos del cliente */
.page-productos-clientes {
    background: linear-gradient(135deg, #f7faff 0%, #e3f0ff 100%);
    color: #1e293b;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
}


/* Información del cliente */
.client-info {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 20px;
    text-align: left;
}

.client-info h2 {
    color: #1e90ff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Resumen de ventas */
.resumen-ventas {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
}

.resumen-ventas h2 {
    color: #1e90ff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Tarjetas de productos */
.producto-card {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);   
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.producto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.2);
}

.producto-card h3 {
    color: #1e90ff;
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.producto-card p {
    color: #1e293b;
    font-size: 1rem;
    margin: 4px 0;
}

/* Página de documento */
.page-documento {
    background: linear-gradient(135deg, #f7faff 0%, #e3f0ff 100%);
    color: #1e293b;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
}



/* Información del cliente */
.client-info {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 20px;
    text-align: left;
}

.client-info h2 {
    color: #1e90ff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Formulario */
.formulario {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
}

.formulario h2 {
    color: #1e90ff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Página de ubicación */
.page-ubicacion {
    background: linear-gradient(135deg, #f7faff 0%, #e3f0ff 100%);
    color: #1e293b;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
}

/* Navbar */
.navbar-custom {
    background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.2);
    border-radius: 0 0 16px 16px;
    min-height: 52px !important;
    padding: 8px 0;
    font-size: 1rem;
}

/* Información del cliente */
.client-info {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 20px;
    text-align: left;
}

.client-info h2 {
    color: #1e90ff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Contenedor del mapa */
.mapa-container {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 20px;
    text-align: center;
}

.mapa-container h2 {
    color: #1e90ff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

#map {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 20px;
}

/* Página de devoluciones */
.page-ver-devoluciones {
    background: linear-gradient(135deg, #f7faff 0%, #e3f0ff 100%);
    color: #1e293b;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
}



/* Información del vendedor */
.client-info {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 20px;
    text-align: left;
}

.client-info h2 {
    color: #1e90ff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Lista de devoluciones */
.devoluciones-list {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
}

/* Tarjetas de devoluciones */
.devolucion-card {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.devolucion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.2);
}

.devolucion-card h3 {
    color: #1e90ff;
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.devolucion-card p {
    color: #1e293b;
    font-size: 1rem;
    margin: 4px 0;
}


/* Página de pedir fechas de devoluciones */
.page-pedir-fechas-devoluciones {
    background: linear-gradient(135deg, #f7faff 0%, #e3f0ff 100%);
    color: #1e293b;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
}



/* Banner de bienvenida */
.welcome-banner {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 20px;
    text-align: center;
}

.welcome-banner h2 {
    color: #1e90ff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Formulario */
.formulario {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
}

.formulario .item-label {
    color: #1e90ff;
    font-weight: bold;
}

.formulario input[type="date"] {
    background: rgba(255, 255, 255, 0.8);
    color: #1e293b;
    border: 1.5px solid #1e90ff44;
    border-radius: 10px;
    padding: 10px;
    font-size: 1rem;
    box-shadow: 0 1px 6px #1e90ff11;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.formulario input[type="date"]:focus {
    border-color: #1e90ff;
    box-shadow: 0 0 12px #1e90ff33;
    outline: none;
}

/* Página de devoluciones cerradas */
.page-ver-devoluciones-cerradas {
    background: linear-gradient(135deg, #f7faff 0%, #e3f0ff 100%);
    color: #1e293b;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
}

/* Navbar */
.navbar-custom {
    background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.2);
    border-radius: 0 0 16px 16px;
    font-size: 1rem;
    padding: 8px 0;
    min-height: 52px !important;
}

/* Banner de bienvenida */
.welcome-banner {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 16px;
    text-align: center;
    font-size: 0.9rem;
}

.welcome-banner h2 {
    color: #1e90ff;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.welcome-banner p {
    color: #1e293b;
    font-size: 0.85rem;
    margin: 0;
}

/* Lista de devoluciones cerradas */
.devoluciones-list {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
}

/* Tarjetas de devoluciones cerradas */
.devolucion-card {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(30, 144, 255, 0.1);
    margin-bottom: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #e3f0ff;
    font-size: 0.85rem;
    
}

.devolucion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 24px rgba(30, 144, 255, 0.2);
    border-color: #1e90ff;
}

.devolucion-card h3 {
    color: #1e90ff;
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.devolucion-card p {
    color: #1e293b;
    font-size: 0.85rem;
    margin: 4px 0;
    text-align: left;
}

/* Footer de la tarjeta */
.devolucion-card .card-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(30, 144, 255, 0.05);
    border-top: 1px solid #e3f0ff;
}
/* Agrega esto a styles.css */
.card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
/* Botones en las tarjetas de devoluciones */
.devolucion-card .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px; /* Ajusta el tamaño del botón */
    font-size: 0.9rem; /* Tamaño de fuente consistente */
    border-radius: 8px; /* Bordes redondeados */
    text-align: center;
    background: var(--f7-button-bg-color);
    color: var(--f7-button-text-color);
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
    height: 40px; /* Altura uniforme */
    line-height: normal; /* Evitar que el texto se desplace */
    box-shadow: 0 2px 8px rgba(30, 144, 255, 0.1);
}



.devolucion-card .button:hover {
    background: linear-gradient(90deg, #1c86ee 0%, #1e90ff 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.2);
}

.devolucion-card .button:active {
    transform: scale(0.98);
}

/* Mensaje de no resultados */
.page-ver-devoluciones-cerradas .devoluciones-list p {
    text-align: center;
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 16px 0;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(30, 144, 255, 0.1);
}

/* Página de catálogo */
.page-catalogo {
    background: linear-gradient(135deg, #f7faff 0%, #e3f0ff 100%);
    color: #1e293b;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
}

/* Navbar */
.navbar-custom {
    background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.2);
    border-radius: 0 0 16px 16px;
    font-size: 1rem;
    padding: 8px 0;
    min-height: 52px !important;
}


.welcome-banner h2 {
    color: #1e90ff;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.welcome-banner p {
    color: #1e293b;
    font-size: 0.85rem;
    margin: 0;
}



/* Tarjetas de productos */
.producto-card {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #e3f0ff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.producto-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.2);
    border-color: #1e90ff;
}

.producto-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 0.2px solid #e3f0ff;
}

.producto-card h3 {
    color: #1e90ff;
    font-size: 0.85rem;
    text-align: left;
}

.producto-card p {
    color: #1e293b;
    font-size: 0.9rem;
    margin: 4px 0;
    text-align: left;
}
.producto-card {
    max-width: 370px !important;
    min-width: 280px !important;    
    width: 80% !important;
}

/* Tabla de precios */
.precios-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.precios-table th,
.precios-table td {
    text-align: left;
    padding: 5px;
    font-size: 0.8rem;
    border: 1px solid #e3f0ff;
}

.precios-table th {
    background: #1e90ff;
    color: #fff;
    font-weight: bold;
}

.precios-table td {
    background: rgba(255, 255, 255, 0.9);
}

/* Mensaje de no resultados */
.productos-list p {
    text-align: left;
    color: #1e293b;
    font-size: 0.8rem;
    font-weight: 500;
    margin: 20px 0;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(30, 144, 255, 0.1);
}
/* Alinear precios a la derecha */
.precios-table td:nth-child(2) {
    text-align: right;
}
/* Navbar aumentada */
.navbar {
    min-height: 52px !important;
    padding: 8px 0 !important;
}
/* pagina de bproducto.php*/ 
.page-bproducto {
    background: linear-gradient(135deg, #e3f0ff 0%, #f7faff 100%);
    min-height: 100vh;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
}

.producto-nombre {
    font-size: 1.08rem;
    font-weight: 700;
    color: #1e90ff;
    margin-bottom: 2px;
    letter-spacing: 0.2px;
    animation: fadeIn 0.7s;
}
.producto-codigo, .producto-precio, .producto-agregado {
    font-size: 0.95rem;
    color: #1e293b;
    margin-bottom: 2px;
}
.producto-agregado {
    color: #43a047;
    font-weight: 600;
}
.inputs-cantidad {
    display: flex;
    gap: 12px;
    margin: 10px 0 10px 0;
    align-items: center;
}
.input-caja, .input-unidad {
    background: #f1f8ff;
    border: 2px solid #1e90ff44;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 1rem;
    width: 70px;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.input-caja:focus, .input-unidad:focus {
    border-color: #1e90ff;
    box-shadow: 0 0 8px #1e90ff33;
}
.input-label {
    font-size: 0.93rem;
    color: #1e90ff;
    font-weight: 600;
    margin-right: 3px;
}
.btn-agregar {
    background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 1.08rem;
    box-shadow: 0 2px 12px #1e90ff22;
    transition: background 0.3s, box-shadow 0.3s, transform 0.15s;
    cursor: pointer;
    margin-top: 8px;
    animation: fadeIn 0.8s;
    width: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
.btn-agregar:disabled {
    background: #bdbdbd;
    color: #fff;
    cursor: not-allowed;
}
.btn-agregar:hover {
    background: #1565c0;
    transform: scale(1.04);
}
.limite-msg {
    color: #e53935;
    font-weight: 600;
    margin-top: 10px;
    font-size: 1rem;
    animation: shake 0.4s;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px);}
    to { opacity: 1; transform: translateY(0);}
}
@keyframes fadeIn {
    from { opacity: 0;}
    to { opacity: 1;}
}
@keyframes shake {
    10%, 90% { transform: translateX(-2px);}
    20%, 80% { transform: translateX(4px);}
    30%, 50%, 70% { transform: translateX(-8px);}
    40%, 60% { transform: translateX(8px);}
}
@media (max-width: 600px) {
    .producto-card { padding: 12px 7px 7px 7px; }
    .producto-nombre { font-size: 1rem; }
    .producto-codigo, .producto-precio, .producto-agregado { font-size: 0.92rem; }
    .btn-agregar { font-size: 1rem; padding: 8px 14px; }
    .input-caja, .input-unidad { width: 54px; font-size: 0.97rem; }
}

.mensaje-form-card {
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.10), 0 1.5px 8px #1e90ff11;
    padding: 32px 24px 24px 24px;
    max-width: 480px;
    margin: 32px auto 0 auto;
    animation: fadeInUp 0.7s;
}
.mensaje-form-card h2 {
    color: #1e90ff;
    font-size: 2rem;
    margin-bottom: 18px;
    text-align: center;
    font-weight: 700;
}
.mensaje-form-card textarea {
    width: 100%;
    min-height: 120px;
    border-radius: 14px;
    border: 1.5px solid #1e90ff44;
    padding: 14px;
    font-size: 1.08rem;
    resize: vertical;
    margin-bottom: 18px;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 1px 6px #1e90ff11;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mensaje-form-card textarea:focus {
    border-color: #1e90ff;
    box-shadow: 0 0 12px #1e90ff33;
    outline: none;
}
.mensaje-form-card .button {
    width: 100%;
    font-size: 1.15rem;
    padding: 14px 0;
    border-radius: 12px;
    margin-top: 10px;
}
.mensaje-form-card label {
    font-weight: 600;
    color: #1e90ff;
    margin-bottom: 8px;
    display: block;
    font-size: 1.08rem;
}
.mensaje-form-card .material-icons {
    font-size: 2.2rem;
    color: #1e90ff;
    display: block;
    margin: 0 auto 10px auto;
    animation: bounceIn 1s;
}
@media (max-width: 600px) {
    .mensaje-form-card {
        padding: 18px 6vw 18px 6vw;
        max-width: 98vw;
    }
}
@keyframes bounceIn {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}
/* Ajuste para que los cards no se estiren demasiado en desktop y se centren si hay pocos */

.productos-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 8px;
    justify-items: center !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

.producto-card {
    max-width: 370px !important;
    min-width: 280px !important;
    width: 80% !important;
}
/* Más grande y espacioso el card de productos en PC */
@media (min-width: 900px) {
    .producto-card {
        max-width: 280px !important;
        min-width: 200px !important;
        width: 80% !important;
        padding: 12px 12px 7px 12px !important;
        margin-bottom: 12px !important;
        font-size: 1.1rem !important;
    }
    .productos-list {
        gap: 9px !important;
        padding:14px 22px 14px 22px !important;
    }
}

@media (min-width: 700px) {
    .productos-list {
        justify-content: center !important;
    }
}

@media (max-width: 600px) {
    .productos-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        
        padding: 8px 14px 8px 14px !important; /* Padding lateral y abajo */
    }
    .producto-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        margin: 0 !important; /* Elimina margen lateral, el gap lo maneja la grid */
        padding: 7px 4px 7px 4px !important; /* Padding interno uniforme */
        border-radius: 10px !important;
        margin-bottom: 16px !important;
        font-size: 0.68rem !important;
        box-shadow: 0 2px 8px #1e90ff22;
    }
    .producto-card img {
        height: 80px !important;   /* Imagen más grande y visible */
        object-fit: cover !important;
        border-radius: 7px !important;
        margin-bottom: 4px;
        width: 100% !important;
        display: block;
    }
    .producto-nombre {
        font-size: 0.82rem !important;
        margin-bottom: 1px !important;
        font-weight: 600;
        
    }
    .producto-codigo, .producto-precio, .producto-agregado {
        font-size: 0.65rem !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }
    .btn-agregar {
        font-size: 0.72rem !important;
        padding: 4px 6px !important;
        width: 90% !important;
        margin-top: 4px !important;
    }
    .inputs-cantidad {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin: 4px 0 !important;
        width: 100%;
        flex-wrap: wrap;
    }
    .input-group-cantidad {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        min-width: 60px;
        flex: 1 1 0;
    }
    .input-label {
        font-size: 0.62rem !important;
        margin-bottom: 2px !important;
        margin-right: 0 !important;
        display: block !important;
        min-width: unset;
        font-weight: 600;
        color: #1e90ff;
    }
    .input-caja, .input-unidad {
        width: 100% !important;
        font-size: 0.65rem !important;
        padding: 2px 2px !important;
        margin-bottom: 0 !important;
        border-radius: 4px !important;
        display: block !important;
        box-sizing: border-box;
    }
}

.formulario-login {
    max-width: 420px;
    margin: 0 auto;
    background: rgba(255,255,255,0.93);
    border-radius: 16px;
    padding: 24px 18px 18px 18px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.10);
}
@media (max-width: 600px) {
    .formulario-login {
        padding: 14px 4vw 14px 4vw;
        max-width: 98vw;
    }
}
/* Mejora de dimensiones para formularios de fechas (pedir_fechas_pedidos, pedir_fechas, pedir_fechas_devoluciones) */
.formulario,
.formulario-login {
    max-width: 420px;
    margin: 0 auto 32px auto;
    padding: 24px 18px 18px 18px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.10);
    background: rgba(255,255,255,0.93);
}

@media (max-width: 600px) {
    .formulario,
    .formulario-login {
        padding: 14px 4vw 14px 4vw;
        max-width: 98vw;
    }
}

/* Mantén los estilos originales de títulos, bordes e inputs */
.formulario .item-label,
.formulario-login .item-label {
    color: #1e90ff;
    font-weight: 600;
}

.formulario input[type="date"],
.formulario-login input[type="date"] {
    cursor: pointer;
    border: 1.5px solid #1e90ff44;
    border-radius: 10px;
    padding: 5px;
    font-size: 1.08rem;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.8);
    color: #1e293b;
    box-shadow: 0 1px 6px #1e90ff11;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.formulario input[type="date"]:focus,
.formulario-login input[type="date"]:focus {
    border-color: #1e90ff;
    box-shadow: 0 0 12px #1e90ff33;
    outline: none;
}
/* Mejora de dimensiones para formularios de fechas en PC */
@media (min-width: 700px) {
    .formulario,
    .formulario-login {
        max-width: 540px;
        padding: 32px 32px 28px 32px;
        font-size: 1.15rem;
    }
    .formulario .item-label,
    .formulario-login .item-label {
        font-size: 1.13rem;
    }
    .formulario input[type="date"],
    .formulario-login input[type="date"] {
        font-size: 1.13rem;
        padding: 10px 12px;
    }
}
/* Para mejorar la experiencia en PC, fuerza el cursor pointer y el focus visual */
@media (min-width: 700px) {
    .formulario input[type="date"],
    .formulario-login input[type="date"] {
        cursor: pointer;
    }
}

/* Card de totales */
.totales-card {
    max-width: 420px;
    margin: 24px auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    text-align: left;
    font-size: 1rem;
    color: #1e293b;
}

.totales-card h3 {
    font-size: 1.3rem;
    color: #1e90ff;
    margin-bottom: 12px;
    text-align: center;
}

.totales-card ul li {
    margin-bottom: 8px;
    font-size: 1rem;
    color: #1e293b;
}

.totales-card ul li strong {
    color: #1e90ff;
}
/* Resaltar inputs */
/* Estilo para los inputs con un diseño más sutil */
.input-label {
    font-weight: bold;
    color: #1e90ff; /* Azul claro */
    margin-bottom: 5px;
    display: block;
}

input[type="date"], input[type="text"], input[type="number"] {
    border: 1px solid #d1d5db; /* Gris claro */
    border-radius: 8px;
    padding: 10px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    background-color: #f9fafb; /* Fondo claro */
    color: #1e293b; /* Texto oscuro */
    transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="date"]::placeholder,
input[type="text"]::placeholder,
input[type="number"]::placeholder {
    color: #9ca3af; /* Gris tenue */
    font-style: italic;
}

input[type="date"]:focus,
input[type="text"]:focus,
input[type="number"]:focus {
    outline: none;
    border-color: #1e90ff; /* Azul claro */
    box-shadow: 0 0 5px rgba(30, 144, 255, 0.5); /* Sombra azul */
    background-color: #ffffff; /* Fondo blanco al enfocar */
}

/* Ajustar inputs en dispositivos móviles */
@media (max-width: 600px) {
    input[type="date"], input[type="text"], input[type="number"] {
        font-size: 0.9rem;
    }
}
@media (max-width: 600px) {
    .navbar .right a {
        display: inline-block; /* Asegúrate de que el botón sea visible */
    }
}

/* Página de devoluciones */
/* Página de devoluciones */
.page-edita-devoluciones .devolucion-card {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column; /* Diseño vertical por defecto */
    align-items: center;
    padding: 16px;
}

.page-edita-devoluciones .devolucion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.2);
}

/* Imagen del producto */
.page-edita-devoluciones .devolucion-image {
    flex: 0 0 200px; /* Tamaño fijo para la imagen */
    max-width: 200px;
    height: 300px; /* Altura fija para evitar que el card crezca */
    margin-right: 16px;
    position: relative;
    border-radius: 12px; /* Bordes redondeados */
    overflow: hidden; /* Asegura que los bordes redondeados se apliquen */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
    background-color: #fff; /* Fondo blanco para diferenciar */
}

.page-edita-devoluciones .devolucion-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ajusta la imagen dentro del contenedor */
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
}

.page-edita-devoluciones .devolucion-image:hover img {
    transform: scale(1.05); /* Efecto de zoom al pasar el mouse */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

/* Información del producto */
.page-edita-devoluciones .devolucion-info {
    flex: 1; /* Ocupa el resto del espacio */
    text-align: left;
    margin-top: 0;
}

.page-edita-devoluciones .devolucion-info h3 {
    font-size: 1.2rem;
    color: #1e90ff;
    margin-bottom: 8px;
}

.page-edita-devoluciones .devolucion-info p {
    font-size: 1rem;
    color: #1e293b;
    margin: 4px 0;
}

.page-edita-devoluciones .devolucion-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-start; /* Alinear el botón a la izquierda */
    gap: 10px;
}

/* Botón de borrar */
.page-edita-devoluciones .devolucion-actions a {
    display: inline-flex; /* Cambiar a flexbox */
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: center; /* Centrar horizontalmente el contenido */
    padding: 8px 16px;
    font-size: 0.9rem;
    border-radius: 8px;
    text-align: center;
    background: #ff4d4d;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
    height: 40px; /* Asegurar altura uniforme */
    line-height: normal; /* Evitar que el texto se desplace */
}

.page-edita-devoluciones .devolucion-actions a:hover {
    background: #e63939;
    transform: scale(1.05);
}

/* Formulario de subida */
.page-edita-devoluciones .upload-form {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.page-edita-devoluciones .upload-form input[type="file"] {
    width: 100%;
    max-width: 300px;
    background: #fff;
    border: 1.5px solid #1e90ff44;
    border-radius: 10px;
    padding: 6px;
    font-size: 1rem;
    color: #1e293b;
    box-shadow: 0 1px 6px #1e90ff11;
}

.page-edita-devoluciones .upload-form input[type="submit"] {
    background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    padding: 8px 20px;
    border: none;
    box-shadow: 0 2px 12px #1e90ff22;
    transition: background 0.3s, box-shadow 0.3s, transform 0.15s;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.page-edita-devoluciones .upload-form input[type="submit"]:hover {
    background: linear-gradient(90deg, #1c86ee 0%, #1e90ff 100%);
    box-shadow: 0 6px 24px #1e90ff33;
    transform: translateY(-2px) scale(1.03);
}

/* Diseño responsivo para pantallas grandes */
@media (min-width: 768px) {
    .page-edita-devoluciones .devolucion-card {
        flex-direction: row; /* Diseño horizontal en pantallas grandes */
        align-items: flex-start;
    }

    .page-edita-devoluciones .devolucion-image {
        flex: 0 0 300px; /* Imagen más grande en pantallas grandes */
        max-width: 300px;
    }

    .page-edita-devoluciones .devolucion-info h3 {
        font-size: 1.4rem; /* Títulos más grandes */
    }

    .page-edita-devoluciones .devolucion-info p {
        font-size: 1.1rem; /* Texto más grande */
    }

    .page-edita-devoluciones .devolucion-actions a {
        font-size: 1rem; /* Botón más grande */
        padding: 10px 20px;
    }
    .page-edita-devoluciones .upload-form input[type="file"] {
        max-width: 30%; /* Input ocupa todo el ancho */
    }
}

/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 600px) {
    .page-edita-devoluciones .devolucion-card {
        padding: 12px;
    }

    .page-edita-devoluciones .devolucion-image {
        flex: 0 0 180px; /* Imagen más pequeña en móviles */
        max-width: 300px;

    }

    .page-edita-devoluciones .devolucion-info h3 {
        font-size: 1rem; /* Títulos más pequeños */
    }

    .page-edita-devoluciones .devolucion-info p {
        font-size: 0.9rem; /* Texto más pequeño */
    }

    .page-edita-devoluciones .devolucion-actions a {
        font-size: 0.85rem; /* Botón más pequeño */
        padding: 6px 12px;
    }

    .page-edita-devoluciones .upload-form input[type="file"] {
        max-width: 100%; /* Input ocupa todo el ancho */
        font-size: 0.8rem; /* Botón más pequeño */
    }

    .page-edita-devoluciones .upload-form input[type="submit"] {
        font-size: 0.9rem; /* Botón más pequeño */
        padding: 6px 16px;
    }
}
/* Estilo para los textos en los formularios de mensaje */
.mensaje-form-card h2,
.mensaje-form-card label,
.mensaje-form-card textarea::placeholder {
    color: #000; /* Cambiar el color del texto a negro */
}

.mensaje-form-card textarea {
    color: #000; /* Cambiar el color del texto dentro del textarea a negro */
}
.espacio-imagen {
    width: 100px; /* Ajusta según el tamaño deseado */
    height: 100px; /* Ajusta según el tamaño deseado */
    background-color: #f0f0f0; /* Color de fondo para el espacio en blanco */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
}

.espacio-imagen .material-icons {
    font-size: 48px;
    color: #ccc; /* Color gris claro para el ícono */
}
.devolucion-card .card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* Por defecto (PC): alineados a la derecha */
.card-footer,
.devolucion-card .card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

/* En móvil: centrados */
@media (max-width: 600px) {
    .card-footer,
    .devolucion-card .card-footer {
        justify-content: center !important;
    }
}
/* Contenedor fijo para la imagen del producto */
    /* Asegura espacio uniforme para la imagen en cada card */
    .producto-imagen-contenedor {
        width: 100%;
        height: 180px; /* Altura fija */
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f7fa;
        border-bottom: 0.2px solid #e3f0ff;
        overflow: hidden;
        padding: 0;
        margin-bottom: 6px; /* Espacio uniforme entre imagen y nombre */
    }

    .producto-imagen {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        background: #f5f7fa !important;
        /* Elimina cualquier margen o padding extra */
    }

    @media (max-width: 600px) {
        .producto-imagen-contenedor {
            height: 80px !important;
        }
        .producto-imagen {
            height: 100% !important;
            width: 100% !important;
            object-fit: cover !important;
            background: #f5f7fa !important;
        }
    }
    .producto-imagen-vacia {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f5f7fa !important;
    }
/* Card de edición de pedido con botón borrar alineado */
/* Card de edición de pedido con botón borrar alineado abajo */
/* Card de edición de pedido: todo alineado a la izquierda y en columna */
.producto-card-edita {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 12px;
    background: rgba(255,255,255,0.95);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    margin-bottom: 18px;
}

.producto-card-edita .producto-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.producto-card-edita .producto-nombre,
.producto-card-edita .producto-codigo,
.producto-card-edita .producto-agregado,
.producto-card-edita .producto-precio {
    text-align: left;
    width: 100%;
}

/* Botones de editar y borrar en cards de edición de pedido */
.producto-card-edita .producto-borrar {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
}

.producto-card-edita .button {
    flex: 1 1 0;
    padding: 8px 0;
    font-size: 0.92rem;
    min-width: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px #1e90ff22;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.producto-card-edita .button .material-icons {
    margin-right: 6px;
    font-size: 1.2rem;
}

@media (max-width: 600px) {
    .producto-card-edita .producto-borrar {
        gap: 6px;
    }
    .producto-card-edita .button {
        font-size: 0.85rem;
        padding: 8px 0;
    }
    .producto-card-edita .button .material-icons {
        font-size: 1rem;
        margin-right: 4px;
    }
}

@media (max-width: 600px) {
    .producto-card-edita {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 6px;
    }
}
/* catologo cambios en los cards */
/* Tabla de precios compacta y responsiva */
.precios-table-responsive {
    width: 100%;
    overflow-x: auto;
    margin-top: 8px;
}

.precios-table-mini {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.98rem;
    background: #f7faff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px #1e90ff11;
}

.precios-table-mini th,
.precios-table-mini td {
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid #e3f0ff;
}

.precios-table-mini th {
    background: #1e90ff;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
}

.precios-table-mini td {
    background: transparent;
    color: #1e293b;
    font-size: 0.95rem;
    border: none;
}

.precios-table-mini tr:last-child td {
    border-bottom: none;
}

.precios-table-mini td:last-child,
.precios-table-mini th:last-child {
    text-align: right;
}

@media (max-width: 600px) {
    .precios-table-mini th,
    .precios-table-mini td {
        padding: 3px 4px;
        font-size: 0.82rem;
    }
    .precios-table-mini th {
        font-size: 0.82rem;
    }
}

/* Bloque de info alineado y pegado a la imagen */
.producto-card .producto-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    margin-top: 0; /* Sin margen superior */
    min-height: 60px; /* Ajusta este valor según el diseño */
    justify-content: flex-start;
}

/* Nombre del producto: sin truncar, alineado, siempre pegado a la imagen */
.producto-card .producto-nombre {
    font-size: 1.08rem;
    font-weight: 700;
    color: #1e90ff;
    margin-bottom: 2px;
    letter-spacing: 0.2px;
    animation: fadeIn 0.7s;
    display: block;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    min-height: 40px; /* Altura mínima fija */
    line-height: 1.25em;
    width: 100%;
    word-break: break-word;
}

/* Código y unidad alineados */
.producto-card .producto-codigo,
.producto-card .producto-precio {
    font-size: 0.95rem;
    color: #1e293b;
    margin-bottom: 2px;
    width: 100%;
    text-align: left;
}

/* Responsive para móvil */
@media (max-width: 600px) {
    .producto-card .producto-info {
        min-height: 50px; /* Ajusta según el diseño móvil */
    }

    .producto-card .producto-nombre {
        font-size: 0.8rem !important;
        margin-bottom: 1px !important;
        font-weight: 600;
        min-height: 36px; /* Altura mínima fija */
    }
    .producto-card .producto-codigo,
    .producto-card .producto-precio {
        font-size: 0.75rem !important;
        margin-bottom: 0 !important;
    }
}


/* Ajuste para que los productos estén más cerca del navbar en bproducto */
.page-bproducto .productos-list {
    margin-top: 20px !important;
    padding-top: 20px !important;
}
.page-bproducto .page-content {
    padding-top: 50px !important;
}
.page-dproducto .page-content {
    padding-top: 50px !important;
}
/* Más espacio debajo de los cards de edición de pedido en móvil */
@media (max-width: 600px) {
    .productos-list {
        padding-bottom: 8px !important;
    }
    .producto-card-edita {
        margin-bottom: 8px !important;
        
    }
}
@media (max-width: 600px) {
    .menu-card span {
        font-size: 0.88rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: block;
        text-align: center;
    }
}
/* Siempre alineado a la derecha en pedidos cerrados */
.page-ver-pedidos-cerrados .card-footer {
    justify-content: flex-end !important;
}
.page-ver-devoluciones-cerradas .card-footer {
    justify-content: flex-end !important;
}
.navbar-custom {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}
/* --- ESTILOS PARA EDICIÓN DE DEVOLUCIONES (AJUSTADO COMO bproducto.php) --- */
/* --- ESTILOS PARA EDICIÓN DE DEVOLUCIONES (AJUSTADO COMO bproducto.php) --- */
/* --- ESTILOS PARA EDICIÓN DE DEVOLUCIONES (AJUSTADO COMO bproducto.php) --- */
.page-edita-devoluciones {
    background: var(--f7-page-bg-color);
    min-height: 100vh;
}

/* Grid responsivo idéntico a bproducto.php */
.edita-devoluciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 8px 14px 8px 14px;
    justify-items: center;
    
}

/* Card idéntico a producto-card */
.edita-devolucion-card {
    background: var(--f7-card-bg-color);
    border-radius: 16px;
    box-shadow: var(--f7-card-box-shadow);
    border: 1px solid var(--f7-card-border-color);
    width: 100%;
    max-width: 320px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

.edita-devolucion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.2);
}

/* Contenedor de imagen idéntico a bproducto */
.edita-devolucion-imagen {
    width: 100%;
    height: 260px; /* Puedes ajustar este valor según tu diseño */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    border-radius: 0;
    padding: 0;
}

.edita-devolucion-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Muestra la imagen completa, sin recortar */
    transition: none;
    border-radius: 0;
    padding: 0;
}

/* Elimina cualquier efecto de zoom */
.edita-devolucion-imagen:hover img {
    transform: none;
}

.edita-devolucion-imagen .material-icons {
    font-size: 3.5rem;
    color: #cbd5e1;
}

/* Contenido del card - Textos más compactos */
.edita-devolucion-contenido {
    padding: 14px 16px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Título más pequeño y alineado a la izquierda */
.edita-devolucion-titulo {
    font-size: 0.98rem;
    color: var(--f7-theme-color);
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1.2;
    min-height: 28px;
    text-align: left;
    word-break: break-word;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Info alineada a la izquierda */
.edita-devolucion-info {
    font-size: 0.93rem;
    color: var(--f7-text-color);
    text-align: left;
    margin: 0 0 2px 0;
    padding: 0 2px;
    min-width: 0;
    white-space: nowrap;
}

.edita-devolucion-info strong {
    color: var(--f7-theme-color);
    font-weight: 600;
}

/* Acciones - Fijo abajo del card */
.edita-devolucion-acciones {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

/* Botón Borrar - Más pequeño y centrado */
.edita-boton-borrar {
    background: #ff3b30;
    color: #fff !important;
    border-radius: 8px;
    padding: 4px 0;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 600;
    font-size: 0.85rem;
    min-height: 28px;
    transition: background 0.2s;
    box-shadow: 0 1px 4px #ff3b3011;
    margin: 0 auto;
    cursor: pointer;
}

.edita-boton-borrar .material-icons {
    font-size: 1.2rem;
    margin-bottom: 0;
}

.edita-boton-borrar:hover {
    background: #e53935;
}

/* Formulario de subida - Fijo y compacto */
.edita-upload-form label {
    font-size: 0.93rem;
    color: var(--f7-theme-color);
    font-weight: 600;
    margin-bottom: 2px;
    display: block;
    text-align: center;
    letter-spacing: 0.1px;
}

.edita-upload-form .button-fill.color-green {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    width: 100%;
    border-radius: 8px;
    padding: 0;
    font-weight: 600;
    font-size: 0.97rem;
    margin-top: 6px;
    min-height: 36px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
}

/* Botones adaptados */
.edita-botones-imagen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0 0 0;
}

.edita-boton-imagen {
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    padding: 7px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 6px;
    color: var(--f7-text-color);
    transition: all 0.2s;
    font-size: 0.93rem;
    font-weight: 500;
    min-height: 36px;
    min-width: 0;
    box-shadow: 0 1px 4px #1e90ff11;
    cursor: pointer;
}

.edita-boton-imagen:hover {
    background: var(--f7-theme-color);
    color: #fff;
}

.edita-boton-imagen .material-icons {
    font-size: 1.2rem;
    margin-bottom: 0;
    line-height: 1;
}

/* Responsive: Mobile First */
@media (max-width: 600px) {
    .edita-devoluciones-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
        gap: 7px;
        padding: 8px 2px;
    }
    .edita-devolucion-card {
        max-width: 98vw;
        min-width: 0;
        width: 100%;
        margin-left: 0px;
        margin-right: 2px;
    }
    .edita-devolucion-imagen {
        height: 120px;
    }
    .edita-devolucion-titulo {
        font-size: 0.88rem;
        min-height: 20px;
        margin-bottom: 4px;
    }
    .edita-devolucion-info {
        font-size: 0.8rem;
    }
    .edita-botones-imagen {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .edita-boton-imagen {
        font-size: 0.82rem;
        padding: 6px 0;
        min-height: 32px;
    }
    .edita-boton-imagen .material-icons {
        font-size: 1rem;
    }
    .edita-boton-borrar {
        font-size: 0.82rem;
        padding: 6px 0;
        min-height: 32px;
    }
    .edita-upload-form label {
        font-size: 0.82rem;
    }
    .edita-upload-form .button-fill.color-green {
        font-size: 0.82rem;
        padding: 0;
        min-height: 32px;
        height: 32px;
    }
}

/* Tablet y Desktop */
@media (min-width: 768px) {
    .edita-devoluciones-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 18px;
        padding: 24px 16px;
    }
    .edita-devolucion-imagen {
        height: 200px;
    }
    .edita-devolucion-titulo {
        font-size: 1rem;
    }
    .edita-boton-imagen,
    .edita-boton-borrar,
    .edita-upload-form .button-fill.color-green {
        font-size: 0.93rem;
        min-height: 32px;
        height: 36px;
        padding: 0 8px;
    }
    .edita-boton-imagen .material-icons,
    .edita-boton-borrar .material-icons {
        font-size: 1.1rem;
    }
    .edita-boton-imagen,
    .edita-boton-borrar {
        gap: 4px;
    }
}

/* Ajuste especial para pantallas grandes */
@media (min-width: 1200px) {
    .edita-devoluciones-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* Animación de carga de imágenes */
@keyframes edita-image-load {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- BOTONES DE EDICIÓN DE DEVOLUCIONES --- */
.edita-boton-borrar,
.edita-upload-form .button-fill.color-green,
.edita-boton-imagen {
    transition: 
        background 0.22s cubic-bezier(.4,0,.2,1),
        color 0.22s cubic-bezier(.4,0,.2,1),
        box-shadow 0.22s cubic-bezier(.4,0,.2,1),
        transform 0.13s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 8px #1e90ff11;
    will-change: transform, box-shadow, background, color;
}

.edita-boton-borrar:hover,
.edita-upload-form .button-fill.color-green:hover,
.edita-boton-imagen:hover {
    background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
    color: #fff !important;
    box-shadow: 0 6px 24px #1e90ff33;
    transform: translateY(-2px) scale(1.04);
}

.edita-boton-borrar:active,
.edita-upload-form .button-fill.color-green:active,
.edita-boton-imagen:active {
    background: #1565c0;
    color: #fff !important;
    transform: scale(0.97);
    box-shadow: 0 2px 8px #1e90ff22;
}

/* Animación de entrada solo para los botones principales */
.edita-boton-borrar,
.edita-upload-form .button-fill.color-green {
    animation: fadeInUp 0.6s;
}

/* Opcional: animación para los botones de imagen */
.edita-boton-imagen {
    animation: fadeIn 0.7s;
}
/* Eliminar efecto de tap highlight en todos los elementos */
* {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}
/* Oferta animada */
 .oferta-animada {
        background: #ff1744 !important;
        color: #fff !important;
        border-radius: 16px !important;
        padding: 2px 10px 2px 6px !important;
        font-weight: bold !important;
        margin-left: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
        box-shadow: 0 2px 8px #ff174455 !important;
        animation: ofertaPulse 1.2s infinite alternate !important;
        font-size: 0.82em !important;
        max-width: 90vw;
        white-space: nowrap;
    }
    .oferta-animada .material-icons {
        margin-right: 2px !important;
        font-size: 1em !important;
        color: #fff !important;
    }
    .oferta-animada .oferta-texto {
        color: #fff !important;
        font-size: 0.95em !important;
    }
    @keyframes ofertaPulse {
        0% { transform: scale(1);}
        100% { transform: scale(1.13);}
    }
    @media (max-width: 600px) {
        .oferta-animada {
            font-size: 0.75em !important;
            padding: 2px 7px 2px 4px !important;
            margin-left: 2px !important;
        }
        .oferta-animada .material-icons {
            font-size: 0.75em !important;
        }
    }
    .oferta-sobre-imagen {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 2;
        box-shadow: 0 2px 8px #ff174455 !important;
        opacity: 0.97;
        pointer-events: none;
    }
    @media (max-width: 600px) {
        .oferta-sobre-imagen {
            top: 4px;
            right: 4px;
            font-size: 0.78em !important;
            padding: 1px 6px 1px 4px !important;
        }
    }

.precio-tachado {
    text-decoration: line-through;
    color: #b0bec5;
    font-size: 1em;
    margin-right: 8px;
    font-weight: 500;
    opacity: 0.8;
    vertical-align: middle;
}
.precio-descuento-mini {
    color: #ff1744;
    font-size: 1em;
    font-weight: bold;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-left: 2px;
    letter-spacing: 0.5px;
    animation: none;
    vertical-align: middle;
    display: inline-block;
    line-height: 1.2;
}
    @media (max-width: 600px) {
        .precio-descuento-mini {
            font-size: 1em;
            padding: 0;
        }
    }
    /* Centrar el card de sin resultados en móviles y escritorio */
    .card.producto-card.sin-resultados {
        margin: 32px auto !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center !important;
        width: 100%;
        max-width: 420px;
        box-sizing: border-box;
    }

    /* Centrar el card de sin resultados SOLO en móviles */
@media (max-width: 600px) {
    .card.producto-card.sin-resultados {
        grid-column: 1 / -1; /* Ocupa todas las columnas del grid */
        width: 100% !important;
        max-width: 98vw !important;
        margin: 32px auto !important;
        justify-self: center; /* Centrado horizontal */
    }
    
    /* Asegurar que el grid permita centrado */
    .productos-list {
        justify-items: center !important;
    }
}

/* Eliminar efecto ripple en todos los botones */
.ripple-wave {
    display: none !important;
}

/* Opcional: Deshabilitar la clase ripple */
.button-fill, .button-raised {
    --f7-ripple-color: transparent !important;
}
/* Opcional: Deshabilitar la clase ripple */
.button-fill, .button-raised {
    --f7-ripple-color: transparent !important;
}
@supports(padding: max(0px)) {
    .navbar-custom {
        padding-top: env(safe-area-inset-top);
    }
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}
.navbar-custom .navbar-bg {
    background: #1e90ff; /* Fallback sólido */
    background: -webkit-linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%) !important;
    background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%) !important;
    opacity: 1 !important;
    border-radius: 0 0 24px 24px;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.navbar-custom .navbar-inner {
    background: transparent !important;
}
/* Mejora la respuesta táctil en móviles */
.button, .button-fill, .button-raised, .btn-agregar, a.button, .link.button, .card-footer a, .navbar .link, .navbar .button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(30,144,255,0.18);
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}
/* Ajuste visual para textarea de motivo de devolución en cards de productos */
.producto-card textarea,
.producto-card-edita textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    resize: vertical;
    font-size: 0.98rem;
    margin-bottom: 8px;
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.9);
    border: 1.5px solid #1e90ff44;
    color: #1e293b;
    box-shadow: 0 1px 6px #1e90ff11;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: block;
}
@media (max-width: 600px) {
    .producto-card textarea,
    .producto-card-edita textarea {
        font-size: 0.85rem;
        padding: 6px 6px;
    }
}

/* css/styles.css */
.badge-bs-total {
    position: absolute;
   
    right: -5px;
    background: #ff1744;
    color: #fff;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    font-size: 0.75em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 8px #ff174422;
    z-index: 2;
    padding: 0 5px;
    line-height: 1;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
@media (max-width: 600px) {
    .badge-bs-total {
        min-width: 16px;
        height: 16px;
        font-size: 0.65em;
 
        right: -2px;
        padding: 0 4px;
    }
}
.producto-codigo {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0px 18px;
            font-size: 0.93em;
            color: #1e293b;
            margin-bottom: 0px !important;
        }
        .producto-precio .precio-tachado {
            text-decoration: line-through;
            color: #ff1744;
            margin-right: 6px;
        }
        .producto-precio .precio-descuento-mini {
            color: #388e3c;
            font-weight: bold;  	
        }
        .retornable-badge {
            background-color: #2196f3;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.75em;
            margin-left: 8px;
            vertical-align: middle;
        }
        .btn-agregar[disabled] {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .input-group-cantidad {
            flex: 1;
            min-width: 120px;
        }
        .inputs-cantidad {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .input-label {
            display: block;
            margin-bottom: 4px;
            font-size: 0.85em;
            color: #1e90ff;
        }
        .input-caja, .input-unidad {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 0.95em;
        }
        .btn-agregar {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 10px 15px;
            font-size: 0.95em;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            text-align: center;
        }
        .btn-agregar:hover {
            background-color: #388E3C;
        }
@media (max-width: 600px) {
    .badge-bs-total {
        min-width: 16px;
        height: 16px;
        font-size: 0.62em;
        top: -1px;
        right: -2px;
        padding: 0 2px;
    }
    .inputs-cantidad {
        flex-direction: column;
        gap: 8px;
    }
    .input-group-cantidad {
        width: 100%;
    }
}
.badge-bs-total {
    position: absolute;
    right: -5px;
    top: 1px;
    background: #ff1744;
    color: #fff;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    font-size: 0.70em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 8px #ff174422;
    z-index: 2;
    padding: 0 5px;
    line-height: 1;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
@media (max-width: 600px) {
    .badge-bs-total {
        min-width: 16px;
        height: 16px;
        font-size: 0.65em;
 
        right: -2px;
        padding: 0 4px;
    }
}
@media (max-width: 600px) {
    .productos-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        
        padding: 8px 14px 8px 14px !important; /* Padding lateral y abajo */
    }
    .producto-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        margin: 0 !important; /* Elimina margen lateral, el gap lo maneja la grid */
        padding: 7px 4px 7px 4px !important; /* Padding interno uniforme */
        border-radius: 10px !important;
        margin-bottom: 16px !important;
        font-size: 0.68rem !important;
        box-shadow: 0 2px 8px #1e90ff22;
    }
    .producto-card img {
        height: 80px !important;   /* Imagen más grande y visible */
        object-fit: cover !important;
        border-radius: 7px !important;
        margin-bottom: 4px;
        width: 100% !important;
        display: block;
    }
    .producto-nombre {
        font-size: 0.82rem !important;
        margin-bottom: 1px !important;
        font-weight: 600;
        
    }
    .producto-codigo, .producto-precio, .producto-agregado {
        font-size: 0.65rem !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }
    .btn-agregar {
        font-size: 0.72rem !important;
        padding: 4px 6px !important;
        width: 90% !important;
        margin-top: 4px !important;
    }
    .inputs-cantidad {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin: 4px 0 !important;
        width: 100%;
        flex-wrap: wrap;
    }
    .input-group-cantidad {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        min-width: 60px;
        flex: 1 1 0;
    }
    .input-label {
        font-size: 0.62rem !important;
        margin-bottom: 2px !important;
        margin-right: 0 !important;
        display: block !important;
        min-width: unset;
        font-weight: 600;
        color: #1e90ff;
    }
    .input-caja, .input-unidad {
        width: 100% !important;
        font-size: 0.65rem !important;
        padding: 2px 2px !important;
        margin-bottom: 0 !important;
        border-radius: 4px !important;
        display: block !important;
        box-sizing: border-box;
    }
}
            .navbar-custom {
            background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
            color: #fff;
            box-shadow: 0 4px 16px rgba(30, 144, 255, 0.2);
            border-radius: 0 0 16px 16px;
            min-height: 52px !important;
            padding: 8px 0;
            font-size: 1rem;
        }
        .vacios-list-card {
            background: rgba(255,255,255,0.97);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(30, 144, 255, 0.10), 0 1.5px 8px #1e90ff11;
            padding: 32px 24px 24px 24px;
            max-width: 480px;
            margin: 32px auto 0 auto;
            animation: fadeInUp 0.7s;
        }
        .vacios-list-card h2 {
            color: #1e90ff;
            font-size: 1.5rem;
            margin-bottom: 18px;
            font-weight: 700;
            text-align: center;
        }
        .vacios-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .vacios-list li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f7faff;
            border-radius: 12px;
            margin-bottom: 14px;
            padding: 16px 14px;
            box-shadow: 0 2px 8px #1e90ff11;
            font-size: 1.08rem;
            transition: box-shadow 0.2s, background 0.2s;
            gap: 10px;
        }
        .vacios-list li:last-child {
            margin-bottom: 0;
        }
        .vacios-list .nombre {
            color: #1e90ff;
            font-weight: 600;
            font-size: 1.08rem;
            display: flex;
            align-items: center;
            gap: 8px;
            max-width: 60%;
            min-width: 0;
            flex: 1 1 0;
            overflow: hidden;
        }
        .vacios-list .nombre-texto {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            max-width: 160px;
            vertical-align: middle;
        }
        .vacios-list .entradas {
            color: #388e3c;
            font-weight: 700;
            font-size: 1.08rem;
            margin-left: 10px;
            min-width: 32px;
            text-align: right;
            flex-shrink: 0;
        }
        .vacios-list .borrar-btn {
            background: #ff1744;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 8px 16px;
            font-size: 0.98rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s, transform 0.15s;
            display: flex;
            align-items: center;
            gap: 4px;
            box-shadow: 0 2px 8px #ff174455;
            flex-shrink: 0;
        }
        .vacios-list .borrar-btn:hover {
            background: #c62828;
            transform: scale(1.04);
        }
        .vacios-list .material-icons {
            font-size: 1.2rem;
            vertical-align: middle;
        }
        @media (max-width: 600px) {
            .vacios-list-card {
                max-width: 98vw !important;
                padding: 16px 3vw 12px 3vw !important;
                border-radius: 13px !important;
            }
            .vacios-list-card h2 {
                font-size: 1.08rem;
                margin-bottom: 10px;
            }
            .vacios-list li {
                font-size: 1rem;
                padding: 12px 8px;
            }
            .vacios-list .borrar-btn {
                font-size: 0.95rem;
                padding: 7px 10px;
            }
            .vacios-list .nombre-texto {
                max-width: 80px;
            }
        }
                .pedido-card {
            border-radius: 20px;
            background: rgba(255,255,255,0.97);
            box-shadow: 0 8px 32px #1e90ff22;
            margin: 22px 0;
            padding: 18px 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: box-shadow 0.2s, transform 0.2s;
        }
        .pedido-card:hover {
            box-shadow: 0 16px 48px #1e90ff33;
            transform: translateY(-4px) scale(1.01);
        }
        .pedido-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }
        .pedido-header .material-icons {
            color: #1e90ff;
            font-size: 2.2rem;
        }
        .pedido-info {
            display: flex;
            flex-wrap: wrap;
            gap: 18px 32px;
            font-size: 1.08rem;
        }
        .pedido-info span {
            min-width: 120px;
            color: #1e293b;
        }
        .pedido-info span strong {
            min-width: 110px;
            margin-right: 8px;
            color: black;
            font-weight: 600;
            font-size: 0.98em;
            text-align: left;
        }
        .pedido-totales {
            margin-top: 10px;
            font-weight: bold;
            color: #388e3c;
            font-size: 1.13rem;
        }
        .pedido-items-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            background: #f7faff;
            border-radius: 10px;
            overflow: hidden;
        }
        .pedido-items-table th, .pedido-items-table td {
            padding: 6px 8px;
            font-size: 0.98em;
        }
        .pedido-items-table th {
            background: #e3f0ff;
            color: #1e90ff;
            font-weight: 700;
        }
        .pedido-items-table tr:not(:last-child) td {
            border-bottom: 1px solid #e3f0ff;
        }
        /* Alineación de columnas */
        .pedido-items-table th:nth-child(3),
        .pedido-items-table td:nth-child(3) {
            text-align: center;
        }
        .pedido-items-table th:nth-child(4),
        .pedido-items-table td:nth-child(4),
        .pedido-items-table th:nth-child(5),
        .pedido-items-table td:nth-child(5) {
            text-align: right;
        }
        .pedido-items-table th:nth-child(1),
        .pedido-items-table td:nth-child(1),
        .pedido-items-table th:nth-child(2),
        .pedido-items-table td:nth-child(2) {
            text-align: left;
        }
        @media (max-width: 600px) {
        .pedido-card { padding: 12px 6px; }
        .pedido-header .material-icons { font-size: 1.5rem; }
        .pedido-info {
        font-size: 0.98rem;
        gap: 2px !important;
        flex-direction: column !important;
        }
        .pedido-info span {
            display: block;
            width: 100%;
            min-width: 0;
            font-size: 0.97rem;
            padding: 2px 0;
        }
        .pedido-info span strong {
            min-width: unset;
            margin-right: 4px;
            color: #1e90ff;
            font-weight: 600;
            font-size: 0.98em;
            text-align: left;
            display: inline;
        }
            .pedido-totales { font-size: 1.03rem; }
            .pedido-items-table th, .pedido-items-table td { font-size: 0.93em; padding: 4px 4px; }
        }
         .vacios-form-card {
            background: rgba(255,255,255,0.97);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(30, 144, 255, 0.10), 0 1.5px 8px #1e90ff11;
            padding: 32px 24px 24px 24px;
            max-width: 420px;
            margin: 32px auto 0 auto;
            animation: fadeInUp 0.7s;
            text-align: center;
        }
        .vacios-form-card h2 {
            color: #1e90ff;
            font-size: 1.5rem;
            margin-bottom: 18px;
            font-weight: 700;
        }
        .vacios-form-card label {
            font-weight: 600;
            color: #1e90ff;
            margin-bottom: 8px;
            display: block;
            font-size: 1.08rem;
            text-align: left;
        }
        .vacios-form-card select,
        .vacios-form-card input[type="number"] {
            width: 100%;
            border-radius: 12px;
            border: 1.5px solid #1e90ff44;
            padding: 12px;
            font-size: 1.13rem;
            margin-bottom: 18px;
            background: #f7faff;
            color: #1e293b;
            box-shadow: 0 1px 6px #1e90ff11;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .vacios-form-card select:focus,
        .vacios-form-card input[type="number"]:focus {
            border-color: #1e90ff;
            box-shadow: 0 0 12px #1e90ff33;
            outline: none;
        }
        .vacios-form-card .button {
            width: 100%;
            font-size: 1.13rem;
            padding: 12px 0;
            border-radius: 12px;
            font-weight: 600;
            background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
            color: #fff;
            border: none;
            box-shadow: 0 2px 12px #1e90ff22;
            transition: background 0.3s, box-shadow 0.3s, transform 0.15s;
            cursor: pointer;
            margin-top: 8px;
        }
        .vacios-form-card .button:hover {
            background: #1565c0;
            transform: scale(1.04);
        }
        .vacios-form-card .material-icons {
            font-size: 2.2rem;
            color: #1e90ff;
            margin-bottom: 10px;
        }
        @media (max-width: 600px) {
            .vacios-form-card {
                max-width: 98vw !important;
                padding: 16px 3vw 12px 3vw !important;
                border-radius: 13px !important;
            }
            .vacios-form-card h2 {
                font-size: 1.08rem;
                margin-bottom: 10px;
            }
            .vacios-form-card select,
            .vacios-form-card input[type="number"] {
                font-size: 1rem;
                padding: 10px;
            }
            .vacios-form-card .button {
                font-size: 1rem;
                padding: 9px 0;
                border-radius: 9px;
            }
        }
                .arqueo-cajas-list {
            max-width: 480px;
            margin: 36px auto 0 auto;
            background: rgba(255,255,255,0.98);
            border-radius: 20px;
            box-shadow: 0 8px 32px #1e90ff18;
            padding: 28px 12px 18px 12px;
        }
        .arqueo-cajas-list h2 {
            color: #1e90ff;
            font-size: 1.35rem;
            font-weight: 700;
            margin-bottom: 18px;
            text-align: center;
            letter-spacing: 0.5px;
        }
        .arqueo-caja-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f7faff;
            border-radius: 14px;
            box-shadow: 0 2px 8px #1e90ff11;
            padding: 16px 14px;
            margin-bottom: 14px;
            transition: box-shadow 0.2s, background 0.2s;
            font-size: 1.08em;
            position: relative;
        }
        .arqueo-caja-card:last-child {
            margin-bottom: 0;
        }
        .arqueo-caja-info {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .arqueo-caja-icon {
            color: #1e90ff;
            font-size: 2.1em;
            background: #e3f0ff;
            border-radius: 50%;
            padding: 6px;
            margin-right: 6px;
            box-shadow: 0 2px 8px #1e90ff11;
        }
        .arqueo-caja-nombre {
            color: #1e293b;
            font-weight: 600;
            font-size: 1.08em;
            max-width: 38vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .arqueo-caja-alterno {
            color: #64748b;
            font-size: 0.98em;
            margin-left: 6px;
            font-weight: 500;
        }
        .arqueo-caja-saldo {
            color: #43a047;
            font-weight: bold;
            font-size: 1.18em;
            min-width: 60px;
            text-align: right;
            background: #e8f5e9;
            border-radius: 8px;
            padding: 4px 14px;
            box-shadow: 0 2px 8px #43a04711;
        }
        @media (max-width: 600px) {
            .arqueo-cajas-list {
                max-width: 98vw;
                padding: 14px 2vw 10px 2vw;
                border-radius: 12px;
            }
            .arqueo-cajas-list h2 {
                font-size: 1.05rem;
                margin-bottom: 10px;
            }
            .arqueo-caja-card {
                font-size: 0.98em;
                padding: 10px 6px;
                border-radius: 8px;
            }
            .arqueo-caja-icon {
                font-size: 1.5em;
                padding: 4px;
            }
            .arqueo-caja-nombre {
                font-size: 0.98em;
                max-width: 40vw;
            }
            .arqueo-caja-saldo {
                font-size: 1em;
                padding: 3px 8px;
            }
        }
        /* --- Magnific Popup: asegurar que el zoom esté por encima de todo --- */
        .mfp-bg {
            z-index: 99999 !important;
            background: rgba(0,0,0,0.92) !important;
        }
        .mfp-wrap {
            z-index: 100000 !important;
        }
        .mfp-content {
            z-index: 100001 !important;
        }
        .mfp-img {
            box-shadow: 0 8px 40px 0 rgba(0,0,0,0.45);
            border-radius: 12px;
        }
        .mfp-close {
            color: #fff !important;
            font-size: 2.2rem !important;
            opacity: 1 !important;
            right: 0;
            top: -8px;
            text-shadow: 0 2px 8px #000;
        }
        .block.client-info {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 16px #1e90ff22;
    max-width: 420px;
    margin: 24px auto 18px auto;
    padding: 24px 18px 18px 18px;
    text-align: left;
}
.block.client-info h2 {
    color: #1e90ff;
    font-size: 1.15rem;
    margin-bottom: 12px;
    font-weight: 700;
}
.block.client-info p {
    margin: 0 0 6px 0;
    color: #1e293b;
    font-size: 1.05rem;
}
.block.balance-table {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 16px #1e90ff22;
    max-width: 480px;
    margin: 0 auto 18px auto;
    padding: 24px 12px 12px 12px;
}
.block.balance-table h2 {
    color: #1e90ff;
    font-size: 1.13rem;
    margin-bottom: 12px;
    font-weight: 700;
}
.block.balance-table .list ul {
    margin: 0;
    padding: 0;
}
.block.balance-table .item-content.header {
    background: #e3f0ff;
    border-radius: 10px;
    font-weight: 700;
}
.block.balance-table .item-content {
    border-bottom: 1px solid #e3f0ff;
}
.block.balance-table .item-content:last-child {
    border-bottom: none;
}
.block.balance-table .item-title {
    font-size: 1.05rem;
    color: #1e293b;
}
.block.balance-table .item-title.text-align-right {
    text-align: right;
    color: #1565c0;
    font-weight: 600;
}
.block.total-balance {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 16px #1e90ff22;
    max-width: 420px;
    margin: 0 auto 24px auto;
    padding: 18px 18px 18px 18px;
    text-align: center;
}
.block.total-balance h3 {
    color: #1e90ff;
    font-size: 1.18rem;
    font-weight: 700;
    margin: 0;
}
.block.total-balance h3 span {
    color: #388e3c;
    font-weight: 700;
    margin-left: 8px;
}
@media (max-width: 600px) {
    .block.client-info, .block.balance-table, .block.total-balance {
        max-width: 98vw !important;
        padding: 12px 3vw 10px 3vw !important;
        border-radius: 13px !important;
    }
    .block.client-info h2, .block.balance-table h2, .block.total-balance h3 {
        font-size: 1rem;
    }
    .block.balance-table .item-title {
        font-size: 0.97rem;
    }
}
/* --- Estilos exclusivos para catalogo_clientes.php --- */
.page-catalogo .clientes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px 12px;
    justify-items: center;
    align-items: stretch;
    margin-top: 18px;
    margin-bottom: 18px;
}
.page-catalogo .cliente-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px #1e293b18;
    padding: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    transition: box-shadow 0.2s;
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
    min-height: 260px;
}
.page-catalogo .cliente-card:hover {
    box-shadow: 0 8px 24px #1e293b33;
}
.page-catalogo .cliente-imagen-contenedor {
    width: 100%;
    height: 180px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 0;
    position: relative;
}
.page-catalogo .cliente-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    cursor: zoom-in;
    transition: transform 0.2s;
}
.page-catalogo .cliente-imagen-vacia {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
}
.page-catalogo .cliente-imagen-vacia .material-icons {
    font-size: 3.2rem;
    color: #bdbdbd;
}
.page-catalogo .cliente-nombre {
    font-size: 1.08em;
    font-weight: bold;
    color: #1e293b;
    margin: 12px 0 2px 0;
    text-align: center;
    width: 100%;
}
.page-catalogo .cliente-rif {
    font-size: 0.98em;
    color: #1e90ff;
    margin-bottom: 8px;
    text-align: center;
    width: 100%;
}
.page-catalogo .subir-imagen-form {
    width: 100%;
    margin-top: auto;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page-catalogo .subir-imagen-form form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-radius: 14px;
    padding: 10px 6px 6px 6px;
    box-shadow: 0 2px 8px #1e90ff11;
    width: 100%;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    background: transparent;
}
.page-catalogo .custom-file-label, 
.page-catalogo .custom-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    font-size: 0.92rem;
    border-radius: 18px;
    min-width: 0;
    box-sizing: border-box;
    font-weight: 700;
    transition: background 0.2s, transform 0.15s;
    line-height: 36px;
    margin: 0;
    box-shadow: 0 2px 8px #1e90ff22;
    white-space: nowrap;
}
.page-catalogo .custom-file-label {
    background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
    color: #fff;
    border: none;
    gap: 6px;
    margin-bottom: 0;
    margin-right: 0;
}
.page-catalogo .custom-file-label .material-icons {
    font-size: 1em;
    margin-right: 2px;
    vertical-align: middle;
}
.page-catalogo .custom-file-input {
    display: none;
}
.page-catalogo .file-label-text {
    font-size: 0.88em;
    color: #fff;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-catalogo .custom-submit-btn {
    background: linear-gradient(90deg, #43a047 0%, #66bb6a 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px #43a04722;
    cursor: pointer;
}
.page-catalogo .custom-submit-btn:hover {
    background: #388e3c;
    transform: scale(1.04);
}
/* Responsive */
@media (max-width: 600px) {
    .page-catalogo .clientes-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px 8px !important;
        padding: 8px 2px 8px 2px !important;
    }
    .page-catalogo .cliente-card {
        max-width: 98vw !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 0 0 6px 0 !important;
        border-radius: 8px !important;
        min-height: 120px !important;
        font-size: 0.62rem !important;
        box-shadow: 0 2px 8px #1e90ff22;
    }
    .page-catalogo .cliente-imagen-contenedor {
        height: 80px !important;
    }
    .page-catalogo .cliente-imagen {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    .page-catalogo .cliente-nombre {
        font-size: 0.72rem !important;
        margin-bottom: 1px !important;
        font-weight: 600;
        min-height: 14px !important;
    }
    .page-catalogo .cliente-rif {
        font-size: 0.60rem !important;
        margin-bottom: 1px !important;
    }
    .page-catalogo .subir-imagen-form form {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 5px !important;
        padding: 4px 1px 4px 1px !important;
        border-radius: 12px !important;
        max-width: 100% !important;
    }
    .page-catalogo .custom-file-label, 
    .page-catalogo .custom-submit-btn {
        width: 90% !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        padding: 0 8px !important;
        height: 26px !important;
        min-width: 0 !important;
        line-height: 26px !important;
        margin: 0 auto !important;
        border-radius: 12px !important;
    }
    .page-catalogo .file-label-text {
        max-width: 70vw !important;
        font-size: 0.72em !important;
    }
}
/* Card de sin resultados */
.page-catalogo .card.cliente-card.sin-resultados {
    margin: 32px auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .page-catalogo .card.cliente-card.sin-resultados {
        grid-column: 1 / -1;
        width: 100% !important;
        max-width: 98vw !important;
        margin: 32px auto !important;
        justify-self: center;
    }
    .page-productos .productos-list {
        justify-items: center !important;
    }
}
/* Magnific Popup: asegurar que el zoom esté por encima de todo */
.page-catalogo .mfp-bg {
    z-index: 99999 !important;
    background: rgba(0,0,0,0.92) !important;
}
.page-catalogo .mfp-wrap {
    z-index: 100000 !important;
}
.page-catalogo .mfp-content {
    z-index: 100001 !important;
}
.page-catalogo .mfp-img {
    box-shadow: 0 8px 40px 0 rgba(0,0,0,0.45);
    border-radius: 12px;
}
.page-catalogo .mfp-close {
    color: #fff !important;
    font-size: 2.2rem !important;
    opacity: 1 !important;
    right: 0;
    top: -8px;
    text-shadow: 0 2px 8px #000;
}


/* Estilos exclusivos para index.php */
.page-index .navbar {
    background: var(--f7-navbar-bg-color);
    color: var(--f7-navbar-text-color);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 4px 24px rgba(30, 144, 255, 0.10);
    padding: 8px 0;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    min-height: 52px !important;
}
.page-index .title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0 8px;
    gap: 10px;
}
.page-index .navbar .title {
    font-size: 1.08rem;
    margin-bottom: 0;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    font-weight: 700;
    flex-shrink: 0;
    padding-right: 12px;
    letter-spacing: 0.5px;
}
.page-index .navbar-search {
    width: 100%;
    max-width: 420px !important;
    margin-left: 0;
    margin-right: 0;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 2px 8px #1e90ff22;
    display: flex;
    align-items: center;
    height: 38px;
    transition: box-shadow 0.2s;
    border: 1.5px solid #e3f0ff;
}
.page-index .navbar-search:focus-within {
    box-shadow: 0 4px 16px #1e90ff33;
    border-color: #1e90ff;
}
.page-index .search-input-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
}
.page-index .navbar-search input[type="search"] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    height: 38px;
    padding: 0 16px 0 16px;
    font-size: 1rem;
    color: #1e293b;
    border-radius: 22px;
    box-shadow: none;
    background: transparent;
    border: none;
    outline: none;
}
.page-index .navbar-search input[type="search"]::placeholder {
    color: #1e90ff;
    opacity: 0.7;
    font-weight: 500;
}
.page-index .search-btn {
    margin-left: 12px;
    background: #1e90ff;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    z-index: 2;
    transition: background 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.page-index .search-btn:hover, .page-index .search-btn:focus {
    background: #1565c0;
}
.page-index .search-btn:active {
    transform: scale(0.95);
    box-shadow: none;
}
.page-index .search-icon {
    color: #fff;
    font-size: 1.3rem;
    pointer-events: none;
}
.page-index .navbar .right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important; 
}
.page-index .navbar .right a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}
@media (max-width: 480px) {
    .page-index .search-btn {
        height: 28px;
        width: 28px;
        margin-left: 8px;
    }
    .page-index .search-icon {
        font-size: 1rem;
    }
    .page-index .navbar-search input[type="search"] {
        height: 38px;
        font-size: 0.85rem;
        padding: 0 10px 0 10px;
    }
    .page-index .navbar-search {
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .page-index .navbar .title {
        font-size: 0.98rem;
        padding-right: 8px;
    }
    .page-index .navbar-search {
        max-width: 180px;
        height: 32px;
    }
    .page-index .navbar-search input[type="search"] {
        height: 32px;
        font-size: 0.92rem;
        padding: 0 32px 0 10px;
    }
    .page-index .search-icon {
        font-size: 1.1rem;
    }
    .page-index .navbar-search {
        max-width: 90% !important;
    }
    .page-index .title-container {
        gap: 6px;
        padding: 0 4px;
    }
}
@media (max-width: 480px) {
    .page-index .search-btn {
        height: 32px;
        width: 32px;
        margin-left: 6px;
    }
    .page-index .search-icon {
        font-size: 1.5rem !important;
    }
    .page-index .navbar-search input[type="search"] {
        height: 28px;
        font-size: 0.85rem;
        padding: 0 10px 0 10px;
    }
}
@media (max-width: 600px) {
    .page-index .navbar-search {
        max-width: 55% !important;
        margin-left: auto;
    }
    .page-index .search-input-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    .page-index .navbar-search input[type="search"] {
        width: 100%;
        flex: 1;
        padding: 0 8px;
        font-size: 0.78rem;
        box-sizing: border-box;
    }
    .page-index .search-btn {
        flex-shrink: 0;
        height: 26px;
        width: 26px;
        margin-left: 2px;
        margin-right: 4px;
    }
    .page-index .search-icon {
        font-size: 1rem;
    }
    .page-index .navbar .title {
        max-width: 40%;
        padding-right: 2px;
    }
    .page-index .navbar-search {
        max-width: 55% !important;
        margin-left: auto;
    }
}
@media (max-width: 380px) {
    .page-index .navbar-search input[type="search"] {
        font-size: 0.72rem;
        padding: 0 6px;
    }
    .page-index .search-btn {
        height: 24px;
        width: 24px;
    }
    .page-index .search-icon {
        font-size: 0.9rem;
    }
    .page-index .navbar .title .material-icons {
        font-size: 1.4rem;
    }
    .page-index .navbar-search input[type="search"] {
        font-size: 0.72rem;
        padding: 0 6px;
    }
}
    .subir-imagen-form {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 6px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .subir-imagen-form form {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
        border-radius: 12px;
        padding: 10px 10px;
        box-shadow: 0 2px 8px #1e90ff11;
        width: 100%;
        justify-content: flex-start;
    }
    .custom-file-label, .custom-submit-btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 30px;
        padding: 0 10px;
        font-size: 0.85rem;
        border-radius: 6px;
        min-width: 90px;
        box-sizing: border-box;
        font-weight: 600;
        transition: background 0.2s, transform 0.15s;
        line-height: 30px;
        margin: 0;
    }
    .custom-file-label {
        background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
        color: #fff;
        box-shadow: 0 2px 8px #1e90ff22;
        border: none;
        gap: 8px;
        margin-bottom: 0;
        margin-right: 0;
        white-space: nowrap;
        height: 38px;
        line-height: 38px;
    }
    .custom-file-label .material-icons {
        font-size: 1.2em;
        margin-right: 4px;
        vertical-align: middle;
    }
    .custom-file-input {
        display: none;
    }
    .file-label-text {
        font-size: 0.95em;
        color: #fff;
    }
    .custom-submit-btn {
        background: linear-gradient(90deg, #43a047 0%, #66bb6a 100%);
        color: #fff;
        border: none;
        box-shadow: 0 2px 8px #43a04722;
        cursor: pointer;
        height: 38px;
        line-height: 38px;
    }
    .custom-submit-btn:hover {
        background: #388e3c;
        transform: scale(1.04);
    }
    @media (max-width: 600px) {
        .subir-imagen-form form {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            padding: 8px 6px;
        }
        .custom-file-label, .custom-submit-btn {
            width: 90%;
            justify-content: center;
            font-size: 0.80rem;
            padding: 4px 0;
            height: 28px;
            min-width: 0;
            line-height: 28px;
            margin: 0;
        }
    }
    .file-label-text {
        font-size: 0.92em;
        color: #fff;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
    }
    @media (max-width: 600px) {
        .file-label-text {
            max-width: 60px;
            font-size: 0.80em;
        }
    }
    .oferta-animada {
    background: #ff1744 !important;
    color: #fff !important;
    border-radius: 14px !important;
    padding: 1px 6px 1px 4px !important;
    font-weight: bold !important;
    margin-left: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 8px #ff174455 !important;
    animation: ofertaPulse 1.2s infinite alternate !important;
    font-size: 0.78em !important; /* Más pequeño */
    max-width: 90vw;
    white-space: nowrap;
    }
    .oferta-animada .material-icons {
        margin-right: 2px !important;
        font-size: 0.95em !important; /* Más pequeño */
        color: #fff !important;
    }
    .oferta-animada .oferta-texto {
        color: #fff !important;
        font-size: 0.90em !important; /* Más pequeño */
    }
    .oferta-sobre-imagen {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 2;
        box-shadow: 0 2px 8px #ff174455 !important;
        opacity: 0.97;
        pointer-events: none;
    }
    @keyframes ofertaPulse {
        0% { transform: scale(1);}
        100% { transform: scale(1.13);}
    }
    /* Magnific Popup custom styles */
    .mfp-bg {
        z-index: 99999 !important;
        background: rgba(0,0,0,0.92) !important;
    }
    .mfp-wrap {
        z-index: 100000 !important;
    }
    .mfp-content {
        z-index: 100001 !important;
    }
    .mfp-img {
        box-shadow: 0 8px 40px 0 rgba(0,0,0,0.45);
        border-radius: 12px;
    }
    .mfp-close {
        color: #fff !important;
        font-size: 2.2rem !important;
        opacity: 1 !important;
        right: 0;
        top: -8px;
        text-shadow: 0 2px 8px #000;
    }
    /* Exclusivo para productos.php */
.page-productos .navbar,
.page-productos .navbar-custom {
    background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
    color: #fff;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 4px 24px rgba(30, 144, 255, 0.10);
    padding: 8px 0;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    min-height: 52px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}
.page-productos .navbar-bg {
    background: #1e90ff;
    background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%) !important;
    opacity: 1 !important;
    border-radius: 0 0 24px 24px;
}
.page-productos .navbar-inner {
    background: transparent !important;
}
.page-productos .title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0 8px;
    gap: 10px;
}
.page-productos .navbar-search {
    width: 100%;
    max-width: 420px !important;
    margin-left: 0;
    margin-right: 0;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 2px 8px #1e90ff22;
    display: flex;
    align-items: center;
    height: 38px;
    transition: box-shadow 0.2s;
    border: 1.5px solid #e3f0ff;
}
.page-productos .navbar-search:focus-within {
    box-shadow: 0 4px 16px #1e90ff33;
    border-color: #1e90ff;
}
.page-productos .search-input-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
}
.page-productos .navbar-search input[type="search"] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    height: 38px;
    padding: 0 16px 0 16px;
    font-size: 1rem;
    color: #1e293b;
    border-radius: 22px;
    box-shadow: none;
    background: transparent;
    border: none;
    outline: none;
}
.page-productos .navbar-search input[type="search"]::placeholder {
    color: #1e90ff;
    opacity: 0.7;
    font-weight: 500;
}
.page-productos .search-btn {
    margin-left: 12px;
    background: #1e90ff;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    z-index: 2;
    transition: background 0.2s, transform 0.2s;
}
.page-productos .search-btn:hover, 
.page-productos .search-btn:focus {
    background: #1565c0;
}
.page-productos .search-btn:active {
    transform: scale(0.95);
    box-shadow: none;
}
.page-productos .search-icon {
    color: #fff;
    font-size: 1.3rem;
    pointer-events: none;
}
.page-productos .navbar .right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important; 
}
.page-productos .navbar .right a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* Responsive buscador */
@media (max-width: 600px) {
    .page-productos .title-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 0 2px;
    }
    .page-productos .navbar-search {
        max-width: 350px !important;
        width: 90%;
        height: 35px !important;
        margin: 0;
        border-radius: 14px;
        box-shadow: 0 2px 8px #1e90ff22;
        padding: 0;
    }
    .page-productos .navbar-search input[type="search"] {
        height: 28px;
        font-size: 0.78rem;
        padding: 0 24px 0 8px;
        border-radius: 14px;
    }
    .page-productos .search-btn {
        height: 28px;
        width: 28px;
        margin-left: 8px;
    }
    .page-productos .search-icon {
        font-size: 1rem;
    }
}

/* Lista de productos */
.page-productos .productos-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 8px;
    justify-items: center !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}
.page-productos .producto-card {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.1);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #e3f0ff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 370px !important;
    min-width: 280px !important;
    width: 80% !important;
}
.page-productos .producto-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.2);
    border-color: #1e90ff;
}
.page-productos .producto-imagen-contenedor {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    border-bottom: 0.2px solid #e3f0ff;
    overflow: hidden;
    padding: 0;
    margin-bottom: 6px;
    position: relative;
}
.page-productos .producto-imagen {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    background: #f5f7fa !important;
}
.page-productos .producto-imagen-vacia {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f5f7fa !important;
}
.page-productos .producto-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    margin-top: 0;
    min-height: 60px;
    justify-content: flex-start;
}
.page-productos .producto-nombre {
    font-size: 1.08rem;
    font-weight: 700;
    color: #1e90ff;
    margin-bottom: 2px;
    letter-spacing: 0.2px;
    animation: fadeIn 0.7s;
    display: block;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    min-height: 40px;
    line-height: 1.25em;
    width: 100%;
    word-break: break-word;
}
.page-productos .producto-codigo,
.page-productos .producto-precio {
    font-size: 0.95rem;
    color: #1e293b;
    margin-bottom: 2px;
    width: 100%;
    text-align: left;
}
.page-productos .producto-agregado {
    color: #43a047;
    font-weight: 600;
}
.page-productos .precio-tachado {
    text-decoration: line-through;
    color: #b0bec5;
    font-size: 1em;
    margin-right: 8px;
    font-weight: 500;
    opacity: 0.8;
    vertical-align: middle;
}
.page-productos .precio-descuento-mini {
    color: #ff1744;
    font-size: 1em;
    font-weight: bold;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-left: 2px;
    letter-spacing: 0.5px;
    animation: none;
    vertical-align: middle;
    display: inline-block;
    line-height: 1.2;
}
.page-productos .oferta-animada {
    background: #ff1744 !important;
    color: #fff !important;
    border-radius: 16px !important;
    padding: 2px 10px 2px 6px !important;
    font-weight: bold !important;
    margin-left: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 8px #ff174455 !important;
    animation: ofertaPulse 1.2s infinite alternate !important;
    font-size: 0.82em !important;
    max-width: 90vw;
    white-space: nowrap;
}
.page-productos .oferta-animada .material-icons {
    margin-right: 2px !important;
    font-size: 1em !important;
    color: #fff !important;
}
.page-productos .oferta-animada .oferta-texto {
    color: #fff !important;
    font-size: 0.95em !important;
}
@keyframes ofertaPulse {
    0% { transform: scale(1);}
    100% { transform: scale(1.13);}
}
.page-productos .oferta-sobre-imagen {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    box-shadow: 0 2px 8px #ff174455 !important;
    opacity: 0.97;
    pointer-events: none;
}
@media (max-width: 600px) {
    .page-productos .productos-list {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 8px 14px 8px 14px !important;
    }
    .page-productos .producto-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 7px 4px 7px 4px !important;
        border-radius: 10px !important;
        margin-bottom: 16px !important;
        font-size: 0.68rem !important;
        box-shadow: 0 2px 8px #1e90ff22;
    }
    .page-productos .producto-imagen-contenedor {
        height: 80px !important;
    }
    .page-productos .producto-nombre {
        font-size: 0.8rem !important;
        margin-bottom: 1px !important;
        font-weight: 600;
        min-height: 36px;
    }
    .page-productos .producto-codigo,
    .page-productos .producto-precio {
        font-size: 0.75rem !important;
        margin-bottom: 0 !important;
    }
    .page-productos .oferta-sobre-imagen {
        top: 4px;
        right: 4px;
        font-size: 0.78em !important;
        padding: 1px 6px 1px 4px !important;
    }
}

/* Card de sin resultados */
.page-productos .card.producto-card.sin-resultados {
    margin: 32px auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .page-productos .card.producto-card.sin-resultados {
        grid-column: 1 / -1;
        width: 100% !important;
        max-width: 98vw !important;
        margin: 32px auto !important;
        justify-self: center;
    }
    .page-productos .productos-list {
        justify-items: center !important;
    }
}
/* Exclusivo para vacios.php */
.page-vacios .navbar .right {
    display: flex !important;
    align-items: center;
    margin-right: 8px;
}
.page-vacios .navbar .right .material-icons {
    font-size: 2rem !important;
    color: #fff !important;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 2px 8px #1e90ff22;
}
@media (max-width: 600px) {
    .page-vacios .navbar .right {
        margin-right: 4px !important;
    }
    .page-vacios .navbar .right .material-icons {
        font-size: 1.7rem !important;
    }
}
       .page-vacios .navbar .title {
            max-width: 60vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .page-vacios .navbar-custom {
            background: linear-gradient(90deg, #1e90ff 0%, #63b8ff 100%);
            color: #fff;
            box-shadow: 0 4px 16px rgba(30, 144, 255, 0.2);
            border-radius: 0 0 16px 16px;
            min-height: 52px !important;
            padding: 8px 0;
            font-size: 1rem;
        }
    body.ios-iphone #tasa_dia {
        width: 90px !important;
        min-width: 0 !important;
        font-size: 0.97em !important;
        padding: 6px 8px !important;
        margin-bottom: 8px !important;
    }
    body.ios-iphone .item-input-wrap {
        flex-wrap: wrap !important;
    }

    /* arqueos del vacio*/
        /* Estilos exclusivos para la tabla de arqueo de vacíos */
       /* Estilos exclusivos para la tabla de arqueo de vacíos */
.arqueo-vacios-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #f7faff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 6px 0 rgba(30,41,59,0.04);
    margin-top: 10px;
}
.arqueo-vacios-table th, .arqueo-vacios-table td {
    padding: 10px 12px;
    vertical-align: middle;
}
.arqueo-vacios-table th {
    background: #e3f0fc;
    color: #1e90ff;
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 2px solid #b6d4fa;
}
.arqueo-vacios-table td {
    font-size: 0.98rem;
    border-bottom: 1px solid #e3e8f0;
    background: transparent;
}
.arqueo-vacios-table tr:last-child td {
    border-bottom: none;
}
.arqueo-vacios-table th:nth-child(1),
.arqueo-vacios-table td:nth-child(1) {
    text-align: left;
    min-width: 50px;
    width: 50px;
}
.arqueo-vacios-table th:nth-child(2),
.arqueo-vacios-table td:nth-child(2) {
    text-align: left;
    min-width: 80px;
    width: 80px;
}
.arqueo-vacios-table th:nth-child(3),
.arqueo-vacios-table td:nth-child(3) {
    text-align: left;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arqueo-vacios-table th:nth-child(4),
.arqueo-vacios-table td:nth-child(4) {
    text-align: right;
    min-width: 60px;
    width: 60px;
    color: #1e90ff;
    font-weight: 700;
}
@media (max-width: 600px) {
    .arqueo-vacios-table th, .arqueo-vacios-table td {
        padding: 6px 2px;
        font-size: 0.93rem;
    }
    .arqueo-vacios-table th:nth-child(3),
    .arqueo-vacios-table td:nth-child(3) {
        max-width: 70px !important;
        font-size: 0.92em;
    }
    .arqueo-vacios-table {
        border-radius: 8px;
    }
}