/* ============================================================
   Mi Tiendita — Custom CSS
   Bootstrap 5 vía CDN, este archivo solo agrega componentes propios.
   Variables compiladas desde _variables.scss:
     --primary:  #E66239
     --gray-200: #e5e5e5
     --gray-800: #262626
     --success:  #00C951
     --warning:  #F0B100
     --danger:   #FB2C36
     --info:     #00B8DB
============================================================ */

/* ---------- Overlay móvil ---------- */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(1px);
    display: none;
    z-index: 1030;
}
.overlay.show { display: block; }

/* ---------- Sidebar ---------- */
.sidebar {
    width: 240px;
    background: #fff;
    transition: width .3s, left .3s;
    border-right: 1px solid #e5e5e5;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 60px;
    z-index: 1030;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar .nav-link {
    color: #262626;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    gap: 12px;
    white-space: nowrap;
    margin: 1px 12px;
    border-radius: 8px;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: #E66239;
    background-color: rgba(230, 98, 57, 0.095);
    text-decoration: none;
}
.sidebar .nav-link .ti { font-size: 18px; }
.sidebar .nav-text { transition: opacity .2s; }
.sidebar .logo-area {
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 17px;
    color: #262626;
    border-bottom: 1px solid #e5e5e5;
}

/* Sidebar colapsado (solo íconos) */
.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .nav-link {
    margin: 0;
    background-color: transparent;
    padding: 8px 18px;
    justify-content: center;
}
.sidebar.collapsed .nav-text,
.sidebar.collapsed .logo-text { display: none; }

/* ---------- Topbar ---------- */
.topbar {
    height: 60px;
    margin-left: 240px;
}
.topbar.full { margin-left: 60px; }

/* ---------- Contenido principal ---------- */
.content { margin-left: 240px; }
.content.full { margin-left: 60px; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .sidebar { left: -240px; }
    .sidebar.mobile-show { left: 0; }
    .topbar,
    .content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ============================================================
   Avatar
============================================================ */
.avatar {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 3rem;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-xs  { width: 1.5rem; height: 1.5rem; }
.avatar-sm  { width: 2rem;   height: 2rem; }
.avatar-md  { width: 2.5rem; height: 2.5rem; }
.avatar-lg  { width: 3.5rem; height: 3.5rem; }
.avatar-xl  { width: 5rem;   height: 5rem; }
.avatar-xxl { width: 7.5rem; height: 7.5rem; }

.avatar-initials {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
}
.avatar-primary   .avatar-initials { background-color: #E66239; color: #fff; }
.avatar-secondary .avatar-initials { background-color: #525252; color: #fff; }
.avatar-success   .avatar-initials { background-color: #00C951; color: #fff; }
.avatar-warning   .avatar-initials { background-color: #F0B100; color: #fff; }
.avatar-info      .avatar-initials { background-color: #00B8DB; color: #fff; }
.avatar-danger    .avatar-initials { background-color: #FB2C36; color: #fff; }

.avatar-indicators { position: relative; }
.avatar-indicators:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    border: 2px solid #fff;
    display: table;
}
.avatar-online:before  { background-color: #00C951; }
.avatar-offline:before { background-color: #a3a3a3; }
.avatar-away:before    { background-color: #F0B100; }
.avatar-busy:before    { background-color: #FB2C36; }

.avatar-group .avatar + .avatar { margin-left: -1.2rem; }
.avatar-group .avatar:hover { z-index: 2; }
.avatar-group img,
.avatar-group .avatar .avatar-initials { border: 2px solid #fff; }

/* ============================================================
   Btn Icon
============================================================ */
.btn-icon {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}
.btn-icon.btn-xs { font-size: .75rem;  width: 1.75rem;   height: 1.75rem; }
.btn-icon.btn-sm { font-size: .875rem; width: 2.1875rem; height: 2.1875rem; }
.btn-icon.btn-lg { font-size: 1rem;    width: 3.37rem;   height: 3.37rem; }

/* ============================================================
   Icon Shape
============================================================ */
.icon-xxs { width: 1rem;   height: 1rem;   line-height: 1rem; }
.icon-xs  { width: 1.5rem; height: 1.5rem; line-height: 1.5rem; }
.icon-sm  { width: 2rem;   height: 2rem;   line-height: 2rem; }
.icon-md  { width: 2.5rem; height: 2.5rem; line-height: 2.5rem; }
.icon-lg  { width: 3rem;   height: 3rem;   line-height: 3rem; }
.icon-xl  { width: 3.5rem; height: 3.5rem; line-height: 3.5rem; }
.icon-xxl { width: 4rem;   height: 4rem;   line-height: 4rem; }
.icon-xxxl{ width: 7rem;   height: 7rem;   line-height: 7rem; }
.icon-shape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
}

/* ============================================================
   Border / Timeline
============================================================ */
.border-dashed { border-style: dashed !important; }

.timeline-vertical { position: relative; }
.timeline-vertical .timeline-item .timeline-bar {
    position: absolute;
    height: 100px;
    left: 5px;
    top: 24px;
}
.timeline-vertical-height .timeline-item .timeline-bar {
    height: calc(100% - 1rem) !important;
}