/*==============================
        HISTORY CARD
==============================*/

.history-card{

    background:var(--surface);

    border-radius:20px;

    padding:20px;

    margin-bottom:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);

    transition:.30s;

}

.history-card:hover{

    transform:translateY(-3px);

}

.history-card h5{

    margin-bottom:4px;

    font-weight:700;
    color:var(--text-strong);

}

.history-card h4{

    margin-top:10px;

    color:var(--primary);

}

.history-card small{

    color:var(--subtitle);

}

.history-card.success{

    border-left:6px solid var(--success);

}

.history-card.warning{

    border-left:6px solid var(--warning);

}

/*==============================
            PERFIL
==============================*/

.profile-card{

    background:linear-gradient(135deg,var(--primary-color),var(--primary-light));

    color:var(--surface);

    border-radius:24px;

    padding:30px 20px;

    text-align:center;

    margin-bottom:25px;

    box-shadow:0 12px 30px rgba(21,101,192,.22);

}

.profile-avatar{

    width:90px;

    height:90px;

    border-radius:50%;

    background:white;

    color:#1565c0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    margin:auto;

    margin-bottom:18px;

}

.profile-avatar.admin{

    color:#6f42c1;

}

.profile-card h3{

    margin-bottom:5px;

    font-weight:700;

}

.profile-card p{

    margin-bottom:12px;

    opacity:.95;

}

/*==============================
      RETROALIMENTACIÓN
==============================*/

.rating{

    font-size:32px;

    text-align:center;

    letter-spacing:8px;

    color:#FFC107;

    margin-top:10px;

}

textarea{

    resize:none;

    border-radius:15px !important;

}

.info-card textarea{

    margin-top:15px;

}

.info-card select{

    margin-top:12px;

}

/*==============================
        ESTRELLAS
==============================*/

.rating-stars{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:18px;

}

.rating-stars i{

    font-size:34px;

    color:#d5d5d5;

    cursor:pointer;

    transition:.25s;

}

.rating-stars i:hover{

    transform:scale(1.15);

}

.rating-stars i.active{

    color:#FFC107;

}

.rating-text{

    text-align:center;

    margin-top:12px;

    color:#666;

}

/*==============================
        TICKET DE VENTA
==============================*/

.ticket-family{

    background:#f7f9fc;

    border-radius:15px;

    padding:15px;

    margin-bottom:15px;

}

.ticket-item{

    display:flex;

    justify-content:space-between;

    margin:10px 0;

}

.ticket-total{

    margin-top:20px;

    padding-top:15px;

    border-top:2px dashed #1565c0;

    font-size:24px;

    color:#1565c0;

}

/*==============================
      FAMILIA DE PRODUCTOS
==============================*/

.family-chip{

    display:inline-block;

    background:#1565c0;

    color:white;

    padding:10px 18px;

    border-radius:25px;

    margin:8px;

    cursor:pointer;

    transition:.30s;

}

.family-chip:hover{

    background:#0d47a1;

}

/*==============================
      RESUMEN DE RUTA
==============================*/

.summary-card{

    text-align:center;

}

.summary-card h3{

    color:#1565c0;

    font-size:28px;

    font-weight:700;

    margin-bottom:4px;

}

.summary-card small{

    color:#6c757d;

}

.selection-card .alert{

    border-radius:12px;

    border:none;

    font-size:14px;

}

.selection-card{

    background:white;

    border-radius:22px;

    padding:22px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    margin-top:10px;

}

.selection-card h5,

.selection-card h6{

    color:#1565c0;

    font-weight:700;

    margin-bottom:18px;

}

.selection-card input,

.selection-card select,

.selection-card textarea{

    border-radius:14px;

    border:1px solid #d8d8d8;

    padding:12px;

}

.selection-card button{

    width:100%;

    border-radius:14px;

    margin-top:12px;

    padding:12px;

    font-weight:600;

}

/*==================================================
                PRODUCTOS CHATBOT
==================================================*/

.product-chat-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    margin-bottom:18px;

    box-shadow:0 12px 28px rgba(0,0,0,.08);

    transition:.30s;

}

.product-chat-card:hover{

    transform:translateY(-4px);

}

.product-image{

    width:100%;

    height:170px;

    background:#f5f7fb;

    display:flex;

    justify-content:center;

    align-items:center;

}

