/* MULTICARGA - tema sobre Bootstrap 5 (amarillo #fff200 sobre gris #4b5354) */
:root {
    --mc-yellow: #fff200;
    --mc-yellow-dark: #e0d400;
    --mc-gray: #4b5354;
    --mc-dark: #353b3c;
    --mc-darker: #262a2b;
    --mc-light: #f5f6f4;
    --bs-link-color: #2f5f8a;
    --bs-link-hover-color: #1d3f5e;
}

body {
    background: var(--mc-light);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1 0 auto; }

/* ---------- Botones ---------- */
.btn-mc {
    --bs-btn-bg: var(--mc-yellow);
    --bs-btn-border-color: var(--mc-yellow);
    --bs-btn-color: var(--mc-darker);
    --bs-btn-hover-bg: var(--mc-yellow-dark);
    --bs-btn-hover-border-color: var(--mc-yellow-dark);
    --bs-btn-hover-color: var(--mc-darker);
    --bs-btn-active-bg: var(--mc-yellow-dark);
    --bs-btn-active-color: var(--mc-darker);
    --bs-btn-disabled-bg: var(--mc-yellow);
    --bs-btn-disabled-color: var(--mc-darker);
    font-weight: 700;
}
.btn-dark-mc {
    --bs-btn-bg: var(--mc-gray);
    --bs-btn-border-color: var(--mc-gray);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--mc-dark);
    --bs-btn-hover-color: var(--mc-yellow);
    --bs-btn-hover-border-color: var(--mc-dark);
    font-weight: 600;
}
.text-mc { color: var(--mc-yellow) !important; }
.bg-mc { background: var(--mc-yellow) !important; color: var(--mc-darker); }
.bg-mc-dark { background: var(--mc-dark) !important; color: #fff; }

/* ---------- Navbar ---------- */
.navbar-mc { background: var(--mc-dark); }
.navbar-mc .navbar-brand img { height: 42px; }
.navbar-mc .nav-link { color: rgba(255, 255, 255, .85); font-weight: 500; }
.navbar-mc .nav-link:hover, .navbar-mc .nav-link.active { color: var(--mc-yellow); }
.navbar-mc .badge-notif { position: absolute; top: 2px; right: 0; font-size: .65rem; }
.notif-menu { width: 340px; max-width: 92vw; }
.notif-menu .dropdown-item { white-space: normal; font-size: .875rem; }

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(rgba(38, 42, 43, .82), rgba(38, 42, 43, .9)), url("../img/micamion.jpg") center/cover no-repeat;
    color: #fff;
    padding: 4.5rem 0 3.5rem;
}
.hero h1 { font-weight: 800; letter-spacing: -.5px; }
.hero h1 span { color: var(--mc-yellow); }
.hero .quick-search { background: rgba(255, 255, 255, .97); border-radius: 1rem; color: var(--mc-darker); }
.stat-number { font-size: 2rem; font-weight: 800; color: var(--mc-yellow); line-height: 1; }

.section-title { font-weight: 800; }
.section-title::after {
    content: ""; display: block; width: 56px; height: 4px;
    background: var(--mc-yellow); margin-top: .5rem; border-radius: 2px;
}
.text-center .section-title::after, .section-title.text-center::after { margin-left: auto; margin-right: auto; }

.step-icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mc-yellow); color: var(--mc-darker); font-size: 1.5rem;
}

/* ---------- Tarjetas de carga / camión ---------- */
.card-load { border: 0; border-left: 4px solid var(--mc-yellow); transition: box-shadow .15s, transform .15s; }
.card-load:hover { box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08); transform: translateY(-1px); }
.card-truck { border-left-color: var(--mc-gray); }
.route { font-weight: 700; font-size: 1.05rem; }
.route .bi-arrow-right { color: var(--mc-gray); }
.route small { font-weight: 400; }
.price-tag { font-weight: 800; font-size: 1.15rem; color: var(--mc-darker); }
.fav-btn { border: 0; background: none; color: #adb5bd; font-size: 1.2rem; padding: 0; }
.fav-btn.active, .fav-btn:hover { color: #dc3545; }
.truck-thumb { width: 100%; height: 160px; object-fit: cover; border-radius: .5rem; }

/* Selector de tipo de vehículo con iconos */
.vehicle-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.vehicle-picker input { display: none; }
.vehicle-picker label {
    border: 1px solid #ced4da; border-radius: .5rem; padding: .4rem .7rem; cursor: pointer;
    font-size: .85rem; background: #fff; user-select: none;
}
.vehicle-picker input:checked + label { border-color: var(--mc-gray); background: var(--mc-yellow); font-weight: 600; }

/* Pestañas de modalidad (formulario de carga) */
.modalidad-picker .btn-check:checked + .btn { background: var(--mc-yellow); border-color: var(--mc-gray); color: var(--mc-darker); font-weight: 700; }
.modalidad-picker .btn img { height: 34px; display: block; margin: 0 auto .25rem; }

/* ---------- Panel ---------- */
.panel-sidebar { background: var(--mc-dark); border-radius: .75rem; }
.panel-sidebar .nav-link { color: rgba(255, 255, 255, .8); border-radius: .5rem; padding: .55rem .85rem; }
.panel-sidebar .nav-link i { width: 1.4rem; display: inline-block; }
.panel-sidebar .nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.panel-sidebar .nav-link.active { background: var(--mc-yellow); color: var(--mc-darker); font-weight: 700; }
.panel-sidebar .sidebar-heading { color: rgba(255, 255, 255, .45); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; padding: .9rem .85rem .3rem; }
.stat-card { border: 0; border-top: 4px solid var(--mc-yellow); }
.stat-card .stat-value { font-size: 2rem; font-weight: 800; }

/* Historial de negociación */
.bid { max-width: 85%; border-radius: 1rem; padding: .65rem 1rem; margin-bottom: .75rem; }
.bid-mine { background: #fffbd1; margin-left: auto; border-bottom-right-radius: .25rem; }
.bid-other { background: #fff; border: 1px solid #e5e7eb; border-bottom-left-radius: .25rem; }
.bid-system { background: transparent; text-align: center; max-width: 100%; color: #6c757d; font-size: .875rem; }
.bid .amount { font-size: 1.2rem; font-weight: 800; }

.masked { filter: blur(4px); user-select: none; }

/* ---------- Footer ---------- */
.footer-mc { background: var(--mc-darker); color: rgba(255, 255, 255, .75); }
.footer-mc a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.footer-mc a:hover { color: var(--mc-yellow); }
.footer-mc h6 { color: #fff; font-weight: 700; }

.whatsapp-float {
    position: fixed; right: 18px; bottom: 18px; z-index: 1030;
    width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .25);
}
.whatsapp-float:hover { color: #fff; transform: scale(1.05); }

/* Tom Select integrado con Bootstrap */
.ts-wrapper.form-select { padding: 0; }
.ts-control { min-height: calc(1.5em + .75rem + 2px); }
.is-invalid + .ts-wrapper .ts-control, .ts-wrapper.is-invalid .ts-control { border-color: var(--bs-form-invalid-border-color); }

@media (max-width: 575.98px) {
    .hero { padding: 2.5rem 0 2rem; }
    .hero h1 { font-size: 1.75rem; }
    .stat-number { font-size: 1.5rem; }
    .bid { max-width: 100%; }
}