/* Bicla's design language: black, white and one soft warm gray in three steps, plus one brand color, signal yellow
   (--brand), always under black text and kept to about a tenth of a page: the primary action, the dot beside
   the name, the closing pitch, the pickup end of a trip (yellow up, black down, on the form, the lists and the maps),
   the step a trip is on, the stars and a trip still open. Flat, no borders, no dividers:
   separation comes from fill and padding, emphasis from size and weight. Two other colors that mean something:
   green for a rider's trip in progress (breathing) and for an action that went through, red for one that failed.
   The one light effect is --shadow-recess, a hairline of shade inside every control a value goes into.
   Class names follow BEM: .block, .block__element, .block--modifier.
   Utilities (.muted, .small, .hidden, .visually-hidden) are the only exceptions.
   Breakpoints: 640px (sm) and 1024px (lg). */

:root {
    color-scheme: light;
    --ink: #000;
    --paper: #fff;
    --warm: #faf9f7;
    --field: #f1eee9;
    --warm-deep: #e8e3dc;
    --muted: #6f6a63;
    --progress: #0b4d2c;
    --progress-peak: #12703f;
    --danger: #7f1d1d;
    --brand: #ffd23f;
    --brand-hover: #f5c518;
    --brand-soft: #fff1bf;
    --star: #f5b400;
    --done-soft: #dcefe2;
    --google-blue: #4285f4;
    --ink-hover: #24211e;
    --warm-deep-hover: #ddd6cc;
    --google-blue-hover: #3367d6;

    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.625rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.25rem;

    --radius-panel: 12px;
    --radius-control: 8px;
    --radius-chip: 6px;
    --shadow-recess: inset 0 1px 2px rgb(0 0 0 / 0.08);
    --font: "Outfit", ui-sans-serif, system-ui, sans-serif;
    --gutter: 24px;
}

@media (min-width: 640px) {
    :root { --gutter: 32px; }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.5;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
input, textarea, select, button { font: inherit; color: inherit; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::placeholder { color: var(--muted); }

:focus-visible,
.file-field:focus-within,
.segmented:focus-within,
.address-field__box:focus-within,
.choice__input:focus-visible + .choice__label,
.stars__input:focus-visible + .stars__label { outline: 2px solid var(--ink); outline-offset: 3px; }

.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.icon { flex-shrink: 0; width: 24px; height: 24px; }
.icon--sm { width: 20px; height: 20px; }
.icon--xs { width: 16px; height: 16px; }
.icon--filled { fill: currentColor; }

/* Header and footer */

/* The header in three: Bicla on the left, the menu pill in the middle, the account on the right; in the flow (it scrolls away) */
.site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 16px var(--gutter) 32px;
}

@media (min-width: 640px) {
    .site-header { padding-top: 24px; padding-bottom: 48px; }
}

.site-brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.025em; text-decoration: none; }
/* The mark: a yellow dot, as on the share images and the emails */
.site-brand__mark { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); transition: background-color 0.2s; }
.site-brand:hover .site-brand__mark { background: var(--ink); transition-delay: 0.35s; }
/* Just for fun: hovering Bicla spreads the dot over the whole page, behind everything (z-index -1 in the root
   stacking context, so panels and controls keep their fill); a shadow's spread, unlike a scale, adds no scroll */
.site-brand__mark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    box-shadow: 0 0 0 0 var(--brand);
    pointer-events: none;
    transition: box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.site-brand:hover .site-brand__mark::before { box-shadow: 0 0 0 150vmax var(--brand); transition: box-shadow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* The menu: a pill with the two sides of the marketplace, the current one filled in black */
.site-nav { display: flex; gap: 6px; max-width: 100%; padding: 6px; border-radius: 999px; background: var(--field); box-shadow: var(--shadow-recess); }
.site-nav__link, .site-account {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
}
.site-nav__link:hover, .site-account:hover { background: var(--warm-deep); }
.site-nav__link[aria-current="page"], .site-account[aria-current="page"] { background: var(--ink); color: var(--paper); }
.site-nav__short { display: none; }
.site-account { justify-self: end; }

@media (max-width: 479px) {
    .site-header { gap: 6px; padding-left: 16px; padding-right: 16px; }
    .site-brand { gap: 8px; font-size: var(--text-lg); }
    .site-brand__mark { width: 16px; height: 16px; }
    .site-nav__link, .site-account { padding: 8px 10px; }
    .site-nav__long { display: none; }
    .site-nav__short { display: inline; }
}

@media (min-width: 640px) {
    .site-nav__link, .site-account { padding: 10px 20px; font-size: var(--text-base); }
}

.text-link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: auto auto 0;
    padding: 40px var(--gutter);
}

