/* =========================================================
   BIXELO EMPRESAS – ESTILOS FRONTEND (v2.0.2)
   ========================================================= */


/* ─────────────────────────────────────────────
   GRID DE EMPRESAS [shortcode: empresas_grid]
   ───────────────────────────────────────────── */
.empresas-grid-container {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    align-items: start;
    justify-items: center;
}

.empresa-grid-item {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

@media (min-width: 600px) and (max-width: 1024px) {
    .empresas-grid-container { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 599px) {
    .empresas-grid-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* ── PADDING INFERIOR GRID PRINCIPAL en Tablet y Móvil ──────────
   Aplica solo a [empresas_grid], NO a [empresas_fila].
   Para ajustar el valor edita el padding-bottom de abajo: */
@media (max-width: 1024px) {
    .empresas-grid-container:not(.empresas-fila-single) { padding-bottom: 80px; }
}

/* Logo circular en grid */
.empresa-grid-logo-link {
    display: block;
    width: 100% !important;
    max-width: 155px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 10px;
    border-radius: 50%;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    box-shadow: none !important;
    border: none !important;
}
.empresa-logo-grid { display: none !important; }

/* Nombre en grid */
.empresa-name-grid {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 400; /* sin negrita */
    color: #333;
    text-decoration: none;
    margin-top: 0;
}


/* ─────────────────────────────────────────────
   PRODUCT CARD (listado de productos WooCommerce)
   ───────────────────────────────────────────── */
.empresa-card {
    margin-top: 0.5rem;
    text-align: center !important;
}

.empresa-logo-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 30px !important;
    overflow: hidden;
    margin: 0 0 6px 0;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.empresa-logo-card {
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Nombre en card */
.empresa-name-card-no-logo {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555 !important;
    text-decoration: none !important;
    display: block !important;
    margin: 0 auto 2px !important;
    text-align: center !important;
}

.only-logo .empresa-name-card-no-logo  { display: none !important; }
.only-text .empresa-logo-link          { display: none !important; }
.logo-y-texto .empresa-logo-link,
.logo-y-texto .empresa-name-card-no-logo { display: block !important; }


/* ─────────────────────────────────────────────
   SINGLE PRODUCT PAGE – CARD DE LA EMPRESA
   ───────────────────────────────────────────── */
.empresa-single {
    text-align: center;
    margin-top: 40px;
}

.empresa-logo-single-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto;
    border-radius: 50%;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    box-shadow: none !important;
    border: none !important;
    overflow: hidden;
}
.empresa-logo-single {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
}

.empresa-name-single {
    margin-top: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    display: block;
    text-align: center;
    margin-bottom: 6px;
}

/* RUC con ícono verificado */
.empresa-single-ruc {
    display: inline-flex;
    flex-direction: row; /* icono verificado a la izquierda */
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}
.empresa-ruc-icon {
    width: 16px !important;
    height: 16px !important;
}

/* Enlace "Ver perfil completo" */
.empresa-ver-perfil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    margin-top: 8px;
}
.empresa-ver-perfil:hover { text-decoration: underline; }
.empresa-ver-perfil-icon {
    width: 15px !important;
    height: 15px !important;
}


/* ─────────────────────────────────────────────
   BOTONES DE CONTACTO (Email y WhatsApp)
   ───────────────────────────────────────────── */
.bixelo-emp-btn-wrap {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.bixelo-emp-btn {
    --btn-height:    50px;
    --btn-icon-size: 28px;
    --btn-font-size: 17px;
    --btn-icon-pad:  14px;

    display:         inline-flex;
    align-items:     stretch;
    width:           330px;
    max-width:       100%;
    height:          var(--btn-height);
    box-sizing:      border-box;
    text-decoration: none;
    border-radius:   4px;
    overflow:        hidden;
    cursor:          pointer;
}

.bixelo-emp-btn__icon-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0 var(--btn-icon-pad);
    flex-shrink:     0;
    transition:      background-color .25s ease;
}
.bixelo-emp-btn__icon {
    width:   var(--btn-icon-size) !important;
    height:  var(--btn-icon-size) !important;
    display: block;
}

.bixelo-emp-btn__label {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            1;
    color:           #ffffff !important;
    font-size:       var(--btn-font-size);
    font-weight:     600;
    text-align:      center;
    padding:         0 16px;
    transition:      background-color .25s ease;
    line-height:     1.2;
}

.bixelo-emp-btn--wa .bixelo-emp-btn__icon-wrap       { background-color: #33D951; }
.bixelo-emp-btn--wa .bixelo-emp-btn__label           { background-color: #36C750; }
.bixelo-emp-btn--wa:hover .bixelo-emp-btn__icon-wrap { background-color: #2AB543; }
.bixelo-emp-btn--wa:hover .bixelo-emp-btn__label     { background-color: #25A13C; }

.bixelo-emp-btn--email .bixelo-emp-btn__icon-wrap       { background-color: #136BF9; }
.bixelo-emp-btn--email .bixelo-emp-btn__label           { background-color: #3483FA; }
.bixelo-emp-btn--email:hover .bixelo-emp-btn__icon-wrap { background-color: #0d56cc; }
.bixelo-emp-btn--email:hover .bixelo-emp-btn__label     { background-color: #2a6fd4; }

.bixelo-emp-btn--email .bixelo-emp-btn__icon {
    filter: brightness(0) invert(1) !important;
}


/* ─────────────────────────────────────────────
   QUITAR SOMBRAS Y BORDES GLOBALES (WooCommerce)
   ───────────────────────────────────────────── */
.woocommerce img,
.woocommerce a img,
.woocommerce ul.products li.product img,
.woocommerce div.product .images img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image img,
.product .attachment-woocommerce_thumbnail,
img.wp-post-image,
img.attachment,
figure img,
a img {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
}

.woocommerce ul.products li.product,
.woocommerce .products .product,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .images,
.woocommerce .product .entry-thumbnail {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}


/* ─────────────────────────────────────────────
   BUSCADOR DE EMPRESAS [shortcode: empresas_buscador]
   ───────────────────────────────────────────── */
.empresas-buscador-contenedor {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px auto;
}

.empresas-search-form {
    display: flex;
    align-items: stretch;
    width: 50%;
    max-width: 100%;
    gap: 0;
    box-sizing: border-box;
}

.empresas-search-form input[type="text"],
.empresas-search-input {
    height: 48px;
    font-size: 15px;
    color: #4A4A4A;
    border: 1px solid #E5E5E5;
    padding: 0 15px;
    background: #FFFFFF;
    flex: 1 1 auto;
    border-radius: 0;
    box-sizing: border-box;
    min-width: 0;
    font-family: inherit;
    transition: border-color 0.2s ease;
}
.empresas-search-form input[type="text"]::placeholder,
.empresas-search-input::placeholder { color: #9C9C9C; }
.empresas-search-form input[type="text"]:focus,
.empresas-search-input:focus {
    outline: none;
    border-color: #00ACFC;
    box-shadow: none;
}

.empresas-search-form button,
.empresas-search-button {
    height: 48px;
    min-width: 130px;
    width: 130px;
    background: #00ACFC;
    border: 1px solid #00ACFC;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 0;
    flex-shrink: 0;
    font-family: inherit;
}
.empresas-search-form button:hover,
.empresas-search-button:hover { background: #0095D9; border-color: #0095D9; }
.empresas-search-form button:focus,
.empresas-search-button:focus { outline: none; box-shadow: none; }


/* ─────────────────────────────────────────────
   RESPONSIVE – BUSCADOR
   ───────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .empresas-buscador-contenedor { width: 90%; }
    .empresas-search-form {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .empresas-search-form input[type="text"],
    .empresas-search-input {
        width: 100% !important;
        border-radius: 4px 4px 0 0;
        border-bottom: none;
    }
    .empresas-search-form button,
    .empresas-search-button {
        width: 100% !important;
        border-radius: 0 0 4px 4px;
        border-top: none;
    }
}


/* ─────────────────────────────────────────────
   RESPONSIVE – SINGLE PRODUCT CARD
   ───────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .empresa-single { margin-top: 20px; }
}


/* ─────────────────────────────────────────────
   SHORTCODE: [empresas_fila]
   ───────────────────────────────────────────── */
.empresas-fila-single {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    overflow: visible !important;
}
.empresas-fila-single .empresa-grid-item { min-width: 0; }

@media (min-width: 600px) and (max-width: 1024px) {
    .empresas-grid-container,
    .empresas-fila-single {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}
@media (max-width: 599px) {
    .empresas-grid-container,
    .empresas-fila-single {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}


/* ─────────────────────────────────────────────
   CARD-2 — Single Product Page (diseño extendido)
   Selector global en: empresas.php → propiedad $bixelo_card_activa
   ───────────────────────────────────────────── */

/* ↓↓ AJUSTAR AQUÍ el espacio entre RUC y los datos ↓↓ */
.ec2-sep-top { margin-top: 12px; }

/* ↓↓ AJUSTAR AQUÍ el espacio entre datos y redes ↓↓ */
.ec2-sep-mid { margin-top: 10px; }

/* ↓↓ AJUSTAR AQUÍ el espacio entre redes y botones ↓↓ */
.ec2-sep-bot { margin-top: 10px; }

.ec2-datos {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    width:          100%;
    max-width:      300px;
    margin:         0 auto;
    text-align:     left;
}

/* ↓↓ AJUSTAR AQUÍ el espacio entre filas de datos ↓↓ */
.ec2-dato {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    margin-bottom: 8px;
    font-size:     14px;
    color:         #264F9A;
    word-break:    break-word;
    width:         100%;
}

/* ↓↓ AJUSTAR AQUÍ el tamaño de íconos de datos ↓↓ */
.ec2-dato img {
    width:       18px !important;
    height:      18px !important;
    flex-shrink: 0;
    margin-top:  2px;
}

.ec2-dato a       { color: #264F9A; text-decoration: none; }
.ec2-dato a:hover { text-decoration: underline; }

/* ↓↓ AJUSTAR AQUÍ el espacio entre íconos de redes ↓↓ */
.ec2-redes {
    display:         flex;
    gap:             8px;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    width:           100%;
}

.ec2-red {
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    background:      none;
    border:          none;
    padding:         0;
}

/* ↓↓ AJUSTAR AQUÍ el tamaño de íconos de redes sociales ↓↓ */
.ec2-red img {
    width:   36px !important;
    height:  36px !important;
    display: block;
}


/* ─────────────────────────────────────────────
   BUSCADOR GRAFINUBE — Single Product Page
   Hook: woocommerce_before_single_product → prioridad 1
   ───────────────────────────────────────────── */
.bixelo-spp-buscador {
    width: 100%;
    background: #fff;
}
.bixelo-spp-buscador__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px 0;
}


/* ─────────────────────────────────────────────
   MENÚ HORIZONTAL — Single Product Page
   Hook: woocommerce_before_single_product → prioridad 2
   ───────────────────────────────────────────── */
.bixelo-menu-horizontal {
    width: 100%;
    background: #fff;
}
.bixelo-menu-horizontal__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bixelo-mh-left,
.bixelo-mh-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bixelo-mh-sep {
    color: #ccc;
    font-size: 14px;
    user-select: none;
}

.bixelo-mh-item {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    font-size:       14px;
    font-weight:     500;
    color:           #444;
    text-decoration: none;
    background:      none;
    border:          none;
    padding:         4px 6px;
    cursor:          pointer;
    transition:      color 0.2s ease;
    line-height:     1;
}
.bixelo-mh-item:hover,
.bixelo-mh-item:active,
.bixelo-mh-item:focus {
    color: #3483FA;
    outline: none;
}
.bixelo-mh-item--inactive {
    pointer-events: none;
    color: #aaa;
}

.bixelo-mh-icon {
    width:       16px !important;
    height:      16px !important;
    display:     block;
    flex-shrink: 0;
    transition:  filter 0.2s ease;
}
.bixelo-mh-item:hover .bixelo-mh-icon,
.bixelo-mh-item:active .bixelo-mh-icon {
    filter: invert(38%) sepia(97%) saturate(1500%) hue-rotate(200deg) brightness(95%);
}
.bixelo-mh-item--editar { color: #3483FA; font-weight: 600; }

.bixelo-mh-linea {
    max-width: 1200px;
    margin: 10px auto 0;
    height: 1px;
    background: #e5e5e5;
}

/* Modal Borrar Anuncio */
.bixelo-modal-borrar {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.45);
    z-index:         99999;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.bixelo-modal-borrar__box {
    position:      relative;
    background:    #fff;
    border-radius: 12px;
    border:        1px solid #e5e7eb;
    padding:       44px 32px 32px;
    max-width:     420px;
    width:         90%;
    text-align:    center;
    box-shadow:    0 4px 24px rgba(0,0,0,0.12);
}
.bixelo-modal-borrar__cerrar {
    position:    absolute;
    top:         14px;
    right:       18px;
    background:  none;
    border:      none;
    font-size:   22px;
    color:       #888;
    cursor:      pointer;
    line-height: 1;
    padding:     0;
}
.bixelo-modal-borrar__cerrar:hover { color: #333; }
.bixelo-modal-borrar__titulo {
    font-size:   28px;
    font-weight: 700;
    color:       #111;
    margin:      0 0 16px;
    line-height: 1.2;
}
.bixelo-modal-borrar__texto {
    font-size:   15px;
    color:       #555;
    margin:      0 0 28px;
    line-height: 1.6;
}
.bixelo-modal-borrar__btn {
    display:       block;
    background:    #3483FA;
    color:         #fff;
    font-size:     16px;
    font-weight:   600;
    padding:       14px 28px;
    border:        none;
    border-radius: 50px;
    cursor:        pointer;
    margin-bottom: 16px;
    width:         100%;
    transition:    background 0.2s;
}
.bixelo-modal-borrar__btn:hover { background: #2a6fd4; }
.bixelo-modal-borrar__cancelar-txt {
    display:     block;
    width:       100%;
    background:  none;
    border:      none;
    color:       #888;
    font-size:   14px;
    cursor:      pointer;
    padding:     4px 0 0;
}
.bixelo-modal-borrar__cancelar-txt:hover { color: #444; }


/* ─────────────────────────────────────────────
   FECHA DE PUBLICACIÓN — Single Product Page
   Hook: woocommerce_single_product_summary → prioridad 4
   ───────────────────────────────────────────── */
.bixelo-fecha-publicacion {
    display:     flex;
    align-items: center;
    gap:         6px;
    color:       #555;
    /* font-size, font-weight, padding-bottom → configurables en assets.php */
}
.bixelo-fecha-icono {
    width:       16px !important;
    height:      16px !important;
    flex-shrink: 0;
    display:     block;
}


/* ─────────────────────────────────────────────
   BANNER ANUNCIO — Single Product Page
   Desktop: woocommerce_after_single_product_summary → prioridad 20
   Tablet/Móvil: incluido en mismo hook (se posiciona después del CARD)
   ───────────────────────────────────────────── */
.bixelo-banner-anuncio {
    width:      100%;
    background: #F7F7F7;
    margin-top: 24px;
    margin-bottom: 24px !important;
}
.bixelo-banner-anuncio__inner {
    max-width:  1200px;
    margin:     0 auto;
    padding:    24px 20px;
    display:    flex;
    gap:        0;
    align-items:stretch;
}

.bixelo-banner-col {
    flex:    1;
    padding: 0 24px;
}
.bixelo-banner-col:first-child { padding-left: 0; }
.bixelo-banner-col:last-child  { padding-right: 0; }

.bixelo-banner-col__header {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 10px;
}
.bixelo-banner-col__icono {
    width:       20px !important;
    height:      20px !important;
    flex-shrink: 0;
}
.bixelo-banner-col__titulo {
    font-size:   15px;
    font-weight: 700;
    color:       #222;
}
.bixelo-banner-col__texto {
    font-size:   13px;
    color:       #555;
    line-height: 1.6;
    margin:      0;
}

.bixelo-banner-divisor {
    width:      1px;
    background: #ddd;
    flex-shrink:0;
    margin:     0 8px;
}

@media (max-width: 768px) {
    .bixelo-banner-anuncio__inner {
        flex-direction: column;
        gap: 20px;
    }
    .bixelo-banner-col { padding: 0; }
    .bixelo-banner-divisor {
        width:  100%;
        height: 1px;
        margin: 0;
    }
}

/* =========================================================
   FIN DEL ARCHIVO (v2.0.2)
   ========================================================= */


/* ─────────────────────────────────────────────
   OCULTAR TAB "VALORACIONES" — Single Product Page
   Oculta en Desktop, Tablet y Móvil
   ───────────────────────────────────────────── */
.woocommerce-tabs .reviews_tab,
.woocommerce-tabs li.reviews_tab { display: none !important; }

/* Color línea inferior de pestañas: reemplaza el azul por #d1d5db */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom-color: #d1d5db !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: #d1d5db !important;
}


/* ─────────────────────────────────────────────
   ALINEACIÓN ICONO EMAIL BANNER — Tablet y Móvil
   Alinea icono-email2 igual que icono-whatsapp
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .bixelo-emp-btn--email .bixelo-emp-btn__icon-wrap,
    .bixelo-emp-btn--wa .bixelo-emp-btn__icon-wrap {
        align-items: center;
        justify-content: center;
    }
    .ep-c1-btns .bixelo-emp-btn {
        display: flex;
        align-items: stretch;
    }
}