/* Prevenir zoom con doble clic */
* {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Focus Mode Styles */
.focus-mode-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #F0F1F2;
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.focus-mode-overlay.active {
    display: flex;
    pointer-events: auto;
}

.focus-mode-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent !important;
    border: none !important;
    color: #666;
    cursor: pointer;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: none;
    z-index: 100000;
    pointer-events: auto;
    min-width: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    outline: none !important;
    box-shadow: none !important;
}

.focus-mode-close-btn:hover {
    background: transparent !important;
    border: none !important;
    color: #666;
    outline: none !important;
    box-shadow: none !important;
}

/* Asegurar que el botón de cerrar no tenga animaciones en ningún estado */
.focus-mode-overlay.timing-mode .focus-mode-close-btn,
.focus-mode-overlay:not(.timing-mode) .focus-mode-close-btn {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    color: #666 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.focus-mode-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    pointer-events: none;
}

#focus-mode-scramble-display {
    font-size: 1.6em;
    font-weight: 500;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
    max-width: none;
    line-height: 1.4;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 53px;
    pointer-events: none;
    text-shadow: none;
    box-shadow: none;
}



#focus-mode-timer-display-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    background-color: transparent;
    pointer-events: auto;
}

#focus-mode-timer-display {
    font-size: 8em;
    font-weight: bold;
    color: #000000;
    font-family: "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
    pointer-events: auto;
}

/* Dark theme support for focus mode */
[data-theme="dark"] .focus-mode-overlay {
    background-color: #12141c;
}

[data-theme="dark"] #focus-mode-scramble-display {
    color: #ffffff;
    text-shadow: none;
    box-shadow: none;
}

[data-theme="dark"] .focus-mode-content {
    padding: 21px;
}

[data-theme="dark"] #focus-mode-timer-display {
    color: #ffffff;
}

[data-theme="dark"] #focus-mode-inspection-status-display {
    color: #999;
}

/* Estilos del tema oscuro - replicando exactamente el tema claro */
html[data-theme="dark"] #inspection-status-display {
    position: fixed;
    top: calc(50% + 16px);
    left: 0;
    right: 0;
    z-index: 15;
    display: none;
    text-align: center;
    margin-top: 10px;
    color: #999;
    font-size: 14px;
}

/* Estilo para el estado de inspección en móvil en tema oscuro */
@media (max-width: 768px) {
    html[data-theme="dark"] #inspection-status-display {
        top: calc(50% + 17px) !important;
        left: 0px;
    }
}

[data-theme="dark"] .focus-mode-close-btn {
    color: #999;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .focus-mode-close-btn:hover {
    background: transparent !important;
    border: none !important;
    color: #999;
    outline: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .focus-mode-close-btn:focus {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ocultar el botón de cerrar cuando el cronómetro está activo */
.focus-mode-overlay.timing-mode .focus-mode-close-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Focus mode option container styles - mismo estilo que inspection */
.focus-mode-option-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    color: #495057;
    font-size: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 0;
}

/* Toggle switch para focus mode - mismo estilo que inspection */
.focus-mode-option-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    margin-left: 10px;
}

.focus-mode-option-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.focus-mode-option-container .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .2s;
    border-radius: 20px;
}

.focus-mode-option-container .toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
}

.focus-mode-option-container input:checked + .toggle-slider {
    background-color: #007bff;
}

.focus-mode-option-container input:checked + .toggle-slider:before {
    transform: translateX(16px);
}

[data-theme="dark"] .focus-mode-option-container {
    color: #e0e0e0;
}

[data-theme="dark"] .inspection-option-container {
    color: #e0e0e0;
}

[data-theme="dark"] .session-option-container {
    color: #e0e0e0;
}

/* Estados de inspección para el timer en Focus Mode */
#focus-mode-timer-display.inspection {
    color: #007AFF !important;
}

#focus-mode-timer-display.penalty {
    color: #FF9500 !important;
    animation: pulse 1s infinite;
}

#focus-mode-timer-display.dnf {
    color: #FF3B30 !important;
    animation: shake 0.5s ease-in-out;
}

[data-theme="dark"] #focus-mode-timer-display.inspection {
    color: #0A84FF !important;
}

[data-theme="dark"] #focus-mode-timer-display.penalty {
    color: #FF9F0A !important;
}

[data-theme="dark"] #focus-mode-timer-display.dnf {
    color: #FF453A !important;
}

/* Estilos para el modo timing en Focus Mode */
.focus-mode-overlay.timing-mode #focus-mode-scramble-display,
.focus-mode-overlay.timing-mode #focus-mode-inspection-status-display {
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.focus-mode-overlay.timing-mode #focus-mode-timer-display {
    transform: scale(1.1);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.focus-mode-overlay.timing-mode #focus-mode-timer-display-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/* Responsive styles for focus mode */
@media (max-width: 768px) {
    #focus-mode-scramble-display {
        font-size: 20px;
        line-height: 1.5;
        padding: 16px;
        margin-top: 118px;
        box-sizing: content-box;
    }
    
    #focus-mode-timer-display {
        font-size: 48px;
    }
    
    .focus-mode-close-btn {
        top: 15px;
        right: 15px;
        padding: 0 !important;
        font-size: 20px;
        min-width: auto;
        height: auto;
    }
    
    /* Asegurar que el timer en Focus Mode esté centrado igual que el timer normal en móvil */
    #focus-mode-timer-display-container {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 480px) {
    #focus-mode-scramble-display {
        font-size: 20px;
        line-height: 1.5;
        padding: 16px;
    }
    
    #focus-mode-timer-display {
        font-size: 48px;
    }
    
    .focus-mode-close-btn {
        top: 10px;
        right: 10px;
        padding: 0 !important;
        font-size: 18px;
        min-width: auto;
        height: auto;
    }
}

/* Estilos para el modo de inspección WCA integrado */
#timer-display {
    transition: color 0.3s ease, transform 0.2s ease;
}

/* Estilos para el estado de inspección en Focus Mode */
#focus-mode-inspection-status-display {
    position: fixed;
    top: calc(50% + 55px);
    left: 0;
    right: 0;
    z-index: 15;
    text-align: center;
    display: none;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
}

/* Estilo para el estado de inspección en Focus Mode en móvil */
@media (max-width: 768px) {
    #focus-mode-inspection-status-display {
        top: calc(50% + 17px);
    }
    
    /* Tema oscuro en móvil */
    html[data-theme="dark"] #focus-mode-inspection-status-display {
        top: calc(50% + 18px);
    }
    
    #focus-mode-timer-display {
        font-size: 48px;
    }
    
    #focus-mode-timer-display-container {
        padding: 0 16px;
    }
}

#timer-display.inspection {
    color: #007AFF !important;
}

#timer-display.penalty {
    color: #FF9500 !important;
    animation: pulse 1s infinite;
}

#timer-display.dnf {
    color: #FF3B30 !important;
    animation: shake 0.5s ease-in-out;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Prevenir selección de texto en elementos interactivos */
.algorithm-block, .algorithm-block *, .nav-item, .menu-item, .puzzle-selector-btn, 
.algorithm-selector-btn, .case-selector-btn, .time-entry, 
.delete-btn, .clear-all-btn, .action-btn, .menu-btn,
.times-button, .close-modal, .close-history-modal {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Permitir selección de texto en áreas específicas */
input, textarea, .algorithm-textarea {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* General Body Styles */
html, body {
    height: 100%;
    width: 100%;
}

/* Layout de escritorio por defecto */
body {
    display: flex;
    flex-direction: row;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #F0F1F2;
    color: #333;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Optimización de carga - ocultar elementos hasta que estén listos */
.algorithms-grid {
    opacity: 1;
    transition: opacity 0.1s ease-in-out;
}

.algorithms-grid.loading {
    opacity: 0.3;
}



/* Sidebar lateral */
.sidebar {
    width: 80px;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 0 0;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    z-index: 100;
}

.sidebar-header {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding-top: 0;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    min-height: 35px;
}



.sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: #888;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.nav-item.active {
    color: #222;
}

.nav-item:active {
    filter: invert(1);
}

.nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon svg {
    width: 20px;
    height: 20px;
}

/* Main Container */
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    position: relative;
}

/* Header móvil (solo visible en móvil) */
.mobile-header {
    display: none;
    background-color: #fff;
    padding: 0;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    z-index: 1001;
    position: relative;
}

/* Header */
.timer-header {
    background-color: #fff;
    padding: 0;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    z-index: 1000;
    position: relative;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    min-height: 50px;
}


.menu-btn {
    background: transparent;
    border: none;
    color: #222;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    position: relative;
    z-index: 1003;
    margin-right: auto;
    width: 40px;
    height: 40px;
}

.menu-btn svg {
    width: 30px;
    height: 30px;
    color: #222;
    position: absolute;
    transform: none;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}

/* Menú desplegable */
.menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px); /* Justo debajo del contenedor padre con 2px de separación */
    left: 0;
    background-color: #ffffff;
    min-width: 120px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
    z-index: 1006;
    border-radius: 4px;
    padding: 2px 0;
    border: 1px solid #e0e0e0;
    /* Eliminada la transición */
}


.menu-dropdown.show {
    display: block;
}

.menu-item {
    color: #495057;
    padding: 6px 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    font-size: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.menu-item svg {
    width: 24px;
    height: 24px;
    color: currentColor;
}

/* Eliminados los efectos hover y active del menú */

.mobile-header .logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    min-height: 35px;
    margin: 0;
    padding: 0;
}



.logo-container > svg {
    color: #222;
    font-size: 24px;
    width: 24px;
    height: 24px;
}


/* Header bottom */
.header-bottom {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
}


/* Selectores */
.session-selector, .puzzle-selector, .inspection-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    position: relative;
}

.puzzle-selector {
    position: relative;
    margin-right: 0px;
}

.algorithm-selector {
    position: relative;
    margin-left: 0px;
}

.case-selector {
    position: relative;
    margin-left: 0px;
    visibility: hidden; /* Oculto por defecto */
    opacity: 0;
    /* Eliminada la transición */
}

.case-selector.show {
    visibility: visible; /* Mostrar cuando tenga la clase show */
    opacity: 1;
}

.puzzle-selector-btn, .algorithm-selector-btn, .case-selector-btn, .inspection-selector-btn, .session-selector-btn {
    background: #e9ecef;
    border: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    user-select: none;
    -webkit-user-select: none;
    color: #495057;
    pointer-events: auto;
    position: relative;
    z-index: 1004;
    height: 40px;
    box-sizing: border-box;
}

