/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Template: blocksy
Author: CreativeThemes
Author URI: https://creativethemes.com
Description: Blocksy is a fast, modern WordPress theme with advanced WooCommerce support and full compatibility with the block editor.
Tags: accessibility-ready,blog,block-patterns,e-commerce,wide-blocks,block-styles,grid-layout,one-column,two-columns,three-columns,four-columns,right-sidebar,left-sidebar,translation-ready,custom-colors,custom-logo,custom-menu,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments
Version: 2.1.53.1787666606
Updated: 2026-08-25 14:03:26

*/



#variation-matrix-container { 
    width: 100%; 
    box-sizing: border-box; 
    background-color: #ffffff; 
}

/* ==================================================================
   PESTAÑAS SWITCH DESTACADAS
=================================================================== */
.matrix-tabs-wrapper {
    display: flex;
    background: #e9ecef;
    padding: 4px;
    border-radius: 8px;
    gap: 6px;
    margin-bottom: 15px;
}

.matrix-tab-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    color: #6c757d;
    transition: all 0.25s ease;
    text-align: center;
    letter-spacing: 0.5px;
}

.matrix-tab-btn.active {
    background: #0C1D2B; /* Color oscuro destacado */
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* ==================================================================
   TABLA Y PROPORCIONES
=================================================================== */
.variation-matrix { 
    width: 100%; 
    border-collapse: collapse; 
    table-layout: fixed; 
}

.talles-title-top {
    text-align: center; 
    font-size: 13px; 
    color: #777; 
    letter-spacing: 3px;
    border: none !important; 
    padding: 10px 0 5px 0 !important;
}

.variation-matrix th, 
.variation-matrix td { 
    border: 1px solid #f2f2f2; 
    padding: 5px 2px; 
    text-align: center; 
}

.variation-matrix th:first-child, 
.variation-matrix td:first-child { 
    width: 28% !important; 
    text-align: left; 
    font-weight: 500; 
    padding: 4px 6px !important; 
}

/* ==================================================================
   ESTADOS INTELIGENTES: BOTÓN VS TEXTO PLANO
=================================================================== */
/* 1. MODO POR CURVA: El color es un botón interactivo */
.variation-matrix.mode-curva .btn-color-curve {
    width: 100%;
    background: #f7f7f7;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.variation-matrix.mode-curva .btn-color-curve:hover {
    background: #0C1D2B;
    border-color: #0C1D2B;
    color: #ffffff;
}

/* 2. MODO A ELECCIÓN: Desaparece el botón, se convierte en texto plano */
.variation-matrix.mode-eleccion .btn-color-curve {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    cursor: default !important;
    pointer-events: none !important; /* Deshabilita clics */
    text-transform: uppercase;
    text-align: left;
    display: block;
}

/* ==================================================================
   CELDAS CUADRADAS
=================================================================== */
.variation-cell {
    width: 100%;
    max-width: 42px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.variation-cell.out-of-stock { 
    background-color: #ffd1d1 !important; 
    cursor: not-allowed; 
}

.variation-cell.available { 
    background-color: #f2f2f2; 
}

.variation-cell.available:hover { 
    background-color: #0C1D2B; 
    color: #fff; 
}

.variation-cell.selected { 
    background-color: #747E86; 
    color: #fff; 
    font-weight: bold; 
}

/* VIBRACIÓN */
.shake { 
    animation: shake-anim 0.4s both; 
    background-color: #ff4444 !important; 
    color: #fff; 
}

@keyframes shake-anim {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    30%, 70% { transform: translate3d(-2px, 0, 0); }
    40%, 60% { transform: translate3d(2px, 0, 0); }
}

/* ==================================================================
   MENSAJE EXPLICATIVO
=================================================================== */
#curve-feedback-box {
    margin: 10px auto;
    max-width: 100%;
}

.feedback-msg {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    text-align: left;
    line-height: 1.4;
}

.feedback-info {
    background-color: #e8f4fd;
    color: #2980b9;
    border: 1px solid #d4e6f1;
}

.feedback-warning {
    background-color: #fef9e7;
    color: #b7950b;
    border: 1px solid #f9e79f;
}

/* ==================================================================
   FOOTER
=================================================================== */
.matrix-info-text { 
    font-size: 12px; 
    color: #999; 
    text-align: center; 
    margin: 15px 0; 
    font-style: italic; 
}

.matrix-footer { 
    text-align: center; 
    border-top: 1px solid #f2f2f2; 
    padding-top: 15px;
}

.total-units { 
    font-size: 18px; 
    margin-bottom: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
}

.btn-success { 
    background-color: #339135 !important; 
    border-color: #339135 !important; 
    color: #fff !important; 
}

.btn-reset-matrix {
    background: transparent;
    border: none;
    color: #e63946;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-reset-matrix:hover {
    background-color: #ffe5e5;
    transform: scale(1.1);
}

#add-all-to-cart {
    width: 100% !important;
    display: block !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 10px 0 !important;
    padding: 15px 20px !important;
    font-size: 1.1em !important;
}

#add-all-to-cart.btn-success:disabled {
    opacity: 1 !important; 
    color: #ffffff !important;
}