/* ================= CONFIGURACIÓN ================= */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #0d0e0f;

    color: white;

    font-family: 'Montserrat', sans-serif;

    padding-bottom: 90px;
}

button,
input,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

a {
    text-decoration: none;

    color: inherit;
}



/* ===================== HEADER ==================== */


.pedido-header {
    width: 100%;

    height: 90px;

    background: #0b0c0d;

    border-bottom: 1px solid #202124;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 18px;

    position: sticky;

    top: 0;

    z-index: 100;
}


.volver {
    font-size: 32px;

    width: 45px;

    color: white;

    transition: 0.2s;
}

.volver:hover {
    color: #ffbd24;

    transform: translateX(-3px);
}


.pedido-logo {
    width: 160px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.pedido-logo img {
    width: 135px;

    height: auto;
}


.carrito-header {
    position: relative;

    font-size: 27px;
}


.carrito-header span {
    position: absolute;

    top: -8px;

    right: -9px;

    width: 21px;

    height: 21px;

    border-radius: 50%;

    background: #ffbd24;

    color: #111;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    font-weight: 800;
}



/* ===================== MAIN ====================== */


.pedido-main {
    width: 100%;

    max-width: 700px;

    margin: auto;

    padding: 25px 15px;
}


.pantalla-pedido {
    width: 100%;
}


.pantalla-oculta {
    display: none !important;
}



/* ===================== TÍTULOS =================== */


.titulo-pedido {
    margin-bottom: 25px;
}


.titulo-pedido h1 {
    font-size: 30px;

    font-weight: 800;

    margin-bottom: 8px;
}


.titulo-pedido > span {
    color: #999;

    font-size: 12px;
}


.titulo-pedido p {
    color: #999;

    font-size: 12px;

    line-height: 1.5;
}



/* ================= LISTA CARRITO ================= */


.lista-carrito {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.item-carrito {
    background: #151617;

    border: 1px solid #242526;

    border-radius: 16px;

    padding: 12px;

    display: flex;

    align-items: center;

    gap: 12px;
}


.item-carrito img {
    width: 85px;

    height: 85px;

    object-fit: cover;

    border-radius: 12px;

    flex-shrink: 0;
}


.item-info {
    flex: 1;

    min-width: 0;
}


.item-info h3 {
    font-size: 14px;

    margin-bottom: 5px;
}


.item-precio {
    color: #ffbd24;

    font-size: 14px;

    font-weight: 800;
}


.controles-cantidad {
    display: flex;

    align-items: center;

    gap: 8px;
}


.cantidad-btn {
    width: 30px;

    height: 30px;

    border-radius: 50%;

    border: none;

    background: #292b2c;

    color: white;

    font-size: 18px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.cantidad-btn:hover {
    background: #ffbd24;

    color: #111;
}


.cantidad-numero {
    min-width: 20px;

    text-align: center;

    font-weight: 700;

    font-size: 13px;
}


.eliminar-item {
    background: transparent;

    border: none;

    color: #777;

    font-size: 18px;

    margin-left: 5px;
}

.eliminar-item:hover {
    color: #ff5555;
}



/* ================= CARRITO VACÍO ================ */


.carrito-vacio {
    text-align: center;

    padding: 50px 20px;

    background: #151617;

    border: 1px solid #202223;

    border-radius: 18px;
}


.carrito-vacio-icono {
    font-size: 50px;

    margin-bottom: 15px;
}


.carrito-vacio h2 {
    font-size: 20px;

    margin-bottom: 8px;
}


.carrito-vacio p {
    color: #999;

    font-size: 12px;

    margin-bottom: 20px;
}



/* ==================== RESUMEN ==================== */


.resumen-carrito {
    background: #151617;

    border: 1px solid #242526;

    border-radius: 16px;

    padding: 18px;

    margin-top: 20px;
}


.fila-total {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    font-size: 13px;

    margin-bottom: 10px;
}


.fila-total strong {
    color: #ffbd24;
}


.delivery-fila {
    color: #aaa;
}


.linea-total {
    height: 1px;

    background: #292a2c;

    margin: 13px 0;
}


.total-final {
    margin-bottom: 0;

    font-size: 17px;

    font-weight: 800;
}


.total-final strong {
    font-size: 20px;

    color: #ffbd24;
}



/* ===================== BOTONES =================== */


.boton-principal {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: none;

    background: #ffbd24;

    color: #111;

    padding: 14px 20px;

    border-radius: 25px;

    font-size: 12px;

    font-weight: 800;

    transition: 0.2s;
}


.boton-principal:hover {
    background: #ffc83d;

    transform: translateY(-1px);
}


.boton-completo {
    width: 100%;

    margin-top: 15px;
}


.boton-secundario {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #343638;

    background: #151617;

    color: white;

    padding: 13px 18px;

    border-radius: 25px;

    font-size: 12px;

    font-weight: 700;
}


.boton-secundario:hover {
    border-color: #ffbd24;

    color: #ffbd24;
}


.botones-formulario {
    display: flex;

    gap: 10px;

    margin-top: 25px;
}


.botones-formulario button {
    flex: 1;
}



/* ===================== PASOS ===================== */


.pasos {
    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;
}


.paso {
    width: 32px;

    height: 32px;

    border-radius: 50%;

    border: 1px solid #444;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #777;

    font-size: 12px;

    font-weight: 800;
}


.paso.activo,
.paso.completado {
    background: #ffbd24;

    border-color: #ffbd24;

    color: #111;
}


.linea-paso {
    width: 60px;

    height: 1px;

    background: #333;
}


.linea-paso.activa {
    background: #ffbd24;
}



/* ====================== FORM ===================== */


.campo {
    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-bottom: 18px;
}


.campo label {
    font-size: 12px;

    font-weight: 700;

    color: #ddd;
}


.campo label span {
    color: #777;

    font-weight: 400;
}


.campo input,
.campo textarea {
    width: 100%;

    background: #151617;

    border: 1px solid #303234;

    color: white;

    border-radius: 10px;

    padding: 13px;

    outline: none;

    font-size: 13px;
}


.campo textarea {
    min-height: 80px;

    resize: vertical;
}


.campo input:focus,
.campo textarea:focus {
    border-color: #ffbd24;
}


.grupo-formulario {
    margin-top: 25px;

    margin-bottom: 20px;
}


.grupo-formulario h3,
.direccion-container > h3 {
    font-size: 14px;

    margin-bottom: 13px;
}



/* ================= OPCIONES RADIO ================ */


.opcion {
    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px;

    margin-bottom: 9px;

    background: #151617;

    border: 1px solid #292b2c;

    border-radius: 12px;

    cursor: pointer;

    transition: 0.2s;
}


.opcion:hover {
    border-color: #555;
}


.opcion input {
    position: absolute;

    opacity: 0;
}


.radio-personalizado {
    width: 19px;

    height: 19px;

    border: 2px solid #555;

    border-radius: 50%;

    flex-shrink: 0;

    position: relative;
}


.opcion input:checked + .radio-personalizado {
    border-color: #ffbd24;
}


.opcion input:checked + .radio-personalizado::after {
    content: "";

    position: absolute;

    width: 9px;

    height: 9px;

    background: #ffbd24;

    border-radius: 50%;

    top: 3px;

    left: 3px;
}


.opcion div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.opcion strong {
    font-size: 12px;
}


.opcion small {
    color: #888;

    font-size: 10px;
}



/* =================== DIRECCIÓN =================== */


.direccion-container {
    margin-top: 10px;

    padding: 18px;

    background: #101112;

    border: 1px solid #242526;

    border-radius: 16px;
}


.fila-campos {
    display: flex;

    gap: 10px;
}


.fila-campos .campo {
    flex: 1;
}


.campo-numero {
    max-width: 120px;
}


.departamento-container {
    display: none;
}


.departamento-container.visible {
    display: block;
}



/* ================= CONFIRMACIÓN ================== */


.resumen-confirmacion,
.datos-confirmacion {
    background: #151617;

    border: 1px solid #242526;

    border-radius: 16px;

    padding: 18px;

    margin-bottom: 15px;
}


.resumen-confirmacion h3,
.datos-confirmacion h3 {
    font-size: 15px;

    margin-bottom: 15px;
}


.producto-confirmacion {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    font-size: 12px;

    margin-bottom: 10px;
}


.producto-confirmacion strong {
    color: #ffbd24;
}


.datos-confirmacion p {
    font-size: 12px;

    color: #aaa;

    margin-bottom: 10px;

    line-height: 1.5;
}


.datos-confirmacion p:last-child {
    margin-bottom: 0;
}


.datos-confirmacion strong {
    color: white;
}



/* ===================== ÉXITO ===================== */


.exito {
    text-align: center;

    padding: 30px 10px;
}


.exito-icono {
    width: 75px;

    height: 75px;

    background: #ffbd24;

    color: #111;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 40px;

    font-weight: 800;

    margin: 0 auto 20px;
}


.exito h1 {
    font-size: 27px;

    margin-bottom: 10px;
}


.exito > p {
    color: #999;

    font-size: 13px;
}


.numero-pedido {
    margin: 20px auto;

    padding: 14px;

    background: #151617;

    border: 1px solid #292a2c;

    border-radius: 12px;

    max-width: 250px;

    font-size: 12px;
}


.numero-pedido strong {
    color: #ffbd24;
}


.texto-whatsapp {
    margin: 20px auto;

    max-width: 400px;

    line-height: 1.5;
}


.boton-whatsapp {
    width: 100%;

    max-width: 400px;

    border: none;

    background: #25d366;

    color: white;

    padding: 15px;

    border-radius: 25px;

    font-size: 12px;

    font-weight: 800;

    margin-bottom: 10px;
}



/* ===================== HISTORIAL ================= */


.seccion-extra {
    margin-top: 60px;

    padding-top: 30px;

    border-top: 1px solid #242526;
}


.historial-vacio {
    text-align: center;

    padding: 30px 15px;

    color: #777;
}


.historial-vacio span {
    display: block;

    font-size: 40px;

    margin-bottom: 10px;
}


.historial-vacio p {
    font-size: 12px;
}


.historial-item {
    background: #151617;

    border: 1px solid #292a2c;

    border-radius: 15px;

    padding: 15px;

    margin-bottom: 10px;
}


.historial-cabecera {
    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;
}


.historial-cabecera strong {
    color: #ffbd24;
}


.historial-item p {
    color: #999;

    font-size: 11px;

    line-height: 1.5;
}



/* ======================= PERFIL ================== */


.perfil-card {
    text-align: center;

    background: #151617;

    border: 1px solid #292a2c;

    border-radius: 18px;

    padding: 30px;
}


.perfil-icono {
    width: 65px;

    height: 65px;

    border-radius: 50%;

    background: #ffbd24;

    color: #111;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    margin: 0 auto 15px;
}


.perfil-card h2 {
    font-size: 20px;

    margin-bottom: 7px;
}


.perfil-card p {
    color: #888;

    font-size: 12px;
}



/* ================= TABLET / PC ================== */


@media (min-width: 700px) {

    body {
        background: #080909;
    }

    .pedido-header {
        max-width: 700px;

        margin: auto;
    }

    .barra-inferior {
        max-width: 700px;

        left: 50%;

        transform: translateX(-50%);
    }

}



/* ===================== CELULAR =================== */


@media (max-width: 450px) {

    .pedido-main {
        padding: 20px 12px;
    }


    .titulo-pedido h1 {
        font-size: 26px;
    }


    .item-carrito img {
        width: 70px;

        height: 70px;
    }


    .item-info h3 {
        font-size: 12px;
    }


    .item-precio {
        font-size: 12px;
    }


    .controles-cantidad {
        gap: 5px;
    }


    .cantidad-btn {
        width: 27px;

        height: 27px;

        font-size: 16px;
    }


    .fila-campos {
        flex-direction: column;

        gap: 0;
    }


    .campo-numero {
        max-width: none;
    }


    .botones-formulario {
        flex-direction: column-reverse;
    }


    .botones-formulario button {
        width: 100%;
    }


    .paso {
        width: 28px;

        height: 28px;
    }


    .linea-paso {
        width: 40px;
    }

}