.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }

/* Page measures: a stack of controls, reading prose, columns, or the admin's tables at a desktop's whole width */

.page { width: 100%; margin: 0 auto; padding: 0 var(--gutter) 80px; }
.page--form { max-width: 36rem; }
.page--prose { max-width: 42rem; }
.page--wide { max-width: 72rem; }
.page--full { max-width: 88rem; }

/* The pitch beside the form: one stack on a phone, the form in a fixed column from lg */
.split { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 48px; }
.split__aside { min-width: 0; }

@media (min-width: 1024px) {
    /* 1fr on the steps row so a form taller than the pitch stretches it, not the gap under the heading */
    .split { grid-template-columns: minmax(0, 1fr) 29rem; grid-template-rows: auto auto 1fr; gap: 64px; }
    .split__main { grid-column: 2; grid-row: 1 / span 3; }
    .split__steps { grid-column: 1; }
    .split__art { grid-column: 1; align-self: start; }
}

/* An Open Peeps drawing (CC0, openpeeps.com) under the pitch, with a yellow parcel added in the same line */
.illustration { width: 100%; max-width: 30rem; height: auto; }
.illustration--person { width: auto; max-width: 100%; height: 18rem; }

@media (min-width: 1024px) {
    .illustration--person { height: 22rem; }
}

/* :not(:first-child) rather than * + * so the stack's spacing beats a child's own margin (the closing pitch's) */
.stack > :not(:first-child) { margin-top: 32px; }

/* Type */

.display {
    font-size: clamp(var(--text-4xl), 5vw, 4rem);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.title { margin-top: 32px; font-size: var(--text-4xl); line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; }

@media (min-width: 640px) {
    .title { font-size: var(--text-5xl); }
}

.lede { margin-top: 20px; max-width: 36rem; font-size: var(--text-lg); color: var(--muted); }
.eyebrow { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--muted); }
.card-title { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.025em; }
.card-lede { margin-top: 8px; font-size: var(--text-base); color: var(--muted); }
.price { font-size: var(--text-5xl); line-height: 1; font-weight: 700; letter-spacing: -0.025em; }

/* Surfaces */

.card { padding: 24px; border-radius: var(--radius-panel); background: var(--warm); }

@media (min-width: 640px) {
    .card { padding: 32px; }
}

/* Hidden inputs (the CSRF token) don't count as the previous sibling, so the first visible child sits flush */
.card > :where(:not([type="hidden"]) ~ *),
.form > :where(:not([type="hidden"]) ~ *) { margin-top: 24px; }

/* The yellow panel a page closes on, pointing at the other side of the marketplace */
.closing-pitch {
    display: block;
    margin-top: 112px;
    padding: 48px 28px;
    border-radius: var(--radius-panel);
    background: var(--brand);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.15s;
}

.closing-pitch:hover { background: var(--brand-hover); }

