: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; }

/* Capas que el JS muestra u oculta con el atributo hidden (sin estilos en el código) */
[hidden] { display: none !important; }

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, 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; }

/* -------------------------------------------------------------------
   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-route { font-weight: 700; font-size: 15px; margin: 4px 0; }

.alg-mission-route { font-weight: 700; font-size: 17px; margin: 6px 0; }
.alg-mission-cargo{ 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%;
    width: calc(var(--p, 0) * 1%);
    background: linear-gradient(90deg, var(--alg-accent-2), var(--alg-accent));
    transition: width 0.15s linear;
}

.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; }

/* -------------------------------------------------------------------
   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); }

/* -------------------------------------------------------------------
   Flota simulada en el mapa
   ------------------------------------------------------------------- */

/* Los camiones de la flota simulada son iguales: un camión estándar discreto,
   para que el de la demostración destaque por contraste. */
.alg-truck-other { font-size: 15px; opacity: 0.6; filter: grayscale(35%); }

/* El camión de la demostración, 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;
}

.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); }

/* -------------------------------------------------------------------
   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); }
.alg-phone-busy.alg-busy-run > div { width: 100%; transition: width var(--ms, 1s) linear; }

/* 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-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; }

/* 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-paper-stack { font-size: 34px; color: var(--alg-text-muted); }
.alg-paper-stack div { font-size: 12px; }

.alg-phone-note.alg-ok { color: #15803d; font-weight: 700; }

.alg-truck-player { cursor: pointer; }

.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);
}

/* Camiones de otros conductores: simulados apagados, reales visibles y con ficha */
.alg-truck-ghost { opacity: 0.35; filter: grayscale(90%); }

/* -------------------------------------------------------------------
   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; translate: var(--hill-x, 0) 0; }

/* 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; }

@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); }
}
.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%); }
}

/* Parado: el paisaje no se congela por CSS; lo frena demo.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; }

/* -------------------------------------------------------------------
   Modo exhibición: la demostración va sola
   ------------------------------------------------------------------- */

   y arrinconadas; no se confunden con las tuyas ni tapan la pantalla. */

.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: la demostración se ve 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, los títulos cortos */
    .alg-hide-narrow { display: none; }

    .alg-hud-top { flex-wrap: nowrap; }

    .alg-btn{
        min-height: 44px;
        font-size: 15px;
    }
    .alg-job-board, .alg-mission-hud { max-height: 40vh; }

    
    .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-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-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%; }
}

/* -------------------------------------------------------------------
   Móvil: paneles plegables (19.0.2.9.0)
   El tablón y el panel del viaje se pliegan a una línea y en horizontal el panel pasa a un lateral: el mapa respira.
   ------------------------------------------------------------------- */
.alg-panel-toggle, .alg-btn-docs-mini, .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) { 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; }

     /* ya está el 📄 en la cabecera */
    .alg-panel-sub { margin: 2px 0 8px; }

}

/* 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-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-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-phone-overlay, .alg-checkpoint-overlay { padding: 8px; }
    .alg-phone { max-height: calc(100vh - 16px); overflow-y: auto; }
    .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-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-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; }

/* -------------------------------------------------------------------
   Cabina: estilo ligero (19.0.2.11.0)
   Sin cajas dentro de cajas: listas con separadores finos y más aire.
   ------------------------------------------------------------------- */

/* Tarjeta real: ventajas en una línea, sin recuadros */

.alg-real-cta { margin-top: 10px; }

/* -------------------------------------------------------------------
   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-view-cabin .alg-cabin { z-index: 1; }

.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-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%; }
}

/* -------------------------------------------------------------------
   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; }

/* 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-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-body { padding: 12px 14px 16px; }

.alg-apl-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 12px; }

.alg-apl-signstate { font-size: 13px; font-weight: 700; color: #64748b; margin-top: 6px; }
.alg-apl-signstate.alg-ok { color: #15803d; }
.alg-apl-qr { text-align: center; margin-top: 10px; }

@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; }
    /* 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; }
}
@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-dock-screen .leaflet-control-attribution { display: none; }

/* Soporte */
.alg-mount { position: fixed; z-index: 36; right: 26px; top: 72px; }

