/* ============================================================
   iLeon:Zapp — CSS Personalizado
   Bootstrap 5.3 como base · Tema Light/Dark · Paleta Azul-Negro-Gris
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   TEMA LIGHT (por defecto)
   Variables CSS propias + overrides a Bootstrap 5.3
══════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme="light"] {

    /* Paleta de marca */
    --ec-blue:        #2563eb;
    --ec-blue-dark:   #1d4ed8;
    --ec-blue-light:  #3b82f6;
    --ec-navy:        #0f3460;
    --ec-black:       #0f172a;
    --ec-gray-900:    #1e293b;
    --ec-gray-700:    #334155;
    --ec-gray-500:    #64748b;
    --ec-gray-300:    #cbd5e1;
    --ec-gray-200:    #e2e8f0;
    --ec-gray-100:    #f1f5f9;
    --ec-white:       #ffffff;

    /* Sobreescribir Bootstrap primary */
    --bs-primary:            #2563eb;
    --bs-primary-rgb:        37, 99, 235;
    --bs-link-color:         #2563eb;
    --bs-link-hover-color:   #1d4ed8;
    --bs-body-bg:            #f1f5f9;
    --bs-body-color:         #0f172a;
    --bs-secondary-bg:       #e2e8f0;
    --bs-border-color:       #e2e8f0;

    /* Tokens del app */
    --ec-surface:         #ffffff;
    --ec-border:          #e2e8f0;
    --ec-text:            #0f172a;
    --ec-text-muted:      #64748b;
    --ec-primary:         #2563eb;
    --ec-primary-dark:    #1d4ed8;
    --ec-card-radius:     .75rem;
    --ec-transition:      .2s ease;
    --ec-shadow:          0 2px 12px rgba(0,0,0,.06);
    --ec-shadow-hover:    0 8px 28px rgba(37,99,235,.18);

    /* Navbar */
    --ec-navbar-bg:       #0f3460;
    --ec-navbar-border:   rgba(255,255,255,.08);

    /* Sidebar admin */
    --ec-sidebar-bg:      #0f172a;
    --ec-sidebar-surface: #1e293b;
    --ec-sidebar-text:    #cbd5e1;
    --ec-sidebar-border:  #334155;
    --ec-sidebar-hover:   rgba(37,99,235,.25);
    --ec-sidebar-accent:  #f0c040;

    /* Botón toggle tema */
    --ec-theme-btn-bg:    rgba(255,255,255,.12);
    --ec-theme-btn-hover: rgba(255,255,255,.22);
}


/* ══════════════════════════════════════════════════════════════
   TEMA DARK
   Bootstrap 5.3 gestiona cards, tables, forms, modals, dropdowns.
   Solo customizamos lo que Bootstrap no cubre o lo que queremos distinto.
══════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {

    /* Sobreescribir Bootstrap dark palette */
    --bs-primary:            #3b82f6;
    --bs-primary-rgb:        59, 130, 246;
    --bs-link-color:         #60a5fa;
    --bs-link-hover-color:   #93c5fd;
    --bs-body-bg:            #0f172a;
    --bs-body-color:         #f1f5f9;
    --bs-secondary-bg:       #1e293b;
    --bs-tertiary-bg:        #1e293b;
    --bs-border-color:       #334155;

    /* Tokens del app */
    --ec-surface:         #1e293b;
    --ec-border:          #334155;
    --ec-text:            #f1f5f9;
    --ec-text-muted:      #94a3b8;
    --ec-primary:         #3b82f6;
    --ec-primary-dark:    #2563eb;
    --ec-shadow:          0 2px 12px rgba(0,0,0,.35);
    --ec-shadow-hover:    0 8px 28px rgba(59,130,246,.28);

    /* Navbar (se oscurece aún más en dark) */
    --ec-navbar-bg:       #0d1117;
    --ec-navbar-border:   rgba(255,255,255,.05);

    /* Sidebar admin en dark */
    --ec-sidebar-bg:      #0d1117;
    --ec-sidebar-surface: #161b22;
    --ec-sidebar-text:    #8b949e;
    --ec-sidebar-border:  #21262d;
    --ec-sidebar-hover:   rgba(59,130,246,.2);

    /* Botón toggle tema */
    --ec-theme-btn-bg:    rgba(255,255,255,.08);
    --ec-theme-btn-hover: rgba(255,255,255,.15);
}


/* ══════════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════════ */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--bs-body-bg);
    color: var(--ec-text);
    transition: background-color .25s ease, color .25s ease;
}

a { transition: color var(--ec-transition); }