.closing-pitch__body { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
.closing-pitch__text { max-width: 36rem; font-size: var(--text-xl); }
.closing-pitch__arrow { width: 44px; height: 44px; transition: transform 0.15s ease-out; }
.closing-pitch:hover .closing-pitch__arrow { transform: translateX(8px); }

@media (min-width: 640px) {
    .closing-pitch { margin-top: 144px; padding: 56px; }
    .closing-pitch__body { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; margin-top: 48px; }
}

/* Messages, solid so they can't be missed: a flash after a redirect, a notice inline where something went wrong, and a warning for a standing condition worth knowing */
.flash,
.notice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: var(--radius-control); color: var(--paper); font-weight: 600; background: var(--danger); }
.flash .icon,
.notice .icon { margin-top: 1px; }
.flash { margin: 0 0 24px; }
.flash--success { background: var(--progress); }
.notice,
.warning { margin-top: 24px; }
.warning { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: var(--radius-control); background: var(--brand-soft); }
.warning .icon { margin-top: 2px; }
.notice:nth-child(1 of :not([type="hidden"])),
.warning:nth-child(1 of :not([type="hidden"])) { margin-top: 0; }

/* Labelled facts */
.details { display: grid; gap: 16px; }
.details__term { font-size: var(--text-sm); color: var(--muted); }
.details__value { font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.details__value--text { white-space: pre-line; }

@media (min-width: 640px) {
    .details--split { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}

/* Icon, claim and line: the pitch both entry pages explain themselves with */
.pitch-list > * + * { margin-top: 28px; }
.pitch-list__item { display: flex; gap: 16px; }
.pitch-list__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); }
.pitch-list__title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.025em; }
.pitch-list__text { max-width: 28rem; margin-top: 4px; font-size: var(--text-base); color: var(--muted); }

/* Forms. Fields sink into the card with the recess; the card stays near white. */

.form__input,
.form__textarea,
.file-field,
.address-field__box,
.segmented { border-radius: var(--radius-control); background: var(--field); box-shadow: var(--shadow-recess); }

.form__field { display: block; }
.form__label { display: block; font-size: var(--text-base); font-weight: 600; }
.form__hint { display: block; margin-top: 4px; font-size: var(--text-sm); color: var(--muted); }
.form__error { display: block; margin-top: 8px; font-size: var(--text-sm); font-weight: 600; }
.form__link { display: inline-block; margin-top: 12px; font-size: var(--text-sm); font-weight: 600; text-underline-offset: 4px; }

.form__input,
.form__textarea {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 16px 20px;
    border: 0;
    font-size: var(--text-lg);
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s;
}

.form__textarea { min-height: 7rem; resize: vertical; }
.form__textarea--short { min-height: 5rem; }
.form__input--code { font-variant-numeric: tabular-nums; letter-spacing: 0.4em; text-align: center; }
.form__input--small { padding: 12px 16px; font-size: var(--text-base); }

/* A file input drawn as a row with the file's name and an "Elegir" chip */
.file-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.file-field:hover { background: var(--warm-deep); }
.file-field__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-lg); color: var(--muted); }
.file-field__name--chosen { color: var(--ink); }
.file-field__chip { flex-shrink: 0; padding: 8px 16px; border-radius: var(--radius-chip); background: var(--paper); font-size: var(--text-base); font-weight: 600; }

/* A two-way setting as one track with a black fill that slides to the chosen side. Radios underneath. */
.segmented {
    position: relative;
    display: flex;
    margin-top: 12px;
    padding: 6px;
    border-radius: var(--radius-panel);
}

.segmented::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc((100% - 12px) / 2);
    border-radius: var(--radius-chip);
    background: var(--ink);
    transition: transform 0.15s ease-out;
    pointer-events: none;
}

.segmented:has(.segmented__input:nth-of-type(2):checked)::before { transform: translateX(100%); }
.segmented__input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__option { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; padding: 12px 8px; text-align: center; font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: color 0.15s; }
.segmented__input:checked + .segmented__option { color: var(--paper); }

.hint-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--text-sm); color: var(--muted); }

/* Buttons: yellow fill under black text for the primary action, warm gray for the rest, Google blue for the hand-off to Maps.
   Disabled drops to the gray fill with muted text instead of fading out. */
.button {
    display: block;
    width: 100%;
    padding: 16px 24px;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--brand);
    color: var(--ink);
    font-size: var(--text-lg);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.button:hover:not(:disabled) { background: var(--brand-hover); }