.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-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-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%; width: calc(var(--p, 0) * 1%); 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-signstate { 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-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-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;
    width: var(--snap-w); height: var(--snap-h);
    transform: translate(var(--snap-x, 0), var(--snap-y, 0)) scale(var(--snap-s, 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-hills { bottom: 40%; height: 12%; }

.alg-cab-windshield { --cab-dash-dur: 0.9s; --cab-dash-angle: 30deg; }

/* Postes y árboles por los arcenes: el derecho pasa cerca, el izquierdo (al otro lado
   del carril contrario) más lejos */
/* 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-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; }

/* 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; }

/* 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; }

/* -------------------------------------------------------------------
   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-hills{ transition: opacity 0.9s ease; }

.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-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; }

/* -------------------------------------------------------------------
   Tino (19.0.2.22.0): el personaje que explica la demostración
   ------------------------------------------------------------------- */

/* 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;
}

@media (max-width: 900px), (max-height: 500px) {
    .alg-tino { left: 8px; bottom: 200px; }
    .alg-tino-face { width: 54px; height: 54px; }
    .alg-tino-bubble { font-size: 13px; margin-bottom: 20px; }
}
@media (max-height: 500px) {
    .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.
   La demostración (#alg-stage) empieza debajo; su transform hace que todo lo "fixed"
   se coloque dentro de ella, así nada de la demostración 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;
}

@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 */
    .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-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); }
}

/* 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-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; } }

/* 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; }

/* Demostración (19.0.2.30.0): el móvil del soporte es solo el GPS del conductor, sin pestañas */

.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 {
    left: var(--x, 0); top: var(--y, 0);
    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: var(--x, 0); top: var(--y, 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;
    }
}

/* Demostración de uso (19.0.2.33.0) */

.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-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; width: 50%; height: 100%; background: #ea6a1c; border-radius: 4px; }
.alg-apl-signprog-full i { width: 100%; }
.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); }
}


/* 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; }
}

/* -------------------------------------------------------------------
   Dispositivo acorde a la pantalla (data-device en <html>, ver la plantilla):
   · tablet: pantallas apaisadas (ordenador, tablet en horizontal) → tablet en horizontal;
   · phone: pantallas verticales (tablet en vertical, ventana estrecha) → móvil en vertical;
   · full: en el propio móvil, la app a pantalla completa (sin marco).
   ------------------------------------------------------------------- */
html[data-device="tablet"] .alg-tour,
html[data-device="tablet"] .alg-autojoin .alg-tour { padding: 16px; align-items: center; justify-content: center; }
@media (min-height: 501px) {
    html[data-device="tablet"] .alg-autojoin .alg-tour { padding-bottom: 104px; }
}
html[data-device="tablet"] .alg-tour-phone {
    width: 960px !important; height: 660px !important;
    border-width: 14px; border-radius: 30px; transform-origin: center center;
}
/* Tablet en el soporte del salpicadero: en horizontal, con la cámara en el lateral */
html[data-device="tablet"] .alg-dock-phone { width: 286px; height: 184px; padding: 7px 7px 7px 16px; border-radius: 20px; }
html[data-device="tablet"] .alg-dock-notch {
    position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; margin: -2px 0 0; border-radius: 50%;
}
html[data-device="tablet"] .alg-dock-screen { border-radius: 12px !important; }
html[data-device="tablet"] .alg-mount::before, html[data-device="tablet"] .alg-mount::after { top: 30%; }
@media (max-width: 900px), (max-height: 600px) {
    html[data-device="tablet"] .alg-dock-phone { width: 214px; height: 138px; padding: 5px 5px 5px 12px; border-radius: 16px; }
    html[data-device="tablet"] .alg-dock-notch { left: 4px; }
}
/* Ventanas con la app (jugando tú) y la pantalla grande de la cabina: formato tablet */
html[data-device="tablet"] .alg-phone{ width: 560px; border-width: 12px; border-radius: 26px; }
html[data-device="tablet"] .alg-center-phone { width: min(860px, 100%); height: min(600px, 100%); border-radius: 24px; border-width: 12px; }

