/* overrides.css — Overrides Bootstrap 5.3 con identidad YoTeCargo */

/* ── Body ───────────────────────────────────────────────────── */
body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-brand); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-light); }

/* ── Navbar glassmorphism ───────────────────────────────────── */
.navbar {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.88) !important;
    border-bottom: 1px solid var(--border-brand);
}
.navbar-brand {
    font-weight: 800;
    color: var(--brand) !important;
    letter-spacing: -0.02em;
}
.navbar-brand:hover { color: var(--brand-dark) !important; }
.nav-link { color: var(--text-secondary) !important; transition: color var(--transition-fast); }
.nav-link:hover, .nav-link.active { color: var(--brand) !important; }

/* ── Botones ────────────────────────────────────────────────── */
.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}
.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}
.btn-outline-primary:hover {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-secondary {
    background-color: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-secondary);
}
.btn-secondary:hover {
    background-color: var(--bg-page);
    border-color: var(--brand);
    color: var(--brand);
}
.btn-ghost {
    background: transparent;
    border: none;
    color: var(--brand);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.btn-ghost:hover { color: var(--brand-dark); background: var(--brand-faint); }
.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
}
.btn-danger:hover {
    background-color: #b91c1c;
    border-color: #b91c1c;
}
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: var(--radius-lg); }
.btn-sm { border-radius: 0.5rem; font-size: 0.8125rem; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--bg-surface);
}
a .card, .card-clickable {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
}
a .card:hover, .card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(105, 21, 232, 0.08);
}
.card-body { padding: 1rem; }
@media (min-width: 768px) { .card-body { padding: 1.5rem; } }

/* ── Formularios ────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(105, 21, 232, 0.12);
    outline: none;
}
/* Placeholder claramente diferenciado del texto real */
.form-control::placeholder,
textarea.form-control::placeholder,
input.form-control::placeholder {
    color: #b8c4d0;
    opacity: 1;
    font-style: italic;
}
.form-label { font-weight: 500; color: var(--text-secondary); margin-bottom: 0.35rem; }
.form-text { color: var(--text-tertiary); font-size: 0.8125rem; }
.invalid-feedback { font-size: 0.8125rem; }

/* ── Badges de estado ───────────────────────────────────────── */
.badge {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border-radius: 0.5rem;
    padding: 0.3em 0.65em;
}
.badge-verificado, .badge-aprobado, .badge-completado {
    background-color: #dcfce7;
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.3);
}
.badge-matching, .badge-activo {
    background-color: #ccfbf1;
    color: #0f766e;
    border: 1px solid rgba(0, 212, 170, 0.3);
}
.badge-pendiente, .badge-por_vencer {
    background-color: #fff7ed;
    color: #c2410c;
    border: 1px solid rgba(245, 124, 0, 0.3);
}
.badge-rechazado, .badge-bloqueado {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.3);
}
.badge-info {
    background-color: var(--brand-faint);
    color: var(--brand);
    border: 1px solid var(--border-brand);
}
.badge-suspendido {
    background-color: #f1f5f9;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert { border-radius: var(--radius-md); border: none; }
.alert-info { background: var(--brand-faint); color: var(--brand-dark); border-left: 4px solid var(--brand); }
.alert-warning { background: #fff7ed; color: #92400e; border-left: 4px solid var(--warning); }
.alert-danger { background: #fef2f2; color: #991b1b; border-left: 4px solid var(--danger); }
.alert-success { background: #f0fdf4; color: #166534; border-left: 4px solid var(--success); }

/* ── Toasts ─────────────────────────────────────────────────── */
.toast { border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-md); }

/* ── Dropdowns ──────────────────────────────────────────────── */
.dropdown-menu {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 0.35rem;
}
.dropdown-item { border-radius: 0.5rem; padding: 0.45rem 0.75rem; font-size: 0.875rem; transition: background var(--transition-fast); }
.dropdown-item:hover { background-color: var(--brand-faint); color: var(--brand); }
.dropdown-divider { margin: 0.35rem 0; }

/* ── Modales ────────────────────────────────────────────────── */
.modal-content { border-radius: var(--radius-xl); border: none; box-shadow: var(--shadow-md); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }

/* ── Paginación ─────────────────────────────────────────────── */
.page-link { color: var(--brand); border-color: var(--border); }
.page-link:hover { color: var(--brand-dark); background-color: var(--brand-faint); border-color: var(--border-brand); }
.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); }

/* ── Footer ─────────────────────────────────────────────────── */
footer {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border);
    padding: 2rem 0;
    margin-top: 4rem;
    color: var(--text-secondary);
}

/* ── Headings ───────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; }
h4, h5, h6 { font-weight: 700; }

/* ── Links ──────────────────────────────────────────────────── */
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
.text-brand { color: var(--brand) !important; }
.bg-brand-faint { background-color: var(--brand-faint) !important; }