.button:disabled { background: var(--warm-deep); color: var(--muted); cursor: not-allowed; }
.button--secondary { background: var(--warm-deep); color: var(--ink); }
.button--secondary:hover:not(:disabled) { background: var(--warm-deep-hover); }
.button--ink { background: var(--ink); color: var(--paper); }
.button--ink:hover:not(:disabled) { background: var(--ink-hover); }
/* An icon before the text, centered with it */
.button--icon { display: flex; align-items: center; justify-content: center; gap: 10px; }
.button--google { background: var(--google-blue); color: var(--paper); }
.button--google:hover:not(:disabled) { background: var(--google-blue-hover); }
.button--small { display: inline-block; width: auto; padding: 8px 16px; font-size: var(--text-sm); }
.button--danger { background: var(--warm-deep); color: var(--danger); }
.button--danger:hover:not(:disabled) { background: var(--warm-deep-hover); }

.button-row > * + * { margin-top: 12px; }

/* The band above the header while Bicla is new: there may be little around yet, so share it with someone.
   Yellow so it's seen, with an Open Peeps bust (CC0) on their phone sitting on its bottom edge. */
.invite-banner { background: var(--brand); color: var(--ink); }
.invite-banner__inner {
    position: relative;
    display: grid;
    grid-template-areas: "body art" "share art";
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 16px;
    max-width: 72rem;
    margin: 0 auto;
    padding: 16px 16px 0;
}
.invite-banner__body { grid-area: body; align-self: start; }
.invite-banner__close { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; padding: 8px; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: background-color 0.15s; }
.invite-banner__close:hover { background: rgb(0 0 0 / 0.08); }
.invite-banner__title { font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; }
.invite-banner__text { margin-top: 4px; font-size: var(--text-base); line-height: 1.45; }
.invite-banner__share { grid-area: share; display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 16px 0; background: var(--ink); color: var(--paper); }
.invite-banner__share:hover:not(:disabled) { background: var(--ink-hover); }
.invite-banner__art { grid-area: art; width: 92px; height: auto; padding-top: 32px; }

@media (min-width: 640px) {
    .invite-banner__inner {
        grid-template-areas: "body share art";
        grid-template-columns: 1fr auto auto;
        column-gap: 32px;
        padding: 0 var(--gutter);
    }
    .invite-banner__body { align-self: center; padding: 20px 0; }
    .invite-banner__share { align-self: center; margin: 0; }
    .invite-banner__title { font-size: var(--text-xl); }
    .invite-banner__text { max-width: 38rem; }
    .invite-banner__art { width: 104px; padding-top: 12px; }
    .invite-banner__inner { padding-right: calc(var(--gutter) + 36px); }
}

/* The line under a submit button: "Al pedir el envío aceptás los términos y condiciones." */
.terms-note { margin-top: 16px; font-size: var(--text-sm); color: var(--muted); text-align: center; }

/* One of a list of options: cancellation reasons */
.choices { display: grid; gap: 8px; }
.choice { position: relative; }
.choice__input { position: absolute; opacity: 0; }
.choice__label { display: block; padding: 12px 16px; border-radius: var(--radius-control); background: var(--paper); font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: background-color 0.15s; }
.choice__label:hover { background: var(--warm); }
.choice__input:checked + .choice__label { background: var(--ink); color: var(--paper); }

.cancel-panel { padding: 20px; border-radius: var(--radius-control); background: var(--field); }
.cancel-panel > * + * { margin-top: 16px; }

/* Address search: the input, and a drawer of suggestions that floats over the form */