/* -------------------------------------------------------------------
   Escenarios guiados (scenarios.js): menú «¿Qué quieres ver?» y fotos de la app
   real con la zona señalada. Tino (z 1180) y su mano (1185) quedan por encima.
   Tema Material Design 3 de la app (tokens --apc-* en modo oscuro, ver static/md3):
   tarjetas rellenas, barra superior con botón de icono, indicador de progreso lineal,
   lista de pasos como la navegación de M3 y botones .apc-button de la app.
   ------------------------------------------------------------------- */
.alg-sc-menu {
    position: fixed; inset: 0; z-index: 1160; display: flex; align-items: center; justify-content: center;
    padding: 16px; overflow-y: auto;
    background: color-mix(in srgb, var(--apc-color-background) 86%, transparent);
    backdrop-filter: blur(3px);
}
.alg-sc-menu-box { width: min(720px, 100%); margin: auto; display: flex; flex-direction: column; gap: 16px; }
.alg-sc-menu h1 {
    margin: 0; text-align: center; color: var(--apc-color-on-surface);
    font-size: var(--apc-type-headline-md-size); line-height: var(--apc-type-headline-md-line-height); font-weight: var(--apc-type-headline-md-weight);
}
.alg-sc-menu-sub { margin: 0; text-align: center; color: var(--apc-color-on-surface-variant); font-size: var(--apc-type-body-lg-size); }
.alg-sc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.alg-sc-card {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; gap: 16px; padding: 16px; min-height: 92px; border-radius: var(--apc-shape-corner-md);
    background: var(--apc-color-surface-container-high); color: var(--apc-color-on-surface);
    text-decoration: none; transition: box-shadow var(--apc-motion-duration-short) var(--apc-motion-easing-standard);
}
/* Capa de estado de M3 al pasar el ratón o con el foco */
.alg-sc-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; transition: opacity var(--apc-motion-duration-short) var(--apc-motion-easing-standard); }
.alg-sc-card:hover { box-shadow: var(--apc-elevation-1); }
.alg-sc-card:hover::before { opacity: var(--apc-state-hover-opacity); }
.alg-sc-card:focus-visible { outline: var(--apc-focus-ring-width) solid var(--apc-focus-ring-color); outline-offset: var(--apc-focus-ring-offset); }
.alg-sc-card:focus-visible::before { opacity: var(--apc-state-focus-opacity); }
.alg-sc-card-main { grid-column: 1 / -1; background: var(--apc-color-primary-container); color: var(--apc-color-on-primary-container); }
.alg-sc-card-icon {
    flex: none; width: 52px; height: 52px; border-radius: var(--apc-shape-corner-lg); display: flex; align-items: center; justify-content: center;
    font-size: 28px; background: var(--apc-color-surface-container-highest);
}
.alg-sc-card-main .alg-sc-card-icon { background: color-mix(in srgb, var(--apc-color-on-primary-container) 12%, transparent); }
.alg-sc-card-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.alg-sc-card-txt b { font-size: var(--apc-type-title-md-size); line-height: var(--apc-type-title-md-line-height); font-weight: var(--apc-type-title-md-weight); }
.alg-sc-card-txt small { font-size: var(--apc-type-body-md-size); line-height: var(--apc-type-body-md-line-height); color: var(--apc-color-on-surface-variant); }
.alg-sc-card-main .alg-sc-card-txt small { color: inherit; opacity: 0.85; }
.alg-sc-card-steps {
    flex: none; align-self: flex-start; padding: 2px 10px; border-radius: var(--apc-shape-corner-sm);
    font-size: var(--apc-type-label-md-size); font-weight: var(--apc-type-label-md-weight);
    background: var(--apc-color-secondary-container); color: var(--apc-color-on-secondary-container);
}
.alg-sc-auto { margin: 0; text-align: center; font-size: var(--apc-type-body-sm-size); color: var(--apc-color-on-surface-variant); }

