.crear-tienda-page-table {
    overflow-x: scroll;
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
    overflow-x: auto; /* Permite desplazamiento horizontal */
    display: block; /* Hace que la tabla sea un bloque para permitir desplazamiento */
}

.crear-tienda-page-table th, 
.crear-tienda-page-table td {
    border: 1px solid #ddd;
    padding: 12px;
    word-wrap: break-word; /* Evita el desbordamiento de texto */
}

.crear-tienda-page-table thead {
    background-color: #f4f4f4;
    font-weight: bold;
}

.crear-tienda-page-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.crear-tienda-page-table tbody tr:hover {
    background-color: #e6f7ff;
}

/* Ajustes para pantallas pequeñas */
@media screen and (max-width: 768px) {
    .crear-tienda-page-table th, 
    .crear-tienda-page-table td {
        padding: 8px; /* Menor padding para que quepa mejor */
        font-size: 14px; /* Reducir tamaño de fuente en móviles */
    }

    .crear-tienda-page-table {
        display: block; /* Convierte la tabla en un bloque para el desplazamiento */
        overflow-x: auto; /* Agrega barra de desplazamiento horizontal */
        -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en iOS */
    }
}


.bg-completo {
    background-color: #ffc20b !important; /* Dorado más intenso */
    border-color: #ffc20b !important;
    color: black !important;;
}

.bg-medio {
    background-color: #1d95d2 !important; /* Azul más fuerte */
    border-color: #1d95d2 !important;
    color: black !important;;
}

.bg-inicial {
    background-color: #40cbb4 !important; /* Verde más fuerte */
    border-color: #40cbb4 !important;
    color: black !important;;
}

.redondear-top{
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;

}

.crear-tienda-page-plantilla-list {
    display: block;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
}
.crear-tienda-page-card {
    display: flex;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px; /* Espaciado entre tarjetas */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.crear-tienda-page-card:hover {
    transform: scale(1.05);
}

.crear-tienda-page-card-img {
    width: 400px; /* Ancho fijo de la imagen en pantallas grandes */
    height: 215px;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
}

.crear-tienda-page-card-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.crear-tienda-page-card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.crear-tienda-page-card-price {
    font-size: 16px;
    color: #2d9cdb;
    margin-bottom: 10px;
}

.crear-tienda-page-card-description {
    font-size: 14px;
    color: #555;
}

.crear-tienda-page-card-accion-button {
    width: 40%;
    padding: 0.5rem;
    background-color: #1fe461;
    border-radius: 0.5rem;
    border: none;
}

.crear-tienda-page-card-accion-button:hover {
    background-color: #2cc760;
}

/* Media Queries para pantallas más pequeñas */
@media (max-width: 768px) {
    .crear-tienda-page-card {
        flex-direction: column; /* Cambia la dirección de los elementos a columna */
    }

    .crear-tienda-page-card-img {
        width: 100%; /* La imagen ocupa el 100% del ancho */
        height: 100%; /* La imagen ocupará el 100% de la altura del contenedor */
        object-fit: contain; /* Asegura que la imagen se ajuste al contenedor sin recortarse ni distorsionarse */
        border-radius: 8px 8px 0 0; /* Redondea las esquinas superiores */
    }
    
    

    .crear-tienda-page-card-info {
        padding: 15px;
        width: 100%; /* Asegura que el contenido ocupe todo el ancho */
    }

    .crear-tienda-page-card-accion-button {
        width: 100%; /* El botón ocupa todo el ancho en pantallas pequeñas */
        padding: 0.5rem;
        margin-top: 10px; /* Espaciado arriba */
    }
}

@media (max-width: 480px) {
    .crear-tienda-page-card-title {
        font-size: 16px;
    }

    .crear-tienda-page-card-price {
        font-size: 14px;
    }

    .crear-tienda-page-card-description {
        font-size: 12px;
    }
}


.crear-tienda-instrucciones img{
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    width: 100%;
    margin-top: 2rem;
    margin-bottom:2rem;
   
}

.crear-tienda-seleccionados-contenedor {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    border: 2px solid #007bff;
    margin: auto;
    transition: all 0.3s ease-in-out;
}

.crear-tienda-seleccionados-titulo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.crear-tienda-seleccionados-imagen {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.crear-tienda-seleccionados-precio {
    font-size: 1.2rem;
    font-weight: bold;
    color: #28a745;
    margin-bottom: 5px;
}

.crear-tienda-seleccionados-descripcion {
    font-size: 1rem;
    color: #555;
}
/* Estilo para el contenedor principal que ocupa todo el ancho */
.mensaje-tiempo {
    margin-top: 1rem;
    width: 100%; /* Ocupar el 100% del ancho disponible */
    height: 50vh; /* Ocupar toda la altura de la pantalla */
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    background-color: #f8d7da; /* Fondo de color rojo claro */
    color: #721c24; /* Color de texto oscuro */
}

/* Estilo para el contenido interno */
.mensaje-contenido {
    text-align: center; /* Centra el texto dentro del contenedor */
    padding: 20px;
    background-color: #fff; /* Fondo blanco para el mensaje */
    border-radius: 8px; /* Bordes redondeados */
    border: 1px solid #f5c6cb; /* Borde sutil rojo */
}

.mensaje-contenido h3 {
    font-size: 24px; /* Tamaño de la fuente */
    font-weight: bold; /* Negrita para el texto */
    margin: 0;
}

.alerta-pago-creartienda{
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #f5c6cb;
    font-family: Arial, sans-serif;
    text-align: center;
}