.puzzle-selector-btn svg, .algorithm-selector-btn svg, .case-selector-btn svg, .inspection-selector-btn svg, .session-selector-btn svg {
    width: 1em;
    height: 1em;
    color: currentColor;
}

/* Eliminados los efectos hover y active */

.puzzle-dropdown-content, .algorithm-dropdown-content, .case-dropdown-content, .inspection-dropdown-content, .session-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 2px); /* Justo debajo del botón con 2px de separación */
    left: 0;
    background-color: #ffffff;
    min-width: 120px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
    z-index: 1005;
    border-radius: 4px;
    padding: 2px 0;
    border: 1px solid #e0e0e0;
    /* Eliminada la transición */
}

.puzzle-dropdown-content a, .algorithm-dropdown-content a, .case-dropdown-content a, .inspection-dropdown-content a, .session-dropdown-content a {
    color: #495057;
    padding: 6px 10px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    font-size: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

/* Eliminados los efectos hover y active de las opciones del dropdown */

/* Clase que se añadirá con JS para mostrar el menú */
.show {
    display: block;
}

/* Rotar el icono del cubo cuando el menú está abierto */
.puzzle-selector-btn.open svg, .algorithm-selector-btn.open svg, .case-selector-btn.open svg, .inspection-selector.open svg, .session-selector-btn.open svg {
    transform: rotate(180deg);
    /* Eliminada la transición */
}

/* Ajustar el dropdown del selector de inspección móvil para que se abra hacia la izquierda */
.inspection-selector .inspection-dropdown-content {
    left: auto;
    right: 0;
}

/* En móvil, el selector de inspección debe estar a la derecha */
.header-bottom .inspection-selector {
    margin-left: auto;
}

/* ===== TIMER STYLES - LIGHT THEME ===== */

/* Main Timer Container */
.timer-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    box-sizing: border-box;
    position: relative;
    background-color: #f5f5f7;
}

/* Scramble Display */
#scramble-display {
    font-size: 1.6em;
    font-weight: 500;
    color: #333;
    margin: 0;
    padding: 20px;
    text-align: center;
    line-height: 1.4;
    user-select: text;
    -webkit-user-select: text;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Timer Display Container */
#timer-display-container {
    position: fixed;
    top: 50%;
    left: calc(50% + 40px);
    transform: translate(-50%, -50%);
    line-height: 1;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    background-color: #f5f5f7;
    border-radius: 12px;
}

/* Timer Display */
#timer-display {
    display: inline-block;
    font-family: "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
    font-size: 8em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #000000;
}

/* Inspection Status Display */
#inspection-status-display {
    position: fixed;
    top: calc(50% + 55px);
    left: 80px;
    right: 0;
    z-index: 15;
    display: none;
    text-align: center;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
}

/* PB Label */
.pb-label {
    background-color: rgb(22, 163, 74);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin: 0 auto 10px auto;
    display: inline-block;
    transition: color .1s ease-in-out, background-color .1s ease-in-out;
    position: fixed;
    top: calc(50% - 120px);
    left: calc(50% + 40px);
    transform: translateX(-50%);
    z-index: 1000;
}

/* Timer States */
#timer-display.inspection {
    color: #007AFF !important;
}

#timer-display.penalty {
    color: #FF9500 !important;
    animation: pulse 1s infinite;
}

#timer-display.dnf {
    color: #FF3B30 !important;
    animation: shake 0.5s ease-in-out;
}

/* Timer Mobile Styles */
@media (max-width: 768px) {
    #scramble-display {
        font-size: 20px;
        line-height: 1.5;
    }
    
    #timer-display-container {
        padding: 0 16px;
    }
    
    #timer-display {
        font-size: 48px;
    }
    
    #inspection-status-display {
        top: calc(50% + 17px) !important;
        left: 0px;
    }
    
    .pb-label {
        position: fixed;
        top: calc(50% - 70px);
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        z-index: 1000;
        background-color: rgb(22, 163, 74);
        color: white;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        display: block;
        width: fit-content;
    }
}

/* ===== TIMER STYLES - DARK THEME ===== */

/* Main Timer Container - Dark */
[data-theme="dark"] .timer-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    box-sizing: border-box;
    position: relative;
    background-color: #12141c;
}

/* Scramble Display - Dark */
[data-theme="dark"] #scramble-display {
    font-size: 1.6em;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    padding: 20px;
    text-align: center;
    line-height: 1.4;
    user-select: text;
    -webkit-user-select: text;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Timer Display Container - Dark */


/* Timer Display - Dark */
[data-theme="dark"] #timer-display {
    color: #ffffff;
}

/* Inspection Status Display - Dark */
html[data-theme="dark"] #inspection-status-display {
    position: fixed;
    top: calc(50% + 55px);
    left: 80px;
    right: 0;
    z-index: 15;
    display: none;
    text-align: center;
    margin-top: 10px;
    color: #999;
    font-size: 14px;
}

/* PB Label - Dark */
[data-theme="dark"] .pb-label {
    background-color: rgb(22, 163, 74);
    color: white;
}

.pb-label .font-label {
    transition: color .1s ease-in-out, background-color .1s ease-in-out;
}

/* Timer States - Dark */
[data-theme="dark"] #timer-display.inspection {
    color: #007AFF !important;
}

[data-theme="dark"] #timer-display.penalty {
    color: #FF9500 !important;
    animation: pulse 1s infinite;
}

[data-theme="dark"] #timer-display.dnf {
    color: #FF3B30 !important;
    animation: shake 0.5s ease-in-out;
}

/* Timer Mobile Styles - Dark */
@media (max-width: 768px) {
    html[data-theme="dark"] #scramble-display {
        font-size: 20px !important;
        line-height: 1.5 !important;
    }
    
    html[data-theme="dark"] #inspection-status-display {
        top: calc(50% + 17px) !important;
        left: 0px;
    }
}



/* Algorithms Container */
.algorithms-container {
    flex: 1;
    padding: 0;
    background-color: #f5f5f5;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en iOS */
}

/* Home Container - Página principal independiente */
.home-container {
    flex: 1;
    padding: 0;
    background-color: #f5f5f5;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en iOS */
    min-height: 100%;
}

/* Header de escritorio */
.desktop-header {
    padding: 20px 20px 0 20px;
    background-color: #f5f5f5;
}

.algorithms-title {
    font-size: 32px;
    font-weight: bold;
    color: #495057;
    margin: 0 0 20px 0;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

/* Selectores de escritorio */
.desktop-selectors {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background-color: #f5f5f7;
    justify-content: flex-start;
    position: relative;
}

/* Selectores de escritorio específicos para algorithms */
.algorithms-container .desktop-selectors {
    padding: 0;
}

.algorithms-container .puzzle-selector {
    margin-right: 0px !important;
}

.algorithms-container .algorithm-selector {
    margin-left: 0px !important;
}

/* También en móvil */
@media (max-width: 768px) {
    .algorithms-container .puzzle-selector {
        margin-right: 0px !important;
    }
    
    .algorithms-container .algorithm-selector {
        margin-left: 0px !important;
    }
    
    .algorithms-container .case-selector {
        margin-left: 0px !important;
    }
}


.desktop-selectors .puzzle-selector,
.desktop-selectors .algorithm-selector,
.desktop-selectors .case-selector,
.desktop-selectors .inspection-selector,
.desktop-selectors .session-selector {
    position: relative;
}

.desktop-selectors .puzzle-selector-btn,
.desktop-selectors .algorithm-selector-btn,
.desktop-selectors .case-selector-btn,
.desktop-selectors .inspection-selector-btn,
.desktop-selectors .session-selector-btn {
    background: #e9ecef;
    border: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    user-select: none;
    -webkit-user-select: none;
    color: #495057;
    pointer-events: auto;
    position: relative;
    z-index: 1004;
    height: 33px;
    line-height: 33px;
    box-sizing: border-box;
}

/* Eliminados los efectos hover y active para desktop */

.desktop-selectors .puzzle-dropdown-content,
.desktop-selectors .algorithm-dropdown-content,
.desktop-selectors .case-dropdown-content,
.desktop-selectors .inspection-dropdown-content,
.desktop-selectors .session-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background-color: #ffffff;
    min-width: 120px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
    z-index: 1005;
    border-radius: 4px;
    padding: 2px 0;
    border: 1px solid #e0e0e0;
    /* Eliminada la transición */
}

.desktop-selectors .puzzle-dropdown-content a,
.desktop-selectors .algorithm-dropdown-content a,
.desktop-selectors .case-dropdown-content a,
.desktop-selectors .inspection-dropdown-content a,
.desktop-selectors .session-dropdown-content a {
    color: #495057;
    padding: 6px 10px;
    text-decoration: none;
    display: block;
    font-size: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

/* Eliminados los efectos hover y active de las opciones del dropdown para desktop */

.desktop-selectors .show {
    display: block;
}

/* Posicionar el selector de inspección a la derecha */
.desktop-selectors .inspection-selector {
    position: absolute;
    right: 20px;
    top: 20px;
}

/* Ajustar el botón del selector de inspección para que tenga la misma altura */
.desktop-selectors .inspection-selector-btn {
    min-width: 36px;
    justify-content: center;
}

/* Ajustar el dropdown del selector de inspección para que se alinee desde la derecha */
.desktop-selectors .inspection-dropdown-content {
    left: auto;
    right: 0;
}



/* Contenedor para la opción de inspección con toggle */
.inspection-option-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    color: #495057;
    font-size: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Toggle switch para inspección */
.inspection-option-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    margin-left: 10px;
}

.inspection-option-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.inspection-option-container .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .2s;
    border-radius: 20px;
}

.inspection-option-container .toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
}

.inspection-option-container input:checked + .toggle-slider {
    background-color: #007bff;
}

.inspection-option-container input:checked + .toggle-slider:before {
    transform: translateX(16px);
}

/* Contenedor para la opción de nueva sesión */
.session-option-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: #495057;
    font-size: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border-top: 1px solid #e0e0e0;
    height: 32px;
    box-sizing: border-box;
}

/* Botón de nueva sesión */
.new-session-btn {
    background: transparent !important;
    border: none !important;
    color: #007bff;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none !important;
    min-width: auto;
    min-height: auto;
    width: auto;
    height: auto;
    line-height: 1;
    outline: none !important;
    box-shadow: none !important;
}

