/* =========================
   0. VARIABLES (NUEVO)
========================= */
:root{
    --primary:#34495e;
    --secondary:#2c3e50;
    --accent:#3498db;
    --success:#2ecc71;
    --danger:#e74c3c;
    --warning:#f39c12;
    --light:#f5f6fa;
    --border:#e0e6ed;
    --text:#333;
}

/* =========================
   1. RESET
========================= */
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

/* =========================
   2. BASE
========================= */
body{
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--light);
    color:var(--text);
}

a{
    text-decoration:none;
    color:inherit;
}

/* =========================
   3. UTILIDADES
========================= */
.container{
    width:100%;
    max-width:1200px;
    margin:auto;
}

.text-center{ text-align:center; }
.mt-1{ margin-top:10px; }
.mt-2{ margin-top:20px; }
.mb-1{ margin-bottom:10px; }
.mb-2{ margin-bottom:20px; }

/* =========================
   4. COMPONENTES
========================= */

/* 🔘 BOTONES */
.btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border-radius:6px;
    border:none;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
    transition:0.2s;
}

.btn-primary{
    background:var(--accent);
    color:#fff;
}

.btn-primary:hover{
    background:#2980b9;
}

.btn-danger{
    background:var(--danger);
    color:#fff;
}

/* 🧾 INPUTS */
.input{
    width:100%;
    padding:10px;
    border-radius:6px;
    border:1px solid var(--border);
    font-size:14px;
}

/* 📦 CARD */
.card{
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* ⚠️ ALERTAS */
.alert{
    padding:10px;
    border-radius:5px;
    font-size:14px;
}

.alert-error{
    background:#ffe5e5;
    color:#c0392b;
}

/* 🏷️ BADGES */
.badge{
    padding:5px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
}

.badge-success{
    background:#eafaf1;
    color:var(--success);
}

.badge-danger{
    background:#fdecea;
    color:var(--danger);
}

.badge-warning{
    background:#fff4e5;
    color:var(--warning);
}

/* 📊 TABLAS (🔥 CLAVE) */
.table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.table th{
    background:#f8fafc;
    text-align:left;
    padding:12px;
    font-size:13px;
    color:#555;
    border-bottom:1px solid var(--border);
}

.table td{
    padding:12px;
    border-bottom:1px solid var(--border);
    font-size:14px;
}

.table tr:hover{
    background:#f9fbfd;
}

/* =========================
   5. LOGIN
========================= */
.login-body{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
}

.login-box{
    width:320px;
    text-align:center;
}

.login-box img{
    max-width:120px;
    margin-bottom:15px;
}

.login-box h2{
    margin-bottom:20px;
    color:var(--primary);
}

/* =========================
   6. LAYOUT APP
========================= */

.app{
    display:grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 60px 1fr;
    height:100vh;
}

/* HEADER */
.app-header{
    grid-column: 1 / 3;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    background:var(--primary);
    color:#fff;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo img{
    height:30px;
}

/* SIDEBAR */
.sidebar{
    background:var(--secondary);
    color:#fff;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.sidebar a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border-radius:6px;
    transition:0.2s;
}

.sidebar a:hover{
    background:var(--primary);
}

.sidebar a.active{
    background:var(--accent);
    font-weight:bold;
}

/* CONTENT */
.content{
    padding:25px;
    background:var(--light);
    overflow:auto;
}

/* =========================
   7. MODAL
========================= */
.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    justify-content:center;
    align-items:center;
    z-index:2000;
}

.modal-content{
    background:#fff;
    padding:20px;
    border-radius:10px;
    width:300px;
    box-shadow:0 5px 20px rgba(0,0,0,0.2);
}

/* =========================
   8. RESPONSIVE
========================= */
.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:#fff;
    font-size:22px;
}

@media (max-width: 768px){

    .app{
        grid-template-columns: 1fr;
        grid-template-rows: 60px 1fr;
    }

    .sidebar{
        position:fixed;
        top:60px;
        left:-250px;
        width:220px;
        height:100%;
        transition:0.3s;
        z-index:1000;
    }

    .sidebar.active{
        left:0;
    }

    .menu-toggle{
        display:block;
    }
}