/* 2026-11-07: pagina publica de reserva (Pages/Publico/Reservar.razor).
   Es la unica pantalla que ve un desconocido desde su telefono, y la que justifica el cobro
   mensual: si se ve barata, el negocio parece barato. Asi que se disena primero para pantalla
   angosta y con holgura.

   Todo el acento sale de --marca, que la pagina pone inline con negocio.color_primario. Cada
   negocio se ve suyo sin tocar este archivo. */

.rv {
    --tinta:      #15181d;
    --tinta-sua:  #697180;
    --linea:      #e8eaee;
    --papel:      #ffffff;
    --fondo:      #f6f7f9;
    --radio:      16px;
    --sombra:     0 1px 2px rgba(16, 20, 28, .04), 0 8px 24px -12px rgba(16, 20, 28, .12);
    --sombra-alta:0 2px 4px rgba(16, 20, 28, .05), 0 14px 32px -14px rgba(16, 20, 28, .22);

    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 7rem;          /* deja sitio a la barra fija de abajo */
    color: var(--tinta);
}

body:has(.rv) { background: var(--fondo, #f6f7f9); }

.reserva-centro {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* ---------------------------------------------------------------- portada */

.rv-portada {
    position: relative;
    padding: 2.4rem 1.25rem 1.5rem;
    text-align: center;
    overflow: hidden;
}

/* La banda de color del negocio, desvanecida. Da identidad sin gritar. */
.rv-portada::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 50% -20%,
            color-mix(in srgb, var(--marca) 26%, transparent) 0%,
            color-mix(in srgb, var(--marca) 6%, transparent) 55%,
            transparent 100%);
    pointer-events: none;
}

.rv-portada > * { position: relative; }

.rv-logo {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 22px;
    background: var(--papel);
    box-shadow: var(--sombra-alta);
    margin-bottom: .9rem;
}

/* Si el negocio no subio logo, su inicial en su color: nunca un hueco gris. */
.rv-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 22px;
    margin-bottom: .9rem;
    background: var(--marca);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: var(--sombra-alta);
}

.rv-portada h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.rv-portada p {
    margin: .35rem 0 0;
    font-size: .88rem;
    color: var(--tinta-sua);
}

/* ------------------------------------------------------------------ pasos */

.rv-cuerpo { padding: .5rem 1rem 0; }

.paso { margin-bottom: 1.9rem; }

.paso h2 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .85rem;
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.paso h2 .n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca) 12%, #fff);
    color: var(--marca);
    font-size: .78rem;
    font-weight: 700;
}

/* -------------------------------------------------- tarjetas (servicio / persona) */

.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: .65rem;
}

.tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    text-align: left;
    padding: .95rem 1rem;
    border: 1.5px solid transparent;
    border-radius: var(--radio);
    background: var(--papel);
    box-shadow: var(--sombra);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.tarjeta:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }
.tarjeta:active { transform: translateY(0); }

.tarjeta b { font-size: .97rem; font-weight: 620; letter-spacing: -.01em; }
.tarjeta span { font-size: .8rem; color: var(--tinta-sua); }
.tarjeta .precio { margin-top: .15rem; font-weight: 680; color: var(--tinta); font-size: .92rem; }

.tarjeta.elegida {
    border-color: var(--marca);
    background: color-mix(in srgb, var(--marca) 5%, #fff);
}

.tarjeta.elegida .precio { color: var(--marca); }

/* La palomita de elegido, arriba a la derecha. */
.tarjeta.elegida::after {
    content: "";
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--marca)
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
        center / 11px 11px no-repeat;
}

/* --------------------------------------------------- tira de dias */

.dias {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .15rem .15rem .6rem;
    margin: 0 -.15rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.dias::-webkit-scrollbar { display: none; }

.dia {
    flex: 0 0 auto;
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .05rem;
    padding: .65rem .2rem .6rem;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: var(--papel);
    box-shadow: var(--sombra);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.dia:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }

.dia .sem { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-sua); }
.dia .num { font-size: 1.28rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.dia .mes { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-sua); }

.dia.elegida {
    background: var(--marca);
    border-color: var(--marca);
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--marca) 55%, transparent);
}

.dia.elegida .num,
.dia.elegida .sem,
.dia.elegida .mes { color: #fff; }

/* --------------------------------------------------- horas, por franja */

.franja + .franja { margin-top: 1.1rem; }

.franja h3 {
    margin: 0 0 .55rem;
    font-size: .72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tinta-sua);
}