.alg-sc {
    position: fixed; inset: 0; z-index: 1150; display: flex; flex-direction: column;
    background: var(--apc-color-surface); color: var(--apc-color-on-surface);
}
/* Barra superior de M3: botón de volver (icono) y título */
.alg-sc-head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px 16px 8px 8px; }
.alg-sc-icon-btn { font-size: 22px; line-height: 1; }
.alg-sc-titles { display: flex; flex-direction: column; min-width: 0; }
.alg-sc-titles h1 {
    margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--apc-color-on-surface);
    font-size: var(--apc-type-title-lg-size); line-height: var(--apc-type-title-lg-line-height); font-weight: var(--apc-type-title-lg-weight);
}
.alg-sc-titles span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--apc-color-on-surface-variant);
    font-size: var(--apc-type-body-md-size); line-height: var(--apc-type-body-md-line-height);
}
/* Indicador de progreso lineal de M3 */
.alg-sc-bar { flex: none; height: 4px; margin: 0 16px; border-radius: var(--apc-shape-corner-full); background: var(--apc-color-secondary-container); overflow: hidden; }
.alg-sc-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: var(--apc-shape-corner-full); background: var(--apc-color-primary); transition: width var(--apc-motion-duration-long) var(--apc-motion-easing-standard); }
.alg-sc-body { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 14px 16px; }
.alg-sc-phone {
    height: 100%; max-height: 780px; padding: 9px; border-radius: 40px; background: var(--apc-color-surface-container-lowest);
    box-shadow: 0 0 0 2px var(--apc-color-outline-variant), var(--apc-elevation-3);
}
.alg-sc-screen { position: relative; height: 100%; aspect-ratio: 780 / 1688; border-radius: 31px; overflow: hidden; background: var(--apc-color-surface-container); }
.alg-sc-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* La zona que señala Tino: su color naranja, para que se distinga de la app */
.alg-sc-spot {
    position: absolute; left: calc(var(--x, 0) * 1%); top: calc(var(--y, 0) * 1%);
    width: calc(var(--w, 0) * 1%); height: calc(var(--h, 0) * 1%);
    border: 3px solid #ea6a1c; border-radius: 12px; opacity: 0; pointer-events: none;
    box-shadow: 0 0 0 9999px var(--apc-color-scrim);
    transition: opacity 0.3s ease;
}
.alg-sc-spot.alg-sc-spot-show { opacity: 1; animation: alg-sc-pulse 1.6s ease-in-out infinite; }
@keyframes alg-sc-pulse { 50% { border-color: #fdba74; } }
/* Lista de pasos: destinos de la navegación de M3 (el actual, en secondary-container) */
.alg-sc-list { display: none; order: -1; margin: 0; padding: 0; list-style: none; counter-reset: alg-sc; width: 260px; flex: none; }
.alg-sc-list li { counter-increment: alg-sc; }
.alg-sc-list button {
    position: relative; isolation: isolate; overflow: hidden;
    width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 4px 16px 4px 10px; border: 0;
    border-radius: var(--apc-shape-corner-full); background: none; color: var(--apc-color-on-surface-variant);
    font-family: var(--apc-font-family-plain); font-size: var(--apc-type-label-lg-size); font-weight: var(--apc-type-label-lg-weight);
    letter-spacing: var(--apc-type-label-lg-tracking); text-align: left; cursor: pointer;
}
.alg-sc-list button::before {
    content: counter(alg-sc); flex: none; width: 28px; height: 28px; border-radius: var(--apc-shape-corner-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--apc-type-label-md-size); font-weight: var(--apc-type-label-md-weight);
    background: var(--apc-color-surface-container-highest); color: var(--apc-color-on-surface-variant);
}
.alg-sc-list button::after { content: ''; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; }
.alg-sc-list button:hover::after { opacity: var(--apc-state-hover-opacity); }
.alg-sc-list button:focus-visible { outline: var(--apc-focus-ring-width) solid var(--apc-focus-ring-color); outline-offset: calc(var(--apc-focus-ring-offset) * -1); }
.alg-sc-done button { color: var(--apc-color-on-surface); }
.alg-sc-done button::before { content: '✓'; background: var(--apc-color-success-container); color: var(--apc-color-on-success-container); }
.alg-sc-now button { background: var(--apc-color-secondary-container); color: var(--apc-color-on-secondary-container); }
.alg-sc-now button::before { background: var(--apc-color-primary); color: var(--apc-color-on-primary); }
/* Final: diálogo de M3 */
.alg-sc-end { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--apc-color-scrim); }
.alg-sc-end-box {
    width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--apc-shape-corner-xl);
    background: var(--apc-color-surface-container-high); box-shadow: var(--apc-elevation-3); text-align: center;
}
.alg-sc-end-box strong {
    color: var(--apc-color-on-surface);
    font-size: var(--apc-type-headline-sm-size); line-height: var(--apc-type-headline-sm-line-height); font-weight: var(--apc-type-headline-sm-weight);
}
.alg-sc-end-row { display: flex; gap: 8px; }
.alg-sc-end-row .alg-sc-btn { flex: 1; }
.alg-sc-end-box .alg-sc-btn-main { height: auto; min-height: 48px; flex-wrap: wrap; gap: 6px; padding: 8px 24px; white-space: normal; }
.alg-sc-controls { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px 16px; }
/* Botones .apc-button de la app (tema md3): solo el tamaño de la barra de controles y los iconos de texto */
.alg-sc-controls .apc-button { height: 48px; min-height: 48px; padding: 0 20px; gap: 8px; }
.alg-sc-btn span { font-size: 18px; line-height: 1; }
.alg-sc-btn-main small { font-weight: var(--apc-type-label-md-weight); opacity: 0.85; }

