/* Ruta: /erpsystem/public/css/app.css */
:root { --bg:#0b0f14; --panel:#111827; --muted:#9ca3af; --pri:#22c55e; --pri-2:#10b981; --txt:#e5e7eb; --card:#0f172a; --b:#1f2937; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
.container{max-width:1100px;margin:48px auto;padding:0 20px}
.title{font-size:28px;margin:0 0 8px}
.muted{color:var(--muted)}
.card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:20px}
.card{display:block;background:linear-gradient(180deg,var(--panel),var(--card));border:1px solid var(--b);border-radius:14px;padding:16px;text-decoration:none;color:inherit;transition:.15s transform ease,.15s box-shadow ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.card-title{font-weight:600;margin:0 0 6px}
.card-sub{color:var(--muted);font-size:12px}
.btn{display:inline-block;background:linear-gradient(180deg,var(--pri),var(--pri-2));color:#052e16;border:none;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.input{width:100%;background:#0b1220;border:1px solid var(--b);border-radius:10px;padding:10px;color:var(--txt)}
.form-row{margin-bottom:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.notice{padding:10px 12px;border-radius:10px;background:#111827;border:1px solid #1f2937;color:var(--muted)}
.error{border-left:4px solid #ef4444;background:#1b1414}
.success{border-left:4px solid #22c55e;background:#0f1b13}
.nav{display:flex;gap:12px;align-items:center;padding:10px 0;margin-bottom:16px}
.nav a{color:var(--muted);text-decoration:none}
.nav a.active{color:var(--txt)}
.table{width:100%;border-collapse:collapse;border:1px solid var(--b);border-radius:10px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid var(--b);text-align:left}
.table th{background:#0e1626;color:#cbd5e1}
.box{background:linear-gradient(180deg,var(--panel),var(--card));border:1px solid var(--b);border-radius:14px;padding:16px}
.center{display:flex;align-items:center;justify-content:center;min-height:60vh}
/* Estilos para la tabla de detalles */
.table-details {
    width: 100%;
    border-collapse: collapse;
}

.table-details th,
.table-details td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--b);
}

.table-details th {
    width: 140px;
    color: var(--muted);
}

/* Estilos para badges */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
}

.badge.success {
    background: var(--pri);
    color: var(--txt);
}

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

/* Ajustes para la tabla principal */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--b);
}

.table th {
    background: var(--card);
    color: var(--muted);
}

/* Estilos para los gráficos */
canvas {
    width: 100% !important;
    height: 200px !important;
}

/* Footer */
.footer {
    background-color: var(--panel);
    padding: 20px 0;
    margin-top: 40px;
    text-align: center;
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer p {
    color: var(--muted);
    margin: 0;
    font-size: 14px;
}

/* Header */
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: var(--panel);
}

.logo-left, .logo-right {
    flex: 0 0 auto;
}

.logo {
    max-height: 50px;
    width: auto;
}

.header-title {
    flex: 1;
    text-align: center;
}

.header-title h1 {
    margin: 0;
    font-size: 24px;
    color: var(--txt);
}

/* Estilos del menu partial_nav */

.nav {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 16px;
    background: linear-gradient(180deg, var(--panel), var(--card));
    border: 1px solid var(--b);
    border-radius: 14px;
}

.nav a {
    color: var(--muted);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav a:hover {
    color: var(--txt);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.nav a.active {
    color: var(--pri);
    background: rgba(34, 197, 94, 0.1);
    font-weight: 500;
}

.nav a.active:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--pri);
    border-radius: 2px;
}

.nav-right {
    margin-left: auto;
}

.nav-right a {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.nav-right a:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}