.new-session-btn:hover {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.new-session-btn:active {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.new-session-btn:focus {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Estilos para el modal de nueva sesión */
.session-description {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.session-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.session-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.cube-type-selector {
    position: relative;
}

.cube-type-btn {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 14px;
}

.cube-type-btn:hover {
    background: #e9ecef;
}

.cube-type-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    margin-top: 2px;
}

.cube-type-dropdown.show {
    display: block;
}

.cube-type-dropdown a {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
}

.cube-type-dropdown a:last-child {
    border-bottom: none;
}

.cube-type-dropdown a:hover {
    background: #f8f9fa;
}

.form-help {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #666;
}

.modal-actions {
    margin-top: 30px;
    text-align: right;
}

.create-session-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.create-session-btn:hover {
    background: #0056b3;
}

/* Estilos del tema oscuro para el modal de nueva sesión */
[data-theme="dark"] .cube-type-btn {
    background: #2d2d2d;
    border: 1px solid #404040;
    color: #ffffff;
}

[data-theme="dark"] .cube-type-btn:hover {
    background: #404040;
}

[data-theme="dark"] .cube-type-dropdown {
    background: #1e2127;
    border: 1px solid #404040;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .cube-type-dropdown a {
    color: #e0e0e0;
    border-bottom: 1px solid #404040;
}

[data-theme="dark"] .cube-type-dropdown a:hover {
    background: #2d2d2d;
}

[data-theme="dark"] .session-input {
    background: #2d2d2d;
    border: 1px solid #404040;
    color: #ffffff;
}

[data-theme="dark"] .session-input::placeholder {
    color: #999;
}

[data-theme="dark"] .form-help {
    color: #999;
}

/* Estilos para el selector de sesiones */
.session-selector {
    position: relative;
    margin-left: 0px;
}

.session-selector-btn {
    background: #e9ecef;
    border: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    user-select: none;
    -webkit-user-select: none;
    color: #495057;
    pointer-events: auto;
    position: relative;
    z-index: 1004;
    height: 40px;
    box-sizing: border-box;
}

.session-selector-btn svg {
    width: 1em;
    height: 1em;
    color: currentColor;
}

.session-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background-color: #ffffff;
    min-width: 150px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
    z-index: 1005;
    border-radius: 4px;
    padding: 2px 0;
    border: 1px solid #e0e0e0;
}

.session-dropdown-content.show {
    display: block;
}

.session-dropdown-content a {
    color: #495057;
    padding: 6px 10px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    font-size: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.session-dropdown-content a:hover {
    background-color: #f8f9fa;
}

.session-dropdown-content a.active {
    background-color: #f8f9fa;
    color: #495057;
}

/* Estilos para las opciones de sesión */
.session-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.session-option a {
    flex: 1;
    padding: 6px 10px;
    text-decoration: none;
    color: #495057;
    font-size: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.session-option a:hover {
    background-color: #f8f9fa;
}

.session-option:hover .delete-session-btn {
    background-color: #f8f9fa;
}

.session-option a.active {
    background-color: #f8f9fa;
    color: #495057;
}

.session-option a.active ~ .delete-session-btn,
.session-option .delete-session-btn.active {
    background-color: #f8f9fa;
}

/* Botón de borrar sesión */
.delete-session-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}

.delete-session-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.delete-session-btn:hover {
    background-color: #f8f9fa;
    color: #999;
}

/* Cuando se hace hover sobre el botón de borrar, también activar el hover de la opción de sesión */
.session-option:hover .delete-session-btn {
    background-color: #f8f9fa;
}

/* Cuando se hace hover sobre el botón de borrar, activar el hover de toda la fila */
.delete-session-btn:hover {
    background-color: #f8f9fa;
}

/* Cuando se hace hover sobre el botón de borrar, activar el hover del contenedor padre */
.delete-session-btn:hover {
    background-color: #f8f9fa;
}

/* Usar el selector padre para activar el hover de toda la fila */
.session-option:has(.delete-session-btn:hover) a {
    background-color: #f8f9fa;
}

.delete-session-btn:active {
    background-color: transparent;
    color: #999;
}



.desktop-selectors .puzzle-selector-btn.open svg,
.desktop-selectors .algorithm-selector-btn.open svg,
.desktop-selectors .case-selector-btn.open svg,
.desktop-selectors .inspection-selector.open svg,
.desktop-selectors .session-selector-btn.open svg {
    transform: rotate(180deg);
    /* Sin transición */
}

/* Estilos para las opciones de sesión en desktop */
.desktop-selectors .session-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.desktop-selectors .session-option a {
    flex: 1;
    padding: 6px 10px;
    text-decoration: none;
    color: #495057;
    font-size: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.desktop-selectors .session-option a:hover {
    background-color: #f8f9fa;
}

.desktop-selectors .session-option:hover .delete-session-btn {
    background-color: #f8f9fa;
}

.desktop-selectors .session-option a.active {
    background-color: #f8f9fa;
    color: #495057;
}

.desktop-selectors .session-option a.active ~ .delete-session-btn,
.desktop-selectors .session-option .delete-session-btn.active {
    background-color: #f8f9fa;
}

/* Botón de borrar sesión en desktop */
.desktop-selectors .delete-session-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}

.desktop-selectors .delete-session-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.desktop-selectors .delete-session-btn:hover {
    background-color: #f8f9fa;
    color: #999;
}

/* Cuando se hace hover sobre el botón de borrar en desktop, también activar el hover de la opción de sesión */
.desktop-selectors .session-option:hover .delete-session-btn {
    background-color: #f8f9fa;
}

/* Cuando se hace hover sobre el botón de borrar en desktop, activar el hover de toda la fila */
.desktop-selectors .delete-session-btn:hover {
    background-color: #f8f9fa;
}

/* Usar el selector padre para activar el hover de toda la fila en desktop */
.desktop-selectors .session-option:has(.delete-session-btn:hover) a {
    background-color: #f8f9fa;
}

.desktop-selectors .delete-session-btn:active {
    background-color: transparent;
    color: #999;
}

/* Grid de algoritmos */
.algorithms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
    margin: 0;
}

/* Media queries para adaptación progresiva de bloques */
@media (max-width: 1200px) {
    .algorithms-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .algorithms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .algorithms-grid {
        grid-template-columns: repeat(1, 1fr);
        padding-bottom: 40px; /* Espacio extra al final para Safari móvil */
    }
}

.algorithm-block {
    width: 100%;
    min-height: 140px;
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: 1px solid #e9ecef;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.algorithm-block:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: #007bff;
}

.algorithm-number {
    font-size: 18px;
    font-weight: bold;
    color: #495057;
    margin-bottom: 8px;
}

.algorithm-notation {
    font-family: inherit;
    font-size: 20px;
    color: #495057;
    line-height: 1.4;
    margin-bottom: 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-right: 112px;
    padding-bottom: 8px;
}

/* Escritorio: ajustar tamaños a 16px */
@media (min-width: 769px) {
    .algorithm-number { font-size: 16px; }
    .algorithm-notation { font-size: 16px; }
}


.algorithm-cube-image {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 92px;
    height: 92px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    background-color: #fff;
    border-radius: 4px;
    padding: 2px;
    z-index: 1;
}

/* Estilos específicos para cuando hay una imagen SVG */
.algorithm-cube-image img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    border-radius: 4px;
    background-color: transparent;
}

/* Estilos para las pestañas de configuración */
.settings-tabs {
    display: flex;
    background: none;
    margin: 0 20px 20px 20px;
    gap: 8px;
}

.tab-button {
    background-color: #2d2d2d;
    border: 1px solid #404040;
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    position: relative;
    min-width: 100px;
}

.tab-button:hover {
    background-color: #3d3d3d;
    border-color: #505050;
}

.tab-button.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.3);
}

.tab-panel {
    display: none;
    padding: 20px;
}

.tab-panel.active {
    display: block;
}

/* Responsive para las pestañas */
@media (max-width: 768px) {
    .settings-tabs {
        margin: 0 10px 15px 10px;
        gap: 6px;
    }
    
    .tab-button {
        padding: 10px 16px;
        font-size: 13px;
        min-width: 80px;
    }
    

    
    .tab-panel {
        padding: 16px;
    }
}

