/**
 * ACU Componentes de PC - Estilos Frontend
 * Version: 3.2.0
 * Author: Acuciante Design
 * 
 * Changelog v3.2.0:
 * - Nuevo diseño de botón "Mostrar más" con línea horizontal
 * - Icono circular verde (#C0FF01) con signo + en el centro
 * - Animación suave del icono (oculta línea vertical al expandir)
 * - Diseño más limpio y profesional
 * - Hover mejorado con escala 1.1
 * 
 * Changelog v3.1.1:
 * - Opción para mostrar/ocultar títulos de componentes
 * - Títulos 30% más pequeños que valores (0.60rem vs 0.85rem)
 * - Títulos posicionados arriba de valores
 * - Contenedor .acu-component-info con flexbox
 * - Clase condicional .acu-show-labels
 * 
 * Changelog v3.1.0:
 * - Diseño ULTRA compacto (28% más pequeño)
 * - Etiquetas ocultas (solo valores)
 * - Íconos más grandes y editables (16-64px)
 * - Padding reducido (8px/12px)
 * - Item spacing optimizado (6px)
 * - Mobile ultra compacto
 * 
 * Changelog v3.0.0:
 * - Diseño compacto tipo tarjeta (estilo HYPERPC)
 * - Sistema de vista colapsable
 * - Botón de expandir/colapsar componentes
 * - Estilos responsive mejorados
 * - Soporte completo para modo oscuro
 */

