/* =====================================================
IAU TIENDA
Diseño institucional
===================================================== */

:root {
     --iau-primary: #003366;
    --iau-primary-dark: #00264d;
    --iau-primary-light: #0a4d7a;
    --iau-accent: #f4b942;
    --iau-accent-dark: #d99d22;
    --iau-background: #f4f7fa;
    --iau-surface: #ffffff;
    --iau-text: #17212b;
    --iau-text-muted: #667085;
    --iau-border: #e4e9ef;
    --iau-success: #198754;
    --iau-danger: #dc3545;
    --iau-shadow-sm: 0 4px 12px rgba(0, 51, 102, .06);
    --iau-shadow: 0 12px 35px rgba(0, 51, 102, .10);
    --iau-radius: 14px;
    
}

/* =====================================================
BASE
===================================================== */

html,
body {
    min-height: 100%;
}

body {
     min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: "Inter", Arial, sans-serif;
    color: var(--iau-text);
    background: var(--iau-background);
    -webkit-font-smoothing: antialiased;
    
}

.main-content {
     flex: 1;
    padding: 2rem 0 4rem;
    
}

/* =====================================================
NAVBAR
===================================================== */

.site-header {
    top: 0;
    z-index: 1030;
    background: var(--iau-primary);
    box-shadow: 0 3px 15px rgba(0, 30, 60, .18);
}

.navbar {
    min-height: 78px;
    padding: .8rem 0;
}

/* =====================================================
MARCA
===================================================== */

.navbar-brand {
    gap: .9rem;
    margin: 0;
    color: white;
}

.brand-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    
}

.brand-divider {
    width: 1px;
    height: 34px;
    background: rgba(255, 255, 255, .25);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

    .brand-text strong {
        font-size: 1.1rem;
        letter-spacing: .05em;
    }

    .brand-text small {
        margin-top: .25rem;
        font-size: .7rem;
        color: rgba(255, 255, 255, .72);
        letter-spacing: .03em;
        
    }

/* =====================================================
NAVEGACIÓN
===================================================== */

.navbar-nav {
     gap: .3rem;
    
}

.navbar-dark
.navbar-nav
.nav-link {
     display: flex;
    align-items: center;
    padding: .65rem .9rem;
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
    font-weight: 500;
    border-radius: 9px;
    transition: color .2s ease, background .2s ease;
    
}

    .navbar-dark
    .navbar-nav
    .nav-link:hover {
         color: white;
        background: rgba(255, 255, 255, .10);
        
    }

    .navbar-dark
    .navbar-nav
    .nav-link.active {
         color: white;
        background: rgba(255, 255, 255, .14);
        
    }

/* =====================================================
ACCIONES
===================================================== */

.nav-actions {
     display: flex;
    align-items: center;
    gap: .65rem;
    
}

.btn-cart {
     position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 43px;
    padding: .6rem .9rem;
    color: var(--iau-primary);
    background: white;
    border: 1px solid white;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    
}

    .btn-cart:hover {
         color: var(--iau-primary);
        transform: translateY(-1px);
        box-shadow: 0 7px 18px rgba(0, 0, 0, .16);
        
    }

    .btn-cart i {
         font-size: 1.05rem;
        
    }

.cart-count {
     display: flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 .35rem;
    color: #212529;
    background: var(--iau-accent);
    border-radius: 50px;
    font-size: .7rem;
    font-weight: 800;
    
}

.btn-login {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 43px;
    padding: .6rem 1rem;
    color: white;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, border .2s ease;
    
}

    .btn-login:hover {
         color: white;
        background: rgba(255, 255, 255, .12);
        border-color: white;
        
    }

/* =====================================================
USUARIO
===================================================== */

.btn-user {
     display: flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .55rem;
    color: white;
    background: transparent;
    border: 0;
    font-size: .85rem;
    
}

.user-avatar {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: var(--iau-primary);
    background: white;
    border-radius: 50%;
    font-weight: 800;
    
}

/* =====================================================
MENÚ DESPLEGABLE
===================================================== */

.dropdown-menu-modern {
     min-width: 220px;
    padding: .55rem;
    border: 1px solid var(--iau-border);
    border-radius: 13px;
    box-shadow: var(--iau-shadow);
    
}

    .dropdown-menu-modern
    .dropdown-item {
         display: flex;
        align-items: center;
        gap: .75rem;
        padding: .7rem .8rem;
        border-radius: 8px;
        font-size: .88rem;
        
    }

        .dropdown-menu-modern
        .dropdown-item i {
             width: 18px;
            color: var(--iau-primary);
            
        }

        .dropdown-menu-modern
        .dropdown-item:hover {
             color: var(--iau-primary);
            background: #edf4f9;
            
        }

    .dropdown-menu-modern
    .dropdown-header {
         padding: .5rem .8rem;
        color: var(--iau-text-muted);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .07em;
        
    }

/* =====================================================
ALERTAS
===================================================== */

.alert-modern {
     display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border: 0;
    border-radius: var(--iau-radius);
    box-shadow: var(--iau-shadow-sm);
    
}

    .alert-modern > i {
         margin-top: .1rem;
        font-size: 1.25rem;
        
    }

    .alert-modern div {
         display: flex;
        flex-direction: column;
        gap: .2rem;
        
    }

    .alert-modern strong {
         font-size: .9rem;
        
    }

    .alert-modern span {
         font-size: .85rem;
        
    }

/* =====================================================
TARJETAS
===================================================== */

.card {
     overflow: hidden;
    border: 1px solid var(--iau-border);
    border-radius: var(--iau-radius);
    background: var(--iau-surface);
    box-shadow: var(--iau-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
    
}

    .card:hover {
         transform: translateY(-4px);
        box-shadow: var(--iau-shadow);
        
    }

.card-img-top {
     aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #edf2f6;
    
}

/* =====================================================
BOTONES
===================================================== */

.btn-primary {
     background: var(--iau-primary);
    border-color: var(--iau-primary);
    font-weight: 600;
    
}

    .btn-primary:hover,
    .btn-primary:focus {
         background: var(--iau-primary-dark);
        border-color: var(--iau-primary-dark);
        
    }

.btn-warning {
     background: var(--iau-accent);
    border-color: var(--iau-accent);
    font-weight: 700;
    
}

    .btn-warning:hover {
         background: var(--iau-accent-dark);
        border-color: var(--iau-accent-dark);
        
    }

/* =====================================================
CATÁLOGO
===================================================== */

/* HERO */

.catalog-hero {
     position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    overflow: hidden;
    min-height: 270px;
    margin-bottom: 1.8rem;
    padding: 3.5rem 4rem;
    color: white;
    background: linear-gradient( 125deg, #003366 0%, #064d78 100% );
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(0, 51, 102, .18);
    
}

    .catalog-hero::before {
         content: "";
        position: absolute;
        top: -130px;
        right: -80px;
        width: 360px;
        height: 360px;
        border: 55px solid rgba(255, 255, 255, .05);
        border-radius: 50%;
        
    }

.catalog-hero-content {
     position: relative;
    z-index: 1;
    max-width: 720px;
    
}

.catalog-eyebrow {
     display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1rem;
    padding: .45rem .8rem;
    color: #ffffff;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    
}

.catalog-hero h1 {
     max-width: 650px;
    margin: 0 0 1rem;
    font-size: clamp( 2rem, 4vw, 3.3rem );
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.04em;
    
}

    .catalog-hero h1 span {
         color: #f4b942;
        
    }

.catalog-hero p {
     max-width: 630px;
    margin: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 1rem;
    line-height: 1.7;
    
}

.catalog-hero-icon {
     position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    color: #f4b942;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 35px;
    font-size: 4rem;
    
}

/* FILTROS */

.catalog-filters {
     margin-bottom: 3rem;
    padding: 1.25rem;
    background: white;
    border: 1px solid #e4e9ef;
    border-radius: 17px;
    box-shadow: 0 8px 25px rgba(0, 51, 102, .06);
    
}

.catalog-search-form {
     display: grid;
    grid-template-columns: minmax(190px, .8fr) minmax(250px, 2fr) auto;
    align-items: end;
    gap: 1rem;
    
}

    .catalog-search-form label {
         display: flex;
        align-items: center;
        gap: .4rem;
        margin-bottom: .5rem;
        color: #344054;
        font-size: .78rem;
        font-weight: 700;
        
    }

        .catalog-search-form label i {
             color: #003366;
            
        }

    .catalog-search-form
    .form-select,
    .search-input-wrapper
    .form-control {
         min-height: 47px;
        border: 1px solid #d9e1e8;
        border-radius: 10px;
        box-shadow: none;
        
    }

        .catalog-search-form
        .form-select:focus,
        .search-input-wrapper
        .form-control:focus {
             border-color: #0a4d7a;
            box-shadow: 0 0 0 4px rgba(0, 51, 102, .09);
            
        }

.search-input-wrapper {
     position: relative;
    
}

    .search-input-wrapper > i {
         position: absolute;
        top: 50%;
        left: 1rem;
        z-index: 2;
        color: #667085;
        transform: translateY(-50%);
        
    }

    .search-input-wrapper
    .form-control {
         padding-left: 2.8rem;
        
    }

.btn-catalog-search {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 125px;
    min-height: 40px;
    padding: .65rem 1.2rem;
    color: white;
    background: #003366;
    border: 0;
    border-radius: 10px;
    font-size: .60rem;
    font-weight: 700;
    transition: background .2s, transform .2s;
    
}

    .btn-catalog-search:hover {
         background: #00264d;
        transform: translateY(-1px);
        
    }

/* RESULTADOS */

.catalog-results-header {
     display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    
}

    .catalog-results-header h2 {
         margin: 0 0 .35rem;
        color: #17212b;
        font-size: 1.4rem;
        font-weight: 800;
        
    }

    .catalog-results-header p {
         margin: 0;
        color: #667085;
        font-size: .85rem;
        
    }

/* PRODUCTOS */

.product-card {
     display: flex;
    flex-direction: column;
    overflow: hidden;
    background: white;
    border: 1px solid #e3e9ee;
    border-radius: 17px;
    box-shadow: 0 5px 18px rgba(0, 51, 102, .05);
    transition: transform .25s ease, box-shadow .25s ease;
    
}

    .product-card:hover {
         transform: translateY(-5px);
        box-shadow: 0 17px 35px rgba(0, 51, 102, .12);
        
    }

.product-image {
     position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #edf2f6;
    
}

    .product-image img {
         width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .45s ease;
        
    }

.product-card:hover
.product-image img {
     transform: scale(1.05);
    
}

.product-type {
     position: absolute;
    top: .85rem;
    left: .85rem;
    padding: .4rem .7rem;
    color: #003366;
    background: rgba(255, 255, 255, .93);
    border-radius: 50px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
    font-size: .68rem;
    font-weight: 800;
    
}

.product-unavailable {
     position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: rgba(23, 33, 43, .62);
    font-size: .9rem;
    font-weight: 800;
    
}

/* CONTENIDO */

.product-content {
     display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem;
    
}

.product-title {
     display: -webkit-box;
    overflow: hidden;
    margin: 0 0 .55rem;
    color: #17212b;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    
}

.product-description {
     display: -webkit-box;
    overflow: hidden;
    flex: 1;
    margin: 0 0 1.3rem;
    color: #667085;
    font-size: .8rem;
    line-height: 1.65;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    
}

.product-footer {
     margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #edf0f3;
    
}

.product-price {
     display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: .9rem;
    
}

    .product-price span {
         color: #667085;
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .07em;
        
    }

    .product-price strong {
         color: #003366;
        font-size: 1.35rem;
        font-weight: 800;
        letter-spacing: -.03em;
        
    }

/* COMPRA */

.product-buy {
     display: grid;
    grid-template-columns: 60px 1fr;
    gap: .6rem;
    
}

.quantity-control
.cantidad-input {
     width: 100%;
    height: 44px;
    padding: .4rem;
    text-align: center;
    border: 1px solid #d9e1e8;
    border-radius: 9px;
    outline: none;
    
}

    .quantity-control
    .cantidad-input:focus {
         border-color: #003366;
        box-shadow: 0 0 0 3px rgba(0, 51, 102, .08);
        
    }

.btn-add-cart {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    color: white;
    background: #003366;
    border: 0;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 700;
    transition: background .2s, transform .2s;
    
}

    .btn-add-cart:hover {
         background: #00264d;
        transform: translateY(-1px);
        
    }

    .btn-add-cart.is-added {
         background: #198754;
        
    }

.btn-product-unavailable {
     width: 100%;
    min-height: 44px;
    color: #667085;
    background: #eef1f4;
    border: 0;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 700;
    
}

/* ESTADO VACÍO */

.catalog-empty {
     max-width: 580px;
    margin: 3rem auto;
    padding: 4rem 2rem;
    text-align: center;
    background: white;
    border: 1px solid #e4e9ef;
    border-radius: 20px;
    
}

.catalog-empty-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 1.5rem;
    color: #003366;
    background: #eaf2f8;
    border-radius: 50%;
    font-size: 2rem;
    
}

.catalog-empty h2 {
     margin-bottom: .7rem;
    font-size: 1.4rem;
    font-weight: 800;
    
}

.catalog-empty p {
     max-width: 400px;
    margin: 0 auto 1.5rem;
    color: #667085;
    font-size: .9rem;
    line-height: 1.7;
    
}

.btn-clear-filters {
     display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    color: white;
    background: #003366;
    border-radius: 9px;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    
}


/* =====================================================
FOOTER
===================================================== */

.site-footer {
     margin-top: auto;
    padding: 1.7rem 0;
    color: rgba(255, 255, 255, .72);
    background: #00264d;
    
}

.footer-content {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    
}

.footer-brand {
     display: flex;
    align-items: center;
    gap: .9rem;
    
}

    .footer-brand img {
         width: 38px;
        height: 38px;
        object-fit: contain;
        
    }

    .footer-brand div {
         display: flex;
        flex-direction: column;
        gap: .2rem;
        
    }

    .footer-brand strong {
         color: white;
        font-size: .88rem;
        
    }

    .footer-brand span,
    .footer-copy {
         font-size: .75rem;
        
    }

/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    
    .navbar-collapse {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    .navbar-nav {
        gap: .2rem;
        margin-bottom: 1rem;
    }

    .nav-actions {
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    
}

@media (max-width: 575.98px) {

    
    .navbar {
        min-height: 68px;
    }

    .brand-logo {
        width: 39px;
        height: 39px;
    }

    .brand-divider {
        display: none;
    }

    .brand-text small {
        display: none;
    }

    .main-content {
        padding: 1.25rem 0 3rem;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    
}

/* =====================================================
CARRITO
===================================================== */

/* CONTENEDOR */

.cart-page {
     padding-bottom: 2rem;
    
}

/* =====================================================
ENCABEZADO
===================================================== */

.cart-header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 2.2rem 2.5rem;
    color: white;
    background: linear-gradient( 125deg, #003366, #07517d );
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(0, 51, 102, .15);
    
}

.cart-eyebrow {
     display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    padding: .4rem .7rem;
    color: white;
    background: rgba(255, 255, 255, .12);
    border-radius: 50px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    
}

.cart-header h1 {
     margin: 0 0 .55rem;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -.04em;
    
}

.cart-header p {
     max-width: 550px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
    
}

/* CONTADOR */

.cart-items-summary {
     display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 145px;
    padding: 1rem 1.3rem;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 15px;
    
}

    .cart-items-summary > i {
         color: #f4b942;
        font-size: 2rem;
        
    }

    .cart-items-summary div {
         display: flex;
        flex-direction: column;
        
    }

    .cart-items-summary strong {
         font-size: 1.3rem;
        line-height: 1;
        
    }

    .cart-items-summary span {
         margin-top: .25rem;
        color: rgba(255, 255, 255, .7);
        font-size: .7rem;
        
    }

/* =====================================================
LISTA
===================================================== */

.cart-items {
     overflow: hidden;
    background: white;
    border: 1px solid #e3e9ee;
    border-radius: 17px;
    box-shadow: 0 7px 23px rgba(0, 51, 102, .06);
    
}

.cart-items-header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid #e9eef2;
    
}

    .cart-items-header h2 {
         margin: 0;
        color: #17212b;
        font-size: 1rem;
        font-weight: 800;
        
    }

    .cart-items-header span {
         padding: .35rem .65rem;
        color: #003366;
        background: #edf4f9;
        border-radius: 50px;
        font-size: .68rem;
        font-weight: 800;
        
    }

.cart-item {
     display: grid;
    grid-template-columns: 54px minmax(150px, 1fr) 75px 105px 38px;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid #edf1f4;
    transition: background .2s ease;
    
}

    .cart-item:last-child {
         border-bottom: 0;
        
    }

    .cart-item:hover {
         background: #fafcfd;
        
    }

/* ICONO */

.cart-item-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: #003366;
    background: #eaf2f8;
    border-radius: 13px;
    font-size: 1.35rem;
    
}

/* INFORMACIÓN */

.cart-item-info {
     min-width: 0;
    
}

    .cart-item-info h3 {
         overflow: hidden;
        margin: 0 0 .4rem;
        color: #17212b;
        font-size: .9rem;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
        
    }

.cart-unit-price {
     color: #667085;
    font-size: .7rem;
    
}

    .cart-unit-price strong {
         color: #344054;
        
    }

/* CANTIDAD */

.cart-item-quantity,
.cart-item-subtotal {
     display: flex;
    flex-direction: column;
    gap: .25rem;
    
}

    .cart-item-quantity span,
    .cart-item-subtotal span {
         color: #98a2b3;
        font-size: .62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        
    }

    .cart-item-quantity strong {
         color: #344054;
        font-size: .85rem;
        
    }

    .cart-item-subtotal strong {
         color: #003366;
        font-size: .95rem;
        font-weight: 800;
        
    }

/* ELIMINAR */

.cart-remove-form {
     display: flex;
    justify-content: flex-end;
    
}

.btn-remove-item {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: #dc3545;
    background: #fff5f5;
    border: 0;
    border-radius: 9px;
    transition: background .2s, transform .2s;
    
}

    .btn-remove-item:hover {
         color: white;
        background: #dc3545;
        transform: translateY(-1px);
        
    }

/* =====================================================
VOLVER
===================================================== */

.cart-back-link {
     display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.2rem;
    color: #003366;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    
}

    .cart-back-link:hover {
         color: #07517d;
        
    }

/* =====================================================
RESUMEN
===================================================== */

.order-summary {
     position: sticky;
    top: 100px;
    padding: 1.5rem;
    background: white;
    border: 1px solid #e3e9ee;
    border-radius: 17px;
    box-shadow: 0 10px 28px rgba(0, 51, 102, .08);
    
}

.order-summary-header {
     display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.5rem;
    
}

.order-summary-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #003366;
    background: #eaf2f8;
    border-radius: 11px;
    font-size: 1.2rem;
    
}

.order-summary-header h2 {
     margin: 0 0 .25rem;
    font-size: .95rem;
    font-weight: 800;
    
}

.order-summary-header p {
     margin: 0;
    color: #98a2b3;
    font-size: .68rem;
    
}

.order-summary-details {
     display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px dashed #d9e1e8;
    
}

    .order-summary-details div {
         display: flex;
        justify-content: space-between;
        
    }

    .order-summary-details span {
         color: #667085;
        font-size: .8rem;
        
    }

    .order-summary-details strong {
         color: #344054;
        font-size: .8rem;
        
    }

.order-summary-total {
     display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 1.2rem 0;
    
}

    .order-summary-total span {
         color: #344054;
        font-size: .82rem;
        font-weight: 700;
        
    }

    .order-summary-total strong {
         color: #003366;
        font-size: 1.65rem;
        font-weight: 850;
        letter-spacing: -.04em;
        
    }

/* PAGAR */

.btn-checkout {
     display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    width: 100%;
    min-height: 50px;
    color: white;
    background: #003366;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 750;
    text-decoration: none;
    transition: background .2s, transform .2s, box-shadow .2s;
    
}

    .btn-checkout:hover {
         color: white;
        background: #00264d;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(0, 51, 102, .18);
        
    }

/* VACIAR */

.cart-clear-form {
     margin-top: .8rem;
    
}

.btn-clear-cart {
     display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    min-height: 42px;
    color: #667085;
    background: transparent;
    border: 0;
    font-size: .75rem;
    font-weight: 650;
    
}

    .btn-clear-cart:hover {
         color: #dc3545;
        
    }

/* SEGURIDAD */

.checkout-security {
     display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    color: #667085;
    border-top: 1px solid #edf1f4;
    font-size: .68rem;
    line-height: 1.5;
    
}

    .checkout-security i {
         color: #198754;
        font-size: .9rem;
        
    }

/* =====================================================
CARRITO VACÍO
===================================================== */

.cart-empty {
     max-width: 600px;
    margin: 3rem auto;
    padding: 4rem 2rem;
    text-align: center;
    background: white;
    border: 1px solid #e3e9ee;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 51, 102, .06);
    
}

.cart-empty-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin: 0 auto 1.5rem;
    color: #003366;
    background: #eaf2f8;
    border-radius: 50%;
    font-size: 2.2rem;
    
}