/* ══════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════ */
.ec-navbar {
    background: var(--ec-navbar-bg) !important;
    border-bottom: 1px solid var(--ec-navbar-border);
    padding-top:   .75rem;
    padding-bottom: .75rem;
    transition: background .25s ease;
}

.ec-navbar .navbar-brand {
    font-size: 1.4rem;
    letter-spacing: -.3px;
    font-weight: 700;
    color: #fff !important;
}

.ec-navbar .nav-link {
    color: rgba(255,255,255,.85) !important;
    transition: color .15s;
}
.ec-navbar .nav-link:hover,
.ec-navbar .nav-link.active {
    color: #fff !important;
}

.ec-navbar .dropdown-menu {
    border: 1px solid var(--ec-border);
    box-shadow: var(--ec-shadow);
}

/* Botón toggle Dark/Light */
.ec-theme-toggle {
    background: var(--ec-theme-btn-bg);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.85);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1;
}
.ec-theme-toggle:hover {
    background: var(--ec-theme-btn-hover);
    color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════ */
.card {
    background-color: var(--ec-surface);
    border-color: var(--ec-border);
    border-radius: var(--ec-card-radius);
    box-shadow: var(--ec-shadow);
    transition: box-shadow .2s, transform .2s, background-color .25s;
}
.card-header {
    background-color: transparent;
    border-bottom-color: var(--ec-border);
    font-weight: 600;
}
.card-footer {
    background-color: transparent;
    border-top-color: var(--ec-border);
}


/* ══════════════════════════════════════════════════════════════
   TABLAS
══════════════════════════════════════════════════════════════ */
.table {
    --bs-table-bg:           transparent;
    --bs-table-striped-bg:   rgba(0,0,0,.025);
    --bs-table-hover-bg:     rgba(37,99,235,.06);
    --bs-table-border-color: var(--ec-border);
    color: var(--ec-text);
}
[data-bs-theme="dark"] .table {
    --bs-table-striped-bg: rgba(255,255,255,.03);
    --bs-table-hover-bg:   rgba(59,130,246,.08);
}


/* ══════════════════════════════════════════════════════════════
   FORMULARIOS
══════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
    background-color: var(--ec-surface);
    border-color: var(--ec-border);
    color: var(--ec-text);
    transition: border-color .15s, box-shadow .15s, background-color .25s;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ec-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb),.2);
    background-color: var(--ec-surface);
    color: var(--ec-text);
}
.form-control::placeholder { color: var(--ec-text-muted); }
.form-label               { color: var(--ec-text); }
.form-text                { color: var(--ec-text-muted); }

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #1e293b;
    color: #f1f5f9;
}
[data-bs-theme="dark"] .input-group-text {
    background-color: #334155;
    border-color: #334155;
    color: #cbd5e1;
}


/* ══════════════════════════════════════════════════════════════
   BÚSQUEDA IA — bloque del catálogo, adaptado a light y dark
══════════════════════════════════════════════════════════════ */

/* Light: gradiente suave azul-amarillo */
:root .ec-ia-card,
[data-bs-theme="light"] .ec-ia-card {
    background: linear-gradient(135deg, #f0f4ff 0%, #fff8e7 100%);
    border: 1px solid #e2e8f0 !important;
}

/* Dark: superficie oscura con borde dorado tenue */
[data-bs-theme="dark"] .ec-ia-card {
    background: linear-gradient(135deg, #1e2a3a 0%, #25201a 100%);
    border: 1px solid #44391d !important;
}

/* Input dentro del bloque IA: en dark hereda el form-control oscuro,
   pero le ponemos el borde en tono cálido para que case con el badge */
[data-bs-theme="dark"] .ec-ia-input {
    background-color: #1a2535;
    border-color: #b45309 !important;   /* ámbar oscuro, armoniza con btn-warning */
    color: #f1f5f9;
}
[data-bs-theme="dark"] .ec-ia-input:focus {
    background-color: #1a2535;
    border-color: #d97706 !important;
    box-shadow: 0 0 0 .2rem rgba(217,119,6,.2);
    color: #f1f5f9;
}
[data-bs-theme="dark"] .ec-ia-input::placeholder {
    color: #64748b;
}

/* ══════════════════════════════════════════════════════════════
   BOTONES — Bootstrap los hereda de --bs-primary
   Solo tweaks visuales
══════════════════════════════════════════════════════════════ */
.btn-primary {
    --bs-btn-bg:           var(--ec-primary);
    --bs-btn-border-color: var(--ec-primary);
    --bs-btn-hover-bg:     var(--ec-primary-dark);
    --bs-btn-hover-border-color: var(--ec-primary-dark);
    --bs-btn-active-bg:    var(--ec-primary-dark);
    font-weight: 500;
}
.btn-outline-primary {
    --bs-btn-color:        var(--ec-primary);
    --bs-btn-border-color: var(--ec-primary);
    --bs-btn-hover-bg:     var(--ec-primary);
    --bs-btn-hover-border-color: var(--ec-primary);
}


/* ══════════════════════════════════════════════════════════════
   SIDEBAR ADMIN (offcanvas)
   Se define con variables --ec-sidebar-* para que cambien con el tema
══════════════════════════════════════════════════════════════ */
#adminOffcanvas {
    background: var(--ec-sidebar-bg) !important;
    color: var(--ec-sidebar-text) !important;
    width: 290px;
    border-left: 1px solid var(--ec-sidebar-border) !important;
    transition: background .25s;
}

.admin-offcanvas-header {
    background: var(--ec-sidebar-surface);
    border-bottom: 1px solid var(--ec-sidebar-border);
    padding: .75rem 1rem;
}

.admin-offcanvas-title {
    color: var(--ec-sidebar-accent);
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

/* Links del menú árbol */
.admin-menu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px 7px 28px;
    font-size: .8375rem;
    color: var(--ec-sidebar-text);
    text-decoration: none;
    border-bottom: 1px solid var(--ec-sidebar-border);
    transition: background .15s, color .15s;
}
.admin-menu-link:hover {
    background: var(--ec-sidebar-hover);
    color: #fff;
}
.admin-menu-link.text-muted {
    color: var(--ec-gray-700) !important;
}
.admin-menu-link.text-muted:hover {
    background: transparent;
    color: var(--ec-gray-500) !important;
}

/* Dashboard link especial */
.admin-dash-link {
    color: var(--ec-blue-light);
    border-bottom: 1px solid var(--ec-sidebar-border);
    font-size: .875rem;
}

/* Sección móvil dentro del offcanvas */
.admin-mobile-section {
    border-bottom: 2px solid var(--ec-sidebar-border);
}

.admin-user-pill {
    background: rgba(37,99,235,.2);
    border-bottom: 1px solid var(--ec-sidebar-border);
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-user-pill span {
    color: var(--ec-sidebar-accent);
    font-size: .875rem;
    font-weight: 600;
}
.admin-user-pill i { color: var(--ec-sidebar-accent); font-size: 1.1rem; }

/* Botones de sección accordion */
.admin-acc-btn {
    background: var(--ec-sidebar-surface) !important;
    color: var(--ec-sidebar-text) !important;
    font-size: .875rem;
    font-weight: 600;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ec-sidebar-border) !important;
    box-shadow: none !important;
    transition: background .15s, color .15s;
}
.admin-acc-btn:not(.collapsed) {
    background: rgba(37,99,235,.3) !important;
    color: var(--ec-sidebar-accent) !important;
}
.admin-acc-btn::after { filter: invert(1) opacity(.6); }

/* Cuerpo de cada sección */
.admin-acc-item {
    background: transparent !important;
    border: none !important;
}
.admin-acc-item .accordion-body {
    background: var(--ec-sidebar-bg);
    padding: 0 !important;
}

/* Búsqueda en offcanvas */
.admin-search-input {
    background: var(--ec-sidebar-surface) !important;
    border-color: var(--ec-sidebar-border) !important;
    color: var(--ec-sidebar-text) !important;
}
.admin-search-input::placeholder { color: var(--ec-gray-500) !important; }


/* ══════════════════════════════════════════════════════════════
   HERO BANNER
══════════════════════════════════════════════════════════════ */
.hero-banner {
    border-radius: 1.25rem;
    position: relative;
    overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════
   CATEGORY CARD
══════════════════════════════════════════════════════════════ */
.category-card {
    border-radius: var(--ec-card-radius);
    transition: transform var(--ec-transition), box-shadow var(--ec-transition);
    cursor: pointer;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ec-shadow-hover);
}
.category-icon i { transition: transform .3s ease; }
.category-card:hover .category-icon i { transform: scale(1.2); }


/* ══════════════════════════════════════════════════════════════
   PRODUCT CARD
══════════════════════════════════════════════════════════════ */
.product-card {
    border-radius: var(--ec-card-radius);
    transition: transform var(--ec-transition), box-shadow var(--ec-transition);
    overflow: hidden;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ec-shadow-hover);
}

.product-img-wrap {
    height: 220px;
    background: var(--ec-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-bs-theme="dark"] .product-img-wrap { background: #1e293b; }

.product-img {
    max-height: 220px;
    width: 100%;
    object-fit: contain;
    transition: transform .35s ease;
}
.product-card:hover .product-img { transform: scale(1.05); }

.product-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
}

.product-card .badge.bg-danger { font-size: .72rem; z-index: 2; }


/* ══════════════════════════════════════════════════════════════
   PRODUCT DETAIL
══════════════════════════════════════════════════════════════ */
.product-detail-img {
    background: var(--ec-gray-100);
    min-height: 400px;
}
[data-bs-theme="dark"] .product-detail-img { background: #1e293b; }


/* ══════════════════════════════════════════════════════════════
   QTY SELECTOR
══════════════════════════════════════════════════════════════ */
.qty-selector input[type=number] { -moz-appearance: textfield; }
.qty-selector input[type=number]::-webkit-inner-spin-button,
.qty-selector input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }


/* ══════════════════════════════════════════════════════════════
   CART
══════════════════════════════════════════════════════════════ */
.cart-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: .5rem;
}


/* ══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════════════════════════════ */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ec-toast {
    min-width: 260px;
    border-radius: var(--ec-card-radius);
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
    animation: slideIn .3s ease;
}
@keyframes slideIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════
   PASSWORD STRENGTH
══════════════════════════════════════════════════════════════ */
#pwd-strength-bar {
    transition: width .4s ease, background-color .4s ease;
    border-radius: 4px;
}


