/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * THEME.CSS — Identidad Visual Unificada Cubikos Design
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * Archivo centralizado de identidad visual. Se importa DESPUÉS de main.css
 * para actuar como capa final de coherencia sobre todos los módulos.
 *
 * Responsabilidades:
 *   1. Tipografía unificada (Inter) en toda la app e iframe
 *   2. Densidad desktop: tablas y paneles compactos
 *   3. Corrección de desbordamiento (max-width: 100%)
 *   4. Estados de UI (tabs, pills) via CSS — NO inline JS
 *   5. Refinamientos de consistencia inter-módulo
 *
 * Sistema base: 62.5% → 1rem = 10px
 *   Equivalencias para densidad desktop:
 *     0.85rem@16px ≈ 13.6px ≈ 1.36rem@10px → redondeado a 1.4rem
 *
 * @module theme
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   1. TIPOGRAFÍA — Inter (Google Fonts)
   ═══════════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/**
 * Override universal de font-family.
 * Inter es una fuente diseñada para pantallas, con excelente legibilidad
 * en tamaños pequeños — ideal para interfaces de datos técnicos.
 */
*,
*::before,
*::after {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Suavizado de renderizado tipográfico */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. DENSIDAD DESKTOP — Tablas y datos técnicos compactos
   ═══════════════════════════════════════════════════════════════════════════════
   Objetivo: font-size ≈ 0.85rem@16px = 13.6px → 1.36rem@10px ≈ 1.4rem
   Para tablas de datos: usar 1.3rem (13px) para máxima densidad
*/

/* --- Tablas globales --- */
table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    font-size: 1.3rem;
    padding: 0.4rem 0.8rem;
    line-height: 1.4;
    white-space: nowrap;
}

th {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

/* --- Paneles laterales compactos --- */
#editor-sidebar,
#nav-drawer,
#right-tools-panel,
#part-tools-panel {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Secciones dentro de paneles */
.panel-section,
.config-section,
.tool-section,
.accordion-section {
    padding: 0.8rem;
    gap: 0.4rem;
    display: flex;
    flex-direction: column;
}

/* Labels e inputs en paneles técnicos */
.panel-section label,
.config-section label,
.tool-section label,
.dimension-group label {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.panel-section input,
.config-section input,
.tool-section input,
.panel-section select,
.config-section select {
    font-size: 1.3rem;
    padding: 0.5rem 0.8rem;
}

/* --- Listas de piezas (cutting panel) --- */
.cut-pieces-table th,
.cut-pieces-table td,
#cut-pieces-body td,
#cut-pieces-body th {
    font-size: 1.2rem;
    padding: 0.3rem 0.6rem;
}

/* --- Datos de medidas / dimensiones --- */
.dimension-value,
.measure-value,
.stat-value,
.info-value {
    font-size: 1.3rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. CORRECCIÓN DE DESBORDAMIENTO
   ═══════════════════════════════════════════════════════════════════════════════
   Evita que elementos con width/height fijos en px causen scroll horizontal.
*/
img,
video,
canvas,
svg:not(:root) {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
    border: none;
}

/* Canvas del optimizer y planos de corte: respetar contenedor */
#cut-board-canvas,
#co-canvas-wrap canvas {
    max-width: 100%;
}

/* Contenedores que pueden desbordar en pantallas pequeñas */
.panel-content,
.tool-content,
.config-content {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. ESTADOS DE UI — Tabs/Pills via CSS (eliminar inline JS)
   ═══════════════════════════════════════════════════════════════════════════════
   toolPanelController.js usa .active class → estos estilos lo manejan
*/
#tab-mover,
#tab-rotar {
    transition: color var(--transition-fast),
                background var(--transition-fast),
                box-shadow var(--transition-fast);
    color: var(--text-light);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

#tab-mover.active,
#tab-rotar.active {
    color: var(--primary) !important;
    background: var(--bg-card) !important;
    box-shadow: 0 0.2rem 0.4rem rgba(245, 158, 11, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. CONSISTENCIA INTER-MÓDULO
   ═══════════════════════════════════════════════════════════════════════════════
*/

/* Scrollbars unificadas */
::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}
::-webkit-scrollbar-track {
    background: var(--bg-app);
}
::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 0.3rem;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* Focus ring unificado */
:focus-visible {
    outline: 0.2rem solid var(--primary);
    outline-offset: 0.2rem;
    border-radius: var(--radius-xs);
}

/* Transiciones suaves globales para hover states */
button,
input,
select,
textarea,
a {
    transition: color var(--transition-fast),
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* Status colors para innerHTML inyectado desde controllers */
.status-success { color: var(--success) !important; }
.status-warning { color: var(--warning) !important; }
.status-error   { color: var(--danger) !important; }
.status-info    { color: var(--info) !important; }

/* Badges numéricos inyectados inline */
.badge-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-bg);
    padding: 0.1rem 0.6rem;
    border-radius: 1rem;
    flex-shrink: 0;
}

/* Material chip para cutting panel */
.material-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 2rem;
    font-size: 1.1rem;
}
.material-chip .badge-count {
    font-size: 1.1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. RESPONSIVE DENSITY OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════
*/

/* Ultra-wide: más espacio para datos */
@media (min-width: 1920px) {
    th, td {
        font-size: 1.4rem;
        padding: 0.5rem 1rem;
    }
}

/* Laptop / pantalla compacta: máxima densidad */
@media (max-width: 1440px) {
    th, td {
        font-size: 1.2rem;
        padding: 0.3rem 0.6rem;
    }
    
    .panel-section,
    .config-section,
    .tool-section {
        padding: 0.6rem;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    th, td {
        font-size: 1.1rem;
        padding: 0.3rem 0.4rem;
    }
}