/* ============================================================
   ALDO CARGO EXPRESS - HOJA DE ESTILOS PRINCIPAL
   Colores: Amarillo #FFC107 / Negro #111111 / Blanco
   Powered by Agdala 2026
   ============================================================ */

:root {
    --primario: #FFC107;
    --secundario: #111111;
    --sidebar-w: 250px;
}

/* ---------- Base ---------- */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #f4f4f5;
}

/* ---------- Layout app ---------- */
.app-body {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--secundario);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-logo {
    height: 42px;
    width: 42px;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
    padding: 4px;
}

.brand-name {
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.1;
    color: var(--primario);
}

.brand-slogan {
    font-size: .68rem;
    color: rgba(255,255,255,.6);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: .8rem 0;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .68rem 1.2rem;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-size: .9rem;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}

.sidebar-item i {
    width: 20px;
    text-align: center;
}

.sidebar-item:hover {
    background: rgba(255,193,7,.12);
    color: #fff;
}

.sidebar-item.active {
    background: rgba(255,193,7,.15);
    color: var(--primario);
    border-left-color: var(--primario);
    font-weight: 600;
}

.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .4rem 0;
}

.main-wrapper {
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: transform .25s ease;
}

.topbar.hidden {
    transform: translateY(-100%);
}

.topbar-title {
    font-weight: 700;
    font-size: 1.05rem;
    flex: 1;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.btn-icon {
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: #f4f4f5;
}

.content {
    flex: 1;
    padding: 1.5rem;
}

.app-footer {
    padding: .9rem 1.5rem;
    text-align: center;
    font-size: .8rem;
    color: #777;
    border-top: 1px solid #e5e5e5;
    background: #fff;
}

/* ---------- Móvil: sidebar fuera de pantalla ---------- */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.visible { transform: translateX(0); }
    .main-wrapper { margin-left: 0; }
    .content { padding: 1rem; }
}

/* ---------- Tarjetas de estadísticas ---------- */
.stat-card {
    border-radius: 14px;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    overflow: hidden;
}

.stat-card.stat-amarillo {
    background: linear-gradient(135deg, #FFC107, #ffb300);
    color: #111;
}

.stat-card.stat-negro {
    background: linear-gradient(135deg, #222, #111);
    color: #fff;
}

.stat-card.stat-verde {
    background: linear-gradient(135deg, #20c997, #17a673);
    color: #fff;
}

.stat-card.stat-azul {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
}

.stat-numero {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}

.stat-label {
    font-size: .78rem;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: .25rem;
}

.stat-icono {
    font-size: 2rem;
    opacity: .5;
}

/* ---------- Tarjetas grandes de país ---------- */
.pais-card-grande {
    border-radius: 16px;
    border: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.pais-card-grande:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.pais-bandera-grande {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.stat-mini {
    font-weight: 800;
    font-size: 1.05rem;
}

/* ---------- Línea de tiempo (rastreo) ---------- */
.timeline {
    position: relative;
    padding-left: 1.5rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: .45rem;
    top: .4rem;
    bottom: .4rem;
    width: 2px;
    background: #e2e2e2;
}

.timeline-item {
    position: relative;
    padding: .5rem 0 .5rem 1.4rem;
    opacity: .45;
}

.timeline-item .dot {
    position: absolute;
    left: -1.32rem;
    top: .75rem;
    width: .95rem;
    height: .95rem;
    border-radius: 50%;
    background: #d0d0d0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #d0d0d0;
}

.timeline-item.done {
    opacity: 1;
}

.timeline-item.done .dot {
    background: var(--primario);
    box-shadow: 0 0 0 2px var(--primario);
}

/* ---------- Autocomplete clientes ---------- */
.autocomplete-sugerencias {
    position: relative;
    z-index: 1050;
}

.autocomplete-item {
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    padding: .55rem .8rem;
    cursor: pointer;
    font-size: .9rem;
}

.autocomplete-item:first-child {
    border-top: 1px solid #ddd;
    border-radius: 0 0 8px 8px;
}

.autocomplete-item:hover {
    background: var(--primario);
    color: #111;
}

/* ---------- Página pública ---------- */
.publico-body {
    background: linear-gradient(160deg, #111 0%, #1f1f1f 60%, #2a2a2a 100%);
    min-height: 100vh;
}

.publico-navbar {
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
}

.publico-footer {
    color: rgba(255,255,255,.55);
    padding: 1.5rem;
    font-size: .85rem;
}

.publico-buscador {
    max-width: 720px;
    margin: 0 auto;
}

.publico-logo {
    max-height: 110px;
    margin-bottom: 1.25rem;
}

.publico-titulo {
    color: #fff;
    font-weight: 800;
    letter-spacing: .5px;
}

.publico-subtitulo {
    color: rgba(255,255,255,.7);
}

/* ---------- Modo oscuro ---------- */
[data-bs-theme="dark"] body { background: #16181d; }
[data-bs-theme="dark"] .topbar,
[data-bs-theme="dark"] .app-footer,
[data-bs-theme="dark"] .btn-icon { background: #1f2229; border-color: #2c3038; color: #eee; }
[data-bs-theme="dark"] .topbar-title { color: #fff; }
[data-bs-theme="dark"] .content { color: #e8e8e8; }

/* ---------- Autenticación (login, recuperar) ---------- */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, #f2f2f4 0%, #e6e6ea 100%);
}

[data-bs-theme="dark"] .auth-body {
    background: linear-gradient(160deg, #16181d 0%, #101216 100%);
}

.auth-wrapper {
    width: 100%;
    max-width: 400px;
}

.auth-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
    padding: 2rem 1.75rem;
}

[data-bs-theme="dark"] .auth-card {
    background: #1f2229;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

.auth-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.25rem;
}

.auth-logo img {
    max-width: 100%;
    max-height: 92px;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #ffffff;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.auth-title {
    text-align: center;
    font-weight: 800;
    font-size: 1.35rem;
    margin-bottom: .25rem;
    color: #111111;
}

[data-bs-theme="dark"] .auth-title {
    color: #f5f5f5;
}

.auth-subtitle {
    text-align: center;
    color: #6b7280;
    font-size: .85rem;
    margin-bottom: 1.5rem;
}

/* ---------- Varios ---------- */
.w-40 { width: 40%; }

.modal-content {
    border-radius: 14px;
    border: none;
}

@media print {
    .sidebar, .topbar, .app-footer, .no-print { display: none !important; }
    .main-wrapper { margin-left: 0; }
    .content { padding: 0; }
}