/* Contenedor principal de la lista de componentes */
.tm-product-teaser__specification {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Item de componente */
.tm-product-teaser__specification li {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.tm-product-teaser__specification li:last-child {
    border-bottom: none;
}

/* Contenedor del ícono */
.tm-product-teaser__specification .uk-flex-none {
    flex: 0 0 auto;
    margin-right: 12px;
}

/* Ícono SVG */
.tm-product-teaser__specification .uk-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.tm-product-teaser__specification .uk-icon svg {
    width: 100%;
    height: 100%;
}

/* Ícono Font Awesome */
.tm-product-teaser__specification .uk-icon i {
    font-size: 20px;
    line-height: 20px;
}

/* Ícono Imagen */
.tm-product-teaser__specification .uk-icon .acu-icon-image {
    max-width: 20px;
    max-height: 20px;
    width: auto;
    height: auto;
    display: block;
}

/* Contenedor del contenido */
.tm-product-teaser__specification .uk-overflow-hidden {
    flex: 1 1 auto;
    min-width: 0;
}

/* Etiqueta del tipo de componente */
.tm-product-teaser__specification .tm-color-gray-200 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Nombre del componente */
.tm-product-teaser__specification .uk-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Márgenes */
.tm-margin-8-bottom {
    margin-bottom: 8px;
}

.tm-margin-12-right {
    margin-right: 12px;
}

/* Responsive - Ocultar íconos en móviles */
@media (max-width: 639px) {
    .tm-product-teaser__specification .uk-visible\@s {
        display: none !important;
    }
    
    .tm-product-teaser__specification li {
        padding: 8px 0;
    }
}

/* Tema oscuro (opcional) */
@media (prefers-color-scheme: dark) {
    .tm-product-teaser__specification li {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
}

/* Animaciones sutiles al hover */
.tm-product-teaser__specification li {
    transition: background-color 0.2s ease;
}

.tm-product-teaser__specification li:hover {
    background-color: rgba(0, 0, 0, 0.02);
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
}

/* Estilos para cuando los íconos tienen color personalizado */
.acu-component-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.acu-component-icon svg {
    width: 100%;
    height: 100%;
}

/* Para SVGs con fill (sólidos) - aplicar currentColor */
.acu-component-icon svg path[fill]:not([fill="none"]),
.acu-component-icon svg rect[fill]:not([fill="none"]),
.acu-component-icon svg circle[fill]:not([fill="none"]),
.acu-component-icon svg polygon[fill]:not([fill="none"]) {
    fill: currentColor !important;
}

/* Para SVGs con stroke (contornos) - aplicar currentColor */
.acu-component-icon svg[fill="none"] path,
.acu-component-icon svg[fill="none"] rect,
.acu-component-icon svg[fill="none"] circle,
.acu-component-icon svg[fill="none"] line,
.acu-component-icon svg path[stroke],
.acu-component-icon svg rect[stroke],
.acu-component-icon svg circle[stroke],
.acu-component-icon svg line[stroke] {
    stroke: currentColor !important;
}

/* Para íconos image mantener el comportamiento normal */
.acu-component-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ========================================
   INDICADOR DE FPS (Rendimiento del Juego)
   ======================================== */
.tm-product-teaser__fps,
.acu-fps-indicator {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.tm-product-teaser__fps .uk-flex {
    gap: 12px;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
}

/* SVG del círculo FPS - Alta calidad */
.tm-product-teaser__fps svg {
    display: block;
    margin: 0 auto;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}

.tm-product-teaser__fps svg text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tm-product-teaser__fps svg path {
    shape-rendering: geometricPrecision;
}

/* Título del FPS */
.tm-product-teaser__fps .uk-text-bold {
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
}

/* Descripción del FPS */
.tm-product-teaser__fps .uk-text-small {
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: center;
}

/* Contenedor de texto FPS */
.tm-product-teaser__fps .uk-width-auto {
    width: 100% !important;
    max-width: 100%;
}

/* Espaciado entre SVG y texto */
.tm-product-teaser__fps .uk-margin-small-top {
    margin-top: 12px !important;
}

/* Responsive - Móviles */
@media (max-width: 639px) {
    .tm-product-teaser__fps svg {
        width: 64px;
        height: 64px;
    }
    
    .tm-product-teaser__fps {
        padding: 16px 12px;
        margin-bottom: 16px;
    }
    
    .tm-product-teaser__fps .uk-margin-small-top {
        margin-top: 8px !important;
    }
    
    .tm-product-teaser__fps .uk-text-bold {
        font-size: 0.875rem;
    }
    
    .tm-product-teaser__fps .uk-text-small {
        font-size: 0.75rem;
    }
}

/* Tema oscuro */
@media (prefers-color-scheme: dark) {
    .tm-product-teaser__fps {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

/* ========================================
   DISEÑO COMPACTO TIPO TARJETA
   ======================================== */

/* Contenedor de lista compacta */
.acu-pc-components-list {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Items de componente MUY compactos */
.acu-pc-components-list .acu-component-item {
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 10px;
}

.acu-pc-components-list .acu-component-item:last-child {
    border-bottom: none;
}

/* Componentes ocultos - deben estar ocultos por defecto */
.acu-component-hidden {
    display: none !important;
}

/* Contenedor de información del componente */
.acu-pc-components-list .acu-component-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Etiquetas ocultas por defecto - solo valores */
.acu-pc-components-list .acu-component-label {
    display: none;
    font-size: 0.60rem; /* 30% más pequeño que el valor (0.85 * 0.7 ≈ 0.60) */
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Mostrar etiquetas cuando la opción está activada */
.acu-show-labels .acu-component-label {
    display: block;
}

/* Valores compactos en una sola línea */
.acu-pc-components-list .acu-component-value {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
}

/* Íconos más GRANDES y personalizables */
.acu-pc-components-list .acu-component-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.acu-pc-components-list .acu-component-icon svg {
    width: 100%;
    height: 100%;
}

.acu-pc-components-list .acu-component-icon i {
    font-size: 28px;
    line-height: 28px;
}

.acu-pc-components-list .acu-component-icon .acu-icon-image {
    max-width: 28px;
    max-height: 28px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ========================================
   BOTÓN DE EXPANDIR/COLAPSAR
   ======================================== */

/* Contenedor del botón "Mostrar más" */
.tm-product-teaser__show-specification {
    margin-top: 20px;
    position: relative;
    width: 100%;
}

/* Contenedor de línea + icono */
.tm-product-teaser__show-specification .uk-position-relative {
    height: 24px;
    margin-bottom: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Línea horizontal */
.tm-product-teaser__show-specification hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: 0;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

/* Ícono del botón (SVG circular con +) */
.acu-expand-icon {
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    background: white;
    padding: 2px;
    border-radius: 50%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    display: block;
    position: relative;
}

.acu-expand-icon:hover {
    transform: scale(1.15);
}

.acu-expand-icon circle {
    transition: fill 0.3s ease;
    fill: #C0FF01; /* Color por defecto, se sobrescribe con estilos inline */
}

.acu-expand-icon:hover circle {
    fill: #d4ff33; /* Color hover por defecto, se sobrescribe con estilos inline */
}

/* Ocultar línea vertical del + cuando está expandido */
.acu-expand-icon.acu-expanded .acu-icon-plus-vertical {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Link/texto del botón */
.tm-product-teaser__show-specification-link {
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
    letter-spacing: 0.3px;
    font-size: 12px;
    text-align: center;
}

.tm-product-teaser__show-specification-link:hover {
    color: #C0FF01;
}

/* Estilos del texto */
.acu-expand-text-show,
.acu-expand-text-hide {
    display: inline-block;
}

/* Clases de utilidad UIkit si no están definidas */
.tm-padding-4 {
    padding: 12px 16px !important;
}

.uk-padding-remove-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tm-padding-4-top {
    padding-top: 8px !important;
}

.tm-text-size-14 {
    font-size: 12px !important;
}

/* Forzar centrado */
.uk-flex-center {
    justify-content: center !important;
}

.uk-flex-middle {
    align-items: center !important;
}

.uk-text-center {
    text-align: center !important;
}

.uk-width-1-1 {
    width: 100% !important;
}

/* Responsive - Móviles */
@media (max-width: 639px) {
    .acu-pc-components-list {
        padding: 6px 10px;
        border-radius: 5px;
    }
    
    .acu-pc-components-list .acu-component-item {
        padding: 5px 0;
        gap: 8px;
    }
    
    .acu-pc-components-list .acu-component-value {
        font-size: 0.8rem;
    }
    
    .acu-pc-components-list .acu-component-icon {
        width: 24px;
        height: 24px;
    }
    
    .acu-pc-components-list .acu-component-icon i {
        font-size: 24px;
    }
    
    .tm-product-teaser__show-specification-link {
        font-size: 11px !important;
    }
    
    .acu-expand-icon {
        width: 20px !important;
        height: 20px !important;
    }
    
    .tm-padding-4 {
        padding: 8px 12px !important;
    }
}

/* Tema oscuro */
@media (prefers-color-scheme: dark) {
    .acu-pc-components-list {
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .acu-pc-components-list .acu-component-item {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    
    .acu-pc-components-list .acu-component-value {
        color: #f0f0f0;
    }
    
    .acu-pc-components-list .acu-component-label {
        color: #999;
    }
    
    .tm-product-teaser__show-specification hr {
        border-top-color: rgba(255, 255, 255, 0.15);
        border-top-width: 2px;
    }
    
    .tm-product-teaser__show-specification-link {
        color: #f0f0f0;
    }
    
    .tm-product-teaser__show-specification-link:hover {
        color: #C0FF01;
    }
    
    .acu-expand-icon {
        background: rgba(0, 0, 0, 0.8);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
    
    .acu-expand-icon:hover {
        filter: drop-shadow(0 3px 8px rgba(192, 255, 1, 0.5));
    }
    
    .tm-product-teaser__fps,
    .acu-fps-indicator {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.08);
    }
    
    .tm-product-teaser__fps .uk-text-bold {
        color: #f0f0f0;
    }
    
    .tm-product-teaser__fps .uk-text-small {
        color: #ccc;
    }
}