/* Estilos para botones de acción */
.action-btn {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.action-btn:hover {
    background-color: #0056b3;
}

.action-btn.danger {
    background-color: #dc3545;
}

.action-btn.danger:hover {
    background-color: #c82333;
}

/* Estilos del modo oscuro para botones de acción */
[data-theme="dark"] .action-btn {
    background-color: #007bff;
    color: #ffffff;
}

[data-theme="dark"] .action-btn:hover {
    background-color: #0056b3;
}

[data-theme="dark"] .action-btn.danger {
    background-color: #dc3545;
}

[data-theme="dark"] .action-btn.danger:hover {
    background-color: #c82333;
}

/* Estilos para el contenido de las pestañas */
.theme-customization {
    margin-bottom: 30px;
}

.color-inputs {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.color-input-group {
    flex: 1;
}

.color-input-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-picker {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 0;
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

.color-preview {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 2px solid var(--border-color, #e0e0e0);
}

.section-separator {
    height: 1px;
    background-color: var(--border-color, #e0e0e0);
    margin: 30px 0;
}

/* Estilos para los selectores de tema */
.theme-selector {
    margin-top: 20px;
}

.theme-options {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.theme-option {
    flex: 1;
    background-color: var(--bg-secondary, #f8f9fa);
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.theme-option.active {
    border-color: var(--primary-color, #007bff);
    background-color: var(--primary-color, #007bff);
    color: #ffffff;
}

.theme-preview {
    width: 60px;
    height: 40px;
    border-radius: 6px;
    margin: 0 auto 10px auto;
    border: 1px solid var(--border-color, #e0e0e0);
}

.theme-preview.light {
    background: linear-gradient(45deg, #ffffff 50%, #f8f9fa 50%);
}

.theme-preview.dark {
    background: linear-gradient(45deg, #1e2127 50%, #2d2d2d 50%);
}

.theme-name {
    font-weight: 500;
    margin: 0;
    font-size: 14px;
}

/* Estilos del modo oscuro para el contenido */
[data-theme="dark"] .color-preview {
    border-color: #404040;
}

[data-theme="dark"] .section-separator {
    background-color: #404040;
}

[data-theme="dark"] .theme-option {
    background-color: #2d2d2d;
    border-color: #404040;
}



[data-theme="dark"] .theme-option.active {
    border-color: #007bff;
    background-color: #007bff;
}

[data-theme="dark"] .theme-preview {
    border-color: #404040;
}

/* Responsive para el contenido */
@media (max-width: 768px) {
    .color-inputs {
        flex-direction: column;
        gap: 15px;
    }
    
    .theme-options {
        flex-direction: column;
        gap: 10px;
    }
    
    .theme-option {
        padding: 15px;
    }
    
    .theme-preview {
        width: 50px;
        height: 35px;
    }
}

/* Estilos para grupos de configuración */
.settings-group {
    background-color: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.settings-group h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    padding-bottom: 8px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color-light, rgba(0,0,0,0.05));
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-info {
    flex: 1;
    margin-right: 20px;
}

.setting-info h4 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

.setting-info p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 5px 0 0 0;
    line-height: 1.4;
}

.setting-control {
    display: flex;
    align-items: center;
    min-width: 60px;
}

/* Estilos para inputs numéricos */
.number-input {
    width: 80px;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    font-size: 14px;
    background-color: var(--input-bg, #ffffff);
    color: var(--text-primary);
    text-align: center;
}

.number-input:focus {
    outline: none;
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* Estilos para selectores */
select.number-input {
    cursor: pointer;
    text-align-last: center;
    box-sizing: border-box;
    height: 36px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 30px;
}

select.number-input option {
    text-align: center;
}

/* Estilos del modo oscuro para grupos de configuración */
[data-theme="dark"] .settings-group {
    background-color: #2d2d2d;
    border-color: #404040;
}

[data-theme="dark"] .settings-group h3 {
    border-bottom-color: #404040;
}

[data-theme="dark"] .setting-item {
    border-bottom-color: rgba(255,255,255,0.05);
}

[data-theme="dark"] .number-input {
    background-color: #1e2127;
    border-color: #404040;
    color: #ffffff;
}

[data-theme="dark"] .number-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* Cuando hay una imagen SVG, cambiar el display del contenedor */
.algorithm-cube-image.has-svg-image {
    display: block;
    background-color: transparent;
    padding: 0;
    gap: 0;
}



/* Modal */
.modal-header h3 {
    margin: 0;
    color: #333;
    font-size: 1.2em;
    font-weight: 600;
}



.algorithm-cube-image-modal {
    width: 90px;
    height: 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    background-color: #fff;
    border-radius: 4px;
    padding: 2px;
}

/* Estilos específicos para cuando hay una imagen SVG en el modal */
.algorithm-cube-image-modal img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 4px;
    background-color: transparent;
}

/* Cuando hay una imagen SVG en el modal, cambiar el display */
.algorithm-cube-image-modal.has-svg-image-modal {
    display: block;
    background-color: transparent;
    padding: 0;
    gap: 0;
}



.algorithm-form {
    margin-top: 24px;
}

/* Estilos para mejorar el espaciado del formulario */
.algorithm-form {
    margin: 0;
    padding: 0;
}

.algorithm-visualization {
    display: flex;
    justify-content: center;
    margin: 24px 0;
}

.algorithm-cube-face-modal {
    border-radius: 2px;
}

.algorithm-cube-face-modal.blue {
    background-color: #007bff;
}

.algorithm-cube-face-modal.grey {
    background-color: #666666;
}

.solution-input {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* sin altura mínima para evitar espacio en blanco */
    min-height: 0;
}

.setup-input {
    /* sin altura mínima para evitar espacio en blanco */
    min-height: 0;
}

.form-group {
    margin-bottom: 20px;
    margin-top: 0;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

/* Aumentar tamaño de los labels del modal de algoritmos en móvil */
@media (max-width: 768px) {
    .algorithm-modal .form-group label {
        font-size: 16px;
        line-height: 1.4;
    }
}



.algorithm-input, .algorithm-textarea {
    width: 100%;
    padding: 10px 12px;
    border: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 14px;
    color: #000;
    box-sizing: border-box;
}

.algorithm-input:focus, .algorithm-textarea:focus {
    outline: none;
    background-color: #f0f0f0;
}



/* Textareas del modal: salto de línea y no corte */
.algorithm-textarea {
    width: 100%;
    padding: 10px 12px;
    border: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 14px;
    color: #000;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Desktop: hacer los textarea ligeramente más compactos */
@media (min-width: 769px) {
    .algorithm-modal .algorithm-textarea {
        font-size: 14px;
        line-height: 1.5;
        padding: 10px 12px;
    }
}

/* Tamaño de fuente del listado (unificado) */
.algorithm-notation {
    font-size: 20px;
}

@media (max-width: 480px) {
    .algorithm-notation { font-size: 20px; }
}









#cube-image-container {
    display: none;
}

#cube-image-container svg {
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #f8f8f8;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}



/* Contenedor de estadísticas (fijo en la parte inferior) */
.stats-and-viz-container {
    position: fixed;
    bottom: 20px;
    left: 100px;
    right: 20px;
    width: auto;
    background-color: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    height: 33.33vh;
    min-height: 200px;
}

.times-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    height: 100%;
    width: 100%;
    padding: 0;
    overflow: hidden;
}



/* Lista en línea de tiempos (solo escritorio) */
.times-inline-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 200px;
    padding: 8px 10px 8px 10px;
    overflow-y: auto;
    box-sizing: border-box;
}



/* Escritorio: ocultar botón de historial del panel izquierdo */
@media (min-width: 769px) {
    .times-section .times-button { display: none; }
}

/* Cada tiempo clickable, reutiliza estilos base de .time-entry */
.times-inline-list .time-entry {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 0;
    background: #fff;
    transition: none;
}

.times-inline-list .time-entry .time-index {
    color: #666;
    font-weight: 600;
    width: 1.5em;
    text-align: right;
}

.times-inline-list .time-entry .delete-btn {
    margin-left: auto;
}

.times-inline-list .time-entry:hover {
    background: #fff;
    transform: none;
    box-shadow: none;
    border-color: #b0b0b0;
}

.times-inline-list .time-entry:active {
    transform: none;
}

.times-inline-list .time-entry span {
    font-family: "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
    font-weight: 700;
}

.times-inline-list .time-entry .inline-time-original {
    color: #888;
    font-weight: 600;
    font-size: 0.85em;
}

/* Alineación mejorada cuando DNF muestra tiempo original */
.times-inline-list .time-entry .time-text {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.times-inline-list .time-entry .time-actions-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.times-inline-list .time-entry .time-action-btn {
    background: transparent;
    border: none;
    color: #8c8f93;
    border-radius: 4px;
    padding: 0 6px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.times-inline-list .time-entry .time-action-btn { -webkit-appearance: none; appearance: none; }
.times-inline-list .time-entry .time-action-btn:hover { background: transparent; color: inherit; }
.times-inline-list .time-entry .time-action-btn:focus,
.times-inline-list .time-entry .time-action-btn:focus-visible,
.times-inline-list .time-entry .time-action-btn:active { outline: none; box-shadow: none; background: transparent !important; }

/* Estados activos para +2 y DNF */
.times-inline-list .time-entry .add2-btn.active {
    background: transparent !important;
    color: #f44336 !important;
}

.times-inline-list .time-entry .dnf-btn.active {
    background: transparent !important;
    color: #f44336 !important;
}

/* Botón de borrar estilo compacto y más visible */
.times-inline-list .time-entry .time-actions-inline .delete-btn {
    background: transparent;
    border: none;
    color: #111;
    font-size: 14px;
    padding: 0 6px;
    height: 22px;
    line-height: 22px;
    border-radius: 4px;
    margin-left: 0; /* anula la regla general para inline */
}

.times-inline-list .time-entry .time-actions-inline .delete-btn:hover {
    background: #f1f3f4;
}

/* Ocultar lista en móvil (se mantiene el icono para abrir modal) */
@media (max-width: 768px) {
    .times-inline-list { display: none; }
}

/* Mostrar lista en escritorio */
@media (min-width: 769px) {
    .times-inline-list { display: flex; }
}

.times-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.times-button #history-icon {
    width: 20px;
    height: 20px;
    color: inherit;
}

.times-button #history-icon:hover {
    color: inherit;
}

/* Icono dentro de la grid de estadísticas */
#history-icon-grid { color: inherit; }
#history-icon-grid:hover { color: inherit; }

.stats-container {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    border-radius: 0;
    border: none;
    overflow: hidden;
}

/* Ocultar times-item en escritorio */
.stats-grid .times-item {
    display: none;
}

.stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 6px;
    padding: 8px 6px;
    min-height: 40px;
    border: 1px solid #e9ecef;
    position: relative;
}

.pb-item {
    grid-row: span 2;
}

.history-item {
    grid-column: span 2;
}

.stat-label {
    display: block;
    font-size: 0.75em;
    color: #888;
    margin-bottom: 3px;
    position: absolute;
    top: 4px;
    left: 8px;
    text-align: left;
}

.stat-item span:not(.stat-label) {
    font-family: "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
    font-weight: bold;
    font-size: 1.1em;
}

.pb-item span:not(.stat-label) {
    font-size: 2.2em;
    font-weight: 700;
    color: #2c3e50;
}

/* Ajuste específico para el icono de historial */
#history-icon {
    font-family: "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
    font-weight: bold;
    font-size: 1.1em;
}

/* Times List (oculta por defecto, se mostrará con JS) */


/* Footer de Estadísticas - ahora usando stats-and-viz-container */


/* Mobile Layout - Simplified stats */
@media (max-width: 768px) {
    .stats-and-viz-container {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 120px;
        max-height: 18vh;
        left: 20px;
        right: 20px;
    }
    
    .times-section {
        display: none;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 1fr);
        width: 100%;
        height: 100%;
    }
    
    .pb-item {
        grid-row: span 1;
    }
    
    /* Ocultar elementos específicos en móvil */
    .stat-item:has(#worst-display),
    .stat-item:has(#ao5-pb-display),
    .stat-item:has(#ao12-pb-display),
    .stat-item:has(#pb-display) {
        display: none;
    }
    
    /* Mostrar times-item solo en móvil */
    .stats-grid .times-item {
        display: flex !important;
    }
    
    /* Orden de elementos en móvil */
    .stat-item:has(#ao5-display) { order: 1; }
    .stat-item:has(#ao12-display) { order: 2; }
    .times-item { order: 3; }
    .stat-item:has(#avg-display) { order: 4; }
}

/* Pantallas móviles con altura menor a 730px */
@media (max-width: 768px) and (max-height: 730px) {
    .stats-and-viz-container {
        height: 14vh;
        min-height: 90px;
        padding: 4px;
    }
    
    .stats-grid {
        gap: 3px;
        padding: 0;
    }
    
    .stat-item {
        min-height: 25px;
        padding: 4px 3px;
    }
    
    .stat-label {
        font-size: 0.65em;
        margin-bottom: 2px;
    }
    
    .stat-item span:not(.stat-label) {
        font-size: 0.9em;
    }
}


/* Responsive adjustments */
@media (max-width: 768px) {
    /* Ocultar sidebar en móvil */
    .sidebar {
        display: none;
    }
    
    /* Fix para Safari móvil - mejorar el scroll */
    body {
        height: 100%;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .main-container {
        height: 100%;
        overflow: hidden;
    }
    
    .algorithms-container {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px; /* Espacio extra al final para evitar que se corte el contenido */
    }
    
    .home-container {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px; /* Espacio extra al final para evitar que se corte el contenido */
    }

    /* Mostrar header móvil */
    .mobile-header {
        display: block;
        background-color: #fff;
        padding: 0;
        border-bottom: 1px solid #e0e0e0;
        flex-shrink: 0;
        z-index: 1000;
        position: relative;
    }

    /* Ajustar layout para móvil */
    body {
        flex-direction: column;
    }

    .main-container {
        flex: 1;
    }
    
    .header-top {
        padding: 8px 16px;
        position: relative;
        min-height: 50px;
    }
    
    .menu-btn {
        padding: 0 8px;
        height: 25px;
        font-size: 14px;
        border-radius: 4px;
        position: relative;
        z-index: 1001;
        background: transparent;
        border: none;
        color: inherit;
        outline: none;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
        transition: none;
        animation: none;
    }

    .mobile-header .menu-btn {
        position: relative;
        z-index: 1001;
        margin-right: auto;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        width: 45px;
        height: 45px;
        padding: 0;
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    .mobile-header .menu-btn:active,
    .mobile-header .menu-btn:focus,
    .mobile-header .menu-btn:hover {
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        transform: none !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    .menu-btn svg {
        width: 30px;
        height: 30px;
        color: #222;
        position: absolute;
        transform: none;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        margin: 0;
        padding: 0;
        margin-left: 0;
        pointer-events: none;
    }
    
    .logo-container > svg {
        font-size: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        z-index: 1;
    }

    .mobile-header .logo-container > svg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        z-index: 1;
    }
    
    .header-bottom {
        padding: 8px 16px;
    }
    
    .menu-dropdown {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        z-index: 10000;
        border-radius: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 120px;
        transform: translateY(-100vh);
        visibility: hidden;
    }
    
    .menu-dropdown.show {
        visibility: visible;
        transform: none;
    }
    
    .menu-item {
        padding: 15px 20px;
        font-size: 22px;
        font-weight: 500;
        font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
        gap: 10px;
        margin: 10px 0;
        border-radius: 8px;
        background-color: transparent;
        width: calc(100% - 40px);
        text-align: center;
    }
    
    .menu-item svg {
        width: 24px;
        height: 24px;
    }
    
    .menu-close-btn {
        position: absolute;
        top: 8px;
        left: 16px;
        background: transparent;
        border: none;
        color: #222;
        cursor: pointer;
        padding: 0;
        border-radius: 0;
        background-color: transparent;
        margin: 0;
        transform: none;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    
    .menu-close-btn svg {
        width: 30px;
        height: 30px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        margin: 0;
        padding: 0;
        margin-left: 0;
        pointer-events: none;
    }
    
    .puzzle-selector-btn {
        padding: 8px 12px;
        font-size: 14px;
        gap: 4px;
        height: 40px;
        background: #e9ecef;
        border: none;
        display: flex;
        align-items: center;
        font-weight: 500;
        font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
        cursor: pointer;
        border-radius: 4px;
        user-select: none;
        -webkit-user-select: none;
        color: #495057;
        pointer-events: auto;
        position: relative;
        z-index: 1004;
    }
    
    .algorithm-selector-btn {
        padding: 8px 12px;
        font-size: 14px;
        gap: 4px;
        height: 40px;
        background: #e9ecef;
        border: none;
        display: flex;
        align-items: center;
        font-weight: 500;
        font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
        cursor: pointer;
        border-radius: 4px;
        user-select: none;
        -webkit-user-select: none;
        color: #495057;
        pointer-events: auto;
        position: relative;
        z-index: 1004;
    }
    
    .case-selector-btn {
        padding: 8px 12px;
        font-size: 14px;
        gap: 4px;
        height: 40px;
        background: #e9ecef;
        border: none;
        display: flex;
        align-items: center;
        font-weight: 500;
        font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
        cursor: pointer;
        border-radius: 4px;
        user-select: none;
        -webkit-user-select: none;
        color: #495057;
        pointer-events: auto;
        position: relative;
        z-index: 1004;
    }
    
    .desktop-selectors {
        display: none;
    }

    .algorithms-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .algorithm-block {
        padding: 12px;
        min-height: auto;
    }





    .stats-and-viz-container {
        padding: 16px;
    }

    .algorithm-cube-image {
        width: 72px;
        height: 72px;
        right: 12px;
    }

    .algorithm-cube-image img {
        width: 72px;
        height: 72px;
    }

    .algorithm-notation {
        margin-right: 86px;
    }

    /* Estilos específicos para algoritmos largos en móvil */
    /* Eliminados estilos de .algorithm-block.long-algorithm para simplificar */

    /* Estilos específicos para inputs muy largos en el modal - eliminados */
}

@media (max-width: 480px) {
    .algorithm-notation {
        font-size: 20px;
        line-height: 1.7;
        margin-right: 70px;
        min-height: 3.4em;
        display: block;
        overflow: visible;
        text-overflow: unset;
        line-clamp: unset;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
    }

    .algorithm-cube-image {
        width: 60px;
        height: 60px;
        right: 8px;
    }

    .algorithm-cube-image img {
        width: 60px;
        height: 60px;
    }

    .algorithm-block {
        padding: 10px;
    }

    /* Estilos específicos para algoritmos largos en pantallas pequeñas */
    /* Eliminados estilos de .algorithm-block.long-algorithm para simplificar */

    /* Estilos específicos para inputs muy largos en el modal - eliminados */
}

@media (max-width: 360px) {
    .algorithm-notation {
        font-size: 20px;
        line-height: 1.8;
        margin-right: 60px;
        min-height: 3.6em;
        display: block;
        overflow: visible;
        text-overflow: unset;
        line-clamp: unset;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
    }

    .algorithm-cube-image {
        width: 50px;
        height: 50px;
        right: 6px;
    }

    .algorithm-cube-image img {
        width: 50px;
        height: 50px;
    }
}

/* --- MODO DE CONCENTRACIÓN (Timing Mode) --- */
.timer-header, #scramble-display, .stats-and-viz-container, #cube-image-container {
    transition: opacity 0s ease;
}

body.timing-mode .timer-header,
body.timing-mode #scramble-display,
body.timing-mode .stats-and-viz-container,
body.timing-mode #cube-image-container,
body.timing-mode #inspection-status-display {
    opacity: 0;
    pointer-events: none;
}

/* Ocultar selectores de escritorio durante el cronometraje */
body.timing-mode .desktop-selectors,
body.timing-mode .desktop-selectors * {
    opacity: 0;
    pointer-events: none;
}

/* Desactivar interacciones de botones durante el cronometraje */
body.timing-mode .menu-btn,
body.timing-mode .puzzle-selector-btn,
body.timing-mode .algorithm-selector-btn {
    pointer-events: none;
}

body.timing-mode .timer-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f7;
    z-index: 1000;
}

body.timing-mode #timer-display-container {
    position: absolute;
    top: var(--timer-start-top, 50%);
    left: calc(50% + 40px);
    transform: translateX(-50%);
    width: 100%;
}

body.timing-mode #timer-display {
    transform: scale(1.1);
}

/* Asegurar que el timer sea visible en modo oscuro durante timing */
[data-theme="dark"] body.timing-mode #timer-display {
    color: #ffffff;
}

@media (max-width: 768px) {
    body.timing-mode #timer-display-container {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* Estilos para las entradas de tiempo */
.time-entry {
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 2px 0;
    position: relative;
    border: 1px solid #e0e0e0;
}

.time-entry:hover {
    background-color: #f0f0f0;
    transform: translateX(2px);
}

.time-entry.active {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
    font-weight: 500;
}

.time-entry:active {
    transform: translateX(1px);
}



/* Estilos para el contenedor de historial de tiempos */


.times-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 20px 0 0 0;
    padding: 0 10px 20px 10px;
    justify-items: center;
}

.times-list .time-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid #e0e0e0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    font-size: 1.35em;
    font-weight: 700;
    color: #222;
    min-height: 64px;
    min-width: 100px;
    width: 100%;
    max-width: 180px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    user-select: none;
    padding: 18px 0;
    margin: 0;
    text-align: center;
    letter-spacing: 0.03em;
}

.times-list .time-entry:hover {
    background: #f0f8ff;
    border-color: #2196f3;
    box-shadow: 0 8px 24px rgba(33,150,243,0.10);
}

.times-list .time-entry.active {
    background: #e3f2fd;
    border-color: #2196f3;
    font-weight: 800;
}

.times-list .time-entry span {
    width: 100%;
    text-align: center;
}

@media (max-width: 900px) {
    .times-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .times-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 0 5px 20px 5px;
    }
    .times-list .time-entry {
        font-size: 1.1em;
        min-height: 48px;
        max-width: 100%;
        padding: 14px 0;
    }
}

@media (max-width: 400px) {
    .times-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 0 3px 20px 3px;
    }
    .times-list .time-entry {
        font-size: 0.85em;
        min-height: 40px;
        padding: 10px 2px;
        min-width: 80px;
        border-radius: 12px;
    }
}

/* Estilos para el botón de eliminar */
.delete-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 1.2em;
    padding: 0 8px;
    border-radius: 3px;
    transition: color 0.2s, background-color 0.2s;
}

.delete-btn:hover {
    color: #ff4444;
    background-color: #ffebee;
}

.delete-btn:active {
    background-color: #ffcdd2;
}

/* Estilos para el modal */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.modal.show {
    display: block;
}

#time-modal {
    z-index: 2000;
}

.modal-content {
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: none;
    transition: none;
}

/* Estilos específicos para el modal de algoritmos */
.algorithm-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.algorithm-modal.show {
    display: block;
}

.algorithm-modal .modal-content {
    max-width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: none;
    transition: none;
    /* Ajustes para escritorio */
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .time-value {
        font-size: 1.8em;
    }
    
    .scramble-value {
        font-size: 1em;
    }
    
    .algorithm-modal .modal-content {
        width: 90%;
        max-width: 500px;
        max-height: 80vh;
        overflow-y: auto;
    }

    .algorithm-cube-image-modal {
        width: 60px;
        height: 60px;
    }

    .algorithm-cube-image-modal img {
        width: 60px;
        height: 60px;
    }

    .algorithm-input, .algorithm-textarea {
        font-size: 16px;
        padding: 10px;
    }

    .solution-input {
        min-height: 0;
    }

    .algorithm-textarea {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .algorithm-modal .modal-content {
        width: 95%;
        max-width: none;
        max-height: 85vh;
    }

    .algorithm-input, .algorithm-textarea {
        font-size: 16px;
        padding: 8px;
    }

    .solution-input {
        min-height: 0;
    }

    .algorithm-textarea {
        min-height: 0;
    }
}

@media (max-width: 360px) {
    .algorithm-modal .modal-content {
        width: 98%;
        max-height: 90vh;
    }

    .algorithm-input, .algorithm-textarea {
        font-size: 16px;
        padding: 6px;
    }

    .solution-input {
        min-height: 0;
    }

    .algorithm-textarea {
        min-height: 0;
    }
}

/* Sin animaciones en modales (apertura/cierre instantáneos) */
.modal,
.modal.show,
.algorithm-modal,
.algorithm-modal.show {
    animation: none !important;
    transition: none !important;
}

.modal-content,
.algorithm-modal .modal-content {
    animation: none !important;
    transition: none !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    min-height: 70px;
    box-sizing: border-box;
}

.modal-header h3 {
    margin: 0;
    color: #333;
    font-size: 1.2em;
    font-weight: 600;
}



.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
}

.back-to-history {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #999;
    line-height: 1;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 24px;
}

.back-to-history:hover {
    color: #333;
}

.clear-all-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clear-all-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.clear-all-btn:hover {
    background-color: transparent;
    color: #999;
}

.clear-all-btn:active {
    background-color: transparent;
    color: #999;
}

.close-modal {
    color: #999;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 24px;
}

.close-modal:hover {
    color: #333;
}

.close-history-modal {
    color: #999;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    height: 100%;
}

.close-history-modal:hover {
    color: #333;
}

.modal-body {
    padding: 25px;
}







/* Estilos para los botones de acción del modal */
.time-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.time-display, .scramble-display {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}

.time-label, .scramble-label {
    font-size: 0.9em;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.time-value {
    font-size: 2em;
    font-weight: bold;
    color: #000;
    font-family: "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
}

.scramble-value {
    font-size: 1.1em;
    font-weight: 500;
    color: #333;
    font-family: "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
    line-height: 1.4;
    word-break: break-word;
    margin-bottom: 0;
}

.modal-cube-viz {
    width: 100%;
    max-width: 300px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    overflow: hidden;
    margin: 5px auto 0 auto;
}

.modal-cube-viz scramble-display {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-cube-viz.loaded {
    background: transparent;
    border: none;
}

.time-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    flex-direction: row;
}

.action-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-btn i {
    font-size: 0.8em;
}

.add-btn { background-color: transparent; color: #444; }

.add-btn:hover { background-color: transparent; }

.dnf-btn { background-color: transparent; color: #444; }

.dnf-btn:hover { background-color: transparent; }
/* Estados activos en el modal */
.action-btn.add-btn.active { background-color: transparent; color: #f44336; }
.action-btn.dnf-btn.active { background-color: transparent; color: #f44336; }

.delete-btn { background: none; color: #999; border: none; }
.delete-btn:hover { background: none; color: #999; }

.delete-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.action-btn:active { transform: none; }

@media (max-width: 768px) {
    .time-actions {
        flex-direction: row;
        gap: 8px;
    }
    
    .action-btn {
        padding: 10px 12px;
        font-size: 0.8em;
        min-width: 0;
    }
    
    .action-btn i {
        font-size: 0.7em;
    }
}

/* --- ESTILOS ESPECÍFICOS PARA EL MODAL DE HISTORIAL --- */
#modal-times-log.times-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    justify-items: stretch !important;
    align-items: start !important;
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    padding: 0 8px 10px 8px !important;
    box-sizing: border-box !important;
}

#modal-times-log.times-list .time-entry {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-family: "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace !important;
    font-size: 1.1em !important;
    font-weight: 600 !important;
    color: #1c1c1e !important;
    min-height: 48px !important;
    min-width: 90px !important;
    width: 100% !important;
    max-width: 100% !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    user-select: none !important;
    padding: 14px 8px !important;
    margin: 0 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

#modal-times-log.times-list .time-entry:hover {
    background: #e9ecef !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

#modal-times-log.times-list .time-entry:active {
    transform: none !important;
}

#modal-times-log.times-list .time-entry.active {
    background: #007aff !important;
    color: white !important;
    border-color: transparent !important;
    font-weight: 600 !important;
    transform: none !important;
}

#modal-times-log.times-list .time-entry span {
    width: 100% !important;
    text-align: center !important;
}

@media (max-width: 600px) {
    #modal-times-log.times-list {
        gap: 10px !important;
        padding: 0 6px 8px 6px !important;
        margin: 8px 0 0 0 !important;
    }
    #modal-times-log.times-list .time-entry {
        font-size: 1.0em !important;
        min-height: 44px !important;
        padding: 12px 6px !important;
        border: 1px solid #e0e0e0 !important;
    }
}

@media (max-width: 400px) {
    #modal-times-log.times-list {
        gap: 8px !important;
        padding: 0 5px 8px 5px !important;
        margin: 6px 0 0 0 !important;
    }
    #modal-times-log.times-list .time-entry {
        font-size: 0.9em !important;
        min-height: 40px !important;
        padding: 10px 4px !important;
        border: 1px solid #e0e0e0 !important;
    }
}

@media (max-width: 370px) {
    #modal-times-log.times-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 5px 8px 5px !important;
        margin: 6px 0 0 0 !important;
    }
    #modal-times-log.times-list .time-entry {
        font-size: 1.0em !important;
        min-height: 44px !important;
        padding: 12px 6px !important;
        border: 1px solid #e0e0e0 !important;
    }
}

@media (max-width: 260px) {
    #modal-times-log.times-list {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 0 8px 8px 8px !important;
        margin: 6px 0 0 0 !important;
    }
    #modal-times-log.times-list .time-entry {
        font-size: 1.1em !important;
        min-height: 48px !important;
        padding: 14px 8px !important;
        border: 1px solid #e0e0e0 !important;
    }
}

/* Estilo específico para algoritmos largos */
/* Eliminados estilos de .algorithm-block.long-algorithm para simplificar */

/* Estilos específicos para inputs muy largos en el modal - eliminados */

@media (max-width: 768px) {
    /* Centrar el cronómetro en móvil (modo normal) */
    #timer-display-container {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        height: auto; /* Que se ajuste al contenido */
        padding: 0; /* Sin padding extra */
    }
}

/* ===== SISTEMA DE TEMAS ===== */

/* Variables CSS para temas */
:root {
    /* Tema Claro (por defecto) */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fa;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --accent-color: #007bff;
    --accent-hover: #0056b3;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --sidebar-bg: #ffffff;
    --sidebar-border: #e0e0e0;
    --card-bg: #ffffff;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-focus: #007bff;
}

/* Tema Oscuro */
[data-theme="dark"] {
    --bg-primary: #12141c;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    --border-color: #404040;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --accent-color: #4dabf7;
    --accent-hover: #74c0fc;
    --success-color: #51cf66;
    --warning-color: #ffd43b;
    --danger-color: #ff6b6b;
    --sidebar-bg: transparent;
    --sidebar-border: #404040;
    --card-bg: #2d2d2d;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --input-bg: #3a3a3a;
    --input-border: #404040;
    --input-focus: #4dabf7;
}




/* Aplicar variables CSS a elementos existentes */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Tema oscuro sin fondo en sidebar */
[data-theme="dark"] .sidebar {
    background-color: transparent;
    border-right: 1px solid var(--sidebar-border);
}

/* Tema oscuro: solo cambiar color para página activa */
[data-theme="dark"] .sidebar-nav .nav-item.active {
    color: #cccccc;
}

/* Solo aplicar estilos de tema a temas que no sean light */
[data-theme]:not([data-theme="light"]) .mobile-header {
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--sidebar-border);
}