.product-image img{

    max-width:120px;

    max-height:130px;

    object-fit:contain;

}

.product-info{

    padding:20px;

}

.product-family{

    color:#1565c0;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:6px;

}

.product-name{

    font-size:18px;

    font-weight:700;

    color:#222;

    margin-bottom:10px;

}

.product-price{

    font-size:28px;

    font-weight:700;

    color:#1565c0;

}

.product-stock{

    color:#7c7c7c;

    margin-top:8px;

}

/*==================================================
                CANTIDAD
==================================================*/

.quantity-box{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin:22px 0;

}

.qty-btn{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#1565c0;

    color:white;

    font-size:22px;

    transition:.25s;

}

.qty-btn:hover{

    transform:scale(1.1);

}

.qty-number{

    font-size:28px;

    font-weight:700;

    min-width:45px;

    text-align:center;

}

/*==============================
        BOTÓN DE AGREGAR
==============================*/

.add-cart{

    width:100%;

    border:none;

    border-radius:14px;

    padding:14px;

    background:#1565c0;

    color:white;

    font-weight:700;

    transition:.30s;

}

.add-cart:hover{

    background:#0d47a1;

}

/*==============================
        ESTADÍSTICAS
==============================*/

.stat-box{

    background:linear-gradient(

        180deg,

        white,

        #F8FBFF);

    border:1px solid #d7e8ff;

    border-radius:15px;

    padding:18px;

    text-align:center;

    transition:.3s;

}

.stat-box:hover{

    transform:translateY(-3px);

}

.stat-box h3{

    color:#1565c0;

    margin-bottom:5px;

    font-weight:700;

}

.stat-box small{

    color:#6c757d;

}

/*==============================
        CLIENTE
==============================*/

.home-header{

    margin-bottom:30px;

}

.home-header h2{

    font-size:32px;

    font-weight:700;

    color:#1F2937;

}

.home-header small{

    color:#7B8794;

    font-size:15px;

}

.promo-card{

    background:linear-gradient(135deg,var(--primary),var(--primary-light));

    color:white;

    border-radius:28px;

    padding:28px;

    box-shadow:0 20px 35px rgba(47,128,237,.30);

    position:relative;

    overflow:hidden;

}

.promo-card::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    right:-45px;

    top:-45px;

}

.option-card{

    background:var(--surface);

    backdrop-filter:blur(20px);

    border:1px solid var(--border);

    border-radius:24px;

    padding:24px;

    margin-bottom:22px;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.option-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 30px 55px rgba(30,60,114,.18);

}

.option-card a{

    text-decoration:none;

    color:#222;

}

.option-card i{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    font-size:22px;

    color:white;

    background:linear-gradient(
        135deg,
        #2F80ED,
        #56CCF2);

    margin-bottom:18px;

}

.product-card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    padding:20px;

    margin-bottom:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.product-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:7px;

    height:100%;

    background:linear-gradient(
        #2F80ED,
        #56CCF2);

}

.product-card h4{

    color:#1565c0;

    margin:12px 0;

}

.category-title{

    font-size:18px;

    font-weight:600;

    margin:30px 0 15px;

    color:#1565c0;

}

.timeline-card{

    gap:20px;

}

.timeline-card strong{

    font-size:17px;

}

.timeline-card small{

    color:#7A8795;

}

.client-card{

    gap:20px;

}

.client-card img{

    width:60px;

    height:60px;

    border-radius:18px;

}

.seller-card{

    background:white;

    border-radius:18px;

    padding:20px;

    margin-top:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}

.visit-date{

    text-align:right;

}

.last-order-card{

    background:var(--surface);

    border-radius:18px;

    padding:20px;

    margin-top:25px;

    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);

}