.cart-empty h2 {
     margin: 0 0 .75rem;
    font-size: 1.5rem;
    font-weight: 800;
    
}

.cart-empty p {
     max-width: 430px;
    margin: 0 auto 1.6rem;
    color: #667085;
    font-size: .87rem;
    line-height: 1.7;
    
}

.btn-continue-shopping {
     display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1.2rem;
    color: white;
    background: #003366;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 750;
    text-decoration: none;
    
}

/* =====================================================
CHECKOUT
===================================================== */

/* PÁGINA */

.checkout-page {
     padding-bottom: 2rem;
    
}

/* =====================================================
HEADER
===================================================== */

.checkout-header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.4rem;
    padding: 2.3rem 2.6rem;
    color: white;
    background: linear-gradient( 125deg, #003366, #07517d );
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(0, 51, 102, .15);
    
}

.checkout-eyebrow {
     display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .8rem;
    padding: .4rem .75rem;
    background: rgba(255, 255, 255, .12);
    border-radius: 50px;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .1em;
    
}

.checkout-header h1 {
     margin: 0 0 .55rem;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -.04em;
    
}

.checkout-header p {
     margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .88rem;
    
}

.checkout-total-header {
     display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 1rem 1.3rem;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    
}

    .checkout-total-header span {
         color: rgba(255, 255, 255, .7);
        font-size: .68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .07em;
        
    }

    .checkout-total-header strong {
         margin-top: .25rem;
        color: #f4b942;
        font-size: 1.6rem;
        font-weight: 850;
        
    }

/* =====================================================
PROGRESO
===================================================== */

.checkout-progress {
     display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.1rem 1.5rem;
    background: white;
    border: 1px solid #e3e9ee;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(0, 51, 102, .05);
    
}

.checkout-step {
     display: flex;
    align-items: center;
    gap: .7rem;
    
}

    .checkout-step > span {
         display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 35px;
        height: 35px;
        color: #98a2b3;
        background: #eef2f5;
        border-radius: 50%;
        font-size: .78rem;
        font-weight: 800;
        
    }

    .checkout-step div {
         display: flex;
        flex-direction: column;
        
    }

    .checkout-step strong {
         color: #667085;
        font-size: .76rem;
        
    }

    .checkout-step small {
         margin-top: .15rem;
        color: #98a2b3;
        font-size: .63rem;
        
    }

    .checkout-step.completed > span {
         color: white;
        background: #198754;
        
    }

    .checkout-step.completed strong {
         color: #198754;
        
    }

    .checkout-step.active > span {
         color: white;
        background: #003366;
        
    }

    .checkout-step.active strong {
         color: #003366;
        
    }