/* Tema oscuro sin fondo en header móvil */
[data-theme="dark"] .mobile-header {
    background-color: transparent;
    border-bottom: 1px solid var(--sidebar-border);
}

/* Solo aplicar estilos de tema a temas que no sean light */
[data-theme]:not([data-theme="light"]) .mobile-header .logo-container svg {
    color: var(--text-primary);
}

/* Logo en sidebar para tema oscuro */
[data-theme="dark"] .sidebar .logo-container svg {
    color: var(--text-secondary);
}

/* Estilos del menú móvil en modo oscuro */
[data-theme="dark"] .menu-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: none !important;
    animation: none !important;
}

[data-theme="dark"] .menu-btn:active,
[data-theme="dark"] .menu-btn:focus,
[data-theme="dark"] .menu-btn:hover {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

[data-theme="dark"] .menu-btn svg {
    color: #ffffff !important;
}

[data-theme="dark"] .menu-close-btn {
    background: transparent !important;
    border: none !important;
}

[data-theme="dark"] .menu-close-btn svg {
    color: #ffffff !important;
}

[data-theme="dark"] .menu-dropdown {
    background-color: #12141c !important;
    border: none !important;
}

[data-theme="dark"] .menu-dropdown.show {
    background-color: #12141c !important;
}

[data-theme="dark"] .menu-item {
    color: #ffffff !important;
    background-color: transparent !important;
}

[data-theme="dark"] .menu-item:hover {
    background-color: #2d2d2d !important;
}

[data-theme="dark"] .menu-item svg {
    color: #ffffff !important;
}

/* Solo aplicar estilos de menú a temas que no sean light ni dark */
[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .menu-dropdown {
    background-color: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
}

[data-theme]:not([data-theme="light"]) .menu-item {
    color: var(--text-primary);
}

/* Solo aplicar efectos hover a temas que no sean light ni dark */
[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .menu-item:hover {
    background-color: var(--bg-tertiary);
}

/* Solo aplicar estilos de tema a temas que no sean light */
[data-theme]:not([data-theme="light"]) .main-container {
    background-color: var(--bg-primary);
}

[data-theme]:not([data-theme="light"]) .timer-container, 
[data-theme]:not([data-theme="light"]) .algorithms-container, 
[data-theme]:not([data-theme="light"]) .home-container {
    background-color: var(--bg-primary);
}

/* Tema oscuro: sidebar transparente, contenido con nuevo color */
[data-theme="dark"] .sidebar {
    background-color: transparent;
    border-right: 1px solid var(--sidebar-border);
}

[data-theme="dark"] .main-container {
    background-color: #12141c;
}

[data-theme="dark"] .timer-container, 
[data-theme="dark"] .algorithms-container, 
[data-theme="dark"] .home-container {
    background-color: #12141c;
}





[data-theme="dark"] .stat-item {
    background-color: #1e2127;
    border: 1px solid #404040;
}

[data-theme="dark"] .stat-label {
    color: #888888;
}

[data-theme="dark"] .stat-item span:not(.stat-label) {
    color: #ffffff;
}

[data-theme="dark"] .times-inline-list {
    background-color: #1e2127;
    border: 1px solid #404040;
}

[data-theme="dark"] .times-inline-list .time-item {
    color: #cccccc;
    border-bottom: 1px solid #404040;
}

[data-theme="dark"] .times-inline-list .time-item:last-child {
    border-bottom: none;
}

[data-theme="dark"] .times-inline-list .time-item.pb {
    color: #51cf66;
}

[data-theme="dark"] .times-inline-list .time-item.worst {
    color: #ff6b6b;
}

/* Estilos específicos para tema oscuro - Selectores */
[data-theme="dark"] .puzzle-selector-btn {
    background-color: #1e2127;
    color: #ffffff;
    border: 1px solid #404040;
}

[data-theme="dark"] .puzzle-dropdown-content {
    background-color: #1e2127;
    border: 1px solid #404040;
}

[data-theme="dark"] .puzzle-dropdown-content a {
    color: #cccccc;
}

[data-theme="dark"] .puzzle-dropdown-content a:hover,
[data-theme="dark"] .inspection-dropdown-content a:hover {
    background-color: #2d2d2d;
}

/* Estilos específicos para tema oscuro - Header móvil */
[data-theme="dark"] .header-bottom {
    background-color: transparent;
    border-top: 1px solid #404040;
}

/* Estilos específicos para tema oscuro - Elementos generales */
[data-theme="dark"] .desktop-selectors {
    background-color: transparent;
}

/* Estilos de modo oscuro para el selector de inspección */
[data-theme="dark"] .desktop-selectors .inspection-dropdown-content {
    background-color: #1e2127;
    border: 1px solid #404040;
}

/* Estilos de modo oscuro para dropdowns generales (móvil) */
[data-theme="dark"] .inspection-dropdown-content {
    background-color: #1e2127;
    border: 1px solid #404040;
}

[data-theme="dark"] .desktop-selectors .inspection-dropdown-content a.active,
[data-theme="dark"] .inspection-dropdown-content a.active {
    color: #4dabf7;
}

[data-theme="dark"] .stats-and-viz-container {
    background-color: transparent;
}

[data-theme="dark"] .times-section {
    background-color: transparent;
}

[data-theme="dark"] .stats-grid {
    background-color: transparent;
}

/* Estilos específicos para tema oscuro - Elementos específicos */
[data-theme="dark"] #timer-display-container {
    background-color: transparent;
}

[data-theme="dark"] .times-section {
    background-color: transparent;
}

[data-theme="dark"] .algorithm-block {
    background-color: #1e2127;
    border: 1px solid #404040;
}

[data-theme="dark"] .algorithm-block h3 {
    color: #ffffff;
}

[data-theme="dark"] .algorithm-block p {
    color: #cccccc;
}

[data-theme="dark"] .algorithm-block .algorithm-moves {
    color: #4dabf7;
}

/* Estilos para el modal de algoritmos */
[data-theme="dark"] .modal {
    background-color: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .modal-content {
    background-color: #1e2127;
    border: 1px solid #404040;
    color: #ffffff;
}

[data-theme="dark"] .modal-header {
    background-color: #1e2127;
    border-bottom: 1px solid #404040;
}

[data-theme="dark"] .modal-header h2 {
    color: #ffffff;
}

[data-theme="dark"] .modal-body {
    background-color: #1e2127;
    color: #ffffff;
}

[data-theme="dark"] .modal-footer {
    background-color: #1e2127;
    border-top: 1px solid #404040;
}

[data-theme="dark"] .close {
    color: #ffffff;
}

[data-theme="dark"] .close:hover {
    color: #ffffff;
}

/* Estilos para elementos específicos del modal */
[data-theme="dark"] .modal .algorithm-image {
    background-color: #2d2d2d;
    border: 1px solid #404040;
}

[data-theme="dark"] .modal .algorithm-description {
    color: #ffffff;
}

[data-theme="dark"] .modal .algorithm-stats {
    background-color: #2d2d2d;
    border: 1px solid #404040;
}

[data-theme="dark"] .modal .algorithm-stats span {
    color: #ffffff;
}

[data-theme="dark"] .modal .algorithm-stats .stat-label {
    color: #ffffff;
}

/* Asegurar que todos los textos en el modal sean blancos */
[data-theme="dark"] .modal * {
    color: #ffffff !important;
}

/* Mantener el color azul solo para los movimientos en el modal */
[data-theme="dark"] .modal .algorithm-moves,
[data-theme="dark"] .modal .moves {
    color: #4dabf7 !important;
}



/* Estilos para time-entry en tema oscuro */
[data-theme="dark"] .time-entry {
    background-color: #1e2127 !important;
    border: 1px solid #404040 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .time-entry:hover {
    background-color: #1e2127 !important;
}

[data-theme="dark"] .time-entry .time-text {
    color: #ffffff !important;
}

[data-theme="dark"] .time-entry .time-index {
    color: #888888 !important;
}

[data-theme="dark"] .time-entry .inline-time-original {
    color: #888888 !important;
}

/* Estilos para botones de acciones en time-entry - igual que en modo claro */
[data-theme="dark"] .time-entry .time-action-btn {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="dark"] .time-entry .time-action-btn:hover {
    background-color: transparent !important;
    color: #cccccc !important;
}

[data-theme="dark"] .time-entry .time-action-btn.active {
    background-color: transparent !important;
    color: #f44336 !important;
}

[data-theme="dark"] .time-entry .delete-btn {
    background: none !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="dark"] .time-entry .delete-btn:hover {
    background: none !important;
    color: #cccccc !important;
}

/* Estilos para la visualización del cubo en el modal en tema oscuro */
[data-theme="dark"] .modal-cube-viz {
    background: transparent !important;
    border: none !important;
}



[data-theme="dark"] .delete-btn svg {
    fill: currentColor !important;
}

[data-theme="dark"] .delete-btn:hover svg {
    fill: currentColor !important;
}

/* Estilos para el modal de tiempos en modo oscuro */
[data-theme="dark"] #modal-times-log.times-list .time-entry {
    background: #1e2127 !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
}

[data-theme="dark"] #modal-times-log.times-list .time-entry:hover {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

[data-theme="dark"] #modal-times-log.times-list .time-entry.active {
    background: #1e2127 !important;
    color: #ffffff !important;
}

/* Estilos específicos para tema oscuro - Algorithms */
[data-theme="dark"] .algorithms-title {
    color: #ffffff;
}

/* Asegurar que algorithm-block no herede el color del título */
[data-theme="dark"] .algorithm-block {
    background-color: #1e2127;
    border: 1px solid #404040;
    color: #ffffff; /* Color base para el texto - blanco */
}

[data-theme="dark"] .algorithm-block h3 {
    color: #ffffff !important;
}

[data-theme="dark"] .algorithm-block p {
    color: #ffffff !important;
}

[data-theme="dark"] .algorithm-block .algorithm-moves {
    color: #4dabf7 !important;
}

/* Asegurar que todos los textos en algorithm-block sean blancos */
[data-theme="dark"] .algorithm-block * {
    color: #ffffff !important;
}

/* Mantener el color azul solo para los movimientos */
[data-theme="dark"] .algorithm-block .algorithm-moves,
[data-theme="dark"] .algorithm-block .moves {
    color: #4dabf7 !important;
}

[data-theme="dark"] .desktop-header {
    background-color: transparent;
}

[data-theme="dark"] .desktop-selectors {
    background-color: transparent;
}

[data-theme="dark"] .algorithm-selector-btn,
[data-theme="dark"] .case-selector-btn {
    background-color: #1e2127;
    color: #ffffff;
    border: 1px solid #404040;
}

[data-theme="dark"] .algorithm-dropdown-content,
[data-theme="dark"] .case-dropdown-content,
[data-theme="dark"] .session-dropdown-content {
    background-color: #1e2127;
    border: 1px solid #404040;
}

[data-theme="dark"] .algorithm-dropdown-content a,
[data-theme="dark"] .case-dropdown-content a,
[data-theme="dark"] .inspection-dropdown-content a,
[data-theme="dark"] .session-dropdown-content a {
    color: #cccccc;
}

[data-theme="dark"] .algorithm-dropdown-content a:hover,
[data-theme="dark"] .case-dropdown-content a:hover,
[data-theme="dark"] .inspection-dropdown-content a:hover,
[data-theme="dark"] .session-dropdown-content a:hover {
    background-color: #2d2d2d;
}

/* Estilos específicos para session dropdown en tema oscuro */
[data-theme="dark"] .session-dropdown-content .session-option a {
    color: #cccccc;
}

[data-theme="dark"] .session-dropdown-content .session-option a:hover,
[data-theme="dark"] .session-dropdown-content .session-option a.active {
    background-color: #2d2d2d;
    color: #ffffff;
}

[data-theme="dark"] .session-dropdown-content .session-option:hover .delete-session-btn,
[data-theme="dark"] .session-dropdown-content .session-option a.active ~ .delete-session-btn,
[data-theme="dark"] .session-dropdown-content .session-option .delete-session-btn.active {
    background-color: #2d2d2d;
}

[data-theme="dark"] .session-dropdown-content .delete-session-btn {
    color: #999;
}

[data-theme="dark"] .session-dropdown-content .delete-session-btn:hover {
    background-color: #2d2d2d;
    color: #ff6b6b;
}

[data-theme="dark"] .algorithm-card {
    background-color: #1e2127;
    border: 1px solid #404040;
}

[data-theme="dark"] .algorithm-card h3 {
    color: #ffffff;
}

[data-theme="dark"] .algorithm-card p {
    color: #cccccc;
}

[data-theme="dark"] .algorithm-card .algorithm-moves {
    color: #4dabf7;
}

/* Estilos específicos para tema oscuro - Index/Home */
[data-theme="dark"] .home-container h1 {
    color: #ffffff;
}

[data-theme="dark"] .home-container h3 {
    color: #ffffff;
}

[data-theme="dark"] .home-container p {
    color: #cccccc;
}

/* Estilos más específicos para las tarjetas de navegación */
[data-theme="dark"] .home-container div[style*="background: white"] {
    background-color: #1e2127 !important;
    border: 1px solid #404040 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .home-container div[style*="background: rgba(255,255,255,0.8)"] {
    background-color: rgba(30, 33, 39, 0.9) !important;
    border: 1px solid #404040 !important;
}

/* Estilos específicos para elementos inline en index */
[data-theme="dark"] .home-container div[style*="text-align: center"] h1 {
    color: #ffffff !important;
}

[data-theme="dark"] .home-container div[style*="text-align: center"] p {
    color: #cccccc !important;
}

[data-theme="dark"] .home-container div[style*="text-align: center"] h3 {
    color: #ffffff !important;
}

/* Estilos para los enlaces de navegación */
[data-theme="dark"] .home-container a {
    color: inherit;
    text-decoration: none;
}

[data-theme="dark"] .home-container a:hover {
    text-decoration: none;
}

/* Estilos para los iconos SVG en las tarjetas */
[data-theme="dark"] .home-container svg[fill="#007bff"] {
    fill: #4dabf7 !important;
}

[data-theme="dark"] .home-container img[src*="svg"] {
    filter: brightness(0) invert(1);
}

/* Estilos para imágenes SVG de algoritmos en tema oscuro */
[data-theme="dark"] .algorithm-cube-image {
    background-color: #1e2127;
}

[data-theme="dark"] .algorithm-cube-image-modal {
    background-color: #1e2127;
}

/* Estilos específicos para el botón clear-all-btn en tema oscuro */
[data-theme="dark"] .clear-all-btn {
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    transition: none !important;
    animation: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-theme="dark"] .clear-all-btn svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

[data-theme="dark"] .clear-all-btn:hover {
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    transform: none !important;
}

[data-theme="dark"] .clear-all-btn:hover svg {
    fill: currentColor !important;
}

[data-theme="dark"] .clear-all-btn:active {
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    transform: none !important;
}

[data-theme="dark"] .clear-all-btn:active svg {
    fill: currentColor !important;
}

/* Estilos específicos para el botón delete-session-btn en tema oscuro */
[data-theme="dark"] .delete-session-btn {
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    transition: none !important;
    animation: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-theme="dark"] .delete-session-btn svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

[data-theme="dark"] .delete-session-btn:hover {
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    transform: none !important;
}

[data-theme="dark"] .delete-session-btn:hover svg {
    fill: currentColor !important;
}

[data-theme="dark"] .delete-session-btn:active {
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    transform: none !important;
}

[data-theme="dark"] .delete-session-btn:active svg {
    fill: currentColor !important;
}

/* Solo aplicar estilos de tema a temas que no sean light */
[data-theme]:not([data-theme="light"]) h1, 
[data-theme]:not([data-theme="light"]) h2, 
[data-theme]:not([data-theme="light"]) h3, 
[data-theme]:not([data-theme="light"]) h4, 
[data-theme]:not([data-theme="light"]) h5, 
[data-theme]:not([data-theme="light"]) h6 {
    color: var(--text-primary);
}

[data-theme]:not([data-theme="light"]) p {
    color: var(--text-secondary);
}

/* Solo aplicar estilos de tema a temas que no sean light */
[data-theme]:not([data-theme="light"]) button {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Solo aplicar efectos hover a temas que no sean light ni dark */
[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) button:hover {
    background-color: var(--bg-tertiary);
}

/* Solo aplicar estilos de tema a temas que no sean light */
[data-theme]:not([data-theme="light"]) input, 
[data-theme]:not([data-theme="light"]) select, 
[data-theme]:not([data-theme="light"]) textarea {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
}

[data-theme]:not([data-theme="light"]) input:focus, 
[data-theme]:not([data-theme="light"]) select:focus, 
[data-theme]:not([data-theme="light"]) textarea:focus {
    border-color: var(--input-focus);
    outline: none;
}

/* Solo aplicar estilos de tema a temas que no sean light */
[data-theme]:not([data-theme="light"]) .card, 
[data-theme]:not([data-theme="light"]) .algorithm-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

/* Estilos del modo oscuro para las pestañas de configuración */
[data-theme="dark"] .settings-tabs {
    background: none;
}

[data-theme="dark"] .tab-button {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #cccccc;
}

[data-theme="dark"] .tab-button:hover {
    background-color: #3d3d3d;
    border-color: #505050;
    color: #ffffff;
}

[data-theme="dark"] .tab-button.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.3);
}



