:root {
    --alg-bg: #0f172a;
    --alg-surface: #1e293b;
    --alg-surface-2: #273449;
    --alg-border: #334155;
    --alg-text: #e2e8f0;
    --alg-text-muted: #94a3b8;
    --alg-accent: #f59e0b;
    --alg-accent-2: #0ea5e9;
    --alg-success: #22c55e;
    --alg-warning: #f97316;
    --alg-danger: #ef4444;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    background: var(--alg-bg);
    color: var(--alg-text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow: hidden; /* pantalla completa tipo videojuego, sin scroll de página */
}

/* -------------------------------------------------------------------
   El mapa ocupa TODA la pantalla; el resto es un HUD superpuesto.
   ------------------------------------------------------------------- */
.alg-map-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.alg-hud {
    position: fixed;
    z-index: 20;
}

.alg-panel {
    background: rgba(30, 41, 59, 0.94);
    border: 1px solid var(--alg-border);
    border-radius: 16px;
    padding: 16px;
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.alg-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.alg-panel-header h2 {
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--alg-text-muted);
}

.alg-panel-sub {
    font-size: 12px;
    color: var(--alg-text-muted);
    margin: 6px 0 12px 0;
}

.alg-btn-icon {
    background: none;
    border: 1px solid var(--alg-border);
    border-radius: 10px;
    color: var(--alg-text);
    font-size: 16px;
    padding: 4px 8px;
    cursor: pointer;
}

/* -------------------------------------------------------------------
   Barra superior
   ------------------------------------------------------------------- */
.alg-hud-top {
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0));
}

.alg-header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 15px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.alg-header-icon { font-size: 20px; }

.alg-hud-top-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.alg-points-pill {
    display: flex;
    align-items: baseline;
    gap: 6px;
    background: rgba(30, 41, 59, 0.94);
    border: 1px solid var(--alg-border);
    border-radius: 999px;
    padding: 6px 14px;
}

.alg-points-label { color: var(--alg-text-muted); font-size: 11px; }
.alg-points-value { color: var(--alg-accent); font-weight: 800; font-size: 18px; }

.alg-mode-toggle {
    border: 1px solid var(--alg-success);
    background: #14351f;
    color: var(--alg-success);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.alg-mode-toggle.alg-mode-off {
    border-color: var(--alg-warning);
    background: #3b1d0c;
    color: var(--alg-warning);
}


.alg-mode-lost {
    top: 58px; right: 16px;
    background: #3b1d0c;
    color: var(--alg-warning);
    border: 1px solid var(--alg-warning);
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
}

.alg-showcase-banner {
    top: 58px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(90deg, rgba(14,165,233,0.9), rgba(245,158,11,0.9));
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    max-width: 90vw;
}

/* -------------------------------------------------------------------
   Tablón de cargas / HUD de misión (mismo hueco, uno u otro)
   ------------------------------------------------------------------- */
.alg-job-board, .alg-mission-hud {
    top: 80px; right: 16px;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.alg-job-list { display: flex; flex-direction: column; gap: 10px; }

.alg-job-card {
    background: var(--alg-surface-2);
    border: 1px solid var(--alg-border);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.alg-job-card:hover { border-color: var(--alg-accent-2); transform: translateY(-1px); }
.alg-job-shipper { font-weight: 700; font-size: 13px; color: var(--alg-accent-2); }
.alg-job-route { font-weight: 700; font-size: 15px; margin: 4px 0; }
.alg-job-meta { font-size: 12px; color: var(--alg-text-muted); display: flex; justify-content: space-between; }
.alg-job-accept {
    margin-top: 8px; width: 100%; padding: 8px; border: none; border-radius: 8px;
    background: var(--alg-accent); color: #1a1a1a; font-weight: 700; cursor: pointer;
}

.alg-mission-route { font-weight: 700; font-size: 17px; margin: 6px 0; }
.alg-mission-cargo, .alg-mission-meta { font-size: 12px; color: var(--alg-text-muted); margin: 2px 0; }

.alg-progress-track {
    width: 100%; height: 10px; background: var(--alg-surface-2);
    border-radius: 999px; overflow: hidden; margin: 10px 0;
}
.alg-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--alg-accent-2), var(--alg-accent));
    transition: width 0.15s linear;
}

.alg-mission-actions { display: flex; flex-direction: column; gap: 8px; }

.alg-btn {
    border: none; border-radius: 12px; padding: 10px 16px;
    font-weight: 700; font-size: 14px; cursor: pointer;
}
.alg-btn-primary { background: var(--alg-accent); color: #1a1a1a; }
.alg-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.alg-btn-speed {
    background: rgba(239, 68, 68, 0.18);
    color: var(--alg-danger);
    border: 1px solid var(--alg-danger);
}
.alg-btn-home { background: var(--alg-surface-2); color: var(--alg-text); border: 1px solid var(--alg-border); }

.alg-last-event {
    margin-top: 10px; padding: 10px; border-radius: 10px; font-size: 13px;
    background: var(--alg-surface-2);
}
.alg-last-event.alg-event-penalty { border-left: 3px solid var(--alg-warning); }
.alg-last-event.alg-event-clean { border-left: 3px solid var(--alg-success); }

/* -------------------------------------------------------------------
   Control de la Guardia Civil: evento en vivo, a pantalla completa
   ------------------------------------------------------------------- */
.alg-checkpoint-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(15, 23, 42, 0.88);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: alg-flash-bg 1s infinite;
}

@keyframes alg-flash-bg {
    0%, 100% { background-color: rgba(30, 41, 130, 0.5); }
    50% { background-color: rgba(130, 20, 20, 0.5); }
}

.alg-checkpoint-card {
    background: var(--alg-surface);
    border: 2px solid var(--alg-danger);
    border-radius: 20px;
    padding: 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.5);
}

.alg-checkpoint-lights {
    font-size: 40px;
    animation: alg-pulse 0.6s infinite alternate;
}

@keyframes alg-pulse {
    from { opacity: 0.5; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1.05); }
}

.alg-checkpoint-result {
    margin-top: 16px;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
}
.alg-checkpoint-result.alg-passed { background: rgba(34, 197, 94, 0.18); color: var(--alg-success); }
.alg-checkpoint-result.alg-fined { background: rgba(239, 68, 68, 0.18); color: var(--alg-danger); }

/* -------------------------------------------------------------------
   Panel de recomendación y contador de flota
   ------------------------------------------------------------------- */
.alg-tip-panel {
    bottom: 70px; left: 16px;
    max-width: 320px;
    padding: 10px 14px;
    font-size: 12px;
}

.alg-fleet-counter {
    bottom: 70px; right: 16px;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid var(--alg-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--alg-text-muted);
}
.alg-fleet-counter strong { color: var(--alg-accent-2); }

/* Todos los camiones ajenos (fantasma o de otro jugador real) son iguales:
   un camión estándar discreto, para que el del jugador destaque por contraste. */
.alg-truck-other { font-size: 15px; opacity: 0.6; filter: grayscale(35%); }

/* El camión del propio jugador debe ser inconfundible en el mapa. */
.alg-truck-player {
    font-size: 26px;
    line-height: 30px;
    text-align: center;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.95));
}
/* La animación va en un elemento interior: el transform del contenedor lo usa
   Leaflet para colocar el marcador en el mapa y no se puede pisar. */
.alg-truck-player-inner {
    display: inline-block;
    animation: alg-player-truck-pulse 1.4s ease-in-out infinite;
}
@keyframes alg-player-truck-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
.alg-player-truck-tag {
    background: var(--alg-accent);
    color: #1a1a1a;
    font-weight: 800;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

/* -------------------------------------------------------------------
   Pie: Ir a casa a comer
   ------------------------------------------------------------------- */
.alg-footer {
    bottom: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(0deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0));
}
.alg-home-message { font-size: 13px; color: var(--alg-success); font-weight: 600; }

/* -------------------------------------------------------------------
   Overlays de pantalla completa (invitado / resumen de demo)
   ------------------------------------------------------------------- */
.alg-guest-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(15, 23, 42, 0.92);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}

.alg-guest-card {
    background: var(--alg-surface);
    border: 1px solid var(--alg-border);
    border-radius: 20px;
    padding: 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
}

.alg-guest-input {
    width: 100%; padding: 14px; font-size: 16px; border-radius: 12px;
    border: 1px solid var(--alg-border); background: var(--alg-surface-2);
    color: var(--alg-text); margin: 14px 0; box-sizing: border-box;
}
.alg-guest-submit { width: 100%; padding: 14px; font-size: 16px; }

.alg-btn-cta {
    display: inline-block;
    background: var(--alg-accent);
    color: #1a1a1a;
    text-decoration: none;
    margin: 14px 0;
}

.alg-neg { color: var(--alg-danger); }
.alg-pos { color: var(--alg-success); }
.alg-job-deadhead { font-size: 12px; color: var(--alg-warning); font-weight: 600; margin: 4px 0; }
.alg-job-local { font-size: 12px; color: var(--alg-success); font-weight: 600; margin: 4px 0; }
.alg-rest-reminder { margin-top: 6px; color: var(--alg-warning); font-weight: 600; }
.alg-job-tip { display: none; font-size: 12px; color: var(--alg-text-muted); margin: 10px 0 0; }

.alg-autoplay-lock .alg-job-board,
.alg-autoplay-lock .alg-mission-hud,
.alg-autoplay-lock .alg-footer,
.alg-autoplay-lock .alg-phone-action,
.alg-autoplay-lock #alg-btn-show-deca { pointer-events: none; }

/* -------------------------------------------------------------------
   Móvil del conductor con la app APL / papeleo en papel
   ------------------------------------------------------------------- */
.alg-phone-overlay {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}