.address-field { position: relative; margin-top: 12px; }
.address-field__box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
}
.address-field--open .address-field__box { border-radius: var(--radius-control) var(--radius-control) 0 0; outline-offset: 0; }
/* The end's arrow on a disc: yellow for the pickup, black for the dropoff, as on the maps */
.address-field__end { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); }
.address-field__end--dropoff { background: var(--ink); color: var(--paper); }
.address-field__input { flex: 1; min-width: 0; padding: 16px 0; border: 0; background: none; font-size: var(--text-lg); outline: none; }
.address-field__list {
    position: absolute;
    z-index: 1100;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 28rem;
    overflow-y: auto;
    padding: 6px;
    border-radius: 0 0 var(--radius-control) var(--radius-control);
    background: var(--paper);
    box-shadow: 0 0 0 2px var(--ink);
    clip-path: inset(0 -2px -2px);
}
.address-field__option { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-chip); cursor: pointer; }
.address-field__option--active { background: var(--warm); }
.address-field__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--warm-deep); }
.address-field__label { font-size: var(--text-base); font-weight: 600; }
.address-field__context { font-size: var(--text-sm); color: var(--muted); }
.address-field__status { padding: 10px; font-size: var(--text-sm); color: var(--muted); }
.address-note { margin-top: 12px; }

/* Maps */

.map { height: 240px; border-radius: var(--radius-panel); background: var(--warm-deep); overflow: hidden; }

@media (min-width: 1024px) {
    .map { height: 280px; }
}

.map--admin { height: 480px; }
.map-caption { margin-top: 12px; font-size: var(--text-sm); color: var(--muted); }

.static-map { width: 100%; height: auto; border-radius: var(--radius-control); background: var(--warm-deep); }

/* The quote under the map */
.quote { padding: 20px; border-radius: var(--radius-control); background: var(--warm-deep); }
.quote__payment { margin-top: 24px; }
.quote__facts { margin-top: 12px; font-size: var(--text-base); color: var(--muted); }

/* The price the requester offers, between − and + buttons; typing works too */
.price-field { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.price-field__input { flex: 1; min-width: 0; padding: 4px 0; border: 0; background: none; text-align: center; font-variant-numeric: tabular-nums; }
.price-field__input:focus-visible { border-radius: var(--radius-chip); }
.price-field__step { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color 0.15s; }
.price-field__step:hover:not(:disabled) { background: var(--field); }
.price-field__step:disabled { color: var(--muted); cursor: not-allowed; }

/* The two addresses of a trip, with the up/down arrows */
.route { padding: 20px; border-radius: var(--radius-control); background: var(--field); }
.route > * + * { margin-top: 16px; }
.route__stop { display: flex; gap: 12px; }
.route__arrow { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); }
.route__arrow--dropoff { background: var(--ink); color: var(--paper); }
.route__address { font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.route__note { margin-top: 2px; font-size: var(--text-xs); color: var(--muted); }
.route--compact { padding: 14px 16px; }
.route--compact > * + * { margin-top: 8px; }
.route--compact .route__stop { align-items: center; }
.route--compact .route__arrow { width: 24px; height: 24px; }

/* The checkpoint timeline */
.timeline__step { position: relative; display: flex; gap: 16px; padding-bottom: 20px; }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 4px;
    left: 17px;
    width: 2px;
    background: var(--warm-deep);
}
.timeline__step--done:has(+ .timeline__step--done)::after { background: var(--ink); }
.timeline__dot { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); color: var(--muted); }
.timeline__step--done .timeline__dot { background: var(--ink); color: var(--paper); }
.timeline__step--current .timeline__dot { background: var(--brand); color: var(--ink); }
.timeline__body { padding-top: 6px; }
.timeline__label { font-size: var(--text-base); font-weight: 600; }
.timeline__step--pending .timeline__label { color: var(--muted); }
.timeline__step--current .timeline__label { display: inline-block; margin: -2px -8px; padding: 2px 8px; border-radius: var(--radius-chip); background: var(--brand-soft); }
.timeline__time { font-size: var(--text-sm); color: var(--muted); }

/* The rider shown to the requester */
.rider-card { display: flex; align-items: center; gap: 16px; }
.rider-card__photo { width: 64px; height: 64px; border-radius: var(--radius-control); background: var(--field); object-fit: cover; }
.rider-card__name { font-size: var(--text-xl); font-weight: 700; }
.rating-photo { display: block; margin-top: 32px; }