.checkout-progress-line {
     flex: 1;
    height: 2px;
    margin: 0 1.2rem;
    background: #e5e9ed;
    
}

    .checkout-progress-line.completed {
         background: #198754;
        
    }

/* =====================================================
TARJETAS
===================================================== */

.checkout-card,
.checkout-payment-card {
     margin-bottom: 1.3rem;
    padding: 1.5rem;
    background: white;
    border: 1px solid #e3e9ee;
    border-radius: 17px;
    box-shadow: 0 7px 23px rgba(0, 51, 102, .06);
    
}

.checkout-card-header {
     display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.4rem;
    
}

.checkout-section-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: #003366;
    background: #eaf2f8;
    border-radius: 11px;
    font-size: 1.15rem;
    
}

.checkout-card-header h2 {
     margin: 0 0 .2rem;
    color: #17212b;
    font-size: .98rem;
    font-weight: 800;
    
}

.checkout-card-header p {
     margin: 0;
    color: #98a2b3;
    font-size: .68rem;
    
}

/* =====================================================
ARTÍCULOS
===================================================== */

.checkout-items {
     border-top: 1px solid #edf1f4;
    
}

.checkout-item {
     display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: .8rem;
    padding: 1rem 0;
    border-bottom: 1px solid #edf1f4;
    
}

.checkout-item-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #003366;
    background: #edf4f9;
    border-radius: 10px;
    
}

.checkout-item-name {
     display: flex;
    flex-direction: column;
    gap: .25rem;
    
}

    .checkout-item-name strong {
         color: #344054;
        font-size: .82rem;
        
    }

    .checkout-item-name span {
         color: #98a2b3;
        font-size: .67rem;
        
    }

.checkout-item-price {
     color: #003366;
    font-size: .9rem;
    font-weight: 800;
    
}

.checkout-order-total {
     display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.2rem;
    
}

    .checkout-order-total span {
         color: #344054;
        font-size: .82rem;
        font-weight: 700;
        
    }

    .checkout-order-total strong {
         color: #003366;
        font-size: 1.35rem;
        font-weight: 850;
        
    }

/* =====================================================
MENSAJES
===================================================== */

.checkout-info-message,
.checkout-enrollment-message {
     display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.1rem;
    padding: .9rem;
    border-radius: 10px;
    
}

.checkout-info-message {
     color: #34536a;
    background: #eef6fb;
    
}

.checkout-enrollment-message {
     color: #775b1a;
    background: #fff8e6;
    
}

    .checkout-info-message i,
    .checkout-enrollment-message i {
         margin-top: .1rem;
        font-size: 1rem;
        
    }

    .checkout-info-message div,
    .checkout-enrollment-message div {
         display: flex;
        flex-direction: column;
        gap: .2rem;
        
    }

    .checkout-info-message strong,
    .checkout-enrollment-message strong {
         font-size: .73rem;
        
    }

    .checkout-info-message span,
    .checkout-enrollment-message span {
         font-size: .7rem;
        line-height: 1.55;
        
    }

.checkout-beneficiary-note {
     display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    color: #667085;
    font-size: .7rem;
    
}

/* =====================================================
FORMULARIO
===================================================== */

.checkout-label {
     display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .45rem;
    color: #344054;
    font-size: .72rem;
    font-weight: 700;
    
}

    .checkout-label i {
         color: #003366;
        
    }

    .checkout-label small {
         margin-left: auto;
        color: #98a2b3;
        font-size: .58rem;
        font-weight: 600;
        
    }

.checkout-input {
     min-height: 46px;
    border: 1px solid #d9e1e8;
    border-radius: 9px;
    box-shadow: none;
    font-size: .83rem;
    
}

    .checkout-input:focus {
         border-color: #003366;
        box-shadow: 0 0 0 4px rgba(0, 51, 102, .08);
        
    }

.checkout-field-error {
     display: block;
    margin-top: .35rem;
    font-size: .65rem;
    
}

/* =====================================================
PAGO
===================================================== */

.checkout-payment-card {
     position: sticky;
    top: 100px;
    
}

.payment-option {
     display: grid;
    grid-template-columns: 20px 43px 1fr 22px;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
    padding: 1rem;
    cursor: pointer;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    transition: border .2s, background .2s;
    
}

    .payment-option:hover {
         background: #fafcfd;
        border-color: #b9cbd8;
        
    }

    .payment-option:has( input:checked ) {
         background: #f1f7fb;
        border-color: #003366;
        
    }

.payment-option-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    color: #003366;
    background: white;
    border-radius: 10px;
    font-size: 1.15rem;
    
}

.payment-option-content {
     display: flex;
    flex-direction: column;
    gap: .2rem;
    
}

    .payment-option-content strong {
         color: #344054;
        font-size: .78rem;
        
    }

    .payment-option-content small {
         color: #98a2b3;
        font-size: .65rem;
        
    }

.payment-option-check {
     color: #198754;
    opacity: 0;
    
}

.payment-option:has( input:checked )
.payment-option-check {
     opacity: 1;
    
}

/* TOTAL */

.checkout-payment-total {
     display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 1.3rem 0;
    padding: 1.2rem 0;
    border-top: 1px dashed #d9e1e8;
    border-bottom: 1px dashed #d9e1e8;
    
}

    .checkout-payment-total span {
         color: #344054;
        font-size: .8rem;
        font-weight: 700;
        
    }

    .checkout-payment-total strong {
         color: #003366;
        font-size: 1.55rem;
        font-weight: 850;
        
    }

/* CONFIRMAR */

.btn-confirm-payment {
     display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    width: 100%;
    min-height: 51px;
    color: white;
    background: #198754;
    border: 0;
    border-radius: 10px;
    font-size: .87rem;
    font-weight: 800;
    transition: transform .2s, box-shadow .2s, background .2s;
    
}

    .btn-confirm-payment:hover {
         background: #157347;
        transform: translateY(-1px);
        box-shadow: 0 9px 20px rgba(25, 135, 84, .20);
        
    }

/* SEGURIDAD */

.checkout-payment-security {
     display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: 1rem;
    color: #667085;
    font-size: .66rem;
    line-height: 1.55;
    
}

    .checkout-payment-security i {
         margin-top: .1rem;
        color: #198754;
        
    }

.checkout-back-cart {
     display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.1rem;
    color: #667085;
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
    
}

    .checkout-back-cart:hover {
         color: #003366;
        
    }

/* VALIDACIÓN */

.checkout-validation {
     display: none;
    
}

    .checkout-validation.validation-summary-errors {
         display: flex;
        align-items: center;
        gap: .7rem;
        margin-bottom: 1.2rem;
        padding: 1rem;
        color: #842029;
        background: #f8d7da;
        border-radius: 11px;
        
    }

/* =====================================================
ADMINISTRACIÓN - CATEGORÍAS
===================================================== */

/* CONTENEDOR */

.admin-categories {
     width: 100%;
    
}

/* =====================================================
TABLA
===================================================== */

.admin-table-wrapper {
     overflow-x: auto;
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 15px;
    box-shadow: 0 7px 22px rgba(0, 51, 102, .05);
    
}

.admin-table {
     width: 100%;
    margin: 0;
    border-collapse: collapse;
    
}

    .admin-table thead {
         background: #f7fafc;
        
    }

    .admin-table th {
         padding: 1rem 1.2rem;
        color: #667085;
        border-bottom: 1px solid #e4eaee;
        font-size: .63rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .08em;
        white-space: nowrap;
        
    }

    .admin-table td {
         padding: 1rem 1.2rem;
        color: #344054;
        border-bottom: 1px solid #edf1f4;
        vertical-align: middle;
        
    }

    .admin-table tbody tr {
         transition: background .2s ease;
        
    }

        .admin-table tbody tr:last-child td {
             border-bottom: 0;
            
        }

        .admin-table tbody tr:hover {
             background: #fafcfd;
            
        }

/* =====================================================
NOMBRE
===================================================== */

.category-name {
     display: flex;
    align-items: center;
    gap: .75rem;
    
}

.category-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
    color: #003366;
    background: #eaf2f8;
    border-radius: 10px;
    font-size: 1rem;
    
}

.category-name strong {
     color: #17212b;
    font-size: .82rem;
    font-weight: 750;
    
}

/* =====================================================
DESCRIPCIÓN
===================================================== */

.category-description {
     display: block;
    max-width: 480px;
    color: #667085;
    font-size: .75rem;
    line-height: 1.5;
    
}

.category-empty-description {
     color: #a0a9b2;
    font-size: .7rem;
    font-style: italic;
    
}

/* =====================================================
ACCIONES
===================================================== */

.admin-table-actions {
     width: 1%;
    text-align: right !important;
    white-space: nowrap;
    
}

.category-actions {
     display: flex;
    justify-content: flex-end;
    gap: .5rem;
    
}

.btn-category-edit,
.btn-category-delete {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 34px;
    padding: .45rem .7rem;
    border: 1px solid;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    
}

.btn-category-edit {
     color: #003366;
    background: white;
    border-color: #c8d8e3;
    
}

    .btn-category-edit:hover {
         color: white;
        background: #003366;
        border-color: #003366;
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(0, 51, 102, .15);
        
    }

.btn-category-delete {
     color: #c93645;
    background: #fff7f7;
    border-color: #f1c9ce;
    
}

    .btn-category-delete:hover {
         color: white;
        background: #c93645;
        border-color: #c93645;
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(201, 54, 69, .14);
        
    }

/* =====================================================
ESTADO VACÍO
===================================================== */

.admin-empty-state {
     max-width: 600px;
    margin: 3rem auto;
    padding: 3.5rem 2rem;
    text-align: center;
    background: white;
    border: 1px dashed #cfdbe3;
    border-radius: 17px;
    
}

.admin-empty-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.3rem;
    color: #003366;
    background: #eaf2f8;
    border-radius: 50%;
    font-size: 1.9rem;
    
}

.admin-empty-state h2 {
     margin: 0 0 .7rem;
    color: #17212b;
    font-size: 1.3rem;
    font-weight: 800;
    
}

.admin-empty-state p {
     max-width: 430px;
    margin: 0 auto;
    color: #667085;
    font-size: .82rem;
    line-height: 1.65;
    
}

/* =====================================================
ADMINISTRACIÓN - CATÁLOGO
===================================================== */

/* =====================================================
PÁGINA
===================================================== */

.admin-items-page {
     padding-bottom: 2rem;
    
}

/* =====================================================
ENCABEZADO
===================================================== */

.admin-items-header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 2.2rem 2.5rem;
    color: white;
    background: linear-gradient( 125deg, #003366, #07517d );
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0, 51, 102, .14);
    
}

.admin-items-eyebrow {
     display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    padding: .38rem .7rem;
    background: rgba(255, 255, 255, .12);
    border-radius: 50px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    
}

.admin-items-header h1 {
     margin: 0 0 .5rem;
    font-size: 2.1rem;
    font-weight: 850;
    letter-spacing: -.04em;
    
}

.admin-items-header p {
     max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .84rem;
    line-height: 1.6;
    
}

/* BOTÓN NUEVO */

.btn-admin-new-item {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    flex-shrink: 0;
    min-height: 44px;
    padding: .75rem 1.1rem;
    color: #003366;
    background: white;
    border-radius: 10px;
    font-size: .75rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
    
}

    .btn-admin-new-item:hover {
         color: #003366;
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
        
    }

/* =====================================================
FILTROS
===================================================== */

