/* =========================================================
   CARTILLA MADERAS
   DISEÑO PROFESIONAL
   AISLADO DEL RESTO DEL PLUGIN
   ========================================================= */

.ct-wrapper-maderas-nuevo {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.ct-wrapper-maderas-nuevo *,
.ct-maderas-modal * {
    box-sizing: border-box;
}


/* =========================================================
   CATEGORIAS
   ========================================================= */

.ct-maderas-botones {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 55px;

    width: 100%;
    margin: 0 auto 26px;
    padding: 0;
}

.ct-maderas-boton {
    appearance: none;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 125px;
    min-width: 125px;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;
    box-shadow: none;

    cursor: pointer;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.ct-maderas-boton-imagen {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 88px;
    height: 88px;

    overflow: hidden;

    border-radius: 50%;
    border: 3px solid transparent;

    background: #fff;

    box-shadow:
        0 3px 10px rgba(0,0,0,.12);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.ct-maderas-boton.activo
.ct-maderas-boton-imagen {
    border-color: #222;

    box-shadow:
        0 5px 15px rgba(0,0,0,.18);
}

.ct-maderas-boton-imagen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.ct-maderas-boton-titulo {
    display: block;

    width: 100%;

    margin-top: 8px;

    color: #222;

    text-align: center;

    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
}


/* =========================================================
   BARRA SUPERIOR DE CARTILLA
   ========================================================= */

.ct-maderas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin: 0 0 18px;
    padding: 0;
}

.ct-maderas-total {
    color: #333;

    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
}

.ct-maderas-descargar {
    appearance: none;

    margin: 0;
    padding: 11px 27px;

    border: 2px solid #5f8a5f;
    border-radius: 30px;

    background: #fff;
    color: #333;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.ct-maderas-descargar:hover {
    transform: translateY(-2px);

    background: #f8fbf8;

    box-shadow:
        0 4px 12px rgba(0,0,0,.10);
}


/* =========================================================
   CARTILLA
   ========================================================= */

.ct-maderas-cartilla {
    display: none;

    width: 100%;
}

.ct-maderas-cartilla.activa {
    display: block;
}

.ct-maderas-colores {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 16px;

    width: 100%;
}


/* =========================================================
   TONOS
   ========================================================= */

.ct-maderas-color {
    appearance: none;

    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0 0 12px;

    overflow: hidden;

    border: 1px solid #ddd;
    border-radius: 9px;

    background: #fff;

    cursor: pointer;

    text-align: center;

    box-shadow:
        0 2px 7px rgba(0,0,0,.05);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.ct-maderas-muestra {
    display: block;

    width: 100%;
    height: 145px;
}

/* =========================================================
   EFECTO PLASTIFICADO — SOLO BARNICES
   ========================================================= */

.ct-maderas-cartilla[data-maderas-panel="barnices"]
.ct-maderas-muestra {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image:
        linear-gradient(
            125deg,
            rgba(255,255,255,0.00) 0%,
            rgba(255,255,255,0.00) 34%,
            rgba(255,255,255,0.20) 43%,
            rgba(255,255,255,0.48) 49%,
            rgba(255,255,255,0.18) 55%,
            rgba(255,255,255,0.00) 65%,
            rgba(255,255,255,0.00) 100%
        ),
        linear-gradient(
            115deg,
            rgba(255,255,255,0.00) 0%,
            rgba(255,255,255,0.00) 72%,
            rgba(255,255,255,0.10) 82%,
            rgba(255,255,255,0.22) 88%,
            rgba(255,255,255,0.00) 96%
        );

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.42),
        inset 0 -2px 4px rgba(0,0,0,0.10);

    border-color:
        rgba(255,255,255,0.45);
}


/* Brillo principal del barniz */

.ct-maderas-cartilla[data-maderas-panel="barnices"]
.ct-maderas-muestra::before {

    content: "";

    position: absolute;

    z-index: 2;

    top: -45%;
    left: -18%;

    width: 62%;
    height: 190%;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.00) 0%,
            rgba(255,255,255,0.06) 32%,
            rgba(255,255,255,0.34) 48%,
            rgba(255,255,255,0.08) 62%,
            rgba(255,255,255,0.00) 100%
        );

    transform:
        rotate(18deg);

    pointer-events: none;
}