.btn-primary{

    background:linear-gradient(
        135deg,
        #2F80ED,
        #56CCF2);

    border:none;

    border-radius:15px;

    padding:12px;

    font-weight:600;

    box-shadow:0 10px 25px rgba(47,128,237,.25);

}

.btn-primary:hover{

    transform:translateY(-2px);

}

.glass-card{

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    border-radius:28px;

    border:1px solid rgba(255,255,255,.45);

    box-shadow:0 25px 50px rgba(0,0,0,.08);

}

.gradient-card{

    background:
    linear-gradient(135deg,#4F8EF7,#74B9FF);

    color:white;

}

.icon-circle{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#5DA9FF,#2D7DFF);

    color:white;

    font-size:24px;

}

/*==============================
        INFO CARD
==============================*/

.info-card{

    background:var(--surface);

    border-radius:20px;

    padding:22px;

    margin-top:20px;

    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);

}

.info-card h5{

    color:#1565c0;

    font-weight:700;

    margin-bottom:10px;

}

.info-card p{

    margin-bottom:5px;

    color:var(--text);

}

.info-card small{

    color:var(--subtitle);

}

/*==============================
        SECTION TITLE
==============================*/

.section-title{

    margin:30px 0 18px;

    font-size:20px;

    font-weight:700;

    color:var(--text-strong);

}

.dashboard-grid{

    display:grid;
    gap:16px;
    grid-template-columns:1fr;
    margin-top:20px;

}

.dashboard-card{

    background:var(--surface);
    border:1px solid var(--border);
    border-radius:22px;
    padding:20px;
    box-shadow:var(--shadow-sm);

}

.dashboard-card h6{

    color:var(--text-strong);
    font-weight:700;
    margin-bottom:8px;

}

.dashboard-card p,
.dashboard-card li{

    color:var(--text);
    font-size:14px;

}

.history-grid,
.product-grid,
.profile-layout,
.cart-layout{

    display:grid;
    gap:16px;

}

@media(min-width:1024px){

    .dashboard-grid{
        grid-template-columns:1.1fr .9fr;
    }

    .history-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .profile-layout{
        grid-template-columns:1.05fr .95fr;
    }

    .cart-layout{
        grid-template-columns:1.2fr .8fr;
        align-items:start;
    }

}

/*==============================
        ESTILO GLOBAL TARJETAS
==============================*/

.option-card,
.product-card,
.timeline-card,
.client-card,
.seller-card,
.last-order-card,
.selection-card,
.summary-card,
.stat-box{

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(14px);

    border-radius:24px;

    border:1px solid rgba(255,255,255,.6);

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.option-card:hover,
.product-card:hover,
.timeline-card:hover,
.client-card:hover,
.seller-card:hover,
.last-order-card:hover,
.stat-box:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(47,128,237,.15);

}

/*====================================
      TARJETA DEL CHATBOT
====================================*/

.selection-card{

    background:var(--surface);

    border-radius:24px;

    padding:22px;

    box-shadow:var(--shadow-sm);

    border:1px solid var(--border);

    animation:fadeCard .35s;

}

@keyframes fadeCard{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.selection-card select{

    height:52px;

    border-radius:14px;

    border:1px solid #d8e2ef;

    font-size:15px;

    box-shadow:none;

    transition:.25s;

}

.selection-card select:focus{

    border-color:#1565c0;

    box-shadow:0 0 0 .2rem rgba(21,101,192,.15);

}

.selection-card label{

    font-weight:600;

    margin-bottom:8px;

    color:#374151;

}

.counter{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:10px;

}

.counter button{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#1565c0;

    color:white;

    font-size:18px;

    transition:.25s;

}

.counter button:hover{

    transform:scale(1.08);

}

.counter input{

    width:90px;

    text-align:center;

    border-radius:14px;

    font-size:22px;

    font-weight:700;

}

.selection-card .btn-success{

    height:50px;

    border-radius:14px;

    font-weight:700;

    font-size:16px;

    box-shadow:0 10px 20px rgba(25,135,84,.25);

}

.product-added{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 16px;

    background:#f7f9fc;

    border-radius:14px;

    margin-bottom:12px;

}

.total-box{

    background:#1565c0;

    color:white;

    border-radius:16px;

    padding:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

}

.total-box h4{

    margin:0;

}

.total-box h3{

    margin:0;

    font-weight:700;

}

.selection-card .btn-primary{

    height:52px;

    border-radius:14px;

    font-size:16px;

    font-weight:700;

    margin-top:18px;

}

.product-added{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#f8fbff;

    border:1px solid #d9e8ff;

    border-radius:14px;

    padding:14px;

    margin-bottom:12px;

    transition:.25s;

}

.product-added:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}