.admin-items-filters {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 1.2rem 1.5rem;
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 51, 102, .04);
    
}

.admin-filter-title {
     display: flex;
    align-items: center;
    gap: .75rem;
    
}

.admin-filter-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    color: #003366;
    background: #eaf2f8;
    border-radius: 10px;
    
}

.admin-filter-title div:last-child {
     display: flex;
    flex-direction: column;
    
}

.admin-filter-title strong {
     color: #344054;
    font-size: .76rem;
    
}

.admin-filter-title span {
     margin-top: .15rem;
    color: #98a2b3;
    font-size: .62rem;
    
}

/* FORMULARIO */

.admin-filter-form {
     display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1.5rem;
    
}

.admin-filter-group {
     min-width: 210px;
    
}

    .admin-filter-group label {
         display: block;
        margin-bottom: .35rem;
        color: #667085;
        font-size: .62rem;
        font-weight: 750;
        
    }

    .admin-filter-group .form-select {
         min-height: 38px;
        color: #344054;
        border-color: #d9e2e8;
        border-radius: 8px;
        font-size: .72rem;
        
    }

        .admin-filter-group .form-select:focus {
             border-color: #003366;
            box-shadow: 0 0 0 .18rem rgba(0, 51, 102, .09);
            
        }

/* SWITCH */

.admin-filter-checkbox {
     min-width: 200px;
    
}

    .admin-filter-checkbox .form-check {
         margin: 0;
        
    }

    .admin-filter-checkbox .form-check-input {
         cursor: pointer;
        
    }

        .admin-filter-checkbox .form-check-input:checked {
             background-color: #003366;
            border-color: #003366;
            
        }

    .admin-filter-checkbox .form-check-label {
         color: #475467;
        cursor: pointer;
        font-size: .7rem;
        font-weight: 700;
        
    }

    .admin-filter-checkbox small {
         display: block;
        margin-top: .3rem;
        color: #98a2b3;
        font-size: .58rem;
        
    }

/* =====================================================
RESUMEN
===================================================== */

.admin-items-summary {
     display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 .8rem;
    padding: 0 .25rem;
    
}

    .admin-items-summary > div {
         display: flex;
        align-items: baseline;
        gap: .4rem;
        
    }

    .admin-items-summary strong {
         color: #003366;
        font-size: 1.1rem;
        font-weight: 850;
        
    }

    .admin-items-summary > div span {
         color: #667085;
        font-size: .68rem;
        
    }

.admin-filter-active {
     display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    color: #245b42;
    background: #edf8f2;
    border-radius: 50px;
    font-size: .6rem;
    font-weight: 750;
    
}

/* =====================================================
TABLA
===================================================== */

.admin-items-table-wrapper {
     overflow-x: auto;
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(0, 51, 102, .05);
    
}

.admin-items-table {
     width: 100%;
    min-width: 1050px;
    margin: 0;
    border-collapse: collapse;
    
}

    .admin-items-table thead {
         background: #f7fafc;
        
    }

    .admin-items-table th {
         padding: 1rem;
        color: #667085;
        border-bottom: 1px solid #e4eaee;
        font-size: .59rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .07em;
        white-space: nowrap;
        
    }

    .admin-items-table td {
         padding: 1rem;
        color: #475467;
        border-bottom: 1px solid #edf1f4;
        vertical-align: middle;
        
    }

    .admin-items-table tbody tr {
         transition: background .18s ease;
        
    }

        .admin-items-table tbody tr:hover {
             background: #fafcfd;
            
        }

        .admin-items-table tbody tr:last-child td {
             border-bottom: 0;
            
        }

/* INACTIVO */

.admin-item-inactive {
     background: #fbfbfc;
    
}

    .admin-item-inactive td {
         opacity: .62;
        
    }

/* =====================================================
NOMBRE
===================================================== */

.admin-item-name {
     display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 180px;
    
}

.admin-item-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 37px;
    height: 37px;
    color: #003366;
    background: #eaf2f8;
    border-radius: 9px;
    font-size: .9rem;
    
}

.admin-item-name strong {
     max-width: 220px;
    overflow: hidden;
    color: #17212b;
    font-size: .73rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
    
}

/* =====================================================
TIPO
===================================================== */

.admin-item-type {
     display: inline-flex;
    align-items: center;
    padding: .35rem .6rem;
    color: #36566e;
    background: #eef4f7;
    border-radius: 50px;
    font-size: .6rem;
    font-weight: 750;
    white-space: nowrap;
    
}

/* =====================================================
CATEGORÍA
===================================================== */

.admin-item-category {
     display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #667085;
    font-size: .66rem;
    white-space: nowrap;
    
}

    .admin-item-category i {
         color: #8a9aa7;
        
    }

.admin-item-empty {
     color: #a0a9b2;
    font-size: .62rem;
    font-style: italic;
    
}

/* =====================================================
PRECIO
===================================================== */

.admin-item-price {
     color: #003366;
    font-size: .75rem;
    font-weight: 800;
    white-space: nowrap;
    
}

/* =====================================================
STOCK
===================================================== */

.admin-item-stock,
.admin-item-unlimited {
     display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .65rem;
    white-space: nowrap;
    
}

.admin-item-stock {
     color: #475467;
    
}

    .admin-item-stock i {
         color: #718096;
        
    }

.admin-item-unlimited {
     color: #536d60;
    
}

    .admin-item-unlimited i {
         color: #4f8062;
        
    }

/* =====================================================
ESTADO
===================================================== */

.admin-status-active,
.admin-status-inactive {
     display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .6rem;
    border-radius: 50px;
    font-size: .6rem;
    font-weight: 750;
    white-space: nowrap;
    
}

.admin-status-active {
     color: #236343;
    background: #eaf7ef;
    
}

.admin-status-inactive {
     color: #8a5055;
    background: #fbeef0;
    
}

/* =====================================================
ACCIONES
===================================================== */

.admin-items-actions-header {
     width: 1%;
    text-align: right !important;
    
}

.admin-items-actions {
     text-align: right;
    white-space: nowrap;
    
}

.admin-item-actions {
     display: flex;
    justify-content: flex-end;
    gap: .45rem;
    
}

.btn-admin-item-edit,
.btn-admin-item-disable,
.btn-admin-item-enable {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 33px;
    padding: .42rem .65rem;
    border: 1px solid;
    border-radius: 8px;
    font-size: .62rem;
    font-weight: 750;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
    
}

.btn-admin-item-edit {
     color: #003366;
    background: white;
    border-color: #c8d8e3;
    
}

    .btn-admin-item-edit:hover {
         color: white;
        background: #003366;
        border-color: #003366;
        transform: translateY(-1px);
        box-shadow: 0 4px 11px rgba(0, 51, 102, .13);
        
    }

.btn-admin-item-disable {
     color: #b54750;
    background: #fff7f7;
    border-color: #f0cbd0;
    
}

    .btn-admin-item-disable:hover {
         color: white;
        background: #b54750;
        border-color: #b54750;
        transform: translateY(-1px);
        
    }

.btn-admin-item-enable {
     color: #236343;
    background: #f1faf5;
    border-color: #c8e5d4;
    
}

    .btn-admin-item-enable:hover {
         color: white;
        background: #236343;
        border-color: #236343;
        transform: translateY(-1px);
        
    }

/* =====================================================
ESTADO VACÍO
===================================================== */

.admin-items-empty {
     max-width: 600px;
    margin: 3rem auto;
    padding: 3.5rem 2rem;
    text-align: center;
    background: white;
    border: 1px dashed #cfdbe3;
    border-radius: 18px;
    
}

.admin-items-empty-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    margin: 0 auto 1.3rem;
    color: #003366;
    background: #eaf2f8;
    border-radius: 50%;
    font-size: 2rem;
    
}

.admin-items-empty h2 {
     margin: 0 0 .7rem;
    color: #17212b;
    font-size: 1.35rem;
    font-weight: 800;
    
}

.admin-items-empty p {
     margin: 0 0 1.5rem;
    color: #667085;
    font-size: .8rem;
    
}

.btn-admin-empty-create {
     display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1rem;
    color: white;
    background: #003366;
    border-radius: 9px;
    font-size: .72rem;
    font-weight: 750;
    text-decoration: none;
    
}

    .btn-admin-empty-create:hover {
         color: white;
        background: #00264d;
        
    }

/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    
    .admin-items-filters {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-filter-form {
        justify-content: flex-start;
        width: 100%;
    }

    
}

@media (max-width: 767.98px) {

    
    .admin-items-header {
        align-items: flex-start;
        flex-direction: column;
    }

    
}

@media (max-width: 575.98px) {

    
    .admin-items-header {
        padding: 1.5rem;
        border-radius: 15px;
    }

    .admin-items-header h1 {
        font-size: 1.8rem;
    }

    .btn-admin-new-item {
        width: 100%;
    }

    .admin-items-filters {
        padding: 1.1rem;
    }

    .admin-filter-form {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
    }

    .admin-filter-group,
    .admin-filter-checkbox {
        width: 100%;
    }

    
}

/* =====================================================
CREAR ÍTEM
===================================================== */

/* PÁGINA */

.item-form-page {
     padding-bottom: 3rem;
    
}

/* =====================================================
ENCABEZADO
===================================================== */

.item-form-header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 2.2rem 2.5rem;
    color: white;
    background: linear-gradient( 125deg, #003366, #07517d );
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0, 51, 102, .14);
    
}

.item-form-eyebrow {
     display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    padding: .38rem .7rem;
    background: rgba(255, 255, 255, .12);
    border-radius: 50px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .1em;
    
}

.item-form-header h1 {
     margin: 0 0 .5rem;
    font-size: 2.1rem;
    font-weight: 850;
    letter-spacing: -.04em;
    
}

.item-form-header p {
     max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .83rem;
    line-height: 1.65;
    
}

.btn-item-header-back {
     display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    padding: .7rem 1rem;
    color: white;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 9px;
    font-size: .68rem;
    font-weight: 750;
    text-decoration: none;
    
}

    .btn-item-header-back:hover {
         color: white;
        background: rgba(255, 255, 255, .18);
        
    }

/* =====================================================
VALIDACIÓN
===================================================== */

.item-validation-summary {
     border-radius: 11px;
    font-size: .72rem;
    
}

/* =====================================================
TARJETAS
===================================================== */

.item-form-card {
     margin-bottom: 1.3rem;
    overflow: hidden;
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 15px;
    box-shadow: 0 7px 22px rgba(0, 51, 102, .045);
    
}

.item-form-card-header {
     display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.15rem 1.35rem;
    background: #f8fafc;
    border-bottom: 1px solid #e8edf1;
    
}

.item-form-card-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    color: #003366;
    background: #eaf2f8;
    border-radius: 10px;
    
}

.item-form-card-header h2 {
     margin: 0 0 .18rem;
    color: #24313d;
    font-size: .82rem;
    font-weight: 800;
    
}

.item-form-card-header p {
     margin: 0;
    color: #8a97a3;
    font-size: .63rem;
    
}

.item-form-card-body {
     padding: 1.4rem;
    
}

/* =====================================================
CAMPOS
===================================================== */

.item-form-label {
     display: block;
    margin-bottom: .42rem;
    color: #475467;
    font-size: .68rem;
    font-weight: 750;
    
}

.item-form-control {
     min-height: 42px;
    color: #344054;
    border-color: #d9e2e8;
    border-radius: 9px;
    font-size: .73rem;
    
}

    .item-form-control:focus {
         border-color: #003366;
        box-shadow: 0 0 0 .18rem rgba(0, 51, 102, .09);
        
    }

.item-description {
     min-height: 105px;
    resize: vertical;
    
}

.item-form-help {
     margin-top: .4rem;
    color: #98a2b3;
    font-size: .58rem;
    line-height: 1.5;
    
}

    .item-form-help i {
         margin-right: .2rem;
        color: #66869c;
        
    }