/* Estilos del modo claro para las pestañas de configuración */
[data-theme="light"] .settings-tabs {
    background: none;
}

[data-theme="light"] .tab-button {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}

[data-theme="light"] .tab-button:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
}

[data-theme="light"] .tab-button.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.3);
}



/* Solo aplicar estilos de tema a temas que no sean light */
[data-theme]:not([data-theme="light"]) .dropdown-content, 
[data-theme]:not([data-theme="light"]) .puzzle-dropdown-content, 
[data-theme]:not([data-theme="light"]) .algorithm-dropdown-content, 
[data-theme]:not([data-theme="light"]) .case-dropdown-content {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

[data-theme]:not([data-theme="light"]) .dropdown-content a, 
[data-theme]:not([data-theme="light"]) .puzzle-dropdown-content a, 
[data-theme]:not([data-theme="light"]) .algorithm-dropdown-content a, 
[data-theme]:not([data-theme="light"]) .case-dropdown-content a {
    color: var(--text-primary);
}

/* Solo aplicar efectos hover a temas que no sean light ni dark */
[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .dropdown-content a:hover, 
[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .puzzle-dropdown-content a:hover, 
[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .algorithm-dropdown-content a:hover, 
[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .case-dropdown-content a:hover,
[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .inspection-dropdown-content a:hover {
    background-color: var(--bg-tertiary);
}

/* Estilos para el selector de temas */
.theme-selector {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 20px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .theme-selector {
    background: #1e2127;
    border: 1px solid #404040;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.theme-option {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    border: 2px solid var(--border-color);
    background: var(--bg-secondary);
}

.theme-option.active {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: white;
}

.theme-preview {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto 8px;
    border: 2px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.theme-preview.light {
    background: linear-gradient(45deg, #f5f5f5 50%, #ffffff 50%);
}

.theme-preview.dark {
    background: linear-gradient(45deg, #1a1a1a 50%, #2d2d2d 50%);
}

/* En modo claro, el preview del tema oscuro debe ser claro */
[data-theme="light"] .theme-preview.dark {
    background: transparent !important;
}

/* En modo claro, la opción del tema oscuro no debe tener fondo */
[data-theme="light"] .theme-option[data-theme="dark"] {
    background: transparent !important;
}

/* En modo claro, eliminar el fondo oscuro del preview del tema oscuro */
[data-theme="light"] .theme-option[data-theme="dark"] .theme-preview.dark {
    background: transparent !important;
}



.theme-name {
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

/* Estilos para móvil */
@media (max-width: 768px) {
    .theme-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .theme-option {
        padding: 12px;
    }
    
    .theme-preview {
        width: 35px;
        height: 35px;
        margin-bottom: 6px;
    }
    
    .theme-name {
        font-size: 0.8rem;
    }
}



/* === VISUALIZACIÓN DEL CUBO USANDO CUBING.NET === */
/* Estilos movidos al bloque cube-viz-section */

/* === LAYOUT DE 3 BLOQUES IGUALES === */
.stats-and-viz-container {
    display: flex;
    gap: 20px;
    align-items: stretch;
    min-height: 250px;
}

.times-section,
.stats-grid,
.cube-viz-section {
    flex: 1;
    min-height: 250px;
}

/* === LAYOUT MÓVIL (layout original) === */
@media (max-width: 1023px) {
    .stats-and-viz-container {
        flex-direction: column;
        gap: 15px;
        min-height: auto;
    }
    
    .times-section,
    .stats-grid {
        flex: none;
        width: 100%;
        min-height: auto;
    }
    
    .cube-viz-section {
        display: none; /* Oculto en móvil */
    }
}

.cube-viz-section {
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-color: var(--surface-color);
    border-radius: 8px;
    /* Oculto por defecto en móvil */
    display: none;
    opacity: 0;
}

#cube-viz-right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* === MEDIA QUERIES PARA ESCRITORIO === */
@media (min-width: 1024px) {
    .cube-viz-section {
        display: flex; /* Solo visible en escritorio */
    }
    
    .cube-viz-section.loaded {
        opacity: 1;
    }
}

/* Responsive design para la visualización del cubo */
/* Estilos responsive manejados en cube-viz-section */

/* === CONFIGURACIÓN DE INSPECCIÓN === */
.inspection-settings {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 20px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .inspection-settings {
    background: #1e2127;
    border: 1px solid #404040;
}

/* Estilos para elementos de inspección que aparecen condicionalmente */
.setting-item.inspection-dependent {
    margin-left: 30px !important;
    border-bottom: none !important;
    padding: 12px 0 !important;
}

.setting-item.inspection-dependent:not(:last-child) {
    margin-bottom: 8px !important;
}

/* El último elemento de inspección debe mantener el borde */
.setting-item.inspection-dependent.inspection-last {
    border-bottom: 1px solid var(--border-color) !important;
    margin-left: 0 !important;
    padding-left: 30px !important;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child {
    border-bottom: none;
}

/* Ocultar borde inferior del último elemento visible cuando hay elementos ocultos */
.setting-item:last-of-type {
    border-bottom: none;
}



.setting-info {
    flex: 1;
    margin-right: 20px;
}

.setting-control {
    flex-shrink: 0;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Animación solo cuando el toggle tiene la clase 'animated' */
.toggle-switch.animated .toggle-slider {
    transition: 0.3s;
}

.toggle-switch.animated .toggle-slider:before {
    transition: 0.3s;
}

input:checked + .toggle-slider {
    background-color: #007AFF;
}

input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

/* Number Input */
.number-input {
    width: 80px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--surface-color);
    color: var(--text-primary);
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
    height: 36px;
}

.number-input:focus {
    outline: none;
    border-color: #007AFF;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

/* Dark mode adjustments */
[data-theme="dark"] .number-input {
    background-color: var(--surface-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .toggle-slider {
    background-color: #444;
}

[data-theme="dark"] .toggle-slider:before {
    background-color: #fff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .inspection-settings {
        padding: 15px;
        margin-top: 20px;
    }
    
    .setting-item {
        padding: 12px 0;
    }
    
    .setting-info {
        margin-right: 15px;
    }
    
    .number-input {
        width: 70px;
        padding: 6px 10px;
    }
}