/* Estilos para hacer vídeos de YouTube responsive */
iframe[title="YouTube video player"] {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-width: 100%;
    border: 0;
}

/* Cambiar color de los títulos de secciones */
#rlta-conoce-nuestro-trabajo h3,
#rlta-que-lineas-de-accion h3,
#rlta-como-las-actividades h3,
#rlta-quienes-los-formadores-y-nuestro-objetivo h3,
#rlta-donde---entidades-y-lugares h3 {
    color: #dd6664 !important;
}

/* Imagen flotante y espaciado */
.item-image {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

/* Asegurar que el contenido del artículo se muestre correctamente */
.com-content-article__body {
    overflow: visible;
    display: block;
    color: inherit;
}

.com-content-article__body h3,
.com-content-article__body p,
.com-content-article__body ol {
    margin-left: 0;
    padding-left: 0;
}

.com-content-article__body ol {
    padding-left: 20px;
}

/* Diseño para pantallas pequeñas */
@media (max-width: 768px) {
    .item-image {
        float: none;
        margin-right: 0;
        text-align: center;
    }

    .com-content-article__body {
        overflow: visible;
    }
}

/* Quitar elementos no deseados */
.d-flex.my-1 a, ul.tags.list-inline {
    display: none;
}

/* Estilos para las imágenes en la vista de blog */
.com-content-category-blog__item .item-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Elimina el flotado y ajusta el contenedor de imágenes */
.com-content-category-blog__item .item-image {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 10px;
    display: block;
}

.com-content-category-blog__item .item-content {
    clear: both;
    text-align: center;
}

/* Títulos en la vista de blog */
.com-content-category-blog__items.blog-items.masonry-3 .tck-article-title {
    font-size: 1.25rem; /* Tamaño de fuente reducido */
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.5px;
    color: #2c3e50;
    font-family: 'Roboto', 'Arial', sans-serif;
    margin-bottom: 15px;
    height: 3.6em; /* Altura fija para asegurar dos líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    text-align: center;
}

/* Estilos para el cuerpo del artículo en la vista de blog */
.com-content-category-blog__items.blog-items.masonry-3 .tck-article-body {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 4.5em;
}

/* Estilos para la vista de artículo individual (sin limitación) */
.tck-article.com-content-article.item-page .tck-article-title,
.tck-article.com-content-article.item-page .tck-article-body {
    display: block;
    -webkit-line-clamp: unset;
    min-height: unset;
    overflow: visible;
}

/* Botones "Leer más" */
.readmore .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 4em;
    padding: 0;
    margin-top: 10px;
    text-align: center;
    color: #fff;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.5;
}

.readmore .btn:hover {
    background-color: #5a6268;
}

.readmore .btn span.icon-chevron-rightright {
    margin-left: 5px;
}

/* Imagenes cuadradas solo en Discografía */
.discografia .item-image {
    width: 100%;
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
}

.discografia .item-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    object-fit: contain;
}

/* Lista alineada a la izquierda */
.com-content-category-blog__item .fields-container {
    list-style-position: outside;
    padding-left: 20px;
    margin-left: 0;
    text-align: left;
}

.com-content-category-blog__item .fields-container li {
    margin-bottom: 10px;
    text-align: left;
}