/* Reflejo secundario muy suave */

.ct-maderas-cartilla[data-maderas-panel="barnices"]
.ct-maderas-muestra::after {

    content: "";

    position: absolute;

    z-index: 3;

    top: 8%;
    right: 4%;

    width: 34%;
    height: 20%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,0.24) 0%,
            rgba(255,255,255,0.10) 32%,
            rgba(255,255,255,0.00) 72%
        );

    transform:
        rotate(-12deg);

    filter:
        blur(2px);

    pointer-events: none;
}


/* Realce del borde del barniz */

.ct-maderas-color-datos {
    display: flex;

    flex-direction: column;
    align-items: center;

    width: 100%;

    padding: 9px 7px 0;
}

.ct-maderas-color-codigo {
    color: #33466d;

    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
}

.ct-maderas-color-nombre {
    margin-top: 5px;

    color: #111;

    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;

    text-transform: uppercase;

    overflow-wrap: anywhere;
}


/* =========================================================
   MODAL
   ========================================================= */

.ct-maderas-modal {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 12px;
}

.ct-maderas-modal.abierto {
    display: flex;
}

.ct-maderas-modal-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.86);

    backdrop-filter:
        blur(3px);
}


/* =========================================================
   CONTENEDOR DEL MODAL
   ========================================================= */

.ct-maderas-modal-contenido {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    width: min(1500px, 97vw);
    height: min(94vh, 1050px);

    min-height: 0;

    overflow: hidden;

    padding:
        14px 18px 10px;

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 25px 80px rgba(0,0,0,.45);
}


/* =========================================================
   CERRAR
   ========================================================= */

.ct-maderas-modal-cerrar {
    position: absolute;

    top: 10px;
    right: 12px;

    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #555;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 27px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 3px 10px rgba(0,0,0,.20);
}

.ct-maderas-modal-cerrar:hover {
    background: #222;
}


/* =========================================================
   GALERIA SUPERIOR
   ========================================================= */

.ct-maderas-galeria {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 9px;

    width: 100%;

    min-height: 0;

    padding:
        2px 55px 10px;
}

/* =========================================================
   ELEGIR PRODUCTO
   EXTREMO DERECHO DE LA GALERIA
   ========================================================= */

.ct-maderas-elegir-producto {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 150px;
    height: 40px;

    margin-left: auto;
    padding: 0 18px;

    border: 1px solid #555;
    border-radius: 22px;

    background: #fff;
    color: #222;

    text-decoration: none;

    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 2px 7px rgba(0,0,0,.08);

    transition:
        border-color .2s ease,
        background-color .2s ease;
}

.ct-maderas-elegir-producto:hover {
    border-color: #333;

    background: #f7f7f7;

    color: #111;

    text-decoration: none;
}