/* Stars: five radios drawn right to left, so hovering or checking one fills it and the ones before it */
.stars { min-width: 0; margin: 0; padding: 0; border: 0; }
.stars__options { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-top: 16px; }
.stars__input { position: absolute; opacity: 0; }
.stars__label { display: flex; padding: 4px; border-radius: var(--radius-chip); color: var(--warm-deep-hover); cursor: pointer; }
.stars__label .icon { width: 40px; height: 40px; fill: currentColor; transition: color 0.15s; }
.stars__input:checked ~ .stars__label { color: var(--star); }
.stars__options:hover .stars__label { color: var(--warm-deep-hover); }
.stars__options .stars__label:hover,
.stars__options .stars__label:hover ~ .stars__label { color: var(--star); }
.stars-shown { display: inline-flex; gap: 4px; vertical-align: middle; }
.stars-shown--sm { gap: 1px; }
.stars-shown__star { position: relative; display: flex; color: var(--warm-deep-hover); }
.stars-shown__star .icon { fill: currentColor; }
.stars-shown__star--full { color: var(--star); }
/* The left half of a star, painted over the empty one */
.stars-shown__half { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; overflow: hidden; color: var(--star); }
.stars-shown__half .icon { max-width: none; }
.rating-summary { display: inline-flex; align-items: center; gap: 8px; vertical-align: -2px; }
.rating-summary .stars-shown { vertical-align: baseline; }
.details__value .rating-summary { margin-left: 4px; }

/* Lists of trips */
.trip-list { border-radius: var(--radius-panel); background: var(--warm); overflow: hidden; }
.trip-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main price" "date date" "tags tags"; gap: 8px 16px; padding: 20px 24px; transition: background-color 0.15s; }
.trip-row__link { color: inherit; text-decoration: none; }
.trip-row__link::after { content: ""; position: absolute; inset: 0; }
.trip-row + .trip-row { box-shadow: inset 0 1px 0 var(--field); }
.trip-row:hover { background: var(--field); }
.trip-row__main { grid-area: main; min-width: 0; }
.trip-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-lg); font-weight: 700; }
.trip-row__stops { margin-top: 8px; font-size: var(--text-sm); color: var(--muted); }
.trip-row__stop { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.trip-row__stop span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-row__stop + .trip-row__stop { margin-top: 4px; }
.trip-row__end { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: var(--ink); }
.trip-row__end--dropoff { background: var(--ink); color: var(--paper); }
.trip-row__end .icon { width: 12px; height: 12px; }
.trip-row__side { display: contents; }
/* The status and, while it can still be given, the Calificar chip: under the row on a phone (after the date, which
   would squeeze the addresses next to them), under the price and date on wider screens */
.trip-row__tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trip-row__price { grid-area: price; text-align: right; font-size: var(--text-lg); font-weight: 700; }
.trip-row__date { grid-area: date; font-size: var(--text-sm); color: var(--muted); }
.trip-row__rate { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-chip); background: var(--brand); color: var(--ink); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.trip-row__rate:hover { background: var(--brand-hover); }

@media (min-width: 640px) {
    .trip-row { grid-template-rows: auto 1fr; grid-template-areas: "main side" "main tags"; }
    .trip-row__side { display: block; grid-area: side; text-align: right; }
    .trip-row__tags { align-content: flex-start; justify-content: flex-end; }
}

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-chip); background: var(--field); font-size: var(--text-sm); font-weight: 600; }
.badge--open { background: var(--brand-soft); }
.badge--done { background: var(--done-soft); color: var(--progress); }
.badge--closed { background: var(--paper); color: var(--muted); }

.empty-state { padding: 56px 24px; border-radius: var(--radius-panel); background: var(--warm); text-align: center; }
.empty-state__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--brand-soft); }
.empty-state__title { font-size: var(--text-xl); font-weight: 700; }
.empty-state__text { margin-top: 8px; color: var(--muted); }

/* The board on /entregas: trips nearby any rider can take */
.board > * + * { margin-top: 16px; }
.board-trip { padding: 20px; }
.board-trip > * + * { margin-top: 12px; }
.board-trip > form, .board-trip > .button { margin-top: 16px; }
.board-trip__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.board-trip__price { font-size: var(--text-3xl); }
.board-trip__meta { font-size: var(--text-sm); color: var(--muted); }
.board-trip__package { font-weight: 600; overflow-wrap: anywhere; }
.board-trip .button { padding-block: 12px; }