/* En un escenario: sin «Reiniciar» (están Anterior, Pausa y el menú); el sonido junto a los controles */
.alg-sc-on .alg-restart { display: none; }
.alg-sc-on .alg-voice { left: 16px; right: auto; top: auto; bottom: 16px; }
/* Pantalla apaisada: la lista de pasos a la derecha del móvil */
html[data-device="tablet"] .alg-sc-list { display: block; }
@media (max-width: 900px), (max-height: 500px) {
    .alg-sc-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .alg-sc-card { min-height: 0; padding: 12px; gap: 12px; }
    .alg-sc-card-icon { width: 42px; height: 42px; font-size: 22px; border-radius: var(--apc-shape-corner-md); }
    .alg-sc-menu h1 { font-size: var(--apc-type-headline-sm-size); line-height: var(--apc-type-headline-sm-line-height); }
    .alg-sc-head { min-height: 56px; padding: 4px 12px 4px 4px; }
    .alg-sc-titles h1 { font-size: var(--apc-type-title-md-size); line-height: var(--apc-type-title-md-line-height); }
    .alg-sc-body { padding: 10px 12px; }
    .alg-sc-controls { justify-content: flex-end; padding: 8px 12px 12px 100px; }
    .alg-sc-on .alg-voice { left: 12px; bottom: 14px; }
}
/* En el propio móvil: la foto ocupa la pantalla, sin marco */
html[data-device="full"] .alg-sc-phone { padding: 0; border-radius: var(--apc-shape-corner-lg); box-shadow: var(--apc-elevation-2); }
html[data-device="full"] .alg-sc-screen { border-radius: var(--apc-shape-corner-lg); }
@media (max-width: 480px) {
    .alg-sc-controls { gap: 6px; padding-left: 84px; }
    .alg-sc-controls .apc-button { padding: 0 14px; }
    .alg-sc-controls #alg-sc-prev b, .alg-sc-controls #alg-sc-play b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* -------------------------------------------------------------------
   Tema Material Design 3 de la app (19.0.1.3.0)
   La página lleva data-apc-theme="md3" y data-apc-mode="dark" en <html> y carga una copia de
   los tokens --apc-* y del CSS de componentes del tema (static/md3, generada por
   scripts/sync_demo_theme.py): botones .apc-button / .apc-icon-button como en la app.
   La pantalla de la app que enseña Tino (#alg-tour-phone) lleva su propio data-apc-mode:
   claro de día, oscuro al atardecer y de noche. La cabina, la carretera, el anuncio y Tino
   conservan sus colores (son de la demostración, no de la app).
   ------------------------------------------------------------------- */
:root[data-apc-theme="md3"] {
    --alg-bg: var(--apc-color-background);
    --alg-surface: var(--apc-color-surface-container);
    --alg-surface-2: var(--apc-color-surface-container-high);
    --alg-border: var(--apc-color-outline-variant);
    --alg-text: var(--apc-color-on-surface);
    --alg-text-muted: var(--apc-color-on-surface-variant);
    --alg-accent-2: var(--apc-color-primary);
    --alg-success: var(--apc-color-success);
    --alg-danger: var(--apc-color-error);
}

/* Botones flotantes de la demostración (sonido y reiniciar): superficie de M3 */
.alg-restart, .alg-voice {
    border: 0; background: var(--apc-color-surface-container-high); color: var(--apc-color-on-surface);
    box-shadow: var(--apc-elevation-2); backdrop-filter: none;
    font-family: var(--apc-font-family-plain); font-weight: var(--apc-type-label-lg-weight);
}
.alg-restart:hover { background: var(--apc-color-surface-container-highest); }
.alg-restart:hover span { color: #fb923c; }
.alg-voice-sw { background: var(--apc-color-surface-container-highest); box-shadow: inset 0 0 0 2px var(--apc-color-outline); }
.alg-voice-sw i { background: var(--apc-color-outline); }
.alg-voice-on .alg-voice-sw { background: var(--apc-color-primary); box-shadow: none; }
.alg-voice-on .alg-voice-sw i { background: var(--apc-color-on-primary); }
.alg-restart:focus-visible, .alg-voice:focus-visible {
    outline: var(--apc-focus-ring-width) solid var(--apc-focus-ring-color); outline-offset: var(--apc-focus-ring-offset);
}
/* En el móvil, con la pantalla de la app abierta, no tapan su barra superior (botón «Crear documento») */
@media (max-width: 700px), (max-height: 500px) {
    .alg-touring .alg-restart, .alg-touring .alg-voice { top: auto; bottom: 12px; }
}

/* ---- La app que enseña Tino (#alg-tour-phone), como la app real con el tema md3 ---- */
.alg-tour-phone {
    background: var(--apc-color-background); color: var(--apc-color-on-background);
    font-family: var(--apc-font-family-plain); border-color: #0b1220;
}
/* Barra superior de la app (top app bar de M3): marca y título de la pantalla */
.alg-apl-bar {
    min-height: 56px; gap: 8px; padding: 8px 16px; border-bottom: 0;
    background: var(--apc-color-surface-container); color: var(--apc-color-on-surface);
}
.alg-apl-brand { font-size: var(--apc-type-title-sm-size); font-weight: var(--apc-type-title-md-weight); }
.alg-apl-title { color: var(--apc-color-primary); font-size: var(--apc-type-title-sm-size); font-weight: var(--apc-type-title-md-weight); }
.alg-apl-body { padding: 12px 16px; gap: 12px; }
/* Secciones (tarjeta rellena de M3) */
.alg-apl-card { padding: 12px 16px 16px; border: 0; border-radius: var(--apc-shape-corner-md); background: var(--apc-color-surface-container-low); box-shadow: none; }
.alg-apl-card h4 { margin-bottom: 12px; color: var(--apc-color-on-surface); font-size: var(--apc-type-title-sm-size); font-weight: var(--apc-type-title-sm-weight); }
.alg-apl-hint, .alg-apl-legal { color: var(--apc-color-on-surface-variant); font-size: var(--apc-type-body-sm-size); line-height: var(--apc-type-body-sm-line-height); }
/* Campo relleno de M3: fondo surface-container-highest, esquinas de arriba e indicador abajo */
.alg-apl-field { margin-bottom: 12px; }
.alg-apl-field label { margin-bottom: 4px; color: var(--apc-color-on-surface-variant); font-size: var(--apc-type-body-sm-size); font-weight: var(--apc-type-label-md-weight); }
.alg-apl-input {
    min-height: 48px; padding: 8px 16px; border: 0; border-radius: var(--apc-shape-corner-xs-top);
    background: var(--apc-color-surface-container-highest); color: var(--apc-color-on-surface);
    box-shadow: inset 0 calc(var(--apc-border-width) * -1) 0 0 var(--apc-color-on-surface-variant);
    font-size: var(--apc-type-body-lg-size); font-weight: var(--apc-type-body-lg-weight);
}
.alg-apl-ph { color: var(--apc-color-on-surface-variant); font-size: var(--apc-type-body-lg-size); font-weight: var(--apc-type-body-lg-weight); }
.alg-apl-focus, .alg-apl-filled { border: 0; background: var(--apc-color-surface-container-highest); }
.alg-apl-focus { box-shadow: inset 0 calc(var(--apc-border-width-focus) * -1) 0 0 var(--apc-color-primary); }
.alg-apl-field:has(.alg-apl-focus) label { color: var(--apc-color-primary); }
.alg-apl-caret { background: var(--apc-color-primary); }
.alg-apl-chip { padding: 2px 8px; border-radius: var(--apc-shape-corner-sm); background: var(--apc-color-secondary-container); color: var(--apc-color-on-secondary-container); font-size: var(--apc-type-label-md-size); }
/* Lista de sugerencias: el desplegable del selector con búsqueda de la app */
.alg-apl-suggest { margin-top: 0; border: 0; border-radius: var(--apc-shape-corner-xs); background: var(--apc-color-surface-container); box-shadow: var(--apc-elevation-2); }
.alg-apl-sug { min-height: 48px; justify-content: center; padding: 8px 16px; border-bottom: 0; color: var(--apc-color-on-surface); font-size: var(--apc-type-body-lg-size); }
.alg-apl-sug span { color: var(--apc-color-on-surface-variant); font-size: var(--apc-type-body-sm-size); }
.alg-apl-sug-hit { background: var(--apc-color-surface-container-highest); }
.alg-apl-sug .alg-apl-ripple { background: currentColor; opacity: 0.3; }
/* Botones de la app: relleno (primary), tonal y contorneado de M3 */
.alg-apl-btn {
    min-height: 40px; padding: 10px 24px; border-radius: var(--apc-shape-corner-full);
    background: var(--apc-color-primary); color: var(--apc-color-on-primary); box-shadow: none;
    font-family: var(--apc-font-family-plain); font-size: var(--apc-type-label-lg-size); font-weight: var(--apc-type-label-lg-weight);
}
.alg-apl-btn-amber { background: var(--apc-color-warning-container); color: var(--apc-color-on-warning-container); box-shadow: none; }
.alg-apl-btn-ghost { background: transparent; color: var(--apc-color-primary); border: var(--apc-border-width) solid var(--apc-color-outline-variant); }
.alg-apl-ripple { background: currentColor; opacity: 0.35; }
.alg-apl-loading { color: var(--apc-color-on-surface); font-weight: var(--apc-type-title-md-weight); }
.alg-apl-loading span { border-color: var(--apc-color-secondary-container); border-top-color: var(--apc-color-primary); }
/* Ficha del DeCA: tarjeta con la lista de datos de la app */
.alg-apl-doc { padding: 16px; border: 0; border-radius: var(--apc-shape-corner-md); background: var(--apc-color-surface-container-low); color: var(--apc-color-on-surface); }
.alg-apl-doc-head { font-family: var(--apc-font-family-plain); font-size: var(--apc-type-title-md-size); }
.alg-apl-doc-route { color: var(--apc-color-on-surface); font-size: var(--apc-type-title-lg-size); line-height: var(--apc-type-title-lg-line-height); font-weight: var(--apc-type-title-lg-weight); }
.alg-apl-row { padding: 8px 0; border-bottom: var(--apc-border-width) solid var(--apc-color-outline-variant); font-size: var(--apc-type-body-md-size); }
.alg-apl-row span { color: var(--apc-color-on-surface-variant); }
/* Estado: el chip de estado de la app */
.alg-apl-pill {
    padding: 4px 12px; border-radius: var(--apc-shape-corner-sm); font-family: var(--apc-font-family-plain);
    font-size: var(--apc-type-label-md-size); font-weight: var(--apc-type-label-md-weight);
    background: var(--apc-color-surface-container-highest); color: var(--apc-color-on-surface-variant);
}
.alg-apl-pill-ok { background: var(--apc-color-success-container); color: var(--apc-color-on-success-container); }
.alg-apl-pill-wait { background: var(--apc-color-warning-container); color: var(--apc-color-on-warning-container); }
.alg-apl-sigline { border-radius: var(--apc-shape-corner-sm); background: var(--apc-color-success-container); color: var(--apc-color-on-success-container); font-size: var(--apc-type-body-md-size); }
.alg-apl-mail { border-radius: var(--apc-shape-corner-sm); background: var(--apc-color-secondary-container); color: var(--apc-color-on-secondary-container); }
.alg-apl-ok { color: var(--apc-color-success) !important; }
.alg-apl-mail.alg-apl-ok { color: var(--apc-color-on-success-container) !important; background: var(--apc-color-success-container); }
.alg-apl-qr img, .alg-apl-qr canvas, .alg-apl-qr svg, .alg-apl-police-qr img, .alg-apl-police-qr canvas, .alg-apl-police-qr svg { background: #fff; }
/* Firma: lienzo en surface-container-highest; el trazo toma el color del texto */
.alg-apl-sign { border: var(--apc-border-width) dashed var(--apc-color-outline); border-radius: var(--apc-shape-corner-sm); background: var(--apc-color-surface-container-highest); color: var(--apc-color-on-surface); }
.alg-apl-gps { color: var(--apc-color-on-surface-variant); font-size: var(--apc-type-body-sm-size); }
.alg-apl-photo { border: var(--apc-border-width) dashed var(--apc-color-outline); border-radius: var(--apc-shape-corner-sm); color: var(--apc-color-on-surface-variant); }
.alg-apl-signhead { color: var(--apc-color-on-surface); }
.alg-apl-signhead b { font-size: var(--apc-type-title-lg-size); font-weight: var(--apc-type-title-lg-weight); }
.alg-apl-signhead small { color: var(--apc-color-on-surface-variant); font-size: var(--apc-type-body-md-size); }
.alg-apl-signprog { background: var(--apc-color-secondary-container); }
.alg-apl-signprog i { background: var(--apc-color-primary); }
/* Barra de la ficha y menú «⋮ Más acciones»: botón de icono y menú de M3 */
.alg-apl-detailbar { min-height: 48px; padding: 0 0 8px; color: var(--apc-color-on-surface); font-size: var(--apc-type-title-md-size); }
.alg-apl-more { width: 40px; height: 40px; background: transparent; color: var(--apc-color-on-surface-variant); font-size: 20px; }
.alg-apl-menu { padding: 8px 0; border: 0; border-radius: var(--apc-shape-corner-xs); background: var(--apc-color-surface-container); box-shadow: var(--apc-elevation-2); }
.alg-apl-menu button {
    min-height: 48px; padding: 8px 12px; border-radius: 0; background: transparent; color: var(--apc-color-on-surface);
    font-family: var(--apc-font-family-plain); font-size: var(--apc-type-label-lg-size);
}
.alg-apl-menu button.alg-apl-menu-pick { background: var(--apc-color-surface-container-highest); }
.alg-apl-menu-txt small { color: var(--apc-color-on-surface-variant); font-family: var(--apc-font-family-plain); font-size: var(--apc-type-body-sm-size); }
/* Control en ruta */
.alg-apl-police { border: 0; border-radius: var(--apc-shape-corner-md); background: var(--apc-color-surface-container-low); color: var(--apc-color-on-surface); }
.alg-apl-police-head { color: var(--apc-color-on-surface); font-size: var(--apc-type-title-lg-size); font-weight: var(--apc-type-title-lg-weight); }
.alg-apl-police-sub { color: var(--apc-color-on-surface-variant); }
.alg-apl-police-sub b { color: var(--apc-color-on-surface); }
.alg-apl-police-qr { border: var(--apc-border-width) solid var(--apc-color-outline-variant); border-radius: var(--apc-shape-corner-md); background: #fff; }
.alg-apl-police-route { color: var(--apc-color-on-surface); }
.alg-apl-stamp { background: color-mix(in srgb, var(--apc-color-success-container) 88%, transparent); color: var(--apc-color-on-success-container); }
.alg-apl-frame { background: var(--apc-color-background); }

/* Menú «¿Qué quieres ver?» en el móvil (19.0.1.4.0): «Sonido» y «Reiniciar» bajan al pie, como en la demo
   completa, y el menú les reserva su hueco abajo para no tapar el título ni la última tarjeta. */
@media (max-width: 900px), (max-height: 500px) {
    .alg-sc-menu-on .alg-restart, .alg-sc-menu-on .alg-voice { top: auto; bottom: 12px; }
    .alg-sc-menu { padding-bottom: 72px; }
}