.ct-maderas-ambiente {
    appearance: none;

    display: flex;
    flex-direction: column;

    width: 125px;
    min-width: 105px;

    margin: 0;
    padding: 3px;

    overflow: hidden;

    border: 2px solid #ddd;
    border-radius: 9px;

    background: #fff;

    cursor: pointer;

    box-shadow:
        0 2px 7px rgba(0,0,0,.08);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.ct-maderas-ambiente:hover {
    transform: translateY(-2px);

    border-color: #aaa;
}

.ct-maderas-ambiente.activo {
    border-color: #222;

    box-shadow:
        0 0 0 1px #222,
        0 5px 14px rgba(0,0,0,.15);
}

.ct-maderas-ambiente[hidden] {
    display: none !important;
}

.ct-maderas-ambiente-imagen {
    display: block;

    width: 100%;
    height: 58px;

    overflow: hidden;

    border-radius: 6px;

    background: #eee;
}

.ct-maderas-ambiente-imagen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.ct-maderas-ambiente-nombre {
    display: block;

    padding:
        5px 2px 4px;

    color: #222;

    text-align: center;

    font-size: 11px;
    line-height: 1.1;
    font-weight: 700;
}


/* =========================================================
   VISOR PRINCIPAL
   ========================================================= */

.ct-maderas-visor {
    flex: 1 1 auto;

    min-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    overflow: hidden;

    border-radius: 10px;

    background: #f1f1f1;
}

.ct-maderas-imagen-contenedor {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    min-height: 0;

    overflow: hidden;
}

.ct-maderas-imagen {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}


/* =========================================================
   NAVEGACION INFERIOR
   ========================================================= */

.ct-maderas-navegacion {
    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        70px minmax(0,1fr) 70px;

    align-items: center;

    width: 100%;

    min-height: 62px;

    padding:
        7px 0 0;
}

.ct-maderas-modal-color {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;

    color: #171717;

    text-align: center;

    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
}

.ct-maderas-nav {
    appearance: none;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 48px;

    margin: 0 auto;
    padding: 0;

    border: 0;
    border-radius: 9px;

    background: #555;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 42px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.ct-maderas-nav:hover {
    background: #222;

    transform: scale(1.03);
}

.ct-maderas-nav:disabled {
    opacity: .25;

    cursor: default;

    transform: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .ct-maderas-colores {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .ct-maderas-botones {
        gap: 35px;
    }

    .ct-maderas-muestra {
        height: 130px;
    }

}


/* =========================================================
   TABLET PEQUEÑA
   ========================================================= */

@media (max-width: 800px) {

    .ct-maderas-botones {
        gap: 20px;
    }

    .ct-maderas-colores {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .ct-maderas-modal-contenido {
        width: 98vw;
        height: 95vh;

        padding:
            10px 10px 8px;
    }

    .ct-maderas-galeria {
        padding-left: 42px;
        padding-right: 42px;
    }

}


/* =========================================================
   MOVIL
   ========================================================= */

@media (max-width: 600px) {

    .ct-maderas-botones {
        justify-content: flex-start;

        gap: 18px;

        overflow-x: auto;

        padding:
            0 8px 8px;
    }

    .ct-maderas-boton {
        flex: 0 0 90px;

        width: 90px;
        min-width: 90px;
    }

    .ct-maderas-boton-imagen {
        width: 70px;
        height: 70px;
    }

    .ct-maderas-boton-titulo {
        font-size: 12px;
    }

    .ct-maderas-toolbar {
        gap: 10px;
    }

    .ct-maderas-total {
        font-size: 13px;
    }

    .ct-maderas-descargar {
        padding:
            9px 15px;

        font-size: 12px;
    }

    .ct-maderas-colores {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .ct-maderas-muestra {
        height: 115px;
    }

    .ct-maderas-modal {
        padding: 5px;
    }

    .ct-maderas-modal-contenido {
        width: 99vw;
        height: 97vh;

        border-radius: 11px;
    }

    .ct-maderas-galeria {
        gap: 5px;

        padding:
            2px 35px 7px;
    }

    .ct-maderas-ambiente {
        width: 88px;
        min-width: 78px;
    }

    .ct-maderas-ambiente-imagen {
        height: 44px;
    }

    .ct-maderas-ambiente-nombre {
        font-size: 9px;
    }

    .ct-maderas-navegacion {
        grid-template-columns:
            52px minmax(0,1fr) 52px;

        min-height: 55px;
    }

    .ct-maderas-nav {
        width: 42px;
        height: 42px;

        font-size: 34px;
    }

    .ct-maderas-modal-color {
        font-size: 15px;
    }

}