.alg-phone {
    width: 340px; max-width: 100%;
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    background: #f8fafc; color: #0f172a;
    border: 10px solid #0b1220;
    border-radius: 34px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    animation: alg-slide-up 0.25s ease-out;
}
@keyframes alg-slide-up {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.alg-phone-appbar {
    display: flex; justify-content: space-between; align-items: center;
    background: #0f172a; color: #fff;
    padding: 10px 14px; font-weight: 800; font-size: 13px;
}
.alg-phone-paper-label { display: none; }
.alg-phone-title { margin: 12px 14px 4px; font-size: 16px; }
.alg-phone-body { padding: 0 14px 8px; overflow-y: auto; flex: 1; }
.alg-phone-note { font-size: 13px; color: #475569; margin: 6px 0 10px; }
.alg-phone-note.alg-warn { color: #c2410c; font-weight: 700; }
.alg-phone-action { margin: 8px 14px 14px; }
.alg-phone-busy { height: 6px; margin: 0 14px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.alg-phone-busy > div { height: 100%; width: 0; background: var(--alg-accent); }

/* Sin AutoPyme Logistics: en vez de un móvil, una carpeta de papeles */
.alg-phone.alg-paper-mode {
    border-color: #a16207;
    border-radius: 8px;
    background: #fefce8;
}
.alg-paper-mode .alg-phone-appbar { background: #a16207; }
.alg-paper-mode .alg-phone-app { display: none; }
.alg-paper-mode .alg-phone-paper-label { display: inline; }

.alg-deca-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 10px 12px; font-size: 12px;
}
.alg-deca-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.alg-deca-ref { font-weight: 800; font-family: monospace; font-size: 13px; }
.alg-badge { border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 800; }
.alg-badge-draft { background: #fef3c7; color: #92400e; }
.alg-badge-ok { background: #dcfce7; color: #166534; }
.alg-deca-row { display: flex; flex-direction: column; padding: 4px 0; border-top: 1px solid #f1f5f9; }
.alg-deca-row span { color: #64748b; font-size: 11px; }
.alg-deca-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; color: #64748b; font-size: 11px; }
.alg-qr { display: inline-block; width: 120px; height: 120px; line-height: 0; }
.alg-qr svg { width: 100%; height: 100%; }
.alg-qr-click { cursor: pointer; border-radius: 6px; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.alg-qr-click:hover, .alg-qr-click:focus { transform: scale(1.04); box-shadow: 0 0 0 3px var(--alg-accent); outline: none; }

.alg-paper-sheet {
    background: #fffdf2;
    border: 1px dashed #a8a29e;
    padding: 12px;
    font-family: 'Comic Sans MS', 'Segoe Print', cursive;
    font-size: 13px;
    transform: rotate(-1deg);
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.08);
}
.alg-paper-title { font-family: monospace; font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.alg-paper-row { margin: 4px 0; }
.alg-paper-row span { color: #57534e; }
.alg-paper-blank { color: #a8a29e; }
.alg-paper-doubt { color: #b91c1c; text-decoration: underline wavy #b91c1c; }
.alg-paper-sign { margin-top: 10px; }

.alg-summary { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 8px 12px; font-size: 13px; }
.alg-sum-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.alg-sum-row.alg-info { color: #475569; font-size: 12px; }
.alg-sum-total { display: flex; justify-content: space-between; border-top: 2px solid #0f172a; margin-top: 6px; padding-top: 6px; font-weight: 800; font-size: 15px; }

/* Documentación en el control de la Guardia Civil */
.alg-checkpoint-docs { margin: 12px 0; display: flex; justify-content: center; }
.alg-mini-phone {
    background: #f8fafc; color: #0f172a;
    border: 6px solid #0b1220; border-radius: 18px;
    padding: 0 0 8px; width: 170px;
    display: flex; flex-direction: column; align-items: center; gap: 4px; overflow: hidden;
}
.alg-mini-phone-bar { background: #0f172a; color: #fff; width: 100%; font-size: 11px; font-weight: 800; padding: 5px; }
.alg-mini-phone .alg-qr { width: 110px; height: 110px; }

/* Diálogo con la documentación de la carga */
.alg-doc-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(15, 23, 42, 0.7);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.alg-doc-dialog {
    width: 380px; max-width: 100%; max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    background: #f8fafc; color: #0f172a; border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    animation: alg-slide-up 0.2s ease-out;
}
.alg-doc-dialog .alg-sheet-head h2 { font-size: 15px; }
.alg-doc-dialog .alg-btn-icon { color: #0f172a; border-color: #cbd5e1; }
.alg-doc-body { padding: 0 14px 14px; overflow-y: auto; }
.alg-btn-docs { background: var(--alg-surface-2); color: var(--alg-text); border: 1px solid var(--alg-border); }
.alg-paper-stack { font-size: 34px; color: var(--alg-text-muted); }
.alg-paper-stack div { font-size: 12px; }

/* -------------------------------------------------------------------
   Gestión: racha, barra inferior, paneles de tienda / retos / ranking
   ------------------------------------------------------------------- */
.alg-streak {
    background: #3a1f0a; color: #fdba74; border: 1px solid #f97316;
    border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 13px; white-space: nowrap;
}
.alg-guest-error { color: var(--alg-danger); font-size: 13px; min-height: 18px; margin: 0 0 6px; }
.alg-paper-hint { color: var(--alg-warning); font-style: normal; font-size: 11px; }
.alg-phone-note.alg-ok { color: #15803d; font-weight: 700; }
.alg-phone-secondary {
    margin: 8px 14px 0; background: #e2e8f0; color: #0f172a;
}
.alg-inline-cta { width: 100%; margin: 10px 0 0; font-size: 14px; }
.alg-sum-medal { background: #fef3c7; color: #92400e; border-radius: 10px; padding: 6px 8px; margin-top: 6px; font-weight: 800; }

.alg-nav { display: flex; gap: 8px; }
.alg-nav-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--alg-surface); color: var(--alg-text);
    border: 1px solid var(--alg-border); border-radius: 14px;
    padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.alg-nav-btn:hover { border-color: var(--alg-accent); }
.alg-pause-badge {
    background: #1e3a5f; color: #7dd3fc; border: 1px solid #0ea5e9;
    border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 700; margin: 6px 0;
}
.alg-truck-player { cursor: pointer; }
.alg-autoplay-lock .alg-nav { opacity: 0.4; pointer-events: none; }

.alg-sheet-overlay {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(15, 23, 42, 0.6);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.alg-sheet {
    width: 460px; max-width: 100%; max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    background: var(--alg-surface); border: 1px solid var(--alg-border); border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: alg-slide-up 0.2s ease-out;
}
.alg-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; }
.alg-sheet-head h2 { margin: 0; font-size: 18px; }
.alg-sheet-body { padding: 0 16px 16px; overflow-y: auto; }
.alg-sheet-sub { font-size: 13px; color: var(--alg-text-muted); margin: 4px 0 12px; }
.alg-sheet-h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--alg-text-muted); margin: 16px 0 8px; }
.alg-sheet-cta { width: 100%; margin-top: 12px; }

.alg-shop-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--alg-text-muted); margin: 2px 0 6px; }
.alg-shop-pts { background: #2a2210; border: 1px solid var(--alg-accent); color: var(--alg-accent); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 14px; }
.alg-shop-group { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alg-text-muted); margin: 12px 0 8px; }
.alg-shop-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--alg-surface-2); border: 1px solid var(--alg-border);
    border-radius: 14px; padding: 11px 12px; margin-bottom: 8px;
}
.alg-shop-row-owned { border-color: rgba(34, 197, 94, 0.45); }
.alg-shop-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--alg-bg); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
.alg-shop-info { flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 14px; min-width: 0; }
.alg-shop-info span { color: var(--alg-text-muted); font-size: 12px; }
.alg-shop-owned { color: var(--alg-success); font-weight: 800; font-size: 12px; white-space: nowrap; }
.alg-shop-need { border: 1px dashed #64748b; color: #94a3b8; border-radius: 10px; padding: 7px 10px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.alg-shop-buy {
    background: var(--alg-accent); color: #1a1a1a; border: none; border-radius: 10px;
    padding: 8px 14px; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.alg-swatches { display: flex; gap: 8px; }
.alg-swatch {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: none; padding: 0; cursor: pointer;
    font: 700 11px 'Plus Jakarta Sans', sans-serif; color: #cbd5e1;
}
.alg-swatch i { width: 28px; height: 28px; border-radius: 50%; display: block; border: 2px solid rgba(255, 255, 255, 0.15); }
.alg-swatch-on { color: var(--alg-success); cursor: default; }
.alg-swatch-on i { border-color: #fff; box-shadow: 0 0 0 2px var(--alg-success); }
.alg-swatch-off { opacity: 0.45; cursor: not-allowed; }

/* Pie de la tienda: "Déjate de juegos" hacia AutoPyme Logistics real */
.alg-sheet { overflow: hidden; }
.alg-sheet-foot { flex: 0 0 auto; max-height: 72vh; overflow-y: auto; border-radius: 0 0 20px 20px; }
.alg-sheet-foot:empty { display: none; }
.alg-cut { position: relative; height: 24px; background: var(--alg-surface); }
.alg-cut::before { content: ''; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 2px dashed #475569; }
.alg-cut span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--alg-surface); color: #94a3b8; font-size: 15px; padding: 0 8px; }
.alg-real { background: linear-gradient(160deg, #ffffff 0%, #eef6ff 100%); color: #0f172a; }
.alg-real-toggle {
    width: 100%; display: flex; align-items: center; gap: 12px;
    background: none; border: none; padding: 14px 16px; cursor: pointer; text-align: left;
    font-family: 'Plus Jakarta Sans', sans-serif; color: inherit;
}
.alg-real-logo {
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px;
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    box-shadow: 0 4px 10px rgba(3, 105, 161, 0.3);
}
.alg-real-titles { flex: 1; display: flex; flex-direction: column; }
.alg-real-titles strong { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.alg-real-titles small { font-size: 11px; font-weight: 700; color: #0369a1; }
.alg-real-chevron { font-size: 12px; font-weight: 800; color: #0369a1; background: #e0f2fe; border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.alg-real-more { display: none; padding: 0 16px 16px; }
.alg-real-open .alg-real-more { display: block; animation: alg-slide-up 0.2s ease-out; }
.alg-real-open .alg-real-titles strong { font-size: 24px; }
.alg-real-sub { margin: 0 0 10px; font-size: 14px; color: #334155; }
.alg-real-benefit { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 9px 12px; margin-bottom: 8px; }
.alg-real-benefit b { font-size: 20px; }
.alg-real-benefit div { display: flex; flex-direction: column; font-size: 14px; font-weight: 800; }
.alg-real-benefit span { font-size: 12px; font-weight: 500; color: #475569; }
.alg-real-steps { background: #f0f9ff; border: 1px dashed #7dd3fc; border-radius: 12px; padding: 10px 12px; margin: 4px 0 14px; font-size: 13px; }
.alg-real-steps ol { margin: 6px 0 0; padding-left: 20px; color: #334155; }
.alg-real-steps li { margin: 2px 0; }
.alg-real-cta {
    display: block; text-align: center; background: #0ea5e9; color: #fff; text-decoration: none;
    font-weight: 800; font-size: 15px; border-radius: 12px; padding: 14px;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.35);
}

.alg-streak-card {
    display: flex; align-items: center; gap: 14px;
    background: #3a1f0a; border: 1px solid #f97316; border-radius: 14px; padding: 12px;
}
.alg-streak-card div:last-child { display: flex; flex-direction: column; font-size: 13px; }
.alg-streak-card span { color: #fdba74; font-size: 12px; }
.alg-streak-big { font-size: 30px; font-weight: 800; }
.alg-challenge { background: var(--alg-surface-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.alg-challenge.alg-done { opacity: 0.7; }
.alg-challenge-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.alg-challenge-head strong { color: var(--alg-accent); }
.alg-challenge-count { font-size: 11px; color: var(--alg-text-muted); text-align: right; }
.alg-mini-track { height: 6px; background: var(--alg-bg); border-radius: 999px; overflow: hidden; margin: 6px 0 2px; }
.alg-mini-track > div { height: 100%; background: var(--alg-accent); }
.alg-medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.alg-medal {
    background: var(--alg-surface-2); border: 2px solid var(--alg-border); border-radius: 14px;
    padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 2px; font-size: 12px;
}
.alg-medal span { color: var(--alg-text-muted); }
.alg-medal em { font-style: normal; font-size: 11px; color: var(--alg-text-muted); }
.alg-medal-icon { font-size: 26px; filter: grayscale(100%); opacity: 0.5; }
.alg-tier-1 { border-color: #b45309; } .alg-tier-2 { border-color: #cbd5e1; } .alg-tier-3 { border-color: #facc15; }
.alg-tier-1 .alg-medal-icon, .alg-tier-2 .alg-medal-icon, .alg-tier-3 .alg-medal-icon { filter: none; opacity: 1; }

.alg-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.alg-tabs button {
    flex: 1; padding: 8px; border-radius: 10px; border: 1px solid var(--alg-border);
    background: var(--alg-surface-2); color: var(--alg-text); font-weight: 700; cursor: pointer;
}
.alg-tabs .alg-tab-on { background: var(--alg-accent); color: #1a1a1a; border-color: var(--alg-accent); }
.alg-rank-list { display: flex; flex-direction: column; gap: 6px; }
.alg-rank-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--alg-surface-2); border-radius: 12px; padding: 8px 10px;
}
.alg-rank-me { border: 2px solid var(--alg-accent); }
.alg-rank-pos { width: 34px; text-align: center; font-weight: 800; }
.alg-rank-name { flex: 1; display: flex; flex-direction: column; font-size: 13px; min-width: 0; }
.alg-rank-name span { color: var(--alg-text-muted); font-size: 11px; }
.alg-rank-score { font-weight: 800; color: var(--alg-accent); }

/* Pintura del camión propio (artículo de la tienda) */
.alg-paint-red { filter: hue-rotate(140deg) saturate(1.6) drop-shadow(0 0 6px rgba(239, 68, 68, 0.9)); }
.alg-paint-green { filter: hue-rotate(260deg) saturate(1.4) drop-shadow(0 0 6px rgba(34, 197, 94, 0.9)); }
.alg-paint-blue { filter: hue-rotate(20deg) saturate(1.6) drop-shadow(0 0 6px rgba(14, 165, 233, 0.9)); }

/* Camiones de otros conductores: simulados apagados, reales visibles y con ficha */
.alg-truck-ghost { opacity: 0.35; filter: grayscale(90%); }
.alg-truck-real { opacity: 1; filter: drop-shadow(0 0 3px rgba(14, 165, 233, 0.95)); cursor: pointer; font-size: 17px; }
.alg-truck-card { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-family: 'Plus Jakarta Sans', sans-serif; }
.alg-truck-card span { color: #475569; }
.alg-truck-card em { font-style: normal; font-weight: 700; }

/* -------------------------------------------------------------------
   Cabina: vista del conductor, centro de control digital
   ------------------------------------------------------------------- */
.alg-cabin {
    position: fixed; inset: 0; z-index: 110;
    display: flex; flex-direction: column;
    background: #05080f; color: #e0f2fe;
}
.alg-cab-windshield { position: relative; flex: 1 1 auto; min-height: 36vh; overflow: hidden; }
.alg-version { font-size: 10px; font-weight: 600; color: var(--alg-text-muted); opacity: 0.6; margin-left: 2px; }
.alg-cab-sky {
    position: absolute; inset: 0;
    background: linear-gradient(#2563eb 0%, #60a5fa 34%, #bae6fd 56%, #e0f2fe 60%);
}
.alg-cab-hills { position: absolute; left: -5%; bottom: 38%; width: 110%; height: 16%; fill: #0f1a2e; }
.alg-cab-road-wrap {
    position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
    background: #1b2b1f; overflow: hidden;
    perspective: 220px; perspective-origin: 50% 0%;
}
.alg-cab-road {
    position: absolute; left: 30%; right: 30%; top: 0; height: 320%;
    transform-origin: 50% 0%; transform: rotateX(72deg);
    border-left: 12px solid #e5e7eb; border-right: 12px solid #e5e7eb;
    background-color: #2a2f38;
    background-image: repeating-linear-gradient(to bottom, #f8fafc 0 40px, transparent 40px 90px);
    background-size: 10px 90px; background-repeat: repeat-y; background-position: center 0;
    animation: alg-cab-road-move 0.55s linear infinite;
}
@keyframes alg-cab-road-move {
    from { background-position: center 0; }
    to { background-position: center 90px; }
}
/* Sensación de movimiento: vaivén de curvas, vibración y objetos laterales */
.alg-cab-windshield { --cab-dur: 1.6s; }
.alg-cab-scene { position: absolute; inset: 0; animation: alg-cab-sway 9s ease-in-out infinite alternate; }
.alg-cab-scene-inner { position: absolute; inset: -3%; animation: alg-cab-shake 0.22s linear infinite; }
.alg-cab-over .alg-cab-scene-inner { animation-name: alg-cab-shake-hard; animation-duration: 0.12s; }
@keyframes alg-cab-sway {
    0% { transform: translateX(-1.5%) rotate(-0.6deg); }
    100% { transform: translateX(1.5%) rotate(0.6deg); }
}
@keyframes alg-cab-shake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(0.5px, -0.8px); }
    50% { transform: translate(-0.5px, 0.6px); }
    75% { transform: translate(0.3px, 0.9px); }
}
@keyframes alg-cab-shake-hard {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(1.2px, -1.6px); }
    50% { transform: translate(-1.2px, 1.2px); }
    75% { transform: translate(0.8px, 1.8px); }
}
.alg-cab-hills { animation: alg-cab-hills 24s ease-in-out infinite alternate; }
@keyframes alg-cab-hills {
    from { transform: translateX(-3%); }
    to { transform: translateX(3%); }
}
.alg-cab-side { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.alg-cab-obj {
    position: absolute; left: 50%; top: 60%;
    transform-origin: 50% 100%;
    animation-duration: var(--cab-dur);
    animation-iteration-count: infinite;
    /* Acelera al acercarse, como en una perspectiva real. */
    animation-timing-function: cubic-bezier(0.6, 0.02, 0.98, 0.5);
    will-change: left, top, transform;
}
.alg-cab-post {
    width: 7px; height: 46px; border-radius: 2px;
    background: linear-gradient(#f97316 0 18%, #e5e7eb 18% 100%);
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.6);
}
.alg-cab-tree { font-size: 70px; line-height: 1; filter: brightness(0.45) saturate(0.7); }
.alg-cab-post.alg-cab-left { animation-name: alg-cab-post-left; }
.alg-cab-post.alg-cab-right { animation-name: alg-cab-post-right; }
.alg-cab-tree.alg-cab-left { animation-name: alg-cab-tree-left; }
.alg-cab-tree.alg-cab-right { animation-name: alg-cab-tree-right; }
@keyframes alg-cab-post-left {
    0% { left: 27%; top: 61%; transform: translate(-50%, -100%) scale(0.05); opacity: 0; }
    10% { opacity: 1; }
    100% { left: -34%; top: 102%; transform: translate(-50%, -100%) scale(1.7); opacity: 1; }
}
@keyframes alg-cab-post-right {
    0% { left: 73%; top: 61%; transform: translate(-50%, -100%) scale(0.05); opacity: 0; }
    10% { opacity: 1; }
    100% { left: 134%; top: 102%; transform: translate(-50%, -100%) scale(1.7); opacity: 1; }
}
@keyframes alg-cab-tree-left {
    0% { left: 23%; top: 61%; transform: translate(-50%, -100%) scale(0.06); opacity: 0; }
    12% { opacity: 1; }
    100% { left: -75%; top: 106%; transform: translate(-50%, -100%) scale(2.6); opacity: 1; }
}
@keyframes alg-cab-tree-right {
    0% { left: 77%; top: 61%; transform: translate(-50%, -100%) scale(0.06); opacity: 0; }
    12% { opacity: 1; }
    100% { left: 175%; top: 106%; transform: translate(-50%, -100%) scale(2.6); opacity: 1; }
}
/* Parado: el paisaje no se congela por CSS; lo frena game.js (setSceneMotion) poco a poco. */
.alg-cab-frame {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.75) 100%);
    box-shadow: inset 0 -30px 40px rgba(5, 8, 15, 0.9);
}
.alg-cab-sign {
    position: absolute; top: 14%; right: 12%;
    background: #0f7a3d; color: #fff; border: 3px solid #fff; border-radius: 8px;
    padding: 6px 12px; font-weight: 800; font-size: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.alg-cab-limit {
    position: absolute; top: 14%; left: 10%;
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; color: #111; border: 6px solid #dc2626;
    display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px;
}
.alg-cab-glass-hud {
    position: absolute; left: 50%; bottom: 44%; transform: translateX(-50%);
    text-align: center; color: #67e8f9; text-shadow: 0 0 10px rgba(34, 211, 238, 0.9);
    pointer-events: none;
}
.alg-cab-hud-speed { font: 800 44px ui-monospace, SFMono-Regular, Menlo, monospace; }
.alg-cab-hud-unit { font-size: 13px; margin-left: 4px; }
.alg-cab-hud-next { font-size: 13px; font-weight: 700; }
.alg-cab-over .alg-cab-hud-speed, .alg-cab-over #alg-cab-speed { color: #f87171; text-shadow: 0 0 10px rgba(239, 68, 68, 0.9); }
.alg-cab-exit {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: rgba(15, 30, 50, 0.75); color: #e0f2fe;
    border: 1px solid rgba(34, 211, 238, 0.5); border-radius: 12px;
    padding: 10px 14px; font-weight: 800; cursor: pointer; backdrop-filter: blur(4px);
}

.alg-cab-dash {
    flex: 0 0 auto;
    display: grid; grid-template-columns: 170px 1fr 1fr 1fr; gap: 12px;
    padding: 14px;
    background: linear-gradient(#0a1020, #05080f);
    border-top: 1px solid rgba(34, 211, 238, 0.35);
    box-shadow: 0 -10px 30px rgba(34, 211, 238, 0.08);
}
.alg-cab-panel {
    background: rgba(15, 30, 50, 0.7);
    border: 1px solid rgba(34, 211, 238, 0.3); border-radius: 14px;
    padding: 10px 12px; box-shadow: inset 0 0 20px rgba(34, 211, 238, 0.06);
    min-width: 0;
}
.alg-cab-panel h3 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #67e8f9; }
.alg-cab-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 2px 0; }
.alg-cab-row span { color: #94a3b8; }
.alg-cab-row strong { color: #e0f2fe; text-align: right; }
.alg-cab-row.alg-ok strong { color: #4ade80; }
.alg-cab-row.alg-warn strong { color: #fb923c; }
.alg-cab-row.alg-muted strong { color: #64748b; }
.alg-cab-big { font-size: 16px; font-weight: 800; margin: 0 0 6px; }
.alg-cab-muted { font-size: 11px; color: #94a3b8; margin: 6px 0 0; }
.alg-cab-track { height: 6px; background: #0b1220; border-radius: 999px; overflow: hidden; margin: 4px 0 6px; }
.alg-cab-track > div { height: 100%; background: linear-gradient(90deg, #22d3ee, #f59e0b); }
.alg-cab-track-warn > div { background: #ef4444; }
.alg-cab-deca { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 10px; padding: 8px; margin-top: 6px; font-size: 12px; }
.alg-cab-deca span { display: block; color: #cbd5e1; font-size: 11px; }
.alg-cab-deca.alg-ok { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(74, 222, 128, 0.5); }
.alg-cab-deca.alg-warn { background: rgba(249, 115, 22, 0.12); border: 1px solid rgba(251, 146, 60, 0.5); }
.alg-cab-deca .alg-qr { width: 72px; height: 72px; flex: 0 0 auto; }

.alg-cab-gauge-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.alg-cab-gauge { width: 130px; height: 130px; transform: rotate(135deg); }
.alg-cab-gauge-bg, .alg-cab-gauge-val { fill: none; stroke-width: 10; stroke-linecap: round; }
.alg-cab-gauge-bg { stroke: #1e293b; stroke-dasharray: 245 999; }
.alg-cab-gauge-val { stroke: #22d3ee; stroke-dasharray: 0 999; transition: stroke-dasharray 0.3s ease; filter: drop-shadow(0 0 5px #22d3ee); }
.alg-cab-over .alg-cab-gauge-val { stroke: #ef4444; filter: drop-shadow(0 0 5px #ef4444); }
.alg-cab-gauge-text { position: absolute; top: 42px; display: flex; flex-direction: column; align-items: center; }
.alg-cab-gauge-text strong { font: 800 30px ui-monospace, SFMono-Regular, Menlo, monospace; }
.alg-cab-gauge-text span { font-size: 11px; color: #94a3b8; }
.alg-cab-speed-note { font-size: 11px; color: #67e8f9; margin-top: -10px; text-align: center; }

.alg-cab-controls { grid-column: 1 / -1; display: flex; gap: 10px; }
.alg-cab-btn {
    flex: 1; padding: 12px; border-radius: 12px;
    border: 1px solid rgba(34, 211, 238, 0.45); background: rgba(34, 211, 238, 0.1);
    color: #e0f2fe; font-weight: 800; font-size: 14px; cursor: pointer;
}
.alg-cab-btn:hover { background: rgba(34, 211, 238, 0.2); }
.alg-cab-btn-primary, .alg-cab-btn-primary:hover { background: #22d3ee; color: #0b1220; }
.alg-cab-btn-primary:hover { filter: brightness(1.1); }
.alg-cab-btn-danger, .alg-cab-btn-danger:hover { border-color: #ef4444; background: rgba(239, 68, 68, 0.15); color: #fca5a5; }

/* -------------------------------------------------------------------
   Marchas (velocidad del juego)
   ------------------------------------------------------------------- */
.alg-gearbox {
    left: 16px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: rgba(15, 23, 42, 0.88); border: 1px solid var(--alg-border);
    border-radius: 14px; padding: 8px 6px;
}
.alg-gear-label, .alg-gear-speed { font-size: 10px; font-weight: 800; color: var(--alg-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.alg-gear-speed { color: var(--alg-accent); text-transform: none; }
.alg-gear {
    width: 32px; height: 28px; border-radius: 8px; cursor: pointer;
    background: var(--alg-surface-2); color: var(--alg-text); border: 1px solid var(--alg-border);
    font-weight: 800; font-size: 13px; font-family: inherit;
}
.alg-gear:hover { border-color: var(--alg-accent); }
.alg-gear-on { background: var(--alg-accent); color: #1a1a1a; border-color: var(--alg-accent); box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }

/* -------------------------------------------------------------------
   Modo exhibición: sin jugador, el juego se juega solo
   ------------------------------------------------------------------- */
.alg-join { display: none; }
.alg-autojoin .alg-join {
    display: flex; align-items: center; gap: 14px;
    left: 50%; bottom: 20px; transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95); border: 1px solid var(--alg-accent);
    border-radius: 16px; padding: 12px 14px 12px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.alg-join-text { display: flex; flex-direction: column; font-size: 13px; }
.alg-join-text span { color: var(--alg-text-muted); font-size: 12px; }
.alg-autojoin .alg-join .alg-btn { font-size: 16px; padding: 12px 22px; animation: alg-join-pulse 1.6s ease-in-out infinite; }
@keyframes alg-join-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); } 50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); } }
.alg-guest-cancel { background: none; border: none; color: var(--alg-text-muted); margin-top: 10px; cursor: pointer; font: 600 13px 'Plus Jakarta Sans', sans-serif; }
.alg-autojoin .alg-nav,
.alg-attract #alg-btn-apl-status,
.alg-attract .alg-streak,
.alg-autojoin .alg-mission-actions,
.alg-autojoin .alg-job-accept,
.alg-autojoin #alg-btn-refresh-jobs,
.alg-autojoin #alg-cab-btn-shop,
.alg-autojoin #alg-cab-btn-challenges,
.alg-autojoin .alg-tip-panel { display: none !important; }

/* Conductores virtuales (exhibición o demo): sus ventanas son pequeñas, grises
   y arrinconadas; no se confunden con las tuyas ni tapan la pantalla. */
.alg-auto .alg-tip-panel { display: none; }
.alg-auto .alg-phone-overlay {
    background: transparent; pointer-events: none;
    align-items: flex-end; justify-content: flex-start; padding: 0 0 90px 96px;
}
.alg-auto .alg-phone {
    transform: scale(0.6); transform-origin: bottom left;
    filter: grayscale(1); opacity: 0.9; animation: none;
}
.alg-auto .alg-checkpoint-overlay {
    background: transparent; animation: none; pointer-events: none;
    align-items: flex-start; justify-content: flex-start; padding: 80px 0 0 96px;
}
.alg-auto .alg-checkpoint-card {
    transform: scale(0.6); transform-origin: top left;
    filter: grayscale(1); opacity: 0.9; box-shadow: none; border-color: #64748b;
}
.alg-auto .alg-checkpoint-lights { animation: none; }
/* En exhibición el camión es de un conductor de demostración, no el tuyo. */
.alg-attract .alg-player-truck-tag { display: none; }

/* -------------------------------------------------------------------
   Mobile-first: el juego se piensa para jugarse tan bien (o mejor) en el
   móvil como en escritorio. Por debajo de 900px los paneles pasan a ser
   hojas ancladas abajo, a todo lo ancho, con controles táctiles grandes.
   ------------------------------------------------------------------- */
@media (max-width: 900px), (max-height: 500px) {
    .alg-hud-top { padding: 8px 10px; flex-wrap: wrap; }
    .alg-brand-text { display: none; } /* icono basta en pantallas pequeñas */
    /* La versión va bajo el icono para no quitar ancho a la cabecera. */
    .alg-version {
        position: absolute; top: 44px; left: 10px; margin: 0;
        font-size: 9px; opacity: 1; color: #94a3b8;
        background: rgba(15, 23, 42, 0.75); border-radius: 6px; padding: 1px 5px;
    }

    .alg-job-board, .alg-mission-hud {
        top: auto;
        bottom: 64px;
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        max-height: 45vh;
    }

    /* En móvil sobra el consejo flotante; el contador queda como una píldora bajo la cabecera. */
    .alg-tip-panel { display: none; }
    .alg-job-tip { display: block; }
    .alg-hide-narrow { display: none; }
    .alg-fleet-counter { left: 8px; right: auto; bottom: auto; top: 62px; font-size: 11px; padding: 4px 10px; }
    .alg-mode-lost { top: 90px; right: 8px; font-size: 11px; }
    .alg-showcase-banner { top: 118px; }

    .alg-hud-top { flex-wrap: nowrap; }
    .alg-hud-top-right { flex-wrap: nowrap; gap: 6px; }
    .alg-points-pill { padding: 6px 10px; }

    .alg-btn, .alg-mode-toggle, .alg-job-accept {
        min-height: 44px;
        font-size: 15px;
    }
    .alg-mode-toggle { font-size: 13px; padding: 6px 10px; }
    .alg-job-board, .alg-mission-hud { max-height: 40vh; }

    .alg-footer { padding: 8px; flex-direction: column; align-items: stretch; gap: 4px; }
    .alg-nav { width: 100%; }
    .alg-nav-btn { flex: 1; flex-direction: column; gap: 0; padding: 6px; font-size: 18px; }
    .alg-nav-btn span { font-size: 11px; }
    .alg-streak { padding: 6px 8px; font-size: 12px; }
    .alg-sheet-overlay { align-items: flex-end; padding: 0; }
    .alg-sheet { width: 100%; border-radius: 20px 20px 0 0; max-height: 85vh; }
    .alg-gearbox { top: 96px; transform: none; left: 8px; padding: 6px 4px; gap: 3px; }
    .alg-gear { width: 28px; height: 24px; font-size: 12px; }
    .alg-autojoin .alg-join { left: 8px; right: 8px; bottom: 8px; transform: none; }
    .alg-attract .alg-job-board, .alg-attract .alg-mission-hud { bottom: 88px; max-height: 32vh; }
    .alg-auto .alg-phone-overlay { align-items: flex-start; justify-content: flex-end; padding: 96px 8px 0 0; }
    .alg-auto .alg-phone { transform: scale(0.5); transform-origin: top right; }
    .alg-attract .alg-showcase-banner { display: none !important; }
    .alg-showcase-banner { font-size: 11px; max-width: 72vw; padding: 6px 12px; }
    .alg-auto .alg-checkpoint-overlay { justify-content: flex-end; padding: 96px 8px 0 0; }
    .alg-auto .alg-checkpoint-card { transform: scale(0.5); transform-origin: top right; }
    .alg-cab-windshield { min-height: 30vh; }
    .alg-cab-dash { grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; max-height: 62vh; overflow-y: auto; }
    .alg-cab-gauge { width: 104px; height: 104px; }
    .alg-cab-gauge-text { top: 30px; }
    .alg-cab-gauge-text strong { font-size: 24px; }
    .alg-cab-hud-speed { font-size: 32px; }
    .alg-cab-sign { font-size: 12px; right: 6%; }
    .alg-cab-limit { width: 36px; height: 36px; font-size: 13px; border-width: 5px; left: 6%; top: 18%; }
    .alg-cab-controls { flex-wrap: wrap; }
    .alg-cab-btn { min-height: 44px; font-size: 13px; }
}

/* -------------------------------------------------------------------
   Móvil: paneles plegables (19.0.2.9.0)
   El tablón y el panel del viaje se pliegan a una línea, las marchas a un
   solo botón, y en horizontal el panel pasa a un lateral: el mapa respira.
   ------------------------------------------------------------------- */
.alg-panel-toggle, .alg-btn-docs-mini, .alg-gear-chip, .alg-count-badge:empty { display: none; }
.alg-count-badge {
    display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px;
    border-radius: 999px; background: var(--alg-accent); color: #1a1a1a;
    font-size: 11px; line-height: 18px; text-align: center; vertical-align: middle;
}

@media (max-width: 900px), (max-height: 500px) {
    .alg-job-board, .alg-mission-hud { padding: 8px 12px 12px; }
    /* Asa para indicar que el panel se pliega */
    .alg-job-board::before, .alg-mission-hud::before {
        content: ''; display: block; width: 36px; height: 4px; margin: 0 auto 6px;
        border-radius: 2px; background: rgba(148, 163, 184, 0.55);
    }
    .alg-job-board .alg-panel-header, .alg-mission-hud .alg-panel-header { cursor: pointer; }
    .alg-panel-header h2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .alg-panel-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; flex-shrink: 0;
        background: var(--alg-surface-2); border: 1px solid var(--alg-border); border-radius: 10px;
        color: var(--alg-text); font-size: 20px; line-height: 1; cursor: pointer;
        transition: transform 0.2s ease;
    }
    .alg-collapsed .alg-panel-toggle { transform: rotate(180deg); }
    .alg-btn-docs-mini { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; }

    /* Plegado: solo la cabecera (y en el viaje, la ruta y el progreso) */
    .alg-job-board.alg-collapsed > :not(.alg-panel-header) { display: none !important; }
    .alg-mission-hud.alg-collapsed > :not(.alg-panel-header):not(.alg-mission-route):not(.alg-progress-track):not(.alg-pause-badge) { display: none !important; }
    .alg-mission-hud.alg-collapsed .alg-mission-route { margin: 2px 0 6px; font-size: 15px; }
    .alg-mission-hud.alg-collapsed .alg-progress-track { margin: 0; }
    .alg-collapsed { overflow: hidden; }

    /* Desplegado: acciones del viaje en dos columnas en lugar de una pila */
    .alg-mission-actions { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .alg-mission-actions .alg-btn { flex: 1 1 calc(50% - 6px); min-height: 40px; font-size: 13px; padding: 8px 10px; }
    .alg-mission-actions #alg-btn-docs { display: none; } /* ya está el 📄 en la cabecera */
    .alg-panel-sub { margin: 2px 0 8px; }

    /* Marchas: un botón con la marcha actual; al tocarlo, la fila 1-7 */
    .alg-gearbox {
        flex-direction: row-reverse; justify-content: flex-end; align-items: center;
        gap: 4px; padding: 4px; border-radius: 12px;
    }
    .alg-gearbox > .alg-gear, .alg-gearbox > .alg-gear-label, .alg-gearbox > .alg-gear-speed { display: none; }
    .alg-gearbox.alg-gear-open > .alg-gear { display: inline-block; width: 32px; height: 32px; font-size: 13px; }
    .alg-gear-chip {
        order: 99; display: inline-flex; align-items: center; gap: 4px;
        height: 32px; padding: 0 10px; border-radius: 9px; cursor: pointer;
        background: var(--alg-surface-2); color: var(--alg-text); border: 1px solid var(--alg-border);
        font-family: inherit; font-size: 13px;
    }
    .alg-gear-chip strong { color: var(--alg-accent); }
    .alg-gearbox:not(.alg-gear-open) { background: none; border: none; padding: 0; box-shadow: none; }
    .alg-gear-chip { background: rgba(15, 23, 42, 0.88); }
    .alg-gear-chip small { color: var(--alg-text-muted); font-size: 11px; }
}

/* Pantallas estrechas: la explicación del tablón ya está en cada carga */
@media (max-width: 400px) {
    #alg-job-board-sub { display: none; }
    /* Exhibición: tarjeta "Probar yo" compacta y el panel del viaje justo encima */
    .alg-autojoin .alg-join { padding: 8px 8px 8px 12px; gap: 8px; }
    .alg-autojoin .alg-join .alg-btn { font-size: 15px; padding: 10px 14px; min-height: 44px; white-space: nowrap; }
    .alg-join-text { font-size: 12px; }
    .alg-join-text span { font-size: 11px; }
    .alg-attract .alg-job-board, .alg-attract .alg-mission-hud { bottom: 84px; }
    .alg-auto .alg-phone, .alg-auto .alg-checkpoint-card { transform: scale(0.42); }
}

/* Móvil en horizontal: poca altura, el panel pasa a la derecha */
@media (max-height: 500px) {
    .alg-hud-top { padding: 6px 10px; }
    .alg-version { top: 38px; }
    .alg-fleet-counter { top: 50px; }
    .alg-gearbox { top: 84px; }
    .alg-job-board, .alg-mission-hud,
    .alg-attract .alg-job-board, .alg-attract .alg-mission-hud {
        left: auto; right: 8px; top: 52px; bottom: auto;
        width: min(46vw, 380px); max-height: calc(100vh - 118px);
    }
    .alg-footer { padding: 4px 8px; }
    .alg-nav-btn { padding: 3px 6px; font-size: 16px; }
    .alg-nav-btn span { font-size: 10px; }
    .alg-autojoin .alg-join { left: 8px; right: auto; bottom: 8px; max-width: 52vw; padding: 8px 10px; gap: 10px; }
    .alg-autojoin .alg-join .alg-btn { font-size: 14px; padding: 8px 14px; min-height: 40px; }
    .alg-join-text span { display: none; }
    .alg-phone-overlay, .alg-guest-overlay, .alg-checkpoint-overlay { padding: 8px; }
    .alg-phone { max-height: calc(100vh - 16px); overflow-y: auto; }
    .alg-guest-card, .alg-checkpoint-card { max-height: calc(100vh - 16px); overflow-y: auto; }
}

/* -------------------------------------------------------------------
   Menos texto (19.0.2.10.0): iconos y números en lugar de frases
   ------------------------------------------------------------------- */
/* DeCA compacto en el móvil del conductor (el completo, en "Documentación") */
.alg-deca-compact { text-align: center; }
.alg-deca-compact .alg-deca-head { text-align: left; }
.alg-deca-big { font-size: 18px; font-weight: 800; margin: 10px 0 2px; color: #0f172a; }
.alg-deca-small { font-size: 13px; color: #64748b; }
.alg-deca-compact .alg-deca-qr { margin-top: 10px; }

/* Resultado del viaje: el número manda */
.alg-sum-big { text-align: center; font-size: 40px; font-weight: 900; line-height: 1.1; padding: 6px 0 8px; }
.alg-sum-big small { font-size: 15px; font-weight: 700; margin-left: 4px; opacity: 0.7; }
.alg-sum-big.alg-pos { color: #16a34a; }
.alg-sum-big.alg-neg { color: #dc2626; }
.alg-summary .alg-sum-row { font-size: 14px; }
.alg-summary + .alg-phone-note, .alg-summary ~ .alg-phone-note { text-align: center; }

/* Tablón: ruta y neto arriba, datos en fichas, un botón */
.alg-job-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.alg-job-top .alg-job-route { margin: 0; font-size: 16px; }
.alg-job-net { font-size: 20px; font-weight: 900; white-space: nowrap; }
.alg-job-net small { font-size: 11px; margin-left: 2px; opacity: 0.8; }
.alg-job-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.alg-job-chips span {
    padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--alg-surface-2); color: var(--alg-text-muted); border: 1px solid var(--alg-border);
}
.alg-job-chips .alg-chip-warn { color: #fb923c; border-color: rgba(251, 146, 60, 0.45); }
.alg-job-chips .alg-chip-ok { color: #4ade80; border-color: rgba(74, 222, 128, 0.45); }
.alg-paper-stack { font-size: 34px; text-align: center; }
#alg-job-board-sub:empty { display: none; }

/* -------------------------------------------------------------------
   Tienda, retos, ranking y cabina: estilo ligero (19.0.2.11.0)
   Sin cajas dentro de cajas: listas con separadores finos y más aire.
   ------------------------------------------------------------------- */
.alg-sheet-head h2 { display: flex; align-items: center; gap: 10px; }
.alg-sheet-head .alg-shop-pts { font-size: 13px; padding: 3px 10px; }

.alg-shop-row, .alg-challenge, .alg-rank-row {
    background: transparent; border: none; border-radius: 0; box-shadow: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    padding: 12px 2px; margin: 0;
}
.alg-shop-row:last-child, .alg-challenge:last-of-type, .alg-rank-row:last-child { border-bottom: none; }
.alg-shop-row-owned { border-color: rgba(148, 163, 184, 0.14); }
.alg-shop-ico { background: transparent; font-size: 26px; width: 36px; height: 36px; }
.alg-shop-info strong { font-size: 15px; }
.alg-shop-buy { padding: 8px 14px; }
.alg-shop-need { border: none; padding: 8px 4px; color: var(--alg-text-muted); }
.alg-shop-owned { font-size: 18px; }
.alg-swatch { gap: 0; font-size: 11px; }

/* Tarjeta real: ventajas en una línea, sin recuadros */
.alg-real-benefit { background: none; border: none; padding: 6px 0; margin: 0; align-items: center; }
.alg-real-benefit div { font-weight: 700; }
.alg-real-note { margin: 8px 0 0; text-align: center; font-size: 11px; color: #64748b; }
.alg-real-cta { margin-top: 10px; }

/* Retos: la racha en una línea */
.alg-streak-line { display: flex; align-items: baseline; gap: 8px; padding: 4px 2px 8px; font-size: 14px; color: var(--alg-text-muted); }
.alg-streak-line .alg-streak-big { font-size: 28px; color: var(--alg-text); }
.alg-streak-line small { margin-left: auto; font-size: 12px; }
.alg-challenge-head { font-size: 14px; }
.alg-challenge-bar { display: flex; align-items: center; gap: 8px; }
.alg-challenge-bar .alg-mini-track { flex: 1; margin: 6px 0 0; }
.alg-challenge-bar small { font-size: 11px; color: var(--alg-text-muted); min-width: 44px; text-align: right; margin-top: 6px; }
.alg-challenge.alg-done { opacity: 0.55; }

/* Medallas: icono grande, sin tarjeta */
.alg-medal-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
.alg-medal { background: none; border: none; padding: 4px 2px; }
.alg-medal-icon { font-size: 32px; }
.alg-medal strong { font-size: 12px; }
.alg-medal .alg-mini-track { height: 4px; }

/* Ranking */
.alg-rank-me { border: none; border-left: 3px solid var(--alg-accent); padding-left: 8px; background: rgba(245, 158, 11, 0.06); }
.alg-rank-score { font-size: 16px; }
.alg-sheet .alg-mini-track { height: 4px; background: rgba(148, 163, 184, 0.18); }

/* -------------------------------------------------------------------
   Vista de cabina como pantalla principal (19.0.2.12.0)
   El parabrisas ocupa toda la pantalla y el mapa real es el GPS del
   salpicadero; tocándolo se abre en grande. Los paneles van por encima.
   ------------------------------------------------------------------- */
.alg-gps-badge { display: none; }
.alg-view-cabin .alg-cabin { z-index: 1; }
.alg-view-cabin .alg-cab-dash,
.alg-view-cabin #alg-cab-close,
.alg-view-cabin #alg-btn-cabin { display: none !important; }
.alg-view-cabin .alg-cab-windshield { min-height: 100vh; min-height: 100dvh; }

/* Carteles del parabrisas junto al horizonte, lejos del GPS y de los paneles */
.alg-view-cabin .alg-cab-sign { top: 36%; right: auto; left: 56%; }
.alg-view-cabin .alg-cab-limit { top: 36%; left: 8%; }
.alg-view-cabin .alg-cab-glass-hud { bottom: auto; top: 46%; }

/* GPS del salpicadero */
.alg-view-cabin #alg-map {
    position: fixed; inset: auto; z-index: 15;
    left: 84px; bottom: 96px; width: 320px; height: 220px;
    border-radius: 18px; overflow: hidden; cursor: pointer;
    border: 3px solid #0b1220;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.45), 0 14px 30px rgba(0, 0, 0, 0.55);
}
.alg-view-cabin .alg-gps-badge {
    display: block; position: absolute; top: 6px; left: 6px; z-index: 1000;
    padding: 2px 8px; border-radius: 999px; pointer-events: none;
    background: rgba(15, 23, 42, 0.85); color: #67e8f9; font-size: 11px; font-weight: 800;
}
.alg-view-cabin #alg-map .leaflet-tooltip { display: none; }   /* sin rótulos: es una pantalla pequeña */
.alg-view-cabin #alg-map .leaflet-control-attribution { font-size: 7px; }

@media (max-width: 900px), (max-height: 500px) {
    .alg-view-cabin #alg-map {
        left: auto; right: 10px; bottom: auto; top: 64px;
        width: min(44vw, 230px); height: min(33vw, 170px); border-radius: 14px;
    }
    .alg-view-cabin .alg-cab-sign { top: 34%; left: auto; right: 8%; font-size: 13px; }
    .alg-view-cabin .alg-cab-limit { top: 34%; left: 6%; }
    .alg-view-cabin .alg-cab-glass-hud { top: 40%; }
    .alg-view-cabin .alg-cab-hud-speed { font-size: 38px; }
}
@media (max-height: 500px) {
    .alg-view-cabin #alg-map { top: auto; right: auto; left: 8px; bottom: 64px; width: 30vw; height: 38vh; }
    .alg-view-cabin .alg-cab-sign { top: 22%; right: auto; left: 34%; }
    .alg-view-cabin .alg-cab-limit { top: 22%; left: 20%; }
    .alg-view-cabin .alg-cab-glass-hud { top: 30%; left: 32%; }
}
.alg-view-cabin .alg-tip-panel { display: none; }

/* -------------------------------------------------------------------
   GPS a la derecha + barra de herramientas + app APL (19.0.2.13.0)
   ------------------------------------------------------------------- */
/* Escritorio: GPS y barra a la derecha, bajo los puntos; los paneles pasan a la izquierda */
.alg-view-cabin #alg-map { left: auto; right: 16px; bottom: auto; top: 64px; width: 300px; height: 200px; }
.alg-view-cabin .alg-job-board, .alg-view-cabin .alg-mission-hud { right: auto; left: 96px; }

.alg-toolbar {
    right: 16px; top: 272px; width: 300px;
    display: flex; gap: 6px; padding: 6px;
    background: rgba(5, 8, 15, 0.82); border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: 14px; backdrop-filter: blur(4px);
}
.alg-view-map .alg-toolbar { top: 64px; right: auto; left: 16px; }
.alg-autojoin .alg-toolbar { display: none; }
.alg-tb-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 6px 4px; border-radius: 10px; cursor: pointer; font-family: inherit;
    background: rgba(34, 211, 238, 0.08); border: 1px solid transparent; color: #e0f2fe; font-size: 20px;
}
.alg-tb-btn span { font-size: 11px; font-weight: 700; color: #67e8f9; }
.alg-tb-btn:hover { border-color: rgba(34, 211, 238, 0.6); }
.alg-tb-locked { opacity: 0.55; }
.alg-tb-locked span { color: var(--alg-text-muted); }

/* La lista de cargas, como la pantalla del móvil del conductor */
.alg-view-cabin .alg-job-board {
    background: #0f172a; border: 6px solid #05080f; border-radius: 26px;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25), 0 18px 40px rgba(0, 0, 0, 0.6);
}

/* App APL */
.alg-apl-overlay {
    position: fixed; inset: 0; z-index: 160;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(2, 6, 23, 0.55);
}
.alg-apl-phone {
    width: 340px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto;
    background: #f8fafc; color: #0f172a; border: 10px solid #0b1220; border-radius: 34px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); animation: alg-slide-up 0.25s ease-out;
}
.alg-apl-bar {
    position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: #0284c7; color: #fff; font-weight: 800; font-size: 14px;
}
.alg-apl-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; }
.alg-apl-body { padding: 12px 14px 16px; }
.alg-apl-company { font-size: 12px; color: #64748b; font-weight: 700; }
.alg-apl-h { display: flex; align-items: center; gap: 6px; margin: 6px 0 10px; font-size: 16px; }
.alg-apl-h span { background: #e0f2fe; color: #0369a1; border-radius: 999px; padding: 0 8px; font-size: 12px; }
.alg-apl-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 12px; }
.alg-apl-card-head { display: flex; justify-content: space-between; align-items: center; font-family: monospace; }
.alg-apl-route { font-size: 17px; font-weight: 800; margin: 8px 0 4px; }
.alg-apl-meta { font-size: 13px; color: #475569; margin: 2px 0; }
.alg-apl-sign { font-size: 13px; font-weight: 700; color: #64748b; margin-top: 6px; }
.alg-apl-sign.alg-ok { color: #15803d; }
.alg-apl-qr { text-align: center; margin-top: 10px; }
.alg-apl-empty { text-align: center; color: #64748b; font-size: 14px; padding: 18px 0; line-height: 1.5; }
.alg-apl-real { display: block; text-align: center; margin-top: 14px; font-size: 12px; font-weight: 700; color: #0284c7; text-decoration: none; }
.alg-apl-locked { text-align: center; padding: 22px 6px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.alg-apl-lock { font-size: 40px; }

@media (max-width: 900px), (max-height: 500px) {
    .alg-view-cabin #alg-map { left: auto; right: 10px; top: 64px; width: min(44vw, 230px); height: min(33vw, 170px); }
    .alg-view-cabin .alg-job-board, .alg-view-cabin .alg-mission-hud { left: 8px; right: 8px; }
    .alg-toolbar, .alg-view-map .alg-toolbar {
        right: 10px; left: auto; width: min(44vw, 230px); padding: 4px; gap: 4px;
        top: calc(64px + min(33vw, 170px) + 6px);
    }
    .alg-view-map .alg-toolbar { top: 64px; }
    .alg-tb-btn { font-size: 17px; padding: 4px 2px; }
    .alg-tb-btn span { font-size: 10px; }
    /* Cartel y velocidad bajan un poco para dejar sitio a la barra */
    .alg-view-cabin .alg-cab-sign { top: 38%; }
    .alg-view-cabin .alg-cab-limit { top: 38%; }
    .alg-view-cabin .alg-cab-glass-hud { top: 44%; }
}
@media (max-height: 500px) {
    .alg-view-cabin #alg-map { top: auto; right: auto; left: 8px; bottom: 64px; width: 30vw; height: 38vh; }
    .alg-view-cabin .alg-job-board, .alg-view-cabin .alg-mission-hud { left: auto; right: 8px; }
    .alg-toolbar { left: 8px; right: auto; width: 30vw; top: auto; bottom: calc(64px + 38vh + 6px); }
    .alg-view-map .alg-toolbar { left: 8px; right: auto; top: auto; bottom: 64px; }
    .alg-apl-overlay { padding: 8px; }
    .alg-apl-phone { max-height: calc(100vh - 16px); }
}
@media (max-height: 500px) {
    .alg-view-cabin .alg-cab-limit { top: 56%; left: 34%; }
    .alg-view-cabin .alg-cab-glass-hud { top: 44%; left: 62%; }
}

/* -------------------------------------------------------------------
   El móvil del conductor en su soporte + pantalla grande (19.0.2.14.0)
   ------------------------------------------------------------------- */
/* El mapa vive dentro del móvil (pequeño o grande): anula el posicionamiento anterior */
.alg-dock-screen #alg-map, .alg-center-map #alg-map {
    position: absolute !important; inset: 0 !important;
    width: auto !important; height: auto !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important; z-index: 0 !important;
}
.alg-gps-badge, .alg-view-cabin .alg-gps-badge { display: none !important; }
.alg-dock-screen .leaflet-control-attribution { display: none; }

/* Soporte */
.alg-mount { position: fixed; z-index: 36; right: 26px; top: 72px; }
.alg-autojoin .alg-mount .alg-dock-tabs { pointer-events: none; opacity: 0.6; }
.alg-mount::before, .alg-mount::after {              /* pinzas laterales */
    content: ''; position: absolute; top: 38%; z-index: 2; width: 9px; height: 54px;
    background: linear-gradient(90deg, #111827, #4b5563, #111827); border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.alg-mount::before { left: -7px; }
.alg-mount::after { right: -7px; }
.alg-mount-arm {                                     /* brazo hacia el salpicadero */
    position: absolute; left: 50%; top: 92%; width: 14px; height: 90px; transform: translateX(-50%);
    background: linear-gradient(90deg, #111827, #4b5563 50%, #111827); border-radius: 0 0 8px 8px;
}
.alg-mount-arm::after {
    content: ''; position: absolute; left: 50%; bottom: -10px; width: 28px; height: 16px; transform: translateX(-50%);
    background: #1f2937; border-radius: 50% 50% 6px 6px;
}

/* El móvil */
.alg-dock-phone {
    position: relative; z-index: 1; width: 150px; height: 272px;
    display: flex; flex-direction: column; padding: 6px 6px 7px;
    background: #05080f; border-radius: 26px;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.3), 0 14px 30px rgba(0, 0, 0, 0.65);
}
.alg-dock-notch { width: 42px; height: 5px; margin: 1px auto 5px; border-radius: 3px; background: #1f2937; }
.alg-dock-screen {
    position: relative; flex: 1; overflow: hidden; cursor: pointer;
    border-radius: 18px 18px 0 0; background: #0f172a; color: #e2e8f0;
}
.alg-dock-pane { position: absolute; inset: 0; display: none; }
.alg-dock-pane.alg-on { display: block; }
.alg-dock-away::after {
    content: '🗺️ En grande'; position: absolute; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.8); color: #67e8f9; font-size: 11px; font-weight: 800;
}
.alg-dock-tabs { display: flex; background: #0b1220; border-radius: 0 0 18px 18px; overflow: hidden; }
.alg-dock-tabs button, .alg-center-tabs button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: none; border: none; color: #94a3b8; cursor: pointer; font-family: inherit;
}
.alg-dock-tabs button { font-size: 16px; padding: 5px 0 4px; }
.alg-dock-tabs button span { font-size: 8px; font-weight: 700; }
.alg-dock-tabs .alg-tab-active, .alg-center-tabs .alg-tab-active { color: #22d3ee; background: rgba(34, 211, 238, 0.12); }

/* Contenido en miniatura */
.alg-dock-deca, .alg-dock-empty, .alg-dock-trip {
    height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px; text-align: center; font-size: 10px;
}
.alg-dock-deca b { font-size: 18px; }
.alg-dock-deca strong { font-family: monospace; font-size: 9px; }
.alg-dock-deca em { font-style: normal; color: #fb923c; font-weight: 700; }
.alg-dock-deca .alg-qr { width: 64px; height: 64px; background: #fff; padding: 3px; border-radius: 4px; }
.alg-dock-empty { color: #64748b; font-size: 22px; }
.alg-dock-empty span { font-size: 10px; font-weight: 700; }
.alg-dock-load {
    display: flex; justify-content: space-between; gap: 4px; align-items: baseline;
    padding: 7px 7px; border-bottom: 1px solid rgba(148, 163, 184, 0.15); font-size: 10px;
}
.alg-dock-load span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alg-dock-load b.alg-pos { color: #4ade80; }
.alg-dock-load b.alg-neg { color: #f87171; }
.alg-dock-trip { font-size: 20px; }
.alg-dock-trip strong { font-size: 10px; }
.alg-dock-bar { width: 85%; height: 4px; border-radius: 2px; background: rgba(148, 163, 184, 0.25); overflow: hidden; }
.alg-dock-bar > div { height: 100%; background: linear-gradient(90deg, #0ea5e9, #f59e0b); }

/* Pantalla grande en el centro de la cabina */
.alg-center {
    position: fixed; z-index: 40; top: 64px; bottom: 76px; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center; pointer-events: none; padding: 0 12px;
}
.alg-center-phone {
    pointer-events: auto; position: relative; display: flex; flex-direction: column;
    width: min(460px, 100%); height: min(640px, 100%);
    background: #0f172a; border: 8px solid #05080f; border-radius: 32px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.3), 0 24px 60px rgba(0, 0, 0, 0.7);
    animation: alg-slide-up 0.2s ease-out;
}
.alg-center[data-tab="deca"] .alg-center-phone { width: min(900px, 100%); }
.alg-center-head { display: flex; align-items: center; gap: 6px; padding: 6px; background: #0b1220; }
.alg-center-tabs { flex: 1; display: flex; gap: 4px; }
.alg-center-tabs button { font-size: 20px; padding: 6px 0; border-radius: 12px; }
.alg-center-tabs button span { font-size: 11px; font-weight: 700; }
.alg-center-close {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; cursor: pointer;
    background: rgba(148, 163, 184, 0.12); border: none; color: #e2e8f0; font-size: 16px;
}
.alg-center-body { position: relative; flex: 1; overflow-y: auto; }
.alg-center-pane { display: none; }
.alg-center-pane.alg-on { display: block; }
.alg-center-map.alg-on { position: absolute; inset: 0; }
.alg-center-loads.alg-on { padding: 10px; }

/* El tablón dentro de la pestaña Cargas: sin su marco de panel flotante */
.alg-center-loads .alg-job-board {
    position: static !important; width: auto !important; max-width: none !important; max-height: none !important;
    margin: 0; padding: 0; background: none; border: none; box-shadow: none; overflow: visible;
}
.alg-center-loads .alg-job-board::before, .alg-center-loads .alg-panel-toggle { display: none !important; }
.alg-center-trip-card {
    display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px;
    background: rgba(14, 165, 233, 0.1); border: 1px solid rgba(14, 165, 233, 0.35); font-size: 20px;
}
.alg-center-trip-card strong { font-size: 16px; }
.alg-center-trip-card span { font-size: 12px; color: var(--alg-text-muted); }

/* DeCA en vertical a la izquierda + marketing a la derecha */
.alg-center-deca.alg-on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px; }
.alg-cdeca-app { background: #f8fafc; color: #0f172a; border-radius: 18px; overflow: hidden; padding-bottom: 10px; }
.alg-cdeca-appbar { background: #0284c7; color: #fff; font-weight: 800; font-size: 13px; padding: 8px 12px; }
.alg-cdeca-paper .alg-cdeca-appbar { background: #92400e; }
.alg-cdeca-app .alg-deca-card, .alg-cdeca-app .alg-paper-sheet { margin: 10px; }
.alg-cdeca-app .alg-apl-sign { margin: 4px 12px 0; }
.alg-cdeca-empty {
    height: 100%; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; border: 2px dashed rgba(148, 163, 184, 0.35); border-radius: 18px; font-size: 40px; color: #64748b;
}
.alg-cdeca-empty strong { font-size: 15px; color: #cbd5e1; }
.alg-cdeca-empty span { font-size: 12px; }
.alg-mkt {
    display: flex; flex-direction: column; gap: 10px; padding: 20px;
    border-radius: 18px; color: #0f172a; background: linear-gradient(160deg, #ffffff 0%, #e0f2fe 100%);
}
.alg-mkt-logo {
    width: 52px; height: 52px; border-radius: 14px; font-size: 28px;
    display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0ea5e9, #2563eb);
}
.alg-mkt h3 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -0.01em; }
.alg-mkt-sub { margin: -6px 0 4px; color: #0369a1; font-weight: 700; font-size: 13px; }
.alg-mkt-item { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 14px; }
.alg-mkt-item b { font-size: 20px; }
.alg-mkt-ok { color: #15803d; font-weight: 800; font-size: 13px; }
.alg-mkt-shop { background: #0f172a; color: #fff; }
.alg-mkt-cta { margin-top: auto; }

/* Carteles del parabrisas lejos del soporte */
.alg-view-cabin .alg-cab-sign { top: 36%; left: 50%; right: auto; transform: translateX(-10%); }

@media (max-width: 900px), (max-height: 500px) {
    .alg-mount { right: 16px; top: 64px; }
    .alg-dock-phone { width: 112px; height: 204px; padding: 5px 5px 6px; border-radius: 22px; }
    .alg-dock-screen { border-radius: 15px 15px 0 0; }
    .alg-dock-tabs { border-radius: 0 0 15px 15px; }
    .alg-dock-tabs button { font-size: 15px; padding: 4px 0 3px; }
    .alg-mount-arm { height: 60px; }
    .alg-center { top: 58px; bottom: 70px; padding: 0 8px; }
    .alg-center-phone { border-width: 6px; border-radius: 26px; }
    .alg-view-cabin .alg-cab-sign { top: 38%; left: 24%; right: auto; transform: none; }
    .alg-view-cabin .alg-cab-limit { top: 38%; left: 5%; }
    .alg-view-cabin .alg-cab-glass-hud { top: 47%; }
}
@media (max-width: 700px) {
    .alg-center-deca.alg-on { grid-template-columns: 1fr; }
    .alg-center[data-tab="deca"] .alg-center-phone { height: 100%; }
}
@media (max-height: 500px) {
    .alg-mount { right: auto; left: 16px; top: 128px; }
    .alg-dock-phone { width: 92px; height: 168px; }
    .alg-mount-arm { height: 40px; }
    .alg-center { top: 8px; bottom: 60px; }
    .alg-view-cabin .alg-cab-sign { top: 22%; left: 40%; }
    .alg-view-cabin .alg-cab-limit { top: 56%; left: 30%; }
    .alg-view-cabin .alg-cab-glass-hud { top: 44%; left: 60%; }
}
.alg-mount { z-index: 45; }
@media (max-width: 900px), (max-height: 500px) {
    /* En pantallas pequeñas la pantalla grande ocupa el ancho: el móvil del soporte se
       aparta y las pestañas se cambian desde su cabecera. */
    .alg-center-open .alg-mount { display: none; }
}
.alg-center-map #alg-map .leaflet-tooltip { display: block; }
.alg-autojoin .alg-mount .alg-dock-screen { pointer-events: none; }
/* Copia fija del mapa grande en el móvil del soporte */
.alg-map-snapshot { position: absolute !important; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; z-index: 1; }
.alg-map-snapshot .leaflet-tooltip, .alg-map-snapshot .leaflet-control-container { display: none !important; }

/* -------------------------------------------------------------------
   Carretera larga por el carril derecho + luz según la hora (19.0.2.16.0)
   Horizonte al 60 % de la escena; todas las líneas van a su punto de fuga.
   ------------------------------------------------------------------- */
.alg-cab-ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.alg-cab-edge { fill: #f1f5f9; }
.alg-cab-beam { display: none; }
.alg-cab-hills { bottom: 40%; height: 12%; }
.alg-cab-lanes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.alg-cab-windshield { --cab-dash-dur: 0.9s; --cab-dash-angle: 30deg; }

/* Marcas de la línea central: del horizonte hacia el conductor, acelerando al acercarse */
.alg-cab-lane {
    position: absolute; left: 50%; top: 60%; width: 11px; height: 64px; border-radius: 2px;
    background: #f8fafc; box-shadow: 0 0 4px rgba(255, 255, 255, 0.35);
    animation: alg-cab-lane var(--cab-dash-dur) cubic-bezier(0.62, 0.02, 0.98, 0.45) infinite;
    will-change: left, top, transform;
}
@keyframes alg-cab-lane {
    0% { left: 50%; top: 60%; transform: translate(-50%, -50%) rotate(var(--cab-dash-angle)) scale(0.02); opacity: 0; }
    6% { opacity: 1; }
    100% { left: 12%; top: 106%; transform: translate(-50%, -50%) rotate(var(--cab-dash-angle)) scale(1.7); opacity: 1; }
}

/* Postes y árboles por los arcenes: el derecho pasa cerca, el izquierdo (al otro lado
   del carril contrario) más lejos */
@keyframes alg-cab-post-left {
    0% { left: 49.6%; top: 60%; transform: translate(-50%, -100%) scale(0.03); opacity: 0; }
    10% { opacity: 1; }
    100% { left: -78%; top: 104%; transform: translate(-50%, -100%) scale(1.6); opacity: 1; }
}
@keyframes alg-cab-post-right {
    0% { left: 50.4%; top: 60%; transform: translate(-50%, -100%) scale(0.03); opacity: 0; }
    10% { opacity: 1; }
    100% { left: 112%; top: 104%; transform: translate(-50%, -100%) scale(1.9); opacity: 1; }
}
@keyframes alg-cab-tree-left {
    0% { left: 49%; top: 60%; transform: translate(-50%, -100%) scale(0.04); opacity: 0; }
    12% { opacity: 1; }
    100% { left: -130%; top: 106%; transform: translate(-50%, -100%) scale(2.6); opacity: 1; }
}
@keyframes alg-cab-tree-right {
    0% { left: 51%; top: 60%; transform: translate(-50%, -100%) scale(0.04); opacity: 0; }
    12% { opacity: 1; }
    100% { left: 150%; top: 106%; transform: translate(-50%, -100%) scale(2.6); opacity: 1; }
}

/* Estrellas (solo de noche) */
.alg-cab-stars {
    position: absolute; inset: 0 0 40% 0; display: none; opacity: 0.8;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 28% 32%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 41% 9%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 57% 26%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 68% 14%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 79% 38%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 88% 8%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 6% 44%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 35% 48%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 94% 30%, #fff 50%, transparent 51%);
}

/* Día: cielo azul claro, sin sol a la vista */
.alg-sky-day .alg-cab-sky { background: linear-gradient(#2563eb 0%, #60a5fa 34%, #bae6fd 56%, #e0f2fe 60%); }
.alg-sky-day .alg-cab-hills { fill: #4d7c5a; }
.alg-sky-day .alg-cab-grass { fill: #4f7f3a; }
.alg-sky-day .alg-asphalt-far { stop-color: #7b8494; }
.alg-sky-day .alg-asphalt-near { stop-color: #3a3f47; }
.alg-sky-day .alg-haze-top { stop-color: #e0f2fe; stop-opacity: 0.8; }
.alg-sky-day .alg-haze-bottom { stop-color: #e0f2fe; stop-opacity: 0; }
.alg-sky-day .alg-cab-tree { filter: brightness(0.95) saturate(0.9); }
.alg-sky-day .alg-cab-glass-hud { color: #0e7490; text-shadow: 0 0 10px rgba(255, 255, 255, 0.9); }
.alg-sky-day .alg-cab-frame { background: radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(0, 0, 0, 0.45) 100%); }

/* Amanecer: tonos suaves, la luz llega por detrás */
.alg-sky-dawn .alg-cab-sky { background: linear-gradient(#1e3a8a 0%, #6d5fa8 34%, #d6a8c4 55%, #f1d6d9 60%); }
.alg-sky-dawn .alg-cab-hills { fill: #3b3f5c; }
.alg-sky-dawn .alg-cab-grass { fill: #34503a; }
.alg-sky-dawn .alg-asphalt-far { stop-color: #5f6573; }
.alg-sky-dawn .alg-asphalt-near { stop-color: #2a2f38; }
.alg-sky-dawn .alg-haze-top { stop-color: #f1d6d9; stop-opacity: 0.6; }
.alg-sky-dawn .alg-haze-bottom { stop-color: #f1d6d9; stop-opacity: 0; }
.alg-sky-dawn .alg-cab-tree { filter: brightness(0.7) saturate(0.8); }

/* Atardecer: violetas apagados y un resplandor de lado, nunca de frente */
.alg-sky-dusk .alg-cab-sky {
    background:
        radial-gradient(ellipse 45% 30% at 0% 60%, rgba(251, 146, 60, 0.45), transparent 70%),
        linear-gradient(#1e1b4b 0%, #4c1d95 34%, #8f4a7a 54%, #b9727f 60%);
}
.alg-sky-dusk .alg-cab-hills { fill: #2a2346; }
.alg-sky-dusk .alg-cab-grass { fill: #243a2c; }
.alg-sky-dusk .alg-asphalt-far { stop-color: #4b4f5c; }
.alg-sky-dusk .alg-asphalt-near { stop-color: #22262e; }
.alg-sky-dusk .alg-haze-top { stop-color: #b9727f; stop-opacity: 0.45; }
.alg-sky-dusk .alg-haze-bottom { stop-color: #b9727f; stop-opacity: 0; }
.alg-sky-dusk .alg-cab-tree { filter: brightness(0.5) saturate(0.7); }

/* Noche: estrellas y la luz de los faros sobre la carretera */
.alg-sky-night .alg-cab-sky { background: linear-gradient(#020617 0%, #0b1a38 48%, #1e2a44 60%); }
.alg-sky-night .alg-cab-stars { display: block; }
.alg-sky-night .alg-cab-hills { fill: #0a1122; }
.alg-sky-night .alg-cab-grass { fill: #0b1810; }
.alg-sky-night .alg-asphalt-far { stop-color: #1f2530; }
.alg-sky-night .alg-asphalt-near { stop-color: #14171d; }
.alg-sky-night .alg-haze-top { stop-color: #1e2a44; stop-opacity: 0.5; }
.alg-sky-night .alg-haze-bottom { stop-color: #1e2a44; stop-opacity: 0; }
.alg-sky-night .alg-cab-beam { display: inline; }
.alg-sky-night .alg-cab-edge { fill: #cbd5e1; }
.alg-sky-night .alg-cab-tree { filter: brightness(0.3) saturate(0.6); }

/* Nombres únicos en el alta (19.0.2.19.0) */
.alg-guest-error.alg-guest-ok { color: var(--alg-success, #16a34a); }
.alg-guest-suggest {
    margin: 0 2px; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor;
    background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
}

/* -------------------------------------------------------------------
   Polígono industrial al estar en una ciudad (19.0.2.20.0)
   Al llegar, primero frena y después aparece el polígono; al salir, vuelve la carretera.
   ------------------------------------------------------------------- */
.alg-cab-town { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.9s ease; }
.alg-cab-in-town .alg-cab-town { opacity: 1; transition: opacity 1.4s ease 0.9s; }
.alg-cab-lanes, .alg-cab-side, .alg-cab-hills, .alg-cab-ground { transition: opacity 0.9s ease; }
.alg-cab-in-town .alg-cab-lanes, .alg-cab-in-town .alg-cab-side { opacity: 0; transition: opacity 0.9s ease 0.9s; }
.alg-town-sky { position: absolute; left: 0; top: 0; width: 100%; height: 60%; }
.alg-town-yard { position: absolute; left: 0; top: 60%; width: 100%; height: 40%; }
.alg-town-label { font: 800 13px 'Plus Jakarta Sans', sans-serif; fill: #fff; text-anchor: middle; letter-spacing: 0.5px; }
.alg-town-band { fill: #ea6a1c; }
.alg-yard-line, .alg-yard-cross { vector-effect: non-scaling-stroke; }
.alg-yard-line { stroke: rgba(255, 255, 255, 0.55); stroke-width: 2; }
.alg-yard-cross { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
.alg-yard-stop { fill: #facc15; }

/* Día (y por defecto) */
.alg-town-far { fill: #9fb3c8; }
.alg-town-win { fill: #cbd8e6; }
.alg-town-roof { fill: #64748b; }
.alg-town-wall { fill: #d6dbe1; }
.alg-town-door { fill: #475569; }
.alg-town-dock { fill: #1f2937; }
.alg-town-pole { fill: #475569; }
.alg-town-lamp { fill: #e2e8f0; }
.alg-yard-base { fill: #7a7f87; }
/* Amanecer */
.alg-sky-dawn .alg-town-far { fill: #7c7aa3; }
.alg-sky-dawn .alg-town-win { fill: #b9b3d6; }
.alg-sky-dawn .alg-town-wall { fill: #b9b8c9; }
.alg-sky-dawn .alg-town-roof { fill: #4b4f6b; }
.alg-sky-dawn .alg-yard-base { fill: #5d6170; }
/* Atardecer */
.alg-sky-dusk .alg-town-far { fill: #3d2f5c; }
.alg-sky-dusk .alg-town-win { fill: #fcd34d; opacity: 0.8; }
.alg-sky-dusk .alg-town-wall { fill: #8a8199; }
.alg-sky-dusk .alg-town-roof { fill: #35304d; }
.alg-sky-dusk .alg-town-door { fill: #2f2a44; }
.alg-sky-dusk .alg-town-lamp { fill: #fde68a; }
.alg-sky-dusk .alg-yard-base { fill: #4a4a5a; }
/* Noche: ventanas y muelles iluminados */
.alg-sky-night .alg-town-far { fill: #111a33; }
.alg-sky-night .alg-town-win { fill: #fde68a; }
.alg-sky-night .alg-town-wall { fill: #2a3347; }
.alg-sky-night .alg-town-roof { fill: #161d2e; }
.alg-sky-night .alg-town-door { fill: #f5d78a; }
.alg-sky-night .alg-town-pole { fill: #334155; }
.alg-sky-night .alg-town-lamp { fill: #fff7cc; filter: drop-shadow(0 0 6px #fde68a); }
.alg-sky-night .alg-yard-base { fill: #262a33; }
.alg-sky-night .alg-cab-in-town .alg-cab-beam, .alg-sky-night .alg-cab-in-town .alg-cab-stars { opacity: 0.4; }

/* -------------------------------------------------------------------
   Carretera en canvas (19.0.2.21.0): curvas, nacional/autovía, señales y tráfico.
   Sustituye a la carretera SVG/CSS anterior.
   ------------------------------------------------------------------- */
.alg-cab-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 0.9s ease; }
.alg-cab-in-town .alg-cab-canvas { opacity: 0; transition: opacity 0.9s ease 0.9s; }

/* -------------------------------------------------------------------
   Carácter de juego estilo Duolingo (19.0.2.22.0): nivel, Tino, confeti y celebraciones
   ------------------------------------------------------------------- */
.alg-level {
    left: 16px; top: calc(50% - 215px); width: 64px; padding: 6px 4px 7px;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: rgba(15, 23, 42, 0.88); border: 1px solid var(--alg-border); border-radius: 14px;
    cursor: default;
}
.alg-level-ring { width: 46px; height: 46px; transform: rotate(-90deg); }
.alg-level-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 5; }
.alg-level-ring-val { fill: none; stroke: #facc15; stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray 0.8s ease; }
.alg-level-icon { position: absolute; top: 15px; left: 0; right: 0; text-align: center; font-size: 20px; line-height: 1; }
.alg-level-num { font-size: 11px; font-weight: 800; color: #facc15; letter-spacing: 0.02em; }
.alg-level-goal { font-size: 10px; font-weight: 700; color: var(--alg-text-muted); }
.alg-level-goal.alg-goal-done { color: #4ade80; }
.alg-attract .alg-level, .alg-attract .alg-sound-toggle { display: none !important; }

.alg-sound-toggle {
    left: 16px; bottom: 76px; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(15, 23, 42, 0.88); border: 1px solid var(--alg-border); color: #fff;
    font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}

/* Tino */
.alg-tino {
    position: fixed; z-index: 1180; left: 96px; bottom: 96px; display: flex; align-items: flex-end; gap: 6px;
    opacity: 0; transform: translateY(20px) scale(0.9); pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.alg-tino.alg-tino-show { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.alg-tino-face { width: 64px; height: 64px; flex: 0 0 auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }
.alg-tino-bounce .alg-tino-face { animation: alg-tino-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes alg-tino-bounce { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-14px) scale(1.06, 0.95); } 70% { transform: translateY(0) scale(0.97, 1.04); } 100% { transform: none; } }
.alg-tino-eyes { animation: alg-tino-blink 4s infinite; transform-origin: 32px 24px; }
@keyframes alg-tino-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.alg-tino-frown { display: none; }
.alg-tino-sad .alg-tino-smile { display: none; }
.alg-tino-sad .alg-tino-frown { display: inline; }
.alg-tino-bubble {
    position: relative; max-width: min(300px, 62vw); margin-bottom: 26px;
    background: #fff; color: #0f172a; border-radius: 16px; padding: 9px 13px;
    font-size: 14px; font-weight: 700; line-height: 1.3; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    display: flex; flex-direction: column; gap: 2px;
}
.alg-tino-bubble strong { font-size: 11px; color: #ea6a1c; text-transform: uppercase; letter-spacing: 0.05em; }
.alg-tino-bubble::before {
    content: ''; position: absolute; left: -7px; bottom: 12px; border: 8px solid transparent;
    border-right-color: #fff; border-left: 0;
}

/* Confeti */
.alg-confetti { position: fixed; inset: 0; z-index: 1190; pointer-events: none; overflow: hidden; }
.alg-confetti i {
    position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
    animation-name: alg-confetti-fall; animation-timing-function: cubic-bezier(0.25, 0.6, 0.5, 1); animation-fill-mode: forwards;
}
@keyframes alg-confetti-fall {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: 0; }
}

/* Tarjeta de celebración (subida de nivel, meta del día) */
.alg-celebrate { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.alg-celebrate-card {
    background: #fff; color: #0f172a; border-radius: 24px; padding: 22px 34px; text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); border-bottom: 6px solid #facc15;
    opacity: 0; transform: scale(0.6);
}
.alg-celebrate-show .alg-celebrate-card { animation: alg-celebrate-pop 2.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes alg-celebrate-pop {
    0% { opacity: 0; transform: scale(0.6); }
    15% { opacity: 1; transform: scale(1.05); }
    25%, 85% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.95); }
}
.alg-celebrate-icon { font-size: 56px; line-height: 1.1; animation: alg-tino-bounce 0.9s 0.2s; }
.alg-celebrate-title { font-size: 26px; font-weight: 800; margin-top: 4px; }
.alg-celebrate-sub { font-size: 15px; font-weight: 600; color: #475569; margin-top: 2px; }

@media (max-width: 900px), (max-height: 500px) {
    .alg-level { top: 136px; left: 8px; width: 58px; padding: 4px 3px 5px; }
    .alg-level-ring { width: 40px; height: 40px; }
    .alg-level-icon { top: 13px; font-size: 17px; }
    .alg-sound-toggle { left: 20px; bottom: auto; top: 206px; width: 34px; height: 34px; font-size: 15px; }
    .alg-tino { left: 8px; bottom: 200px; }
    .alg-tino-face { width: 54px; height: 54px; }
    .alg-tino-bubble { font-size: 13px; margin-bottom: 20px; }
    .alg-celebrate-card { padding: 18px 26px; }
    .alg-celebrate-title { font-size: 22px; }
}
@media (max-height: 500px) {
    .alg-level { top: 84px; left: 86px; }
    .alg-sound-toggle { top: 90px; left: 152px; }
    .alg-tino { left: auto; right: 8px; bottom: 70px; flex-direction: row-reverse; }
    .alg-tino-bubble::before { left: auto; right: -7px; border-right-color: transparent; border-left: 8px solid #fff; border-right: 0; }
}

/* -------------------------------------------------------------------
   Anuncio de AutoPyme Logistics (19.0.2.23.0): franja propia arriba, solo publicidad.
   El juego (#alg-stage) empieza debajo; su transform hace que todo lo "fixed" del juego
   se coloque dentro de él, así nada del juego pisa el anuncio.
   ------------------------------------------------------------------- */
:root { --alg-ad-h: 76px; }
.alg-ad {
    position: fixed; top: 0; left: 0; right: 0; height: var(--alg-ad-h); z-index: 2000;
    display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 20px;
    background: linear-gradient(100deg, #c2410c 0%, #ea6a1c 45%, #f97316 100%);
    border-bottom: 4px solid #16295c; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    color: #fff; text-decoration: none; overflow: hidden; cursor: pointer;
}
.alg-ad::after {  /* brillo que recorre el anuncio cada pocos segundos */
    content: ''; position: absolute; top: 0; bottom: 0; width: 120px; left: -160px;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: alg-ad-shine 6s ease-in-out infinite;
}
@keyframes alg-ad-shine { 0%, 70% { left: -160px; } 100% { left: calc(100% + 160px); } }
.alg-ad-badge {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.alg-ad-badge img { width: 74%; height: 74%; object-fit: contain; }
.alg-ad-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.alg-ad-text strong { font-size: 26px; font-weight: 800; letter-spacing: 0.2px; white-space: nowrap; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.alg-ad-slogan {
    font-size: 15px; font-weight: 700; color: #fff7ed; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; transition: opacity 0.4s ease;
}
.alg-ad-slogan.alg-visor-fade { opacity: 0; }
.alg-ad-truck { flex: 0 0 auto; height: 66px; width: auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); }
.alg-ad-cta {
    flex: 0 0 auto; padding: 10px 18px; border-radius: 999px; background: #fff; color: #c2410c;
    font-size: 16px; font-weight: 800; white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    animation: alg-ad-pulse 2.4s ease-in-out infinite;
}
@keyframes alg-ad-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.alg-ad:hover .alg-ad-cta { background: #16295c; color: #fff; }

.alg-stage {
    position: fixed; top: var(--alg-ad-h); left: 0; right: 0; bottom: 0;
    transform: translateZ(0); overflow: hidden;
}
.alg-view-cabin .alg-showcase-banner { display: none !important; }

@media (max-width: 1100px) {
    .alg-ad-truck { display: none; }
}
@media (max-width: 900px), (max-height: 500px) {
    :root { --alg-ad-h: 62px; }
    .alg-ad { gap: 10px; padding: 0 10px; justify-content: flex-start; border-bottom-width: 3px; }
    .alg-ad-badge { width: 44px; height: 44px; }
    .alg-ad-text { flex: 1 1 auto; }
    .alg-ad-text strong { font-size: 18px; }
    .alg-ad-slogan { font-size: 12px; }
    .alg-ad-cta { padding: 7px 11px; font-size: 13px; }
}
@media (max-height: 500px) {
    :root { --alg-ad-h: 50px; }
    .alg-ad-badge { width: 38px; height: 38px; }
    .alg-ad-text strong { font-size: 16px; }
    .alg-ad-truck { display: block; height: 42px; }
}
@media (max-height: 500px) {
    /* Con el anuncio arriba queda menos alto: el soporte del móvil sube junto a las marchas */
    .alg-mount { top: 52px; left: 196px; zoom: 0.85; }
    .alg-mount-arm { display: none; }
}

/* -------------------------------------------------------------------
   Demostración guiada del DeCA (19.0.2.25.0): la app AutoPyme Logistics en grande
   ------------------------------------------------------------------- */
.alg-tour {
    position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
    pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
    background: radial-gradient(ellipse at center, rgba(2, 6, 23, 0.35), rgba(2, 6, 23, 0.65));
}
.alg-tour.alg-tour-show { opacity: 1; pointer-events: auto; }
.alg-touring .alg-phone-overlay { display: none !important; }
.alg-tour-phone {
    width: min(380px, 92vw); height: min(680px, calc(100% - 40px));
    display: flex; flex-direction: column; overflow: hidden;
    background: #f4f6fa; border-radius: 30px; border: 9px solid #0b1220;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: translateY(24px) scale(0.96); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: 'Plus Jakarta Sans', sans-serif; color: #0f172a;
}
.alg-tour-show .alg-tour-phone { transform: none; }
.alg-apl-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 12px 14px 10px;
    background: #16295c; color: #fff; border-bottom: 3px solid #ea6a1c;
}
.alg-apl-bar img { width: 22px; height: 22px; object-fit: contain; }
.alg-apl-brand { font-weight: 800; font-size: 13px; white-space: nowrap; }
.alg-apl-title { flex: 1; text-align: right; font-size: 12px; font-weight: 700; color: #fdba74; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alg-apl-skip {
    flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: #fff;
    border-radius: 999px; padding: 3px 9px; font: 700 11px 'Plus Jakarta Sans', sans-serif; cursor: pointer;
}
.alg-apl-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.alg-apl-card { background: #fff; border-radius: 14px; padding: 10px 12px 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); border: 1px solid #e2e8f0; }
.alg-apl-card h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; color: #16295c; display: flex; align-items: center; gap: 6px; }
.alg-apl-hint { margin: 0 0 8px; font-size: 12px; color: #475569; }
.alg-apl-field { position: relative; margin-bottom: 8px; }
.alg-apl-field:last-child { margin-bottom: 0; }
.alg-apl-field label { display: block; font-size: 10.5px; font-weight: 700; color: #64748b; margin-bottom: 3px; }
.alg-apl-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.alg-apl-input {
    position: relative; min-height: 34px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 10px; border: 1.5px solid #cbd5e1; border-radius: 10px; background: #f8fafc;
    font-size: 13.5px; font-weight: 600; color: #0f172a; transition: border-color 0.2s, box-shadow 0.2s;
}
.alg-apl-ph { color: #94a3b8; font-weight: 500; font-size: 12.5px; }
.alg-apl-focus .alg-apl-ph, .alg-apl-filled .alg-apl-ph { display: none; }
.alg-apl-focus { border-color: #ea6a1c; box-shadow: 0 0 0 3px rgba(234, 106, 28, 0.18); background: #fff; }
.alg-apl-filled { border-color: #94a3b8; background: #fff; }
.alg-apl-caret { display: none; width: 2px; height: 16px; background: #ea6a1c; margin-left: -4px; animation: alg-apl-blink 0.8s steps(1) infinite; }
.alg-apl-focus .alg-apl-caret { display: inline-block; }
@keyframes alg-apl-blink { 50% { opacity: 0; } }
.alg-apl-chip { font-size: 10.5px; font-weight: 700; color: #16295c; background: #e0e7ff; border-radius: 999px; padding: 1px 8px; }
.alg-apl-suggest {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 3; margin-top: 3px; background: #fff;
    border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18); overflow: hidden;
    animation: alg-apl-drop 0.2s ease-out;
}
@keyframes alg-apl-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.alg-apl-sug { position: relative; overflow: hidden; padding: 7px 10px; display: flex; flex-direction: column; font-size: 12.5px; border-bottom: 1px solid #f1f5f9; }
.alg-apl-sug span { font-size: 10.5px; color: #64748b; }
.alg-apl-sug-hit { background: #fff7ed; }
.alg-apl-btn {
    position: relative; overflow: hidden; width: 100%; border: 0; border-radius: 12px; padding: 12px;
    background: #ea6a1c; color: #fff; font: 800 14px 'Plus Jakarta Sans', sans-serif; cursor: default;
    box-shadow: 0 4px 12px rgba(234, 106, 28, 0.35); margin-top: 4px;
}
.alg-apl-tapped { transform: scale(0.97); transition: transform 0.12s; }
.alg-apl-ripple {
    position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.55); animation: alg-apl-ripple 0.45s ease-out forwards; pointer-events: none;
}
.alg-apl-sug .alg-apl-ripple { background: rgba(234, 106, 28, 0.35); }
@keyframes alg-apl-ripple { to { transform: scale(22); opacity: 0; } }
.alg-apl-loading { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; font-weight: 700; color: #16295c; }
.alg-apl-loading span { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #e2e8f0; border-top-color: #ea6a1c; animation: alg-apl-spin 0.8s linear infinite; }
@keyframes alg-apl-spin { to { transform: rotate(360deg); } }
.alg-apl-doc { background: #fff; border-radius: 14px; border: 1px solid #e2e8f0; padding: 12px; animation: alg-apl-drop 0.35s ease-out; }
.alg-apl-doc-head { display: flex; justify-content: space-between; align-items: center; font-family: ui-monospace, monospace; font-size: 13px; }
.alg-apl-pill { font: 800 10.5px 'Plus Jakarta Sans', sans-serif; border-radius: 999px; padding: 2px 9px; background: #e2e8f0; color: #334155; }
.alg-apl-pill-ok { background: #dcfce7; color: #166534; }
.alg-apl-doc-route { font-weight: 800; font-size: 16px; margin: 6px 0 8px; color: #16295c; }
.alg-apl-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed #e2e8f0; }
.alg-apl-row span { color: #64748b; }
.alg-apl-row b { text-align: right; }
.alg-apl-qr { display: flex; justify-content: center; margin-top: 10px; }
.alg-apl-qr img, .alg-apl-qr canvas, .alg-apl-qr svg { width: 120px !important; height: 120px !important; }
.alg-apl-sigline, .alg-apl-mail { margin-top: 10px; font-size: 12px; font-weight: 700; color: #166534; background: #f0fdf4; border-radius: 10px; padding: 8px 10px; }
.alg-apl-mail { color: #1e3a8a; background: #eff6ff; }
.alg-apl-sign { display: block; width: 100%; height: 110px; background: #fff; border: 1.5px dashed #94a3b8; border-radius: 10px; }
.alg-apl-gps { font-size: 11.5px; font-weight: 700; color: #64748b; margin: 2px 0 6px; }
.alg-apl-ok { color: #166534 !important; }

/* Control: el agente escanea el QR */
.alg-mini-phone { position: relative; overflow: hidden; }
.alg-scanning::after {
    content: ''; position: absolute; left: 6%; right: 6%; height: 3px; top: 20%;
    background: #22c55e; box-shadow: 0 0 12px 3px rgba(34, 197, 94, 0.8); border-radius: 2px;
    animation: alg-scan 1.1s ease-in-out infinite alternate;
}
@keyframes alg-scan { from { top: 22%; } to { top: 90%; } }

@media (max-width: 900px) {
    .alg-tour { align-items: flex-start; padding-top: 8px; }
    .alg-tour-phone { height: calc(100% - 300px); min-height: 340px; border-width: 7px; border-radius: 24px; }
}
@media (max-height: 500px) {
    .alg-tour { align-items: center; justify-content: flex-end; padding: 0 12px 0 0; }
    .alg-tour-phone { height: calc(100% - 16px); min-height: 0; width: min(340px, 48vw); }
}
/* La tarjeta «Demo · Probar yo» siempre por encima de la demostración */
.alg-join { z-index: 1150; }
/* El alta («¿Quién conduce hoy?») siempre por encima de la demostración y de Tino */
.alg-guest-overlay { z-index: 1300; }

/* Control en Ruta y Relevo en la demostración (19.0.2.26.0) */
.alg-apl-actions { display: flex; gap: 8px; }
.alg-apl-actions .alg-apl-btn { flex: 1; }
.alg-apl-btn-blue { background: #0284c7; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35); }
.alg-apl-btn-amber { background: #f59e0b; color: #1f2937; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35); }
.alg-apl-btn-ghost { background: #fff; color: #16295c; border: 1.5px solid #cbd5e1; box-shadow: none; font-size: 12.5px; padding: 9px; }
.alg-apl-police { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 8px; animation: alg-apl-drop 0.35s ease-out; }
.alg-apl-police-head { font-size: 17px; font-weight: 800; color: #b45309; }
.alg-apl-police-sub { font-size: 12.5px; color: #475569; }
.alg-apl-police-sub b { font-family: ui-monospace, monospace; color: #0f172a; }
.alg-apl-police-qr { position: relative; overflow: hidden; margin: 4px auto; padding: 10px; border: 2px solid #16295c; border-radius: 14px; background: #fff; }
.alg-apl-police-qr img, .alg-apl-police-qr canvas, .alg-apl-police-qr svg { display: block; width: 190px !important; height: 190px !important; }
.alg-apl-police-route { font-size: 12px; font-weight: 700; color: #16295c; }
.alg-apl-stamp {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(240, 253, 244, 0.85); color: #166534; font-size: 22px; font-weight: 800;
    animation: alg-apl-stamp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes alg-apl-stamp { from { transform: scale(1.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.alg-apl-relay { background: #0f172a; color: #e2e8f0; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 2px; animation: alg-apl-drop 0.35s ease-out; }
.alg-apl-relay .alg-apl-row { border-bottom-color: rgba(255, 255, 255, 0.08); }
.alg-apl-relay .alg-apl-row span { color: #94a3b8; }
.alg-apl-relay .alg-apl-btn { margin-top: 10px; background: #0284c7; }
.alg-apl-relay-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #38bdf8; margin-bottom: 6px; }
.alg-apl-warn { color: #fbbf24; }
.alg-apl-relay .alg-apl-ok { color: #4ade80 !important; }

/* Demostración del DeCA (19.0.2.27.0): móvil con proporción real, escalado entero, y
   formulario compacto para que se vea completo */
.alg-tour { padding: 16px; }
.alg-tour-phone {
    width: 360px !important; height: 760px !important; min-height: 0 !important; flex: 0 0 auto;
    transform: translateY(24px) scale(calc(var(--tour-scale, 1) * 0.96)) !important;
}
.alg-tour-show .alg-tour-phone { transform: scale(var(--tour-scale, 1)) !important; }
.alg-apl-body { padding: 9px; gap: 7px; }
.alg-apl-card { padding: 7px 10px 9px; border-radius: 12px; }
.alg-apl-card h4 { margin-bottom: 5px; font-size: 12px; }
.alg-apl-field { margin-bottom: 5px; }
.alg-apl-field label { font-size: 10px; margin-bottom: 2px; }
.alg-apl-input { min-height: 29px; padding: 4px 9px; font-size: 12.5px; border-radius: 9px; }
.alg-apl-ph { font-size: 11.5px; }
.alg-apl-btn { padding: 10px; font-size: 13.5px; }
.alg-apl-sign { height: 96px; }
@media (max-width: 900px) {
    .alg-tour { padding: 8px 8px 250px; align-items: flex-start; }
    .alg-tour-phone { transform-origin: top center; }
}
@media (max-height: 500px) {
    .alg-tour { padding: 8px 12px 8px 8px; align-items: center; justify-content: flex-end; }
    .alg-tour-phone { transform-origin: right center; }
}
@media (min-width: 901px) and (min-height: 501px) {
    /* En la demostración, el móvil no pisa la tarjeta «Demo · Probar yo» */
    .alg-autojoin .alg-tour { padding-bottom: 104px; }
}

/* Demostración con la app real (19.0.2.28.0): la pantalla es la de APL dentro de un iframe
   aislado; el móvil no admite toques (solo «Saltar», fuera del móvil, jugando tú) */
.alg-tour-phone { pointer-events: none; }
.alg-apl-frame { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; background: #f1f5f9; }
.alg-tour-real .alg-apl-bar { display: none; }
.alg-tour-real .alg-apl-body { padding: 0; overflow: hidden; }
.alg-tour .alg-apl-skip {
    position: absolute; top: 12px; right: 12px; z-index: 2; pointer-events: auto;
    background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(255, 255, 255, 0.3); padding: 7px 14px; font-size: 13px;
}

/* Demostración (19.0.2.30.0): el móvil del soporte es solo el GPS del conductor, sin pestañas */
.alg-dock-tabs { display: none !important; }
.alg-dock-screen { border-radius: 18px !important; }
@media (max-width: 900px), (max-height: 500px) { .alg-dock-screen { border-radius: 15px !important; } }

/* -------------------------------------------------------------------
   Tino flotante con manos (19.0.2.31.0): se coloca donde convenga, junto a lo
   que explica, y señala con la mano campos y botones.
   ------------------------------------------------------------------- */
.alg-tino.alg-tino-float {
    bottom: auto !important; right: auto !important; flex-direction: row !important;
    transition: left 0.55s cubic-bezier(0.34, 1.2, 0.64, 1), top 0.55s cubic-bezier(0.34, 1.2, 0.64, 1),
                opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.alg-tino.alg-tino-float .alg-tino-bubble { margin-bottom: 14px; }
.alg-tino.alg-tino-float .alg-tino-bubble::before {
    left: -7px; right: auto; border: 8px solid transparent; border-left: 0; border-right-color: #fff;
}
.alg-tino-face { overflow: visible; }
.alg-tino-hand-r { transform-origin: 56px 34px; }
.alg-tino-show .alg-tino-hand-r { animation: alg-tino-wave 1.1s ease-in-out 2; }
@keyframes alg-tino-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-28deg); } 75% { transform: rotate(18deg); } }
.alg-tino-hand-l { transform-origin: 8px 36px; animation: alg-tino-sway 3s ease-in-out infinite; }
@keyframes alg-tino-sway { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

.alg-tino-pointer {
    position: fixed; left: 0; top: 0; z-index: 1185; width: 34px; height: 41px; pointer-events: none;
    opacity: 0; transform: scale(0.5) rotate(-12deg); transform-origin: 7px 3px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
    transition: left 0.5s cubic-bezier(0.34, 1.2, 0.64, 1), top 0.5s cubic-bezier(0.34, 1.2, 0.64, 1),
                opacity 0.25s ease, transform 0.25s ease;
}
.alg-tino-pointer svg { width: 100%; height: 100%; display: block; }
.alg-tino-pointer.alg-hand-show { opacity: 1; transform: rotate(-12deg); animation: alg-hand-bob 1.6s ease-in-out infinite; }
@keyframes alg-hand-bob { 0%, 100% { translate: 0 0; } 50% { translate: 2px 3px; } }
.alg-tino-pointer.alg-hand-tap { animation: alg-hand-tap 0.35s ease; }
@keyframes alg-hand-tap { 0%, 100% { transform: rotate(-12deg) scale(1); } 45% { transform: rotate(-12deg) scale(0.8); } }

/* En el móvil, la pantalla de la app ocupa toda la pantalla y Tino va encima */
@media (max-width: 700px), (max-height: 500px) {
    .alg-tour, .alg-autojoin .alg-tour { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
    .alg-tour-phone {
        width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 0 !important;
        transform: none !important; box-shadow: none !important;
    }
    .alg-tour .alg-apl-skip { top: auto; bottom: 12px; right: 12px; }
}

/* Demostración de uso (19.0.2.33.0): sin puntos ni ranking */
.alg-points-pill, .alg-mode-lost { display: none !important; }
.alg-job-cargo { font-size: 11px; font-weight: 600; color: var(--alg-text-muted); text-align: right; max-width: 45%; }
.alg-sum-route { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.alg-summary .alg-sum-row span { font-weight: 600; }

/* Cargas (19.0.2.34.0): toda la tarjeta se elige tocándola, sin botón «Aceptar» */
.alg-job-card { position: relative; cursor: pointer; padding-right: 30px; -webkit-tap-highlight-color: transparent; }
.alg-job-card::after {
    content: '›'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 26px; font-weight: 700; color: var(--alg-accent, #f59e0b); line-height: 1;
}
.alg-job-card:active { transform: scale(0.98); }
.alg-job-card:focus-visible { outline: 2px solid var(--alg-accent-2, #22d3ee); outline-offset: 2px; }
.alg-job-card.alg-job-picked { border-color: var(--alg-accent, #f59e0b); background: rgba(245, 158, 11, 0.12); }
.alg-job-accept { display: none !important; }
.alg-autojoin .alg-job-card { pointer-events: none; }
.alg-autojoin .alg-job-card::after { display: none; }

/* Intercambio de Remolque (19.0.2.36.0): barra de la ficha y menú «⋮ Más acciones» como en la app */
.alg-apl-detailbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; font-size: 14px; color: #334155; }
.alg-apl-detail-icons { position: relative; display: flex; align-items: center; gap: 10px; }
.alg-apl-more { border: 0; background: #e2e8f0; border-radius: 50%; width: 30px; height: 30px; font-size: 18px; font-weight: 800; line-height: 1; cursor: default; position: relative; overflow: hidden; }
.alg-apl-menu { position: absolute; right: 22px; top: 34px; z-index: 5; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 12px 26px rgba(15, 23, 42, 0.2); padding: 4px; animation: alg-apl-drop 0.2s ease-out; }
.alg-apl-menu button { position: relative; overflow: hidden; border: 0; background: #fff7ed; color: #0f172a; font: 700 13px 'Plus Jakarta Sans', sans-serif; padding: 10px 14px; border-radius: 9px; white-space: nowrap; cursor: default; }

/* Solo demostración (19.0.2.38.0): sin tarjeta «Probar yo» ni niveles; el panel del viaje y el
   móvil de la demostración bajan hasta el borde */
.alg-autojoin .alg-tour { padding-bottom: 0; }
@media (max-width: 900px) and (min-height: 501px) {
    .alg-attract .alg-job-board, .alg-attract .alg-mission-hud { bottom: 8px; }
}

/* Botón «Reiniciar demo» (19.0.2.39.0): siempre visible, también sobre el móvil de la demostración */
.alg-restart {
    position: fixed; z-index: 1195; left: 16px; bottom: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px 10px 14px; min-height: 44px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(15, 23, 42, 0.86); color: #fff;
    font: 700 14px 'Plus Jakarta Sans', system-ui, sans-serif; cursor: pointer;
    box-shadow: 0 8px 22px rgba(2, 6, 23, 0.35); backdrop-filter: blur(6px);
    transition: transform 0.15s ease, background 0.15s ease;
}
.alg-restart span { font-size: 20px; line-height: 1; color: #fb923c; }
.alg-restart:hover { background: rgba(234, 106, 28, 0.95); }
.alg-restart:hover span { color: #fff; }
.alg-restart:active { transform: scale(0.95); }
.alg-restart:focus-visible { outline: 3px solid #fb923c; outline-offset: 2px; }
/* Móvil: arriba a la derecha, compacto, sin tapar el panel del viaje ni los botones de la app */
@media (max-width: 900px), (max-height: 500px) {
    .alg-restart { left: auto; bottom: auto; right: 8px; top: 8px; padding: 6px 12px 6px 10px; min-height: 36px; font-size: 12px; gap: 5px; }
    .alg-restart span { font-size: 17px; }
}

/* APL v19.1.207 (19.0.2.41.0): estado «Pendiente», menú «⋮ Más acciones» con descripción de cada
   acción y pantalla de firma como la real (cabecera con progreso, aviso legal, fotos en la entrega) */
.alg-apl-pill-wait { background: #fef3c7; color: #92400e; }
.alg-apl-menu { display: flex; flex-direction: column; gap: 2px; min-width: 230px; }
.alg-apl-menu button { display: flex; align-items: center; gap: 10px; text-align: left; white-space: normal; background: #fff; }
.alg-apl-menu button.alg-apl-menu-pick { background: #fff7ed; }
.alg-apl-menu-ico { font-size: 16px; width: 22px; text-align: center; flex: none; }
.alg-apl-menu-txt { display: flex; flex-direction: column; gap: 1px; }
.alg-apl-menu-txt b { font-size: 13px; }
.alg-apl-menu-txt small { font: 500 11px 'Plus Jakarta Sans', sans-serif; color: #64748b; }
.alg-apl-signhead { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 10px; color: #0f172a; }
.alg-apl-signhead b { font-size: 15px; }
.alg-apl-signhead small { font-size: 11.5px; color: #64748b; }
.alg-apl-signprog { height: 4px; border-radius: 4px; background: #e2e8f0; margin-top: 6px; overflow: hidden; }
.alg-apl-signprog i { display: block; height: 100%; background: #ea6a1c; border-radius: 4px; }
.alg-apl-photo { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 54px; border: 1.5px dashed #cbd5e1; border-radius: 10px; font-size: 11px; font-weight: 700; color: #64748b; }
.alg-apl-legal { margin: 4px 0 10px; font-size: 10.5px; line-height: 1.4; color: #64748b; }

/* Voz de Tino y lista de conductores (19.0.2.42.0) */
.alg-voice {
    position: fixed; z-index: 1195; left: 205px; bottom: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; min-height: 44px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(15, 23, 42, 0.86); color: #fff;
    font: 700 14px 'Plus Jakarta Sans', system-ui, sans-serif; cursor: pointer;
    box-shadow: 0 8px 22px rgba(2, 6, 23, 0.35); backdrop-filter: blur(6px);
}
.alg-voice:disabled { opacity: 0.5; cursor: default; }
.alg-voice-ico { font-size: 16px; line-height: 1; }
.alg-voice-sw { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #475569; transition: background 0.2s ease; }
.alg-voice-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; }
.alg-voice-on .alg-voice-sw { background: #22c55e; }
.alg-voice-on .alg-voice-sw i { transform: translateX(14px); }
.alg-voice:focus-visible { outline: 3px solid #fb923c; outline-offset: 2px; }
@media (max-width: 900px), (max-height: 500px) {
    .alg-voice { left: auto; bottom: auto; right: 160px; top: 8px; padding: 5px 9px; min-height: 36px; font-size: 12px; gap: 5px; }
    .alg-voice-sw { width: 28px; height: 16px; }
    .alg-voice-sw i { width: 12px; height: 12px; }
    .alg-voice-on .alg-voice-sw i { transform: translateX(12px); }
}

.alg-fleet-counter { cursor: pointer; }
.alg-fleet-counter:hover { border-color: var(--alg-accent-2); }
.alg-fleet-counter:focus-visible { outline: 3px solid #fb923c; outline-offset: 2px; }
.alg-fleet-live b { color: #4ade80; }
.alg-sheet-overlay.alg-sheet-top { z-index: 1250; }
.alg-drivers-loading { margin: 12px 0; color: var(--alg-text-muted); }
.alg-drivers-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.alg-drivers-sum small { color: var(--alg-text-muted); }
.alg-live-dot, .alg-driver-dot { width: 9px; height: 9px; border-radius: 50%; background: #64748b; flex: none; }
.alg-live-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); animation: alg-live 1.6s ease-in-out infinite; }
@keyframes alg-live { 50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.05); } }
.alg-drivers-total { margin: 4px 0 10px; font-size: 12px; color: var(--alg-text-muted); }
.alg-drivers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.alg-drivers li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(148, 163, 184, 0.08); }
.alg-driver-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.alg-driver-txt b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alg-driver-txt small { font-size: 11.5px; color: var(--alg-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alg-driver-on { background: rgba(34, 197, 94, 0.12) !important; }
.alg-driver-on .alg-driver-dot { background: #22c55e; }
.alg-driver-badge { flex: none; font-size: 11px; font-weight: 800; color: #16a34a; background: rgba(34, 197, 94, 0.15); border-radius: 999px; padding: 2px 8px; }
/* La lista de conductores cabe entera debajo del anuncio */
.alg-sheet-top .alg-sheet { max-height: calc(100% - 32px); }
.alg-sheet-top .alg-sheet-body { overflow-y: auto; }
/* En pantalla grande el contador se puede tocar también mientras Tino enseña el DeCA */
@media (min-width: 901px) and (min-height: 501px) {
    .alg-fleet-counter { z-index: 1190; }
}
/* Móvil estrecho: el interruptor de sonido solo con icono, para no tapar el título de la app */
@media (max-width: 480px) {
    .alg-voice b, .alg-restart b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .alg-restart { padding: 0; width: 38px; min-height: 36px; height: 36px; justify-content: center; }
    .alg-restart span { font-size: 19px; }
    .alg-voice { padding: 5px 8px; right: 52px; }
}
.alg-drivers-reset { width: 100%; background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }
.alg-drivers-reset:hover { background: rgba(239, 68, 68, 0.3); color: #fff; }