:root {
    --primary: #0f172a;
    --accent: #10b981;
    --danger: #ef4444;
    --bg: #f1f5f9;
    --sidebar-width: 260px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr; /* Columna fija para el menú */
    min-height: 100vh;
}

/* SIDEBAR FIRME */
.sidebar {
    background-color: var(--primary);
    color: white;
    padding: 30px 20px;
    height: 100vh; /* Altura total de la pantalla */
    position: sticky;
    top: 0;
    z-index: 100; /* Asegura que siempre esté arriba */
    overflow-y: auto; /* Por si el menú crece mucho */
}

.sidebar h2 { color: var(--accent); margin-bottom: 30px; text-align: center; font-size: 1.2rem; }

.sidebar a {
    color: #94a3b8; text-decoration: none; display: flex; align-items: center;
    padding: 12px 15px; border-radius: 8px; margin-bottom: 5px; transition: 0.3s;
}

.sidebar a:hover, .sidebar a.active { background: #1e293b; color: white; }
.sidebar i { margin-right: 12px; width: 20px; text-align: center; }

/* CONTENIDO PRINCIPAL */
.main-wrapper { width: 100%; overflow-x: hidden; }
.content { padding: 40px; }

.card {
    background: white; padding: 25px; border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; margin-bottom: 20px;
}

/* TABLAS Y BOTONES */
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th { background: #f8fafc; text-align: left; padding: 12px; font-size: 0.8rem; color: #64748b; border-bottom: 2px solid #e2e8f0; }
td { padding: 12px; border-bottom: 1px solid #f1f5f9; }

.btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn-primary { background: var(--primary); color: white; }
.btn-accent { background: var(--accent); color: white; }

input, select { width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; margin: 10px 0; font-size: 1rem; }
input:focus { border-color: var(--accent); outline: none; }

.badge { padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; }

tbody tr:hover {
    background-color: #f8fafc;
    transition: 0.2s;
}

#total-val {
    font-family: 'Monaco', 'Courier New', monospace; /* Estilo calculadora */
    font-weight: 800;
}