.horas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .5rem;
}

.hora {
    padding: .7rem .3rem;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: var(--papel);
    box-shadow: var(--sombra);
    cursor: pointer;
    font: inherit;
    font-weight: 620;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    color: inherit;
    text-align: center;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.hora:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }

.hora.elegida {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--marca) 55%, transparent);
}

/* --------------------------------------------------- formulario y caja */

.caja {
    background: var(--papel);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.1rem;
}

.rv .mud-input-outlined-border { border-radius: 12px; }

.rv-enviar {
    width: 100%;
    margin-top: .3rem;
    padding: .95rem 1rem;
    border: 0;
    border-radius: 14px;
    background: var(--marca);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--marca) 65%, transparent);
    transition: transform .14s ease, opacity .14s ease;
}

.rv-enviar:hover:not(:disabled) { transform: translateY(-1px); }
.rv-enviar:disabled { opacity: .55; cursor: default; }

/* El campo trampa para robots: fuera de la vista, pero NO display:none, porque hay robots que
   precisamente saltan los campos ocultos de esa forma. */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------- barra fija de resumen */

/* En el telefono la eleccion se pierde al desplazarse por las horas. Esta barra la mantiene
   a la vista sin robar un paso mas. */
.rv-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
    padding: .8rem 1.15rem calc(.8rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--linea);
}

.rv-barra .que { font-size: .9rem; font-weight: 620; letter-spacing: -.01em; }
.rv-barra .cuando { font-size: .78rem; color: var(--tinta-sua); margin-top: .1rem; }
.rv-barra .monto { font-size: 1.05rem; font-weight: 700; color: var(--marca); white-space: nowrap; }

/* --------------------------------------------------- listo */

.rv-listo {
    text-align: center;
    background: var(--papel);
    border-radius: 20px;
    box-shadow: var(--sombra-alta);
    padding: 2.2rem 1.5rem;
}

.rv-palomita {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 1rem;
    background: color-mix(in srgb, var(--marca) 12%, #fff);
    color: var(--marca);
}

.rv-listo h2 { margin: 0 0 .9rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }

.rv-cuando {
    display: inline-block;
    padding: .8rem 1.3rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--marca) 7%, #fff);
    line-height: 1.5;
}

.rv-cuando .hh { font-size: 1.7rem; font-weight: 750; color: var(--marca); letter-spacing: -.02em; }
.rv-cuando .dd { font-size: .88rem; color: var(--tinta-sua); }

.rv-nota { margin: 1.1rem 0 0; font-size: .88rem; color: var(--tinta-sua); line-height: 1.5; }

.rv-otra {
    margin-top: 1.4rem;
    padding: .7rem 1.4rem;
    border: 1.5px solid var(--linea);
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    color: var(--tinta-sua);
    cursor: pointer;
}

.rv-otra:hover { border-color: var(--marca); color: var(--marca); }

/* --------------------------------------------------- pie */

.rv-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 1rem 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linea);
    font-size: .78rem;
    color: var(--tinta-sua);
}

.rv-pie a { color: inherit; text-decoration: none; font-weight: 600; }
.rv-pie a:hover { color: var(--marca); }
.rv-pie .sello { opacity: .6; }

@media (max-width: 380px) {
    .tarjetas { grid-template-columns: 1fr; }
    .rv-portada h1 { font-size: 1.4rem; }
}

/* --------------------------------------------------- agregar a pantalla de inicio */

/* Arriba y no abajo: abajo pelea con la barra fija del resumen, y en el teléfono el pulgar
   descarta por accidente lo que está al alcance del pulgar. */
.rv-instalar {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0 auto 1rem;
    max-width: 600px;
    padding: .85rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--marca) 9%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--marca) 22%, transparent);
}

.rv-instalar .txt { flex: 1; min-width: 0; }
.rv-instalar b { display: block; font-size: .92rem; font-weight: 650; letter-spacing: -.01em; }
.rv-instalar span { font-size: .8rem; color: var(--tinta-sua, #697180); }

.rv-instalar .si {
    flex: 0 0 auto;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 10px;
    background: var(--marca);
    color: #fff;
    font: inherit;
    font-size: .85rem;
    font-weight: 650;
    cursor: pointer;
}

.rv-instalar .no {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tinta-sua, #697180);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}