/* ══════════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════════ */
.page-link {
    border-radius: .5rem !important;
    margin: 0 2px;
}


/* ══════════════════════════════════════════════════════════════
   SIDEBAR FILTERS (catálogo)
══════════════════════════════════════════════════════════════ */
#category-filters a {
    padding: .3rem .5rem;
    border-radius: .4rem;
    transition: background var(--ec-transition);
}
#category-filters a:hover { background: rgba(var(--bs-primary-rgb),.08); }


/* ══════════════════════════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════════════════════════ */
.breadcrumb-item a { text-decoration: none; color: var(--ec-primary); }


/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
footer                    { color: rgba(255,255,255,.75) !important; }
footer h5,
footer h6                 { color: #fff !important; }
footer p,
footer li,
footer .text-muted        { color: rgba(255,255,255,.65) !important; }
footer a                  { color: rgba(255,255,255,.65) !important; text-decoration: none; }
footer a:hover            { color: #fff !important; }
footer .badge.bg-secondary { background-color: rgba(255,255,255,.15) !important; color: #fff !important; }


/* ══════════════════════════════════════════════════════════════
   LOADING SPINNER
══════════════════════════════════════════════════════════════ */
.ec-loading { pointer-events: none; opacity: .6; position: relative; }
.ec-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.4);
    border-radius: inherit;
}
[data-bs-theme="dark"] .ec-loading::after { background: rgba(0,0,0,.35); }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    .hero-banner    { min-height: 280px !important; padding: 2rem 1.5rem !important; }
    .product-img-wrap { height: 170px; }
    .display-4      { font-size: 1.8rem; }
}