@media (min-width: 640px) {
    .board-trip { padding: 24px; }
}
.board-trip__until { font-weight: 700; color: var(--ink); }

/* The sections of /entregas (the trip in hand or the board, then the finished trips) and /envios (the earlier trips) */
.stack > .page-section:not(:first-child) { margin-top: 56px; }
.page-section > * + * { margin-top: 20px; }
.page-section > .section-lede { margin-top: 8px; }
.section-title { font-size: var(--text-2xl); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.section-lede { color: var(--muted); }
.section-lede a { color: var(--ink); }
.section-count { font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.page-section .section-head { align-items: center; }

@media (min-width: 640px) {
    .section-title { font-size: var(--text-3xl); }
}

/* The trip in hand on /entregas, in the green of the strip that follows it around */
.current-trip { display: block; padding: 24px; border-radius: var(--radius-panel); background: var(--progress); color: var(--paper); text-decoration: none; transition: background-color 0.15s; }
.current-trip:hover { background: var(--progress-peak); }
.current-trip__status { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.current-trip__address { margin-top: 8px; font-size: var(--text-2xl); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.current-trip__steps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 20px; }
.current-trip__step { height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.25); }
/* Two steps, retirar and entregar: the one done is solid, the one under way breathes, the one ahead is faint */
.current-trip__step--done,
.current-trip__step--now { background: var(--paper); }
.current-trip__step--now { animation: step-now 1.4s ease-in-out infinite; }

@keyframes step-now {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .current-trip__step--now { animation: none; opacity: 0.6; }
}
.current-trip__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 20px; }
.current-trip__price { font-size: var(--text-2xl); line-height: 1; font-weight: 700; letter-spacing: -0.025em; }
.current-trip__meta { margin-top: 6px; font-size: var(--text-sm); opacity: 0.85; }
.current-trip__go { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-control); background: var(--paper); color: var(--ink); font-weight: 600; }
.current-trip__go .icon { transition: transform 0.15s ease-out; }
.current-trip:hover .current-trip__go .icon { transform: translateX(4px); }

@media (min-width: 640px) {
    .current-trip { padding: 28px 32px; }
    .current-trip__address { font-size: var(--text-3xl); }
}

/* The button next to the board's title that updates where the rider is; the crosshair spins while it looks */
.board-place { color: var(--muted); }
.locate__button { display: inline-flex; align-items: center; gap: 8px; }
.locate__button:disabled { cursor: progress; }
.locate__button:disabled .icon { animation: locate-spin 1s linear infinite; }

@keyframes locate-spin {
    to { transform: rotate(360deg); }
}

/* The strip that follows a rider on every page while they have a trip in progress */

#live-bars { position: sticky; top: 0; z-index: 1200; }
.live-bar { color: var(--paper); }
.live-bar__inner { display: flex; align-items: center; gap: 16px; max-width: 72rem; margin: 0 auto; padding: 14px var(--gutter); }
.live-bar--trip { display: block; text-decoration: none; animation: trip-breathe 2.6s ease-in-out infinite; background: var(--progress); }
.live-bar__text { flex: 1; min-width: 0; }
.live-bar__title { font-weight: 700; }
.live-bar__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); opacity: 0.85; }
/* The trip strip: one line from sm up, the status over the address on a phone. */
.live-bar--trip .live-bar__title,
.live-bar--trip .live-bar__line { display: block; }

@media (min-width: 640px) {
    .live-bar--trip .live-bar__title,
    .live-bar--trip .live-bar__line { display: inline; }
    .live-bar--trip .live-bar__title { margin-right: 8px; }
}

@keyframes trip-breathe {
    0%, 100% { background-color: var(--progress); }
    50% { background-color: var(--progress-peak); }
}

/* Auth pages */

/* The title beside a small Open Peeps bust on a yellow disc, both sitting on the same line */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 32px; }
.page-head .title { margin-top: 0; }
.page-head__art { flex-shrink: 0; width: auto; height: 7.5rem; }