.item-field-error {
     display: block;
    margin-top: .3rem;
    font-size: .6rem;
    
}

/* =====================================================
PRECIO
===================================================== */

.item-price-input {
     display: flex;
    align-items: center;
    
}

    .item-price-input > span {
         display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 42px;
        color: #47647a;
        background: #eef4f7;
        border: 1px solid #d9e2e8;
        border-right: 0;
        border-radius: 9px 0 0 9px;
        font-size: .75rem;
        font-weight: 800;
        
    }

    .item-price-input input {
         border-radius: 0 9px 9px 0;
        
    }

/* =====================================================
TIPO
===================================================== */

.item-type-title {
     display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.25rem;
    padding: .75rem .9rem;
    background: #f3f8fb;
    border-left: 3px solid #003366;
    border-radius: 8px;
    
}

    .item-type-title > i {
         color: #003366;
        font-size: 1rem;
        
    }

    .item-type-title div {
         display: flex;
        flex-direction: column;
        
    }

    .item-type-title strong {
         color: #344054;
        font-size: .7rem;
        
    }

    .item-type-title span {
         margin-top: .12rem;
        color: #8a97a3;
        font-size: .58rem;
        
    }

/* =====================================================
IMAGEN
===================================================== */

.item-image-upload {
     display: block;
    cursor: pointer;
    
}

.item-image-preview {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    height: 190px;
    overflow: hidden;
    color: #8b9ba8;
    background: #f5f8fa;
    border: 2px dashed #cdd9e1;
    border-radius: 12px;
    transition: border-color .18s ease, background .18s ease;
    
}

.item-image-upload:hover
.item-image-preview {
     background: #edf5f9;
    border-color: #003366;
    
}

.item-image-preview i {
     color: #66869c;
    font-size: 2rem;
    
}

.item-image-preview span {
     font-size: .63rem;
    
}

.item-image-preview img {
     width: 100%;
    height: 100%;
    object-fit: cover;
    
}

.item-image-upload-text {
     display: flex;
    flex-direction: column;
    margin-top: .8rem;
    text-align: center;
    
}

    .item-image-upload-text strong {
         color: #003366;
        font-size: .68rem;
        
    }

    .item-image-upload-text span {
         margin-top: .15rem;
        color: #98a2b3;
        font-size: .57rem;
        
    }

.item-image-help {
     margin: .9rem 0 0;
    color: #98a2b3;
    text-align: center;
    font-size: .58rem;
    
}

/* =====================================================
CONSEJOS
===================================================== */

.item-form-tips {
     display: flex;
    gap: .8rem;
    padding: 1.1rem;
    color: #5d6873;
    background: #f4f8fa;
    border: 1px solid #dce8ed;
    border-radius: 13px;
    
}

.item-form-tips-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    color: #896e21;
    background: #fff7dc;
    border-radius: 9px;
    
}

.item-form-tips strong {
     color: #475467;
    font-size: .68rem;
    
}

.item-form-tips ul {
     margin: .55rem 0 0;
    padding-left: 1rem;
    
}

.item-form-tips li {
     margin-bottom: .35rem;
    font-size: .58rem;
    line-height: 1.5;
    
}

/* =====================================================
ACCIONES
===================================================== */

.item-form-actions {
     display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .7rem;
    margin-top: .5rem;
    padding: 1.1rem 0;
    
}

.btn-item-cancel,
.btn-item-save {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 42px;
    padding: .65rem 1.15rem;
    border-radius: 9px;
    font-size: .7rem;
    font-weight: 750;
    text-decoration: none;
    
}

.btn-item-cancel {
     color: #667085;
    background: white;
    border: 1px solid #d7e0e5;
    
}

    .btn-item-cancel:hover {
         color: #344054;
        background: #f7f9fa;
        
    }

.btn-item-save {
     color: white;
    background: #003366;
    border: 1px solid #003366;
    box-shadow: 0 6px 14px rgba(0, 51, 102, .14);
    
}

    .btn-item-save:hover {
         color: white;
        background: #00264d;
        
    }

/* =====================================================
ADMINISTRACIÓN - PEDIDOS
===================================================== */

/* =====================================================
PÁGINA
===================================================== */

.admin-orders-page {
     padding-bottom: 3rem;
    
}

/* =====================================================
ENCABEZADO
===================================================== */

.admin-orders-header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.3rem;
    padding: 2.2rem 2.5rem;
    color: white;
    background: linear-gradient( 125deg, #003366, #07517d );
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0, 51, 102, .14);
    
}

.admin-orders-eyebrow {
     display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    padding: .38rem .7rem;
    background: rgba(255, 255, 255, .12);
    border-radius: 50px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .1em;
    
}

.admin-orders-header h1 {
     margin: 0 0 .5rem;
    font-size: 2.1rem;
    font-weight: 850;
    letter-spacing: -.04em;
    
}

.admin-orders-header p {
     max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .82rem;
    line-height: 1.65;
    
}

/* CONTADOR */

.admin-orders-counter {
     display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    min-width: 135px;
    padding: .95rem 1.15rem;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 13px;
    
}

    .admin-orders-counter > i {
         font-size: 1.45rem;
        
    }

    .admin-orders-counter div {
         display: flex;
        flex-direction: column;
        
    }

    .admin-orders-counter strong {
         font-size: 1.2rem;
        font-weight: 850;
        
    }

    .admin-orders-counter span {
         color: rgba(255, 255, 255, .72);
        font-size: .6rem;
        
    }

/* =====================================================
AVISO
===================================================== */

.admin-orders-notice {
     display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: 1.1rem;
    padding: 1rem 1.2rem;
    color: #485b69;
    background: #f2f8fb;
    border: 1px solid #d7e8f0;
    border-radius: 13px;
    
}

.admin-orders-notice-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    color: #003366;
    background: #e0eff6;
    border-radius: 9px;
    
}

.admin-orders-notice strong {
     display: block;
    margin-bottom: .25rem;
    color: #29475b;
    font-size: .7rem;
    
}

.admin-orders-notice p {
     max-width: 900px;
    margin: 0;
    color: #71808b;
    font-size: .62rem;
    line-height: 1.6;
    
}

/* =====================================================
RESUMEN
===================================================== */

.admin-orders-summary {
     display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
    padding: 0 .25rem;
    
}

    .admin-orders-summary > div {
         display: flex;
        align-items: baseline;
        gap: .4rem;
        
    }

    .admin-orders-summary strong {
         color: #003366;
        font-size: 1.05rem;
        font-weight: 850;
        
    }

    .admin-orders-summary > div span {
         color: #667085;
        font-size: .67rem;
        
    }

.admin-orders-live {
     display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    color: #236343;
    background: #edf8f2;
    border-radius: 50px;
    font-size: .59rem;
    font-weight: 750;
    
}

/* =====================================================
TABLA
===================================================== */

.admin-orders-table-wrapper {
     overflow-x: auto;
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(0, 51, 102, .05);
    
}

.admin-orders-table {
     width: 100%;
    min-width: 1180px;
    margin: 0;
    border-collapse: collapse;
    
}

    .admin-orders-table thead {
         background: #f7fafc;
        
    }

    .admin-orders-table th {
         padding: 1rem;
        color: #667085;
        border-bottom: 1px solid #e4eaee;
        font-size: .57rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .07em;
        white-space: nowrap;
        
    }

    .admin-orders-table td {
         padding: 1rem;
        color: #475467;
        border-bottom: 1px solid #edf1f4;
        vertical-align: middle;
        
    }

    .admin-orders-table tbody tr {
         transition: background .18s ease;
        
    }

        .admin-orders-table tbody tr:hover {
             background: #fafcfd;
            
        }

        .admin-orders-table tbody tr:last-child td {
             border-bottom: 0;
            
        }

/* =====================================================
NÚMERO
===================================================== */

.admin-order-number {
     display: flex;
    align-items: center;
    gap: .65rem;
    
}

.admin-order-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: #003366;
    background: #eaf2f8;
    border-radius: 9px;
    
}

.admin-order-number strong {
     color: #23313d;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
    
}

/* =====================================================
FECHA
===================================================== */

.admin-order-date {
     display: flex;
    align-items: center;
    gap: .35rem;
    color: #475467;
    font-size: .64rem;
    white-space: nowrap;
    
}

    .admin-order-date i {
         color: #8293a0;
        
    }

    .admin-order-date + small {
         display: block;
        margin-top: .15rem;
        color: #98a2b3;
        font-size: .56rem;
        
    }

/* =====================================================
PERSONAS
===================================================== */

.admin-order-person {
     display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 135px;
    
}

.admin-order-person-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: #60798c;
    background: #f0f4f6;
    border-radius: 50%;
    font-size: .7rem;
    
}

.admin-beneficiary-icon {
     color: #5e6d89;
    background: #f1f3f9;
    
}

.admin-order-person span {
     max-width: 160px;
    overflow: hidden;
    color: #475467;
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    
}

.admin-order-empty {
     color: #a0a9b2;
    font-size: .6rem;
    font-style: italic;
    
}

/* =====================================================
TOTAL
===================================================== */

.admin-order-total {
     color: #003366;
    font-size: .73rem;
    font-weight: 850;
    white-space: nowrap;
    
}

/* =====================================================
ESTADOS
===================================================== */

.admin-order-status {
     display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .62rem;
    border-radius: 50px;
    font-size: .58rem;
    font-weight: 750;
    white-space: nowrap;
    
}

.order-status-paid {
     color: #236343;
    background: #eaf7ef;
    
}

.order-status-processing {
     color: #8a6718;
    background: #fff6d9;
    
}

.order-status-cancelled {
     color: #a4434d;
    background: #fbeef0;
    
}

.order-status-expired {
     color: #8a5055;
    background: #f8eeee;
    
}

.order-status-refunded {
     color: #35687d;
    background: #eaf5f9;
    
}

.order-status-default {
     color: #667085;
    background: #eef1f3;
    
}

/* =====================================================
ACCIONES
===================================================== */

.admin-orders-actions-header {
     width: 1%;
    text-align: right !important;
    
}

.admin-orders-actions {
     text-align: right;
    
}

.admin-order-action-form {
     display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    
}

.admin-order-status-select {
     width: 135px;
    min-height: 33px;
    color: #475467;
    border-color: #d9e2e8;
    border-radius: 8px;
    font-size: .59rem;
    
}

    .admin-order-status-select:focus {
         border-color: #003366;
        box-shadow: 0 0 0 .15rem rgba(0, 51, 102, .08);
        
    }

.btn-admin-order-apply {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 33px;
    padding: .42rem .65rem;
    color: #475467;
    background: white;
    border: 1px solid #cfd9df;
    border-radius: 8px;
    font-size: .59rem;
    font-weight: 750;
    transition: color .18s ease, background .18s ease, transform .18s ease;
    
}

    .btn-admin-order-apply:hover {
         color: white;
        background: #003366;
        border-color: #003366;
        transform: translateY(-1px);
        
    }

/* =====================================================
ESTADO VACÍO
===================================================== */

.admin-orders-empty {
     max-width: 580px;
    margin: 3rem auto;
    padding: 3.5rem 2rem;
    text-align: center;
    background: white;
    border: 1px dashed #cfdbe3;
    border-radius: 18px;
    
}

.admin-orders-empty-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    margin: 0 auto 1.3rem;
    color: #003366;
    background: #eaf2f8;
    border-radius: 50%;
    font-size: 2rem;
    
}

.admin-orders-empty h2 {
     margin: 0 0 .7rem;
    color: #17212b;
    font-size: 1.3rem;
    font-weight: 800;
    
}

.admin-orders-empty p {
     margin: 0;
    color: #667085;
    font-size: .78rem;
    
}

/* =====================================================
ADMINISTRACIÓN - CATEGORÍAS
===================================================== */

