/* =============================================
   SISTEMA DE COMPRAS - TURKOS
   Estilos globales
   ============================================= */

:root {
    --turkos-primary:   #e94560;
    --turkos-secondary: #0f3460;
    --sidebar-width:    240px;
    --sidebar-bg:       #1a1a2e;
    --sidebar-text:     #cdd3d8;
    --topbar-bg:        #ffffff;
    --topbar-border:    #e9ecef;
    --content-bg:       #f4f6fb;
}

/* LAYOUT */
body { background: var(--content-bg); font-family: 'Segoe UI', system-ui, sans-serif; }
#wrapper { min-height: 100vh; }

/* SIDEBAR */
#sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: fixed;
    top: 0; left: 0;
    z-index: 1000;
    transition: width .25s ease, transform .25s ease;
    overflow-x: hidden;
}

#sidebar .nav-link {
    color: var(--sidebar-text);
    font-size: .88rem;
    padding: .45rem .9rem;
    border-radius: 8px;
    margin: 1px 0;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
#sidebar .nav-link:hover  { background: rgba(255,255,255,.08); color: #fff; }
#sidebar .nav-link.active { background: var(--turkos-primary); color: #fff; font-weight: 600; }

.sidebar-section-title { font-size: .7rem; letter-spacing: .08em; }
.sidebar-user-info      { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-brand          { background: rgba(255,255,255,.04); }

/* Sidebar colapsado */
body.sidebar-collapsed #sidebar        { width: 0; transform: translateX(-100%); }
body.sidebar-collapsed #page-content-wrapper { margin-left: 0 !important; }

/* CONTENIDO */
#page-content-wrapper {
    margin-left: var(--sidebar-width);
    transition: margin-left .25s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* TOPBAR */
.topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    position: sticky;
    top: 0;
    z-index: 999;
}

/* CONTENT AREA */
.content-area { background: var(--content-bg); flex: 1; }

/* CARDS */
.card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.card-header { background: transparent; border-bottom: 1px solid #f0f0f0; font-weight: 600; }

/* KPI CARDS */
.kpi-card { border-radius: 14px; padding: 1.25rem; }
.kpi-card .kpi-value { font-size: 1.6rem; font-weight: 700; }
.kpi-card .kpi-label { font-size: .8rem; color: #6c757d; }
.kpi-card .kpi-icon  { font-size: 2rem; opacity: .25; }

/* TABLAS */
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; border-bottom-width: 2px; }
.table td { vertical-align: middle; font-size: .9rem; }
.table-hover tbody tr:hover { background: #f8f9ff; }

/* BADGES */
.badge { font-size: .78rem; padding: .35em .7em; font-weight: 600; border-radius: 6px; }

/* BOTONES */
.btn-primary   { background: var(--turkos-primary); border-color: var(--turkos-primary); }
.btn-primary:hover { background: #c73652; border-color: #c73652; }
.btn-outline-primary { color: var(--turkos-primary); border-color: var(--turkos-primary); }
.btn-outline-primary:hover { background: var(--turkos-primary); border-color: var(--turkos-primary); }

/* ALERTS / SALDO */
.saldo-badge {
    background: #d4edda; color: #155724;
    border: 1px solid #c3e6cb;
    font-size: 1rem; font-weight: 700;
    padding: .5rem 1rem; border-radius: 8px;
}
.saldo-badge.low  { background: #fff3cd; color: #856404; border-color: #ffc107; }
.saldo-badge.danger { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }

/* FORMULARIOS */
.form-label { font-size: .88rem; font-weight: 600; margin-bottom: .3rem; }
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(233,69,96,.2);
    border-color: var(--turkos-primary);
}

/* TABLA DINÁMICA DE ITEMS */
#tabla-items tbody tr td { padding: .4rem .5rem; }
#tabla-items .input-sm { font-size: .85rem; padding: .25rem .5rem; }

/* ESTRELLAS */
.star-rating { color: #ffc107; font-size: 1.2rem; }
.star-rating .bi-star { color: #dee2e6; }

/* RESPONSIVE */
@media (max-width: 768px) {
    #sidebar { transform: translateX(-100%); }
    #page-content-wrapper { margin-left: 0; }
    body.sidebar-open #sidebar { transform: translateX(0); }
}