@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;800;900&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
    --ink: #F2F6FA;
    --paper: #08090B;
    --surface: #131619;
    --surface-2: #1B1F24;
    --accent: #1EA7E0;
    --accent-ink: #04151F;
    --line: #272C32;
    --muted: #8A96A3;
    --success: #4ADE80;
    --success-bg: #10301F;
    --progress: #FBBF24;
    --progress-bg: #322A0B;
    --pending-bg: #1B1F24;
    --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px -12px rgba(0,0,0,0.7);
}

* { box-sizing: border-box; }

body {
    font-family: 'Public Sans', Arial, Helvetica, sans-serif;
    background: var(--paper);
    color: var(--ink);
    margin: 0;
    padding: 0;
}

.contenedor {
    max-width: 480px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

/* ---- Marca ---- */
.marca { display: flex; align-items: center; gap: 8px; }

/* Mismo símbolo de marca que el sitio (ver estilo-sitio.css): el pedazo de rueda que
   asoma por detrás del nombre. Acá va algo más chico porque en la app el logo vive
   dentro de una píldora sobre el mapa y el espacio en pantalla de celular es escaso. */
.swoosh {
    display: block;
    width: 12px;
    height: 21px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='26' viewBox='0 0 15 26'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='3' y1='0' x2='15' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231EA7E0'/%3E%3Cstop offset='.55' stop-color='%231EA7E0' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%231EA7E0' stop-opacity='.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M15 1.4a11.6 11.6 0 0 0 0 23.2V19.6a6.6 6.6 0 0 1 0-13.2V1.4Z' fill='url(%23r)'/%3E%3C/svg%3E") no-repeat center / contain;
}
.swoosh span { display: none; }
.wordmark { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; }
.wordmark em { color: var(--accent); font-style: normal; }

h1 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: var(--accent);
    margin-bottom: 4px;
}
.subtitulo {
    color: var(--muted);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 14px;
}
label {
    display: block;
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}
input, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
}
button, .boton {
    display: inline-block;
    margin-top: 18px;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    padding: 13px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-family: 'Public Sans', sans-serif;
}
button.secundario { background: var(--ink); color: var(--paper); }
button:disabled { background: var(--muted); cursor: not-allowed; }
.error {
    background: var(--progress-bg);
    color: #F87171;
    padding: 10px 12px;
    border-radius: 10px;
    margin-top: 12px;
    font-size: 14px;
}
.ok {
    background: var(--success-bg);
    color: var(--success);
    padding: 10px 12px;
    border-radius: 10px;
    margin-top: 12px;
    font-size: 14px;
}
.mapa {
    height: 280px;
    border-radius: 12px;
    margin-top: 10px;
    border: 1px solid var(--line);
}
.tarjeta {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    margin-top: 14px;
    box-shadow: var(--shadow);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 9px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    width: fit-content;
}
.pill .punto { width: 7px; height: 7px; border-radius: 50%; }
.pill.pendiente, .estado-badge.estado-pendiente { background: var(--pending-bg); color: var(--muted); }
.pill.pendiente .punto { background: var(--muted); }
.pill.progreso, .estado-badge.estado-asignado, .estado-badge.estado-recogido, .estado-badge.estado-en_camino { background: var(--progress-bg); color: var(--progress); }
.pill.progreso .punto { background: var(--progress); }
.pill.completo, .estado-badge.estado-entregado { background: var(--success-bg); color: var(--success); }
.pill.completo .punto { background: var(--success); }

.estado-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 700;
}

.enlace-secundario {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: var(--muted);
    font-size: 14px;
}

/* ---- Patrón mapa a pantalla completa + hoja inferior (estilo Uber) ---- */
html, body.pantalla-mapa { height: 100%; overflow: hidden; }
.mapa-fondo {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.barra-superior {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.barra-superior .marca {
    background: var(--surface);
    padding: 8px 14px;
    border-radius: 100px;
    box-shadow: var(--shadow);
    pointer-events: auto;
}
.hoja {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px -10px rgba(0,0,0,0.6);
    padding: 10px 18px 24px;
    max-width: 480px;
    margin: 0 auto;
    max-height: 52vh;
    overflow-y: auto;
}
.boton-ubicacion {
    position: fixed;
    z-index: 25;
    right: 16px;
    bottom: calc(52vh + 16px);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--accent);
}
.boton-ubicacion svg { width: 20px; height: 20px; }
.boton-superior {
    margin-left: auto;
    pointer-events: auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    text-decoration: none;
    flex-shrink: 0;
}
.boton-superior svg { width: 18px; height: 18px; }
.hoja .manija {
    width: 40px; height: 4px;
    background: var(--line);
    border-radius: 4px;
    margin: 0 auto 14px;
}
.hoja h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 14px;
}