/* =====================================================
PÁGINA
===================================================== */

.admin-categories-page {
     padding-bottom: 3rem;
    
}

/* =====================================================
ENCABEZADO
===================================================== */

.admin-categories-header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
    padding: 2.2rem 2.5rem;
    color: white;
    background: linear-gradient( 125deg, #003366, #07517d );
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0, 51, 102, .14);
    
}

.admin-categories-header-content {
     max-width: 680px;
    
}

.admin-categories-eyebrow {
     display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    padding: .38rem .7rem;
    background: rgba(255, 255, 255, .12);
    border-radius: 50px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .1em;
    
}

.admin-categories-header h1 {
     margin: 0 0 .5rem;
    font-size: 2.1rem;
    font-weight: 850;
    letter-spacing: -.04em;
    
}

.admin-categories-header p {
     margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .82rem;
    line-height: 1.65;
    
}

/* =====================================================
ACCIONES DEL ENCABEZADO
===================================================== */

.admin-categories-header-actions {
     display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    
}

/* CONTADOR */

.admin-categories-counter {
     display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    
}

    .admin-categories-counter > i {
         font-size: 1.25rem;
        
    }

    .admin-categories-counter div {
         display: flex;
        flex-direction: column;
        
    }

    .admin-categories-counter strong {
         font-size: 1.05rem;
        font-weight: 850;
        
    }

    .admin-categories-counter span {
         color: rgba(255, 255, 255, .7);
        font-size: .57rem;
        
    }

/* BOTÓN */

.btn-admin-new-category {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .7rem 1rem;
    color: #003366;
    background: white;
    border: 1px solid white;
    border-radius: 10px;
    font-size: .68rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    transition: transform .18s ease, box-shadow .18s ease;
    
}

    .btn-admin-new-category:hover {
         color: #003366;
        background: #f5f9fb;
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, .17);
        
    }

    .btn-admin-new-category i {
         font-size: .85rem;
        
    }

/* =====================================================
INFORMACIÓN
===================================================== */

.admin-categories-info {
     display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: 1.2rem;
    padding: 1rem 1.2rem;
    color: #526573;
    background: #f2f8fb;
    border: 1px solid #d7e8f0;
    border-radius: 13px;
    
}

.admin-categories-info-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    color: #003366;
    background: #e0eff6;
    border-radius: 9px;
    
}

.admin-categories-info strong {
     display: block;
    margin-bottom: .25rem;
    color: #29475b;
    font-size: .7rem;
    
}

.admin-categories-info p {
     max-width: 900px;
    margin: 0;
    color: #71808b;
    font-size: .62rem;
    line-height: 1.6;
    
}

/* =====================================================
CONTENIDO
===================================================== */

.admin-categories-content {
     overflow: hidden;
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 51, 102, .05);
    
}

.admin-categories-content-header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid #e9eef1;
    
}

    .admin-categories-content-header h2 {
         margin: 0 0 .25rem;
        color: #23313d;
        font-size: .92rem;
        font-weight: 800;
        
    }

    .admin-categories-content-header p {
         margin: 0;
        color: #7b8790;
        font-size: .62rem;
        
    }

/* ESTADO */

.admin-categories-status {
     display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    padding: .4rem .65rem;
    color: #236343;
    background: #edf8f2;
    border-radius: 50px;
    font-size: .58rem;
    font-weight: 750;
    
}

/* =====================================================
CONTENEDOR DE LA TABLA AJAX
===================================================== */

.admin-categories-table-container {
     min-height: 100px;
    
}

/* =====================================================
ADMINISTRACIÓN - FORMULARIO DE CATEGORÍA
===================================================== */

/* =====================================================
CONTENEDOR
===================================================== */

.category-form {
     width: 100%;
    
}

/* =====================================================
ENCABEZADO
===================================================== */

.category-form-header {
     display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #e8edf0;
    
}

.category-form-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    color: #003366;
    background: #eaf2f8;
    border-radius: 12px;
    font-size: 1.05rem;
    
}

.category-form-header h5 {
     margin: 0 0 .25rem;
    color: #22313d;
    font-size: .95rem;
    font-weight: 800;
    
}

.category-form-header p {
     margin: 0;
    color: #7b8790;
    font-size: .65rem;
    line-height: 1.5;
    
}

/* =====================================================
FORMULARIO
===================================================== */

.category-form-body {
     width: 100%;
    
}

/* =====================================================
LABELS
===================================================== */

.category-form-label {
     display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: .5rem;
    color: #344054;
    font-size: .68rem;
    font-weight: 750;
    
}

    .category-form-label small {
         padding: .18rem .42rem;
        color: #9b6517;
        background: #fff6df;
        border-radius: 50px;
        font-size: .49rem;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: .04em;
        
    }

    .category-form-label
    .category-form-optional {
         color: #7c8790;
        background: #f0f3f5;
        
    }

/* =====================================================
INPUT CON ÍCONO
===================================================== */

.category-form-input {
     position: relative;
    
}

    .category-form-input > i {
         position: absolute;
        top: 50%;
        left: .85rem;
        z-index: 3;
        color: #82919c;
        font-size: .8rem;
        transform: translateY(-50%);
        pointer-events: none;
        
    }

    .category-form-input
    .form-control {
         min-height: 44px;
        padding-left: 2.55rem;
        
    }

/* =====================================================
CONTROLES
===================================================== */

.category-form
.form-control {
     color: #344054;
    background: #fff;
    border: 1px solid #d8e1e6;
    border-radius: 9px;
    font-size: .7rem;
    transition: border-color .18s ease, box-shadow .18s ease;
    
}

    .category-form
    .form-control::placeholder {
         color: #a5afb7;
        
    }

    .category-form
    .form-control:hover {
         border-color: #b9c8d1;
        
    }

    .category-form
    .form-control:focus {
         color: #344054;
        border-color: #003366;
        box-shadow: 0 0 0 .17rem rgba(0, 51, 102, .08);
        
    }

.category-form-textarea {
     min-height: 105px;
    padding: .8rem;
    resize: vertical;
    line-height: 1.55;
    
}

/* =====================================================
TEXTO DE AYUDA
===================================================== */

.category-form-help {
     margin-top: .4rem;
    color: #89949d;
    font-size: .56rem;
    line-height: 1.45;
    
}

/* =====================================================
ACCIONES
===================================================== */

.category-form-actions {
     display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid #e8edf0;
    
}

.btn-category-cancel,
.btn-category-save {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 40px;
    padding: .55rem .9rem;
    border-radius: 8px;
    font-size: .64rem;
    font-weight: 750;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
    
}

/* CANCELAR */

.btn-category-cancel {
     color: #667085;
    background: white;
    border: 1px solid #d5dde2;
    
}

    .btn-category-cancel:hover {
         color: #344054;
        background: #f6f8f9;
        border-color: #becbd2;
        
    }

/* GUARDAR */

.btn-category-save {
     color: white;
    background: #003366;
    border: 1px solid #003366;
    box-shadow: 0 5px 13px rgba(0, 51, 102, .14);
    
}

    .btn-category-save:hover {
         color: white;
        background: #00284f;
        border-color: #00284f;
        transform: translateY(-1px);
        
    }

/* =====================================================
MIS PEDIDOS
===================================================== */

/* =====================================================
PÁGINA
===================================================== */

.my-orders-page {
     padding-bottom: 3rem;
    
}

/* =====================================================
ENCABEZADO
===================================================== */

.my-orders-header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.3rem;
    padding: 2.2rem 2.5rem;
    color: white;
    background: linear-gradient( 125deg, #003366, #07517d );
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0, 51, 102, .14);
    
}

.my-orders-header-content {
     max-width: 650px;
    
}

.my-orders-eyebrow {
     display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    padding: .38rem .7rem;
    background: rgba(255, 255, 255, .12);
    border-radius: 50px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .1em;
    
}

.my-orders-header h1 {
     margin: 0 0 .5rem;
    font-size: 2.1rem;
    font-weight: 850;
    letter-spacing: -.04em;
    
}

.my-orders-header p {
     margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .82rem;
    line-height: 1.65;
    
}

/* =====================================================
RESUMEN
===================================================== */

.my-orders-summary {
     display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    
}

.my-orders-summary-item {
     display: flex;
    align-items: center;
    gap: .65rem;
    
}

    .my-orders-summary-item > i {
         font-size: 1.25rem;
        
    }

    .my-orders-summary-item div {
         display: flex;
        flex-direction: column;
        
    }

    .my-orders-summary-item strong {
         font-size: 1rem;
        font-weight: 850;
        
    }

    .my-orders-summary-item span {
         color: rgba(255, 255, 255, .7);
        font-size: .55rem;
        
    }

.my-orders-summary-divider {
     width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, .2);
    
}

/* =====================================================
INFORMACIÓN
===================================================== */

.my-orders-info {
     display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: 1.2rem;
    padding: 1rem 1.2rem;
    background: #f2f8fb;
    border: 1px solid #d7e8f0;
    border-radius: 13px;
    
}

.my-orders-info-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    color: #003366;
    background: #e0eff6;
    border-radius: 9px;
    
}

.my-orders-info strong {
     display: block;
    margin-bottom: .2rem;
    color: #29475b;
    font-size: .7rem;
    
}

.my-orders-info p {
     margin: 0;
    color: #71808b;
    font-size: .61rem;
    line-height: 1.55;
    
}

/* =====================================================
LISTA
===================================================== */

.my-orders-list {
     display: flex;
    flex-direction: column;
    gap: 1rem;
    
}

/* =====================================================
TARJETA
===================================================== */

.my-order-card {
     overflow: hidden;
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 16px;
    box-shadow: 0 7px 22px rgba(0, 51, 102, .045);
    transition: transform .2s ease, box-shadow .2s ease;
    
}

    .my-order-card:hover {
         transform: translateY(-2px);
        box-shadow: 0 13px 30px rgba(0, 51, 102, .09);
        
    }

/* =====================================================
CABECERA
===================================================== */

.my-order-card-header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    background: #fbfcfd;
    border-bottom: 1px solid #e8edf0;
    
}

.my-order-number {
     display: flex;
    align-items: center;
    gap: .7rem;
    
}

.my-order-number-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    color: #003366;
    background: #eaf2f8;
    border-radius: 10px;
    
}

.my-order-number span {
     display: block;
    margin-bottom: .15rem;
    color: #8b969e;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .07em;
    
}

.my-order-number h2 {
     margin: 0;
    color: #263744;
    font-size: .8rem;
    font-weight: 800;
    
}

/* DERECHA */

.my-order-header-right {
     display: flex;
    align-items: center;
    gap: .8rem;
    
}

.my-order-date {
     color: #7d8991;
    font-size: .57rem;
    
}

    .my-order-date i {
         margin-right: .25rem;
        
    }

/* =====================================================
ESTADOS
===================================================== */

.my-order-status {
     display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .65rem;
    border-radius: 50px;
    font-size: .56rem;
    font-weight: 750;
    white-space: nowrap;
    
}

.order-status-paid {
     color: #236343;
    background: #eaf8f0;
    
}

.order-status-processing {
     color: #8b6415;
    background: #fff6df;
    
}

.order-status-pending {
     color: #75601a;
    background: #faf5dc;
    
}

.order-status-cancelled {
     color: #9a3030;
    background: #fff0f0;
    
}

.order-status-refunded {
     color: #26627a;
    background: #eaf7fb;
    
}

.order-status-default {
     color: #65727b;
    background: #f0f3f5;
    
}

/* =====================================================
CUERPO
===================================================== */

.my-order-card-body {
     padding: 1.25rem 1.3rem;
    
}

/* BENEFICIARIO */

.my-order-beneficiary {
     display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    padding: .75rem;
    background: #f7fafb;
    border: 1px solid #e8eef1;
    border-radius: 10px;
    
}

