/*

██████╗ ██╗      █████╗  ██████╗██╗  ██╗ ██████╗██╗  ██╗ ██████╗ ██████╗ ██╗███╗   ███╗ █████╗          ██████╗ ██████╗ ███╗   ███╗
██╔══██╗██║     ██╔══██╗██╔════╝██║ ██╔╝██╔════╝██║  ██║██╔═══██╗██╔══██╗██║████╗ ████║██╔══██╗        ██╔════╝██╔═══██╗████╗ ████║
██████╔╝██║     ███████║██║     █████╔╝ ██║     ███████║██║   ██║██████╔╝██║██╔████╔██║███████║        ██║     ██║   ██║██╔████╔██║
██╔══██╗██║     ██╔══██║██║     ██╔═██╗ ██║     ██╔══██║██║   ██║██╔══██╗██║██║╚██╔╝██║██╔══██║        ██║     ██║   ██║██║╚██╔╝██║
██████╔╝███████╗██║  ██║╚██████╗██║  ██╗╚██████╗██║  ██║╚██████╔╝██║  ██║██║██║ ╚═╝ ██║██║  ██║ █████╗ ╚██████╗╚██████╔╝██║ ╚═╝ ██║
╚═════╝ ╚══════╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚═╝╚═╝     ╚═╝╚═╝  ╚═╝ ╚════╝  ╚═════╝ ╚═════╝ ╚═╝     ╚═╝
*/
/* Estilos para Novedades CSS 2025 */

/* General Demo Styles */
.demo-box {
    border: 1px solid #ddd;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.demo-title {
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
    color: #555;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 1px;
}

/* 1. Nesting Demo */
.nesting-card {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;

    & .nesting-header {
        color: #2c3e50;
        font-weight: bold;
        margin-bottom: 10px;
    }

    & .nesting-content {
        color: #495057;

        & span {
            color: #e67e22;
            font-weight: bold;
        }
    }

    &:hover {
        background-color: #e9ecef;
        border-color: #ced4da;
    }
}

/* 2. :has() Demo */
.has-demo-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 300px;
}

.form-group {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Si el grupo contiene un input inválido, cambia el borde y fondo */
.form-group:has(input:invalid:not(:placeholder-shown)) {
    border-color: #e74c3c;
    background-color: #fadbd8;
}

/* Si el grupo contiene un input válido, cambia a verde */
.form-group:has(input:valid) {
    border-color: #2ecc71;
    background-color: #d5f5e3;
}

.has-card-demo {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.card-item {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    width: 200px;
}

/* Selecciona la tarjeta que TIENE una imagen dentro */
.card-item:has(img) {
    border: 2px solid #3498db;
    background-color: #ebf5fb;
}

.card-item img {
    max-width: 100%;
    border-radius: 4px;
}

/* 3. Container Queries Demo */
.container-wrapper {
    container-type: inline-size;
    container-name: card-container;
    resize: horizontal;
    overflow: hidden;
    border: 2px dashed #999;
    padding: 10px;
    max-width: 100%;
    min-width: 200px;
}

.responsive-card {
    background-color: #2c3e50;
    color: white;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.responsive-card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    background-color: #aaa;
}

/* Cuando el contenedor es mayor a 400px */
@container card-container (min-width: 400px) {
    .responsive-card {
        flex-direction: row;
        align-items: center;
    }

    .responsive-card img {
        width: 150px;
        height: 100%;
    }
}

/* 4. OKLCH & Color Mix Demo */
.color-palette {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.swatch {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

.oklch-1 {
    background-color: oklch(60% 0.2 20);
}

/* Rojo vibrante */
.oklch-2 {
    background-color: oklch(60% 0.2 140);
}

/* Verde vibrante */
.oklch-3 {
    background-color: oklch(60% 0.2 260);
}

/* Azul vibrante */

.mix-1 {
    background-color: color-mix(in srgb, blue, white);
}

.mix-2 {
    background-color: color-mix(in srgb, blue, white 80%);
}

.mix-3 {
    background-color: color-mix(in oklch, blue, yellow);
}

/* 5. Text Wrap Balance/Pretty */
.typography-demo div {
    border: 1px solid #eee;
    padding: 10px;
    margin-bottom: 10px;
    width: 300px;
    /* Ancho forzado para ver el efecto */
}

.balance {
    text-wrap: balance;
    background-color: #f0f8ff;
}

.pretty {
    text-wrap: pretty;
    background-color: #fff0f5;
}

/* 6. Starting Style Demo */
.entry-demo-container {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.popover-box {
    background-color: #8e44ad;
    color: white;
    padding: 20px;
    border-radius: 8px;
    display: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s, transform 0.5s, display 0.5s allow-discrete;
}

.popover-box.visible {
    display: block;
    opacity: 1;
    transform: scale(1);
}

@starting-style {
    .popover-box.visible {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* 7. Light-Dark Demo */
:root {
    color-scheme: light dark;
}

.light-dark-box {
    /* Si el navegador soporta light-dark(), usará esto. 
       Si no, usará el fallback o la media query tradicional. */
    background-color: light-dark(#f0f0f0, #333);
    color: light-dark(#333, #f0f0f0);
    border: 2px solid light-dark(#ccc, #555);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

/* Utility for code blocks in this file */
.code-block {
    background-color: #282c34;
    color: #abb2bf;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Consolas', monospace;
    margin: 10px 0;
}

.code-block code {
    background-color: transparent;
    color: inherit;
}