/* ══════════════════════════════════════════════════════════════
   DARK MODE — fixes para clases Bootstrap con colores hardcodeados
   que no se adaptan solas al tema oscuro
══════════════════════════════════════════════════════════════ */

/* bg-white dentro de cards → usar superficie del tema */
[data-bs-theme="dark"] .card-header.bg-white,
[data-bs-theme="dark"] .card-footer.bg-white,
[data-bs-theme="dark"] .card-body.bg-white {
    background-color: var(--ec-surface) !important;
    color: var(--ec-text) !important;
}

/* table-light / table-active en thead */
[data-bs-theme="dark"] .table-light > tr > th,
[data-bs-theme="dark"] .table-light > tr > td,
[data-bs-theme="dark"] thead.table-light th,
[data-bs-theme="dark"] thead.table-active th {
    background-color: rgba(255,255,255,.04) !important;
    color: var(--ec-text) !important;
    border-color: var(--ec-border) !important;
}

/* text-dark en elementos interactivos */
[data-bs-theme="dark"] a.text-dark,
[data-bs-theme="dark"] span.text-dark,
[data-bs-theme="dark"] p.text-dark {
    color: var(--ec-text) !important;
}

/* Offcanvas — Bootstrap lo renderiza con bg propio en dark, lo forzamos */
[data-bs-theme="dark"] #adminOffcanvas {
    background: var(--ec-sidebar-bg) !important;
}

/* ══════════════════════════════════════════════════════════════
   TRANSICIÓN GLOBAL AL CAMBIAR TEMA
   Evita que los elementos "salten" de color sin animación
══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: .2s;
    transition-timing-function: ease;
}
/* Excluir transiciones en elementos que no deben animarse */
.carousel-item,
.carousel-item *,
.hero-slide,
img,
video,
iframe,
svg { transition: none !important; }