.my-order-beneficiary-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #35627d;
    background: #e5f0f5;
    border-radius: 8px;
    
}

.my-order-beneficiary span {
     display: block;
    margin-bottom: .1rem;
    color: #909aa1;
    font-size: .46rem;
    font-weight: 800;
    letter-spacing: .06em;
    
}

.my-order-beneficiary strong {
     color: #40515d;
    font-size: .65rem;
    
}

/* =====================================================
ARTÍCULOS
===================================================== */

.my-order-items-title {
     display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .65rem;
    color: #4b5b66;
    font-size: .64rem;
    font-weight: 750;
    
}

    .my-order-items-title i {
         color: #003366;
        
    }

.my-order-items-list {
     overflow: hidden;
    border: 1px solid #e8edf0;
    border-radius: 10px;
    
}

.my-order-item {
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .8rem;
    border-bottom: 1px solid #edf1f3;
    
}

    .my-order-item:last-child {
         border-bottom: none;
        
    }

.my-order-item-main {
     display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    
}

.my-order-item-quantity {
     display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 25px;
    height: 25px;
    padding: 0 .3rem;
    color: #003366;
    background: #eaf2f8;
    border-radius: 7px;
    font-size: .57rem;
    font-weight: 800;
    
}

.my-order-item-name {
     overflow: hidden;
    color: #53626c;
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    
}

.my-order-item > strong {
     flex-shrink: 0;
    color: #344450;
    font-size: .64rem;
    
}

/* =====================================================
PIE
===================================================== */

.my-order-card-footer {
     display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .95rem 1.3rem;
    background: #f8fafb;
    border-top: 1px solid #e8edf0;
    
}

    .my-order-card-footer span {
         color: #6e7b84;
        font-size: .65rem;
        font-weight: 650;
        
    }

    .my-order-card-footer strong {
         color: #003366;
        font-size: 1rem;
        font-weight: 850;
        
    }

/* =====================================================
ESTADO VACÍO
===================================================== */

.my-orders-empty {
     display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 390px;
    padding: 3rem 1.5rem;
    text-align: center;
    background: white;
    border: 1px solid #e2e9ed;
    border-radius: 18px;
    
}

.my-orders-empty-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 1.2rem;
    color: #003366;
    background: #eaf2f8;
    border-radius: 50%;
    font-size: 1.8rem;
    
}

.my-orders-empty h2 {
     margin: 0 0 .6rem;
    color: #2c3b46;
    font-size: 1.15rem;
    font-weight: 800;
    
}

.my-orders-empty p {
     max-width: 440px;
    margin: 0 0 1.4rem;
    color: #7c8790;
    font-size: .7rem;
    line-height: 1.65;
    
}

.btn-my-orders-catalog {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 43px;
    padding: .65rem 1rem;
    color: white;
    background: #003366;
    border: 1px solid #003366;
    border-radius: 9px;
    font-size: .65rem;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 6px 15px rgba(0, 51, 102, .14);
    
}

    .btn-my-orders-catalog:hover {
         color: white;
        background: #00284f;
        border-color: #00284f;
        
    }

/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    
    .my-orders-header {
        align-items: flex-start;
        flex-direction: column;
    }

    
}

@media (max-width: 767.98px) {

    
    .my-order-card-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .my-order-header-right {
        width: 100%;
        justify-content: space-between;
    }

    
}

@media (max-width: 575.98px) {

    
    .my-orders-header {
        padding: 1.5rem;
        border-radius: 15px;
    }


    .my-orders-header h1 {
        font-size: 1.75rem;
    }


    .my-orders-summary {
        width: 100%;
        justify-content: center;
    }


    .my-order-header-right {
        align-items: flex-start;
        flex-direction: column;
    }


    .my-order-item {
        align-items: flex-start;
    }


    .my-order-item-name {
        white-space: normal;
    }

    
}

/* =====================================================
LOGIN
===================================================== */

/* =====================================================
CONTENEDOR GENERAL
===================================================== */

.login-page {
     display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc( 100vh - 190px );
    padding: 2rem 0;
    
}

.login-container {
     display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 980px;
    overflow: hidden;
    background: white;
    border: 1px solid #e0e8ed;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 51, 102, .11);
    
}

/* =====================================================
PANEL INSTITUCIONAL
===================================================== */

.login-brand-panel {
     position: relative;
    display: flex;
    align-items: center;
    min-height: 590px;
    padding: 3.2rem;
    overflow: hidden;
    color: white;
    background: linear-gradient( 145deg, #003366, #07527d );
    
}

.login-brand-content {
     position: relative;
    z-index: 2;
    
}

.login-brand-logo {
     display: flex;
    align-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: 1.8rem;
    padding: .8rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 15px;
    
}

    .login-brand-logo img {
         display: block;
        width: 100%;
        height: auto;
        
    }

.login-brand-eyebrow {
     display: inline-block;
    margin-bottom: .8rem;
    padding: .38rem .7rem;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .1);
    border-radius: 50px;
    font-size: .57rem;
    font-weight: 850;
    letter-spacing: .12em;
    
}

.login-brand-panel h1 {
     max-width: 390px;
    margin: 0 0 1rem;
    font-size: 2.25rem;
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -.045em;
    
}

.login-brand-panel > p,
.login-brand-content > p {
     max-width: 370px;
    margin: 0;
    color: rgba(255, 255, 255, .76);
    font-size: .77rem;
    line-height: 1.7;
    
}

/* =====================================================
BENEFICIOS
===================================================== */

.login-brand-features {
     display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-top: 2rem;
    
}

    .login-brand-features > div {
         display: flex;
        align-items: center;
        gap: .65rem;
        
    }

    .login-brand-features span {
         display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        color: white;
        background: rgba(255, 255, 255, .12);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 8px;
        font-size: .72rem;
        
    }

    .login-brand-features p {
         margin: 0;
        color: rgba(255, 255, 255, .8);
        font-size: .64rem;
        
    }

/* =====================================================
DECORACIÓN
===================================================== */

.login-brand-decoration {
     position: absolute;
    right: -120px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border: 55px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
    
}

/* =====================================================
PANEL DEL FORMULARIO
===================================================== */

.login-form-panel {
     display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    
}

.login-form-container {
     width: 100%;
    max-width: 355px;
    
}

/* =====================================================
CABECERA DEL FORMULARIO
===================================================== */

.login-form-header {
     margin-bottom: 1.8rem;
    text-align: center;
    
}

.login-form-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    color: #003366;
    background: #eaf2f8;
    border-radius: 14px;
    font-size: 1.2rem;
    
}

.login-form-header h2 {
     margin: 0 0 .4rem;
    color: #273744;
    font-size: 1.3rem;
    font-weight: 850;
    
}

.login-form-header p {
     margin: 0;
    color: #7d8991;
    font-size: .68rem;
    
}

/* =====================================================
ERRORES GENERALES
===================================================== */

.login-validation-summary {
     margin-bottom: 1rem;
    padding: .75rem .85rem;
    color: #8e3030;
    background: #fff2f2;
    border: 1px solid #f1d3d3;
    border-radius: 9px;
    font-size: .62rem;
    
}

    .login-validation-summary:empty {
         display: none;
        
    }

    .login-validation-summary ul {
         margin: 0;
        padding-left: 1rem;
        
    }

/* =====================================================
CAMPOS
===================================================== */

.login-field {
     margin-bottom: 1.1rem;
    
}

    .login-field > label {
         display: block;
        margin-bottom: .45rem;
        color: #3d4b55;
        font-size: .67rem;
        font-weight: 750;
        
    }

.login-input-wrapper {
     position: relative;
    
}

    .login-input-wrapper > i {
         position: absolute;
        top: 50%;
        left: .85rem;
        z-index: 3;
        color: #82909a;
        font-size: .8rem;
        transform: translateY(-50%);
        pointer-events: none;
        
    }

    .login-input-wrapper
    .form-control {
         min-height: 46px;
        padding-left: 2.5rem;
        color: #34434e;
        border: 1px solid #d7e0e5;
        border-radius: 9px;
        font-size: .68rem;
        
    }

        .login-input-wrapper
        .form-control::placeholder {
             color: #a6afb5;
            
        }

        .login-input-wrapper
        .form-control:focus {
             border-color: #003366;
            box-shadow: 0 0 0 .18rem rgba(0, 51, 102, .08);
            
        }

.login-field-error {
     display: block;
    margin-top: .35rem;
    color: #b03a3a;
    font-size: .57rem;
    
}

/* =====================================================
MOSTRAR CONTRASEÑA
===================================================== */

.login-password-toggle {
     position: absolute;
    top: 50%;
    right: .45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    color: #77848d;
    background: transparent;
    border: none;
    border-radius: 7px;
    transform: translateY(-50%);
    
}

    .login-password-toggle:hover {
         color: #003366;
        background: #edf3f6;
        
    }

/* =====================================================
BOTÓN
===================================================== */

.btn-login-submit {
     display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    min-height: 47px;
    margin-top: .4rem;
    padding: .65rem 1rem;
    color: white;
    background: #003366;
    border: 1px solid #003366;
    border-radius: 9px;
    font-size: .68rem;
    font-weight: 800;
    box-shadow: 0 7px 17px rgba(0, 51, 102, .15);
    transition: transform .18s ease, background .18s ease;
    
}

    .btn-login-submit:hover {
         color: white;
        background: #00284f;
        border-color: #00284f;
        transform: translateY(-1px);
        
    }

/* =====================================================
REGISTRO
===================================================== */

.login-register {
     margin-top: 1.4rem;
    padding-top: 1.3rem;
    color: #7b8790;
    border-top: 1px solid #e8edf0;
    font-size: .63rem;
    text-align: center;
    
}

    .login-register a {
         margin-left: .2rem;
        color: #003366;
        font-weight: 800;
        text-decoration: none;
        
    }

        .login-register a:hover {
             color: #07517d;
            text-decoration: underline;
            
        }

/* =====================================================
REGISTRO
===================================================== */

/* =====================================================
CONTENEDOR GENERAL
===================================================== */

.register-page {
     display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc( 100vh - 190px );
    padding: 2rem 0;
    
}

.register-container {
     display: grid;
    grid-template-columns: 42% 58%;
    width: 100%;
    max-width: 1050px;
    overflow: hidden;
    background: white;
    border: 1px solid #e0e8ed;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 51, 102, .11);
    
}

/* =====================================================
PANEL INSTITUCIONAL
===================================================== */

.register-brand-panel {
     position: relative;
    display: flex;
    align-items: center;
    min-height: 680px;
    padding: 3.2rem;
    overflow: hidden;
    color: white;
    background: linear-gradient( 145deg, #003366, #07527d );
    
}

.register-brand-content {
     position: relative;
    z-index: 2;
    
}

.register-brand-logo {
     display: flex;
    align-items: center;
    width: 66px;
    height: 66px;
    margin-bottom: 1.6rem;
    padding: .8rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 15px;
    
}

    .register-brand-logo img {
         display: block;
        width: 100%;
        height: auto;
        
    }

.register-brand-eyebrow {
     display: inline-block;
    margin-bottom: .8rem;
    padding: .38rem .7rem;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .1);
    border-radius: 50px;
    font-size: .57rem;
    font-weight: 850;
    letter-spacing: .12em;
    
}

.register-brand-panel h1 {
     max-width: 360px;
    margin: 0 0 1rem;
    font-size: 2rem;
    font-weight: 850;
    line-height: 1.13;
    letter-spacing: -.045em;
    
}

.register-brand-content > p {
     max-width: 340px;
    margin: 0;
    color: rgba(255, 255, 255, .76);
    font-size: .73rem;
    line-height: 1.7;
    
}

/* =====================================================
PASOS
===================================================== */

.register-steps {
     display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.2rem;
    
}