.com-content-category-blog__item .fields-container li .field-label,
.com-content-category-blog__item .fields-container li .field-value {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Estilos para el menú de subcategorías */
.com-content-category-blog__children.cat-children {
    margin-top: 20px; /* Espacio superior */
    text-align: left; /* Alinea el texto a la izquierda */
}

.com-content-category-blog__children.cat-children h3 {
    font-size: 1.2rem; /* Tamaño de fuente más pequeño para el título "Subcategorías" */
    font-weight: 600;
    color: #2c3e50; /* Color acorde al diseño */
    font-family: 'Roboto', 'Arial', sans-serif;
    margin-bottom: 15px;
    letter-spacing: 0.5px; /* Añade espacio entre letras */
}

.com-content-category-blog__child .page-header.item-title {
    font-size: 1rem; /* Reducir tamaño del texto de las subcategorías */
    font-weight: 500;
    color: #34495e; /* Color ligeramente más oscuro para diferenciar */
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.com-content-category-blog__child .page-header.item-title a {
    text-decoration: none; /* Elimina subrayado en los enlaces */
    color: inherit; /* Usa el color heredado */
}

.com-content-category-blog__child .page-header.item-title a:hover {
    color: #da6931; /* Color de hover acorde al diseño */
}
/*-------------------------------------------------------------------------------------------------------------------------------Tienda*/
/* General adjustments for the checkout container */
#ph-pc-checkout-box {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Header styling */
.ph-header {
    font-size: 28px;
  	width:100%;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

/* Styling for checkout rows */
.ph-checkout-cart-row-header, 
.ph-checkout-cart-row-item, 
.ph-checkout-discount-row, 
.ph-cart-subtotal-box, 
.ph-cart-total-box {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    align-items: center;
    margin-bottom: 10px; /* Espacio entre filas */
}

/* Styling for product images */
.ph-checkout-cart-image img {
    max-width: 100px;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin: auto;
    display: block;
}

/* Product title - Cambiado a naranja */
.ph-checkout-cart-title a {
    font-size: 16px;
    font-weight: bold;
    color: #ff7f00; /* Cambiado de #0073aa a naranja */
    text-decoration: none;
}

.ph-checkout-cart-title a:hover {
    text-decoration: underline;
    color: #e67300; /* Opcional: tono más oscuro de naranja al pasar el cursor */
}

/* Quantity input and buttons */
.ph-checkout-cart-quantity {
    display: flex;
    align-items: center;
}

.ph-input-quantity {
    width: 50px;
    margin-right: 5px;
}

.ph-btn {
    padding: 5px 10px;
    font-size: 12px;
}

.uk-button-success {
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
}

.uk-button-danger {
    background-color: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
}

/* Price formatting */
.ph-checkout-cart-brutto {
    font-size: 18px;
    font-weight: bold;
    color: #ff7f00; /* Naranja */
    text-align: right;
}

/* Coupon and Discount rows */
.ph-checkout-cart-row-discount-coupon {
    background-color: #f0f8ff;
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
}

.ph-checkout-cart-brutto, 
.ph-cart-total, 
.ph-cart-subtotal-netto, 
.ph-cart-coupon {
    color: #333;
    font-size: 18px;
  	margin:10px;
}

/* Subtotal and total rows */
.ph-cart-subtotal-netto-txt {
    font-weight: bold;
    text-align: right;
    font-size: 18px;
  	margin:10px;
}
.ph-cart-total-txt{
   font-weight: bold;
    text-align: right;
    font-size: 25px;
}
.ph-small{
  	margin: 10px 0;
}
.ph-checkout-total-amount, 
.ph-cart-total {
    font-size: 20px;
    font-weight: bold;
    color: #ff7f00; /* Cambiado de #0073aa a naranja */
    text-align: right;
}

/* Adjustments for forms and buttons */
.uk-form-horizontal {
    margin-top: 20px;
}

.ph-btn {
    font-size: 14px;
    border-radius: 4px;
}

/* Updated Header styling: Cambiado el fondo a gris oscuro */
.ph-checkout-box-header {
    background-color: #333; /* Gris Oscuro */
    color: #fff; /* Texto en blanco */
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Icon styling - Ocultar el número */
.ph-checkout-icon-spec-box span.ph-checkout-icon-spec-finished {
    display: none; /* Ocultar el span que contiene el número */
}

/* Box action styling */
.ph-checkout-box-action {
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Ajuste de los enlaces en las cabeceras si es necesario */
.ph-checkout-box-header h3 {
    margin: 0;
    font-size: 20px;
}

/* Mejorar la apariencia de los botones de editar */
.ph-checkout-address-edit .ph-btn,
.ph-checkout-shipping-edit .ph-btn,
.ph-checkout-payment-edit .ph-btn {
    background-color: #555; /* Gris medio */
    color: #fff;
  	margin:10px;
}

.ph-checkout-address-edit .ph-btn:hover,
.ph-checkout-shipping-edit .ph-btn:hover,
.ph-checkout-payment-edit .ph-btn:hover {
    background-color: #444; /* Gris más oscuro al hacer hover */
  	color: #fff;
}

/* Asegurarnos de que las columnas vayan en horizontal */
.uk-grid {
    display: flex;
    flex-wrap: wrap;
}

.equal-height {
    align-items: stretch; /* Alineación vertical de las columnas */
}

.ph-checkout-cart-row-header,
.ph-checkout-cart-row-item {
    display: flex;
    justify-content: space-between; /* Espacio entre columnas */
    align-items: center; /* Alineación vertical en el centro */
}

.ph-checkout-cart-row-header div,
.ph-checkout-cart-row-item div {
    text-align: center;
    margin-bottom: 10px; /* Espacio entre los divs dentro de las filas */
}

.ph-checkout-cart-image img {
    max-width: 100px; /* Ajusta el tamaño de la imagen si es necesario */
}

.ph-checkout-cart-quantity {
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
}

.ph-checkout-cart-brutto {
    text-align: right; /* Alinea el precio a la derecha */
}


/* ------------------------------------------------------------------------------------------------------------------------------ Carrito*/

/* Estilo general para el módulo del carrito */
.ph-cart-module-box {
    background-color: #f9f9f9; /* Fondo claro */
    padding: 20px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin: 20px 0; /* Margen superior e inferior */
}

/* Cabecera del carrito */
.ph-cart-small-box {
    margin-bottom: 20px; /* Espacio debajo de la cabecera */
}

/* Estilo para la cabecera de los ítems del carrito */
.ph-cart-cart-row-header {
    border-bottom: 2px solid #ff7f00; /* Línea de separación en naranja */
    padding-bottom: 10px; /* Espacio en la parte inferior */
}

/* Estilo para las filas de los ítems */
.ph-cart-cart-row-item * {
    margin: 0; /* Elimina márgenes de todos los elementos dentro de .ph-cart-cart-row-item */
    padding: 0; /* Asegúrate de que no haya padding en los elementos internos */
}
.ph-small.ph-mod-cart-image img {
    height: 50px;
    width: auto; /* Mantiene la proporción de la imagen */
}


/* Separadores de filas */
.ph-cart-cart-row-hr {
    border-bottom: 1px solid #ddd; /* Línea de separación suave */
    margin: 10px 0; /* Margen superior e inferior */
}

/* Estilo para las imágenes del carrito */
.ph-mod-cart-image img {
    max-width: 100px; /* Tamaño máximo de la imagen */
    border-radius: 4px; /* Bordes redondeados */
    display: block; /* Centrar imagen */
    margin: auto; /* Centrar horizontalmente */
}

/* Estilo para la cantidad y el título del producto */
.ph-cart-small-quantity {
    font-weight: bold; /* Negrita para la cantidad */
}

.ph-cart-small-title a {
    color: #ff7f00; /* Color naranja para el título */
    text-decoration: none; /* Sin subrayado */
    font-size: 16px; /* Tamaño de fuente del título */
}

.ph-cart-small-title a:hover {
    text-decoration: underline; /* Subrayado al pasar el cursor */
    color: #e67300; /* Tono más oscuro de naranja al hacer hover */
}

/* Estilo para los precios */
.ph-cart-small-price,
.ph-cart-subtotal-netto,
.ph-cart-coupon,
.ph-cart-total {
    font-weight: bold; /* Negrita para los precios */
    color: #ff7f00; /* Color naranja para los precios */
}

/* Subtotal y total */
.ph-cart-cart-row-netto,
.ph-cart-cart-row-total-box {
    margin-top: 15px; /* Espacio superior adicional */
}

/* Estilo para texto de descuento y envío */
.ph-cart-cart-row-discount-coupon,
.ph-cart-cart-row-shipping-box {
    font-size: 14px; /* Tamaño de fuente más pequeño */
}

/* Estilo para los enlaces de checkout */
.ph-cart-link-checkout {
    text-align: right; /* Alinear a la derecha */
    margin-top: 15px; /* Espacio superior */
}

.ph-cart-link-checkout a {
    color: #ffffff; /* Color de texto blanco */
    font-weight: bold; /* Negrita */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Permitir padding y margen */
    background-color: #ff7f00; /* Color de fondo naranja por defecto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Transición suave para el color de fondo */
    font-size: 16px; /* Aumentar tamaño de texto */
}

/* Cambiar el color de fondo al pasar el cursor */
.ph-cart-link-checkout a:hover {
    background-color: #e56d00; /* Color de fondo naranja más oscuro al pasar el cursor */
    color: #ffffff; /* Mantener texto blanco */
    text-decoration: none; /* Sin subrayado al pasar el cursor */
}

/*Página de producto*/
/* Contenedor principal del producto */
#ph-pc-item-box {
    background-color: #f9f9f9; /* Fondo suave */
    border: 1px solid #ddd; /* Borde ligero */
    border-radius: 5px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interior */
    margin-bottom: 30px; /* Espaciado inferior */
}

/* Título del producto */
.ph-header {
    font-family: 'Helvetica Neue', sans-serif; /* Tipografía moderna */
    font-size: 24px; /* Tamaño de fuente */
    color: #333; /* Color del texto */
    margin-bottom: 15px; /* Margen inferior */
}

/* Panel de precio */
.ph-item-price-panel {
    margin-top: 20px; /* Espacio adicional entre la imagen y el precio */
    margin-bottom: 20px; /* Espaciado inferior */
}

/* Texto del precio */
.ph-price-brutto {
    font-size: 1.5em; /* Aumenta el tamaño del precio */
    color: #FF5733; /* Color naranja */
    font-weight: bold; /* Negrita */
}

/* Descripción del producto */
.ph-desc {
    font-size: 16px; /* Tamaño de fuente */
    color: #666; /* Color gris */
    line-height: 1.5; /* Interlineado */
    margin: 10px 0; /* Espaciado para el texto de la descripción */
}

/* Etiqueta de descripción con fondo gris oscuro y texto blanco */
.ph-desc-title {
    background-color: #333; /* Fondo gris oscuro */
    color: white; /* Texto blanco */
    padding: 5px 10px; /* Espaciado interno */
    border-radius: 3px; /* Bordes redondeados */
    display: inline-block; /* Hace que la etiqueta ajuste el tamaño al contenido */
}

/* Caja de disponibilidad */
.ph-item-stock-box {
    font-size: 16px; /* Tamaño de fuente */
    color: #333; /* Color del texto */
}

/* Estilo para la disponibilidad y el botón "Add to cart" en horizontal */
.ph-item-availability {
    display: flex;
    align-items: center; /* Alinea verticalmente */
    gap: 10px; /* Espacio entre elementos */
}

/* Formulario de añadir al carrito */
.phItemCartBoxForm {
    display: flex; /* Diseño flexible */
    align-items: center; /* Centrado vertical */
}

/* Campo de cantidad */
.ph-form-quantity {
    margin-right: 15px; /* Espaciado a la derecha */
}

/* Botón de añadir al carrito */
.ph-btn,
.ph-item-cart-button {
    background-color: #FF5733; /* Color naranja */
    color: white; /* Texto blanco */
    padding: 10px 20px; /* Espaciado interno del botón */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    transition: background-color 0.3s; /* Efecto de transición */
    text-align: center; /* Alinea el texto al centro */
  	margin:10px;
}

/* Efecto hover para el botón */
.ph-btn:hover,
.ph-item-cart-button:hover {
    background-color: #e14f2d; /* Color al pasar el ratón */
  	color:#FFFFFF;
}


/* Botón de añadir a la lista de deseos */
.ph-category-item-wishlist {
    margin-left: 15px; /* Espaciado a la izquierda */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    margin-top: 20px; /* Espaciado superior */
}

/* Estilo de imagen del producto */
.ph-item-image-full-box {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    margin-bottom: 20px; /* Margen inferior */
}

/* Imagen principal del producto */
.phImageFull {
    max-width: 100%; /* La imagen no excederá el ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

/* Ajuste de imágenes adicionales */
.ph-item-image-add-box {
    display: flex; /* Diseño flexible */
    justify-content: space-between; /* Espaciado entre imágenes */
    flex-wrap: wrap; /* Permitir que las imágenes se ajusten */
}

/* Imágenes */
.ph-image-full,
.ph-imageAdditional {
    max-width: 100%; /* Máximo ancho */
    border-radius: 5px; /* Bordes redondeados */
}

/* Reducir el tamaño de las imágenes en miniatura */
.ph-item-image-add-box .ph-image-full {
    max-width: 80px; /* Ajusta el tamaño de las miniaturas */
    height: auto; /* Mantiene la proporción */
}

/* Ajuste de espacio entre imágenes adicionales */
.ph-item-image-box {
    margin-bottom: 10px; /* Margen inferior */
}

/* Estilo para la sección de descripción */
.ph-item-description {
    background-color: #2C2C2C; /* Fondo gris oscuro */
    color: #FFFFFF; /* Letras en blanco */
    padding: 10px; /* Espaciado interior */
    border-radius: 5px; /* Bordes redondeados */
    margin: 10px 0; /* Espacio exterior */
}

/* Oculta la caja de etiquetas si no se usa */
.ph-label-box {
    display: none; 
}

/* Mejora de la visibilidad en dispositivos móviles */
@media (max-width: 768px) {
    .ph-header {
        font-size: 20px; /* Ajustar tamaño de título en móvil */
    }

    .ph-desc {
        font-size: 14px; /* Ajustar tamaño de descripción en móvil */
    }

    .ph-price-brutto {
        font-size: 1.2em; /* Ajustar tamaño del precio en móvil */
    }

    .ph-item-image-add-box {
        flex-direction: column; /* Cambiar a columna en móvil */
        align-items: center; /* Alinear al centro */
    }

    .ph-item-image-add-box .ph-image-full {
        max-width: 60px; /* Reducir tamaño de miniaturas en móvil */
    }
}

/*--------------------------------------------------------------------------------------------------------- Categorías*/
/* Estilo general para el contenedor de categorías */
.ph-categories {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}

/* Estilo para cada elemento de categoría */
.ph-item-box {
    flex: 1 1 30%; /* Tres columnas */
    margin: 15px; /* Espacio entre elementos */
    border: 1px solid #ddd; /* Borde alrededor de cada categoría */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Para evitar que el contenido sobresalga */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: transform 0.3s, box-shadow 0.3s; /* Transición suave para el hover */
}
.ph-item-box .ph-item-content {
    padding: 0; /* Anular el padding existente */
}

/* Efecto hover para los elementos de categoría */
.ph-item-box:hover {
    transform: translateY(-5px); /* Elevar el elemento al pasar el mouse */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

/* Estilo para las imágenes de las categorías */
.ph-image {
    width: 100%; /* Imagen ocupando todo el ancho */
    height: auto; /* Altura automática para mantener proporciones */
    border-bottom: 1px solid #ddd; /* Borde inferior */
}

/* Estilo para los encabezados de las categorías */
.ph-category-header {
    font-size: 1.5em; /* Tamaño de fuente mayor para los títulos */
    text-align: center; /* Centrar el texto */
    color: #333; /* Color del texto */
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con 60% de transparencia */
}


/* Estilo para las descripciones de las categorías */
.ph-cat-desc {
    padding: 10px; /* Espaciado interno */
    text-align: center; /* Centrar el texto */
    color: #666; /* Color gris para el texto de la descripción */
	background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con 60% de transparencia */
}

/* Estilo para el botón de 'Ver más' */
.ph-cat-desc a {
    display: inline-block; /* Botón como bloque en línea */
    padding: 8px 15px; /* Espaciado interno */
    background-color: #ff5722; /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    text-decoration: none; /* Sin subrayado */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s; /* Transición suave para el hover */
}

/* Efecto hover para el botón de 'Ver más' */
.ph-cat-desc a:hover {
    background-color: #e64a19; /* Color más oscuro al pasar el mouse */
}

/* Estilo para el footer */
#block6 {
    text-align: right; /* Alinear a la derecha */
    margin-top: 20px; /* Margen superior */
}

/* Estilo para los títulos de módulos */
.tck-module-title {
    font-size: 1.3em; /* Tamaño de fuente para los títulos de los módulos */
    margin: 15px 0; /* Margen superior e inferior */
    color: #333; /* Color del texto */
}

/*--------------------------------------------------------------------------------------------------------- Botones agregar y quitar en el carrito*/
/* Estilo general para los botones dentro del contenedor input-group */
.input-group button.uk-button {
    display: inline-flex; /* Para que los iconos y el texto estén alineados */
    align-items: center;
    justify-content: center;
    padding: 5px 10px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    border: none; /* Sin borde */
    cursor: pointer; /* Cursor de mano para indicar interactividad */
    transition: background-color 0.3s, transform 0.2s; /* Transición suave */
}

/* Botón verde para actualizar cantidad */
.uk-button-success {
    background-color: #28a745; /* Verde para indicar éxito/actualización */
    color: #fff; /* Color de texto blanco */
}

/* Hover para el botón verde */
.uk-button-success:hover {
    background-color: #218838; /* Verde más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
}

/* Botón rojo para eliminar producto */
.uk-button-danger {
    background-color: #dc3545; /* Rojo para indicar eliminar */
    color: #fff; /* Color de texto blanco */
}

/* Hover para el botón rojo */
.uk-button-danger:hover {
    background-color: #c82333; /* Rojo más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
}

/* Ajustes para los iconos dentro de los botones */
.uk-button span.glyphicon {
    margin-right: 5px; /* Espacio entre el icono y el texto */
    font-size: 1.2em; /* Tamaño del icono */
}

/*------------------------------------------------------------------------------------- Correcciones*/
.ph-cart-subtotal-box > div {
    margin: 10px; /* Ajusta el valor según el espaciado que prefieras */
}

.ph-cart-subtotal-netto-txt,
.ph-cart-subtotal-netto {
    margin: 10px; /* Ajusta el valor según lo que necesites */
}
.ph-cart-total-box > div {
    margin: 10px; /* Ajusta el valor según el espaciado que prefieras */
}

.ph-cart-total-txt,
.ph-checkout-total-amount {
    margin: 10px; /* Ajusta el valor según lo que necesites */
}
.ph-checkout-discount-row > div {
    margin: 10px; /* Ajusta el valor según el espaciado que prefieras */
}
.ph-checkout-box-action > div {
    margin: 10px; /* Ajusta el valor según el espaciado que prefieras */
}

.ph-checkout-payment-brutto-txt,
.ph-checkout-payment-brutto {
    margin: 10px; /* Asegura espaciado en los elementos de precio */
}

/*---------------------------------------------------------------------------------- Formulario dirección*/
/* General form styles */
.uk-form-horizontal {
    max-width: 800px; /* Ancho máximo del formulario */
    margin: 0 auto; /* Centrar el formulario en la página */
}

/* Espaciado entre grupos de formulario */
.uk-form-group {
    margin-bottom: 20px; /* Espacio inferior entre grupos */
}

/* Espaciado entre etiquetas y campos */
.uk-form-label {
    margin-bottom: 5px; /* Espacio inferior de las etiquetas */
}

/* Espaciado entre campos de entrada */
.uk-input,
.uk-select {
    margin-top: 5px; /* Espacio superior entre campos de entrada */
}

/* Ancho de las etiquetas */
.uk-form-label {
    width: 30%; /* Ajusta el ancho de las etiquetas como se necesite */
    display: inline-block; /* Permite que las etiquetas se alineen con los campos */
}

/* Ancho de los campos de entrada */
.uk-input,
.uk-select {
    width: 65%; /* Ancho de los campos de entrada */
    display: inline-block; /* Asegura que se alineen junto a las etiquetas */
}

/* Para el contenedor de los encabezados */
.ph-box-header {
    background-color: #f7f7f7; /* Color de fondo */
    padding: 10px; /* Espaciado interior */
    border-radius: 5px; /* Bordes redondeados */
    margin-bottom: 15px; /* Espacio inferior */
}

/* Cambia el cursor en los campos deshabilitados */
.phShippingFormFields[readonly] {
    background-color: #e9ecef; /* Fondo gris para campos de solo lectura */
    cursor: not-allowed; /* Cambiar el cursor */
}

/* Mejora la apariencia de los campos seleccionados */
.chosen-container {
    width: auto; /* Ancho automático para contenedores de selección */
}

/* Espaciado adicional entre filas */
.row {
    margin-bottom: 10px; /* Espacio inferior entre filas */
}

/* Asegúrate de que el formulario es responsivo */
@media (max-width: 768px) {
    .uk-form-label,
    .uk-input,
    .uk-select {
        width: 100%; /* Ancho completo en pantallas pequeñas */
        display: block; /* Cambia a bloque para que ocupe toda la línea */
    }
}
/*HEADERS*/
.ph-checkout-box-row {
    width: 100%;
}

.ph-checkout-box-header {
    width: 100%;
    /*background-color: #f0f0f0; Cambia el color según lo necesites */
}

.ph-checkout-box-header h3 {
    margin: 0; /* Elimina el margen por defecto */
    padding: 10px; /* Ajusta el padding según lo desees */
   /* background-color: #e0e0e0;  Cambia el color según lo necesites */
    width: 100%;
}
.ph-pull-right.ph-checkout-icon-spec-box {
    display: none;
}
/*------------------------------------------------------------------------ Visión producto */

.ph-item-content-row .row-item {
    width: 100%; /* Asegúrate de que cada item ocupe todo el ancho */
    box-sizing: border-box; /* Incluye padding y border en el cálculo del ancho */
}
.ph-item-action-box {
    padding: 15px; /* Ajusta el valor según lo necesario */
}

.ph-item-desc {
    padding: 10px; /* Para el texto descriptivo */
}

.ph-product-header {
    padding: 5px 0; /* Padding para el encabezado del producto */
}
.phIBoxOH {
    width: 100%; /* Asegura que este div ocupe todo el ancho */
}

.phIBox {
    width: 100%; /* Asegura que este div ocupe todo el ancho dentro de su contenedor */
    display: flex; /* Asegura que los elementos internos se alineen correctamente */
}

.img-responsive {
    width: 100%; /* Hace que la imagen ocupe todo el ancho disponible del div */
    height: auto; /* Mantiene la proporción de la imagen */
}
/*Tabla responsive*/
  .responsive-table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
    display: block;
  }

  .responsive-table th, .responsive-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }

  .responsive-table th {
    background-color: #f2f2f2;
    font-weight: bold;
  }

  .responsive-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  .responsive-table tr:hover {
    background-color: #ddd;
  }

  @media screen and (max-width: 768px) {
    .responsive-table thead {
      display: none;
    }
    .responsive-table tr {
      display: block;
      margin-bottom: 15px;
    }
    .responsive-table td {
      display: block;
      text-align: right;
      font-size: 14px;
    }
    .responsive-table td:before {
      content: attr(data-label);
      font-weight: bold;
      float: left;
    }
  }