/* assets/css/style.css */
:root {
    --color-primario: #1a2a4a;
    --color-secundario: #d4a017;
    --color-fondo: #f4f6f9;
    --color-texto: #1f2937;
    --color-borde: #d1d5db;
    --color-exito: #16a34a;
    --color-peligro: #dc2626;
    --color-advertencia: #f59e0b;
}

* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
    margin: 0;
}

.navbar {
    background: var(--color-primario);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
}

.navbar .logo { font-weight: 700; font-size: 1.2rem; color: var(--color-secundario); }
.navbar nav a {
    color: #fff;
    text-decoration: none;
    margin-left: 16px;
    font-size: 0.9rem;
}
.navbar nav a:hover { color: var(--color-secundario); }

.contenedor { max-width: 1200px; margin: 24px auto; padding: 0 16px; }

.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 20px;
    margin-bottom: 20px;
}

h1, h2, h3 { color: var(--color-primario); }

table { width: 100%; border-collapse: collapse; background: #fff; }
table th, table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-borde);
    text-align: left;
    font-size: 0.9rem;
}
table th { background: var(--color-primario); color: #fff; }
table tr:hover { background: #f9fafb; }

.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: none;
    color: #fff;
}
.btn-primario { background: var(--color-primario); }
.btn-exito { background: var(--color-exito); }
.btn-peligro { background: var(--color-peligro); }
.btn-advertencia { background: var(--color-advertencia); }
.btn-secundario { background: #6b7280; }

.form-grupo { margin-bottom: 14px; }
.form-grupo label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.85rem; }
.form-grupo input, .form-grupo select, .form-grupo textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 0.9rem;
}

.badge { padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; color: #fff; }
.badge-disponible { background: var(--color-exito); }
.badge-prestado { background: var(--color-advertencia); }
.badge-baja { background: var(--color-peligro); }

.login-box {
    max-width: 380px;
    margin: 80px auto;
    background: #fff;
    padding: 32px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.login-box h2 { text-align: center; }

.alerta { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 0.9rem; }
.alerta-error { background: #fee2e2; color: #991b1b; }
.alerta-exito { background: #dcfce7; color: #166534; }

.foto-mini { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; }
.foto-grande { max-width: 320px; border-radius: 8px; margin-bottom: 12px; }

.timeline { border-left: 3px solid var(--color-secundario); padding-left: 16px; }
.timeline-item { margin-bottom: 14px; }
.timeline-fecha { font-size: 0.75rem; color: #6b7280; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

@media print {
    .navbar, .no-imprimir { display: none !important; }
}