.register-step {
     display: flex;
    align-items: flex-start;
    gap: .75rem;
    
}

    .register-step > span {
         display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        color: white;
        background: rgba(255, 255, 255, .13);
        border: 1px solid rgba(255, 255, 255, .13);
        border-radius: 50%;
        font-size: .58rem;
        font-weight: 850;
        
    }

    .register-step strong {
         display: block;
        margin-bottom: .12rem;
        color: rgba(255, 255, 255, .93);
        font-size: .67rem;
        
    }

    .register-step p {
         margin: 0;
        color: rgba(255, 255, 255, .65);
        font-size: .58rem;
        
    }

/* =====================================================
DECORACIÓN
===================================================== */

.register-brand-decoration {
     position: absolute;
    right: -130px;
    bottom: -130px;
    width: 330px;
    height: 330px;
    border: 55px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
    
}

/* =====================================================
PANEL FORMULARIO
===================================================== */

.register-form-panel {
     display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 3.5rem;
    
}

.register-form-container {
     width: 100%;
    max-width: 530px;
    
}

/* =====================================================
CABECERA
===================================================== */

.register-form-header {
     margin-bottom: 1.4rem;
    text-align: center;
    
}

.register-form-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 auto .85rem;
    color: #003366;
    background: #eaf2f8;
    border-radius: 14px;
    font-size: 1.15rem;
    
}

.register-form-header h2 {
     margin: 0 0 .35rem;
    color: #273744;
    font-size: 1.3rem;
    font-weight: 850;
    
}

.register-form-header p {
     margin: 0;
    color: #7d8991;
    font-size: .66rem;
    
}

/* =====================================================
ERRORES
===================================================== */

.register-validation-summary {
     margin-bottom: 1rem;
    padding: .7rem .85rem;
    color: #8e3030;
    background: #fff2f2;
    border: 1px solid #f1d3d3;
    border-radius: 9px;
    font-size: .61rem;
    
}

    .register-validation-summary:empty {
         display: none;
        
    }

    .register-validation-summary ul {
         margin: 0;
        padding-left: 1rem;
        
    }

/* =====================================================
CAMPOS
===================================================== */

.register-field {
     margin-bottom: .9rem;
    
}

    .register-field > label {
         display: block;
        margin-bottom: .4rem;
        color: #3d4b55;
        font-size: .65rem;
        font-weight: 750;
        
    }

.register-input-wrapper {
     position: relative;
    
}

    .register-input-wrapper > i {
         position: absolute;
        top: 50%;
        left: .8rem;
        z-index: 3;
        color: #82909a;
        font-size: .75rem;
        transform: translateY(-50%);
        pointer-events: none;
        
    }

    .register-input-wrapper
    .form-control {
         min-height: 44px;
        padding-left: 2.35rem;
        color: #34434e;
        border: 1px solid #d7e0e5;
        border-radius: 9px;
        font-size: .66rem;
        
    }

        .register-input-wrapper
        .form-control::placeholder {
             color: #a6afb5;
            
        }

        .register-input-wrapper
        .form-control:focus {
             border-color: #003366;
            box-shadow: 0 0 0 .18rem rgba(0, 51, 102, .08);
            
        }

.register-field-error {
     display: block;
    margin-top: .3rem;
    color: #b03a3a;
    font-size: .56rem;
    
}

/* =====================================================
TEXTO DE AYUDA
===================================================== */

.register-help-text {
     display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .4rem;
    color: #7c8992;
    font-size: .54rem;
    line-height: 1.45;
    
}

    .register-help-text i {
         margin-top: .05rem;
        color: #4e7895;
        
    }

/* =====================================================
MOSTRAR CONTRASEÑA
===================================================== */

.register-password-toggle {
     position: absolute;
    top: 50%;
    right: .35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #77848d;
    background: transparent;
    border: none;
    border-radius: 7px;
    transform: translateY(-50%);
    
}

    .register-password-toggle:hover {
         color: #003366;
        background: #edf3f6;
        
    }

/* =====================================================
BOTÓN
===================================================== */

.btn-register-submit {
     display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    min-height: 46px;
    margin-top: .2rem;
    padding: .65rem 1rem;
    color: white;
    background: #003366;
    border: 1px solid #003366;
    border-radius: 9px;
    font-size: .67rem;
    font-weight: 800;
    box-shadow: 0 7px 17px rgba(0, 51, 102, .15);
    transition: transform .18s ease, background .18s ease;
    
}

    .btn-register-submit:hover {
         color: white;
        background: #00284f;
        border-color: #00284f;
        transform: translateY(-1px);
        
    }

/* =====================================================
LOGIN
===================================================== */

.register-login {
     margin-top: 1.2rem;
    padding-top: 1.1rem;
    color: #7b8790;
    border-top: 1px solid #e8edf0;
    font-size: .62rem;
    text-align: center;
    
}

    .register-login a {
         margin-left: .2rem;
        color: #003366;
        font-weight: 800;
        text-decoration: none;
        
    }

        .register-login a:hover {
             color: #07517d;
            text-decoration: underline;
            
        }

/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    
    .register-container {
        grid-template-columns: 38% 62%;
    }


    .register-brand-panel {
        padding: 2.2rem;
    }


    .register-form-panel {
        padding: 2.2rem;
    }

    
}

@media (max-width: 767.98px) {

    
    .register-container {
        display: block;
        max-width: 570px;
    }


    .register-brand-panel {
        display: none;
    }


    .register-form-panel {
        padding: 2rem 1.5rem;
    }

    
}

@media (max-width: 575.98px) {

    
    .register-page {
        align-items: flex-start;
        min-height: auto;
        padding: 1rem 0;
    }


    .register-container {
        border-radius: 15px;
    }


    .register-form-panel {
        padding: 1.8rem 1.1rem;
    }


    .register-form-header {
        margin-bottom: 1.2rem;
    }

    
}

/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 767.98px) {

    
    .login-container {
        display: block;
        max-width: 480px;
    }


    .login-brand-panel {
        display: none;
    }


    .login-form-panel {
        min-height: 560px;
        padding: 2rem 1.5rem;
    }

    
}

@media (max-width: 575.98px) {

    
    .login-page {
        align-items: flex-start;
        min-height: auto;
        padding: 1rem 0;
    }


    .login-container {
        border-radius: 15px;
    }


    .login-form-panel {
        padding: 2rem 1.2rem;
    }

    
}


/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 575.98px) {

    
    .category-form-header {
        align-items: flex-start;
    }


    .category-form-actions {
        flex-direction: column-reverse;
    }


    .btn-category-cancel,
    .btn-category-save {
        width: 100%;
    }

    
}


/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    
    .admin-categories-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .admin-categories-header-actions {
        width: 100%;
    }

    
}

@media (max-width: 575.98px) {

    
    .admin-categories-header {
        padding: 1.5rem;
        border-radius: 15px;
    }


    .admin-categories-header h1 {
        font-size: 1.75rem;
    }


    .admin-categories-header-actions {
        align-items: stretch;
        flex-direction: column;
    }


    .admin-categories-counter {
        justify-content: center;
    }


    .btn-admin-new-category {
        width: 100%;
    }


    .admin-categories-info {
        padding: .9rem;
    }


    .admin-categories-content-header {
        align-items: flex-start;
        flex-direction: column;
    }

    
}


/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 767.98px) {

    
    .admin-orders-header {
        align-items: flex-start;
        flex-direction: column;
    }

    
}

@media (max-width: 575.98px) {

    
    .admin-orders-header {
        padding: 1.5rem;
        border-radius: 15px;
    }

    .admin-orders-header h1 {
        font-size: 1.75rem;
    }

    .admin-orders-counter {
        width: 100%;
    }

    .admin-orders-notice {
        padding: .9rem;
    }

    .admin-orders-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: .6rem;
    }

    
}


/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    
    .item-form-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .item-image-card {
        margin-top: 0;
    }

    
}

@media (max-width: 575.98px) {

    
    .item-form-header {
        padding: 1.5rem;
        border-radius: 15px;
    }

    .item-form-header h1 {
        font-size: 1.75rem;
    }

    .btn-item-header-back {
        width: 100%;
        justify-content: center;
    }

    .item-form-card-body {
        padding: 1.1rem;
    }

    .item-form-actions {
        flex-direction: column-reverse;
    }

    .btn-item-cancel,
    .btn-item-save {
        width: 100%;
    }

    
}
@media (max-width: 767.98px) {

    
    .admin-table {
        min-width: 680px;
    }

    
}

@media (max-width: 575.98px) {

    
    .category-actions {
        gap: .35rem;
    }

    .btn-category-edit,
    .btn-category-delete {
        width: 34px;
        padding: 0;
    }

        .btn-category-edit span,
        .btn-category-delete span {
            display: none;
        }
}

@media (max-width: 991.98px) {

    
    .checkout-payment-card {
        position: static;
    }

    
}

@media (max-width: 767.98px) {

    
    .checkout-header {
        padding: 1.8rem;
    }

    .checkout-total-header {
        display: none;
    }

    .checkout-progress {
        overflow-x: auto;
    }

    .checkout-step {
        min-width: 150px;
    }

    .checkout-progress-line {
        min-width: 30px;
        margin: 0 .5rem;
    }

    
}

@media (max-width: 575.98px) {

    
    .checkout-header {
        padding: 1.5rem;
        border-radius: 15px;
    }

    .checkout-header h1 {
        font-size: 1.8rem;
    }

    .checkout-card,
    .checkout-payment-card {
        padding: 1.1rem;
        border-radius: 14px;
    }

    .checkout-item {
        grid-template-columns: 38px 1fr auto;
        gap: .6rem;
    }

    .checkout-item-icon {
        width: 38px;
        height: 38px;
    }

    
}

@media (max-width: 991.98px) {

    
    .order-summary {
        position: static;
    }

    
}

@media (max-width: 767.98px) {

    
    .cart-header {
        padding: 1.8rem;
    }

    .cart-items-summary {
        display: none;
    }

    .cart-item {
        grid-template-columns: 48px 1fr 35px;
        gap: .8rem;
    }

    .cart-item-icon {
        width: 48px;
        height: 48px;
    }

    .cart-item-quantity {
        grid-column: 2;
    }

    .cart-item-subtotal {
        grid-column: 2;
    }

    .cart-remove-form {
        grid-column: 3;
        grid-row: 1;
    }

    
}

@media (max-width: 575.98px) {

    
    .cart-header {
        padding: 1.5rem;
        border-radius: 15px;
    }

    .cart-header h1 {
        font-size: 1.8rem;
    }

    .cart-items-header {
        padding: 1rem;
    }

    .cart-item {
        padding: 1rem;
    }

    .cart-item-info h3 {
        white-space: normal;
    }

    .order-summary {
        padding: 1.2rem;
    }

    
}


@media (max-width: 991.98px) {


    .catalog-hero {
        padding: 2.7rem;
    }

    .catalog-hero-icon {
        width: 100px;
        height: 100px;
        font-size: 3rem;
    }
}

@media (max-width: 767.98px) {


    .catalog-hero {
        min-height: auto;
        padding: 2.2rem;
    }

    .catalog-hero-icon {
        display: none;
    }

    .catalog-search-form {
        grid-template-columns: 1fr;
    }

    .btn-catalog-search {
        width: 100%;
    }
}

@media (max-width: 575.98px) {


    .catalog-hero {
        margin-left: -.2rem;
        margin-right: -.2rem;
        padding: 1.8rem 1.4rem;
        border-radius: 16px;
    }

        .catalog-hero h1 {
            font-size: 2rem;
        }

        .catalog-hero p {
            font-size: .87rem;
        }

    .catalog-filters {
        padding: 1rem;
        border-radius: 13px;
    }

    .product-content {
        padding: 1.1rem;
    }
}