@import url('https://rsms.me/inter/inter.css');

    :root {
        --color-light: white;
        --color-dark: #212121;
        --color-signal: #fab700;

        --color-background: var(--color-light);
        --color-text: var(--color-dark);
        --color-accent: var(--color-signal);

        --size-bezel: .5rem;
        --size-radius: 4px;

        line-height: 1.4;

        font-family: 'Inter', sans-serif;
        font-size: calc(.6rem + .4vw);
        color: var(--color-text);
        background: var(--color-background);
        font-weight: 300;
        padding: 0 calc(var(--size-bezel) * 3);
    }

    h1,
    h2,
    h3 {
        font-weight: 900;
    }

    mark {
        background: var(--color-accent);
        color: var(--color-text);
        font-weight: bold;
        padding: 0 0.2em;
    }

    .card {
        background: var(--color-background);
        padding: calc(4 * var(--size-bezel));
        margin-top: calc(25* var(--size-bezel));
        border-radius: var(--size-radius);
        border: 3px solid var(--color-shadow, currentColor);
        box-shadow: .5rem .5rem 0 var(--color-shadow, currentColor);
    }

    .input {
        position: relative;
        display: block;
        width: 100%;
    }

    .input__label {
        position: absolute;
        left: calc(var(--size-bezel) * 1);
        top: calc(var(--size-bezel) * 1.5);
        padding: 0;
        font-weight: normal;
        color: var(--color-text);
        background-color: var(--color-background);
        transition: all 0.2s ease;
        pointer-events: none;
        font-size: 1rem;
    }

    .input__field {
        box-sizing: border-box;
        display: block;
        width: 100%;
        padding: calc(var(--size-bezel) * 1.5) var(--size-bezel);
        color: currentColor;
        background: transparent;
        border: 3px solid currentColor;
        border-radius: var(--size-radius);
    }

    .input__field:focus,
    .input__field:not(:placeholder-shown) {
        outline: none;
    }

    .input__field:focus+.input__label,
    .input__field:not(:placeholder-shown)+.input__label {
        top: calc(var(--size-bezel) * -1);
        left: calc(var(--size-bezel) * 1);
        font-size: 0.8rem;
        color: var(--color-accent);
    }

    .button-group {
        margin-top: calc(var(--size-bezel) * 2.5);
    }

    button {
        color: currentColor;
        padding: var(--size-bezel) calc(var(--size-bezel) * 2);
        background: var(--color-accent);
        border: none;
        border-radius: var(--size-radius);
        font-weight: 900;
    }

    button[type=reset] {
        background: var(--color-background);
        font-weight: 200;
    }

    button+button {
        margin-left: calc(var(--size-bezel) * 2);
    }

    .icon {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        margin-right: .5em;
    }

    .hidden {
        display: none;
    }

    .l-design-widht {
        max-width: 40rem;
        padding: 1rem;
    }

    /* Popup styles */
    .popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
    }

    .popup-content {
        background: var(--color-background);
        padding: 20px;
        border-radius: var(--size-radius);
        width: 800px;
        position: relative;
    }

    .popup-close {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--color-dark);
        cursor: pointer;
    }

    /* Animaciones de seguimiento */
    .order-tracker {
        margin: 10px auto;
        padding: 40px;
        width: 645px;
        background-color: var(--color-light);
        border-radius: 8px;
    }

    .order-status__progress {
        margin: 45px 0;
    }

    .progress-bar {
        width: 100%;
        height: 5px;
        background: #e0e0e0;
        border-radius: 10px;
        position: relative;
    }

    .progress-bar span {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--color-accent);
        width: 0;
    }

    .order-status__status-info {
        display: flex;
        justify-content: space-between;
    }

    .status {
        margin-top: 10px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
    }

    .overlay-check-bubble,
    .checkmark {
        visibility: hidden;
    }

    .accented {
        fill: var(--color-accent);
        stroke: var(--color-accent);
    }

    /*estilos de la vista popup*/
    /* Colores */
    :root {
        --base-color: #c1d9e4;
        --base-dark-color: #3c587c;
        --accent-color: #1c7ff0;
        --white-color: #fff;
        --black-color: #000;
    }

    * {
        box-sizing: border-box;
    }



    a {
        text-decoration: none;
    }

    .controls {
        display: flex;
        justify-content: space-between;
        padding: 10px 40px;
    }

    .controls,
    .order-tracker {
        margin: 10px auto;
        width: auto;
        background-color: var(--white-color);
        border-radius: 8px;
    }

    .order-tracker {
        padding: 40px;
    }

    .order-info {
        display: flex;
        justify-content: space-between;
    }

    .order-info__number {
        font-size: 20px;
        text-transform: uppercase;
        font-weight: 400;
    }

    .order-info__number a:last-child {
        color: var(--accent-color);
        font-weight: 700;
    }

    .order-info__details {
        display: flex;
        flex-direction: column;
    }

    .order-info__details__arrival-date,
    .order-info__details__tracking-number {
        display: block;
        text-align: right;
    }

    .order-info__details__tracking-number a {
        font-weight: 700;
        color: var(--black-color);
    }

    .order-status__progress {
        margin: 45px 0;
    }

    .order-status__status-info {
        font-size: 14px;
    }

    .order-status__status-info ol {
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;
    }

    .order-status__status-info__step {
        display: inline-flex;
        padding: 0.1px;
    }

    .icon-tracker {
        width: 45%;
        margin-right: 10px;
    }

    .status {
        margin-top: 10px;

        font-size: 14px;
        display: flex;
        flex-direction: column;
    }

    .overlay-check-bubble,
    .checkmark,
    .progress-bar {
        visibility: hidden;
    }

    .accented {
        fill: var(--accent-color);
        stroke: var(--accent-color);

    }



    .cls-1 {
        fill: #c1d9e4;
    }

    .cls-2,
    .cls-3,
    .cls-5 {
        fill: none;
        stroke-miterlimit: 10;
    }

    .cls-2,
    .cls-5 {
        stroke: #fff;
    }

    .cls-2 {
        stroke-width: 3px;
    }

    .cls-3 {
        stroke: #1c7ff0;
        stroke-width: 20px;
    }

    .cls-4 {
        fill: #1c7ff0;
    }

    .cls-5 {
        stroke-width: 2.64px;
    }

    /* Añadir al final de tu archivo CSS existente */

@media (max-width: 768px) {
    .order-tracker {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
    }

    .order-status__progress {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
    }

    .order-status__status-info {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
    }

    .progress-bar {
        width: 100%; /* Asegurarse de que la barra de progreso ocupe el 100% */
    }

    .order-status__status-info__step {
        flex-direction: row; /* Asegurarse de que los pasos estén en fila */
        justify-content: space-between; /* Espacio entre los pasos */
        margin-bottom: 10px; /* Espacio entre pasos */
    }

    .icon-tracker {
        width: 30%; /* Ajustar el tamaño del icono */
    }

    .status {
        width: 70%; /* Ajustar el tamaño del texto */
    }
}