@media (min-width: 640px) {
    .page-head__art { height: 9rem; }
}

.auth-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-radius: var(--radius-control); background: var(--warm); }
.auth-switch__text { font-weight: 600; }

/* Error pages */
.panel { max-width: 36rem; margin: 0 auto; padding: 40px 0; text-align: center; }
.panel__button { margin-top: 32px; }

/* Admin: its sections under the same tabs (partials/admin-nav.php), most of them a table over the whole width */

/* Tabs on a pill like the menu, the one shown filled in black: the admin's sections, and the trips' status filter with how many each holds */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-control); background: var(--field); box-shadow: var(--shadow-recess); }
.filter-tabs__tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; line-height: 22px; border-radius: var(--radius-chip); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.filter-tabs__tab:hover { background: var(--warm-deep); }
.filter-tabs__tab[aria-current="page"] { background: var(--ink); color: var(--paper); }
.filter-tabs__count { font-weight: 400; opacity: 0.6; }
/* A section head as tall as the tabs (42px), with them or not, so the admin's sections line up */
.section-head--tabs { min-height: 42px; }

/* A table on the warm panel the trip lists use, scrolling sideways inside it on a phone, never the page */
.table-panel { padding: 16px 12px 8px; border-radius: var(--radius-panel); background: var(--warm); overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { padding: 0 12px 10px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.025em; text-align: left; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* Each record is a tbody of two rows: the line and the hover go around both, which sit close together */
.table td { padding: 2px 12px; vertical-align: baseline; }
.table tbody tr:first-child td { padding-top: 12px; box-shadow: inset 0 1px 0 var(--warm-deep); }
.table tbody tr:last-child td { padding-bottom: 12px; }
.table tbody:hover td { background: var(--field); }
.table a { color: var(--ink); }
.table__num { text-align: right !important; white-space: nowrap; }
.table__nowrap { white-space: nowrap; }
.table__clip { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table__route { min-width: 14rem; }
.table__route .table__clip { display: flex; align-items: center; gap: 6px; max-width: 20rem; }
.table__route .icon { color: var(--muted); }
.table__name { font-weight: 600; white-space: nowrap; }
.table__place { min-width: 13rem; }
.table__place .table__clip { max-width: 18rem; }
/* A rider's place and when it was reported, each after a lead (the notifications dot, a clock) that keeps wrapped text lined up */
.table__line { display: flex; gap: 6px; }
.table__line + .table__line { margin-top: 2px; }
.table__lead { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 16px; height: 1lh; }
.table__lead .dot { margin: 0; }
.table__comment { white-space: pre-line; overflow-wrap: anywhere; }
.table__status .table__clip { max-width: 11rem; }
/* Across both rows, so the button's height doesn't push them apart */
.table td.table__action { width: 1%; padding-bottom: 12px; text-align: right; vertical-align: middle; }
.table__record--off td:not(.table__action) { opacity: 0.55; }

/* A trip's status in words: green while a rider has it (as everywhere), black once delivered, gray if it never happened */
.status { font-weight: 600; white-space: nowrap; }
.status--active { color: var(--progress-peak); }
.status--closed { color: var(--muted); font-weight: 400; }

.tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-chip); background: var(--warm-deep); font-size: var(--text-xs); font-weight: 600; vertical-align: 1px; }
.tag--danger { color: var(--danger); }
.cell-rating { margin-left: 6px; }

/* The riders' notifications on or paused, in the green and gray of their markers on the map (maps.js) */
.dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: #a8a29e; vertical-align: middle; }
.dot--on { background: #4ade80; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: var(--text-sm); color: var(--muted); }
.pager { display: flex; gap: 8px; }

/* Terms */
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 48px; font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.025em; }
.prose p,
.prose li { font-size: var(--text-lg); line-height: 1.65; }
.prose ul { padding: 24px 24px 24px 44px; border-radius: var(--radius-panel); background: var(--warm); list-style: disc; }
.prose li + li { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}