/* ========================================================
   ANIMACIONES ESTANDAR Y CONSISTENTES PARA MODALES
   ======================================================== */
@keyframes modalBackdropFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalBackdropFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modalScaleInOptimized {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalScaleOutOptimized {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.93) translateY(6px);
    }
}

.compiler-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 300000;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', 'Roboto', sans-serif;
}

.compiler-modal {
    background: #ffffff;
    width: 800px;
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.compiler-header {
    background: #00a5e3;
    color: white;
    padding: 15px 20px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.compiler-header .close-btn {
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transform: none;
}

.compiler-header .close-btn:hover {
    color: #e0e0e0;
}

.compiler-body {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

.compiler-box {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    box-sizing: border-box;
    max-width: 100%;
}

.compiler-box.info {
    background-color: #e3f5ff;
    border-color: #00a5e3;
    flex-direction: column;
    align-items: flex-start;
}

.compiler-box.success {
    background-color: #e8f5e9;
    border-color: #4caf50;
    flex-direction: column;
    align-items: flex-start;
}

.compiler-box.flashing {
    border-color: #00a5e3;
    flex-direction: column;
    align-items: flex-start;
}

.info-title {
    color: #00a5e3;
    font-weight: bold;
    display: block;
    line-height: 1.5;
}

.success-title {
    color: #4caf50;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.flashing-title {
    color: #00a5e3;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-text {
    color: #555;
    margin-left: 30px;
    line-height: 1.5;
}

.btn-center {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.btn-orange {
    background-color: #ff9800;
    color: white;
    border: none;
    border-radius: 8px !important;
    padding: 12px 25px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

.btn-orange:hover {
    background-color: #e68a00;
}

.btn-gray {
    background-color: #e0e0e0;
    color: #9e9e9e;
    border: none;
    border-radius: 8px !important;
    padding: 12px 25px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    cursor: not-allowed;
}

.btn-blue {
    background-color: #00a5e3;
    color: white;
    border: none;
    border-radius: 8px !important;
    padding: 12px 25px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

.btn-blue:hover {
    background-color: #0088c4;
}

.compiler-footer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #eeeeee;
    padding-top: 15px;
}

.compiler-footer.left {
    justify-content: flex-start;
}

.btn-outline {
    background: white;
    border: 1px solid #ccc;
    color: #555;
    padding: 8px 15px;
    border-radius: 8px !important;
    cursor: pointer;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #00a5e3;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.port-select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: 10px;
    outline: none;
    font-family: inherit;
}
/* Code Editor Modal */
.editor-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 200000;
    display: none; justify-content: center; align-items: center;
    font-family: 'Inter', 'Roboto', sans-serif;
}
.editor-modal {
    background: #1e1e1e; width: 900px; max-width: 95vw; height: 85vh;
    border-radius: 8px; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
.editor-header {
    background: #2d2d2d; color: #fff; padding: 15px 20px;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: bold; border-bottom: 1px solid #444;
}
.editor-body {
    flex: 1; padding: 0; display: flex; flex-direction: column;
}
.editor-textarea {
    flex: 1; width: 100%; background: #1e1e1e; color: #d4d4d4;
    border: none; padding: 20px; font-family: 'Consolas', 'Courier New', monospace;
    font-size: 14px; outline: none; resize: none; line-height: 1.5;
}
.editor-footer {
    background: #2d2d2d; padding: 15px 20px; display: flex; justify-content: flex-end; gap: 15px;
    border-top: 1px solid #444;
}
.btn-editor-cancel {
    background: transparent; color: #aaa; border: 1px solid #555;
    padding: 8px 20px; border-radius: 4px; cursor: pointer; font-weight: bold;
}
.btn-editor-cancel:hover { background: #444; color: #fff; }
.btn-editor-compile {
    background: #ff9800; color: #fff; border: none;
    padding: 8px 20px; border-radius: 4px; cursor: pointer; font-weight: bold;
}
.btn-editor-compile:hover { background: #e68a00; }

/* Estilos de Optimización de Rendimiento */
/* --- CARGADOR PRINCIPAL SOBREPUESTO Y FLUIDO (PRESERVADO) --- */
#autana-loader {
    z-index: 2147483648 !important; /* Siempre por encima del modal de aviso y elementos bloqueantes */
    pointer-events: auto !important;
}

/* Preservar animaciones del cargador principal incluso en modo ultra-ahorro */
#autana-loader .loader-pulse-ring,
body.low-perf-mode #autana-loader .loader-pulse-ring,
.loader-pulse-ring {
    animation: autana-pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite !important;
}

#autana-loader .loader-bar-fill,
body.low-perf-mode #autana-loader .loader-bar-fill,
.loader-bar-fill {
    animation: autana-loading-bar 2s ease-in-out infinite !important;
}

#autana-loader .loader-logo,
body.low-perf-mode #autana-loader .loader-logo {
    animation: autana-pulse-logo 2s ease-in-out infinite !important;
}

/* En modo acelerado: fondo limpio sin coste de GPU por blur */
body.low-perf-mode #autana-loader {
    background-color: #f8fafc !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.dark-mode.low-perf-mode #autana-loader {
    background-color: #181818 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- REGLAS DE ULTRA-ACELERACIÓN PARA BLOCKLY EN PCS ANTIGUAS --- */


/* Switch Deslizable de Optimización */
.opt-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.opt-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.opt-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 24px;
}
.opt-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}
.opt-switch input:checked + .opt-slider {
    background-color: #ff9800;
}
.opt-switch input:focus + .opt-slider {
    box-shadow: 0 0 1px #ff9800;
}
.opt-switch input:checked + .opt-slider:before {
    transform: translateX(20px);
}

/* -------------------------------------------------------------
   REGLAS PARA PANTALLAS DE LAPTOP (1366x768) EN COMPILADOR C++
   ------------------------------------------------------------- */
@media screen and (max-width: 1400px) {
    /* Hacer los botones de React (MUI) más pequeños en laptops */
    button.MuiButton-contained, button.MuiButtonBase-root {
        padding: 4px 8px !important;
        font-size: 0.70rem !important;
        min-width: 80px !important;
        line-height: 1 !important;
    }
    
    /* Asegurarse de que el contenedor de los botones de React use flex-wrap si es necesario */
    .MuiPaper-root > div:first-child > div:last-child {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }
}

/* Diseño Responsivo para Pantallas Pequeñas y Laptops de Baja Resolución */
@media (max-height: 768px) {
    .compiler-body {
        padding: 15px 25px;
        gap: 12px;
    }
    .compiler-box {
        padding: 10px 15px;
        font-size: 13px;
    }
    .compiler-footer {
        padding-top: 10px;
    }
}

@media (max-width: 650px) {
    .compiler-body {
        padding: 15px;
        gap: 10px;
    }
    .compiler-box {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
    }
    .compiler-box > div {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }
    #boardSelector {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .compiler-box button {
        width: 100%;
        justify-content: center;
    }
}
.custom-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    margin: 0 8px;
    border-radius: 4px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.87);
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.00938em;
    gap: 16px;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.custom-menu-item:hover {
    background-color: rgba(0, 165, 227, 0.08);
}
.custom-menu-item svg,
.custom-menu-item img {
    margin-right: 0 !important;
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 50%;
}
.custom-menu-item span {
    font-size: 0.9rem;
    font-family: inherit;
    color: rgba(0, 0, 0, 0.87);
}

body.dark-mode .custom-menu-item {
    color: #e0e0e0;
}
body.dark-mode .custom-menu-item span {
    color: #e0e0e0;
}
body.dark-mode .custom-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Responsive adicional para celulares (ancho < 500px) */
@media (max-width: 500px) {
    .compiler-modal {
        width: 100% !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .compiler-body {
        padding: 10px !important;
        gap: 8px !important;
    }
    .compiler-footer {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .compiler-footer button {
        width: 100% !important;
        justify-content: center !important;
    }
    .port-select {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ========================================================
   OPTIMIZACIÓN RESPONSIVE AVANZADA PARA TELÉFONOS (MÓVILES)
   ======================================================== */
@media (max-width: 768px) {
    /* 1. Liberar espacio en los bordes de la pantalla */
    .app-container {
        padding: 4px 6px !important;
        height: 100dvh !important;
    }

    /* 2. Reducir margen del contenedor del área de trabajo */
    .app-container > div:nth-child(2) {
        margin: 2px 0 !important;
        border-radius: 8px !important;
    }

    /* 3. Mantener botones flotantes (Código </> y Compilar)
          por encima de la papelera para NUNCA taparla */
    .app-container > :nth-child(3),
    div[style*="translateY(-50%)"],
    div[style*="translateY(-50%)"][style*="fixed"] {
        top: auto !important;
        bottom: 90px !important;
        right: 12px !important;
        transform: none !important;
        flex-direction: column !important;
        gap: 8px !important;
        z-index: 1000 !important;
        pointer-events: none !important;
    }

    .app-container > :nth-child(3) button,
    div[style*="translateY(-50%)"] button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
        pointer-events: auto !important;
    }

    .app-container > :nth-child(3) button svg,
    div[style*="translateY(-50%)"] button svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* 5. Diálogo de Compilador / Placas en Móviles */
    .MuiDialog-paper {
        margin: 8px !important;
        width: calc(100% - 16px) !important;
        max-width: 100vw !important;
        max-height: 94vh !important;
        border-radius: 12px !important;
    }

    .MuiDialogContent-root {
        padding: 12px !important;
    }

    .MuiDialogTitle-root {
        padding: 12px 14px !important;
        font-size: 1.1rem !important;
    }
}

/* ============================================================
   PREVENIR CÓDIGO DUPLICADO AL EDITAR CÓDIGO (1336x768 / LAPTOP)
   ============================================================ */
#inlineCodeEditor ~ pre,
.MuiDialogContent-root:has(#inlineCodeEditor) pre,
.MuiPaper-root:has(#inlineCodeEditor) pre,
div:has(> #inlineCodeEditor) > pre,
pre[data-hidden-by-editor="true"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ============================================================
   SELECTOR DE PLACA NATIVO (MODO NORMAL Y MODO EDITAR CÓDIGO)
   ============================================================ */
#nativeBoardSelector {
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 12px !important;
    z-index: 1001 !important;
}

#nativeBoardSelector > div {
    background: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

body.dark-mode #nativeBoardSelector > div {
    background: #252526 !important;
    border-color: #3e3e42 !important;
}

body.dark-mode #nativeBoardSelector strong {
    color: #e0e0e0 !important;
}

body.dark-mode #nativeBoardSelector select {
    background: #1e1e1e !important;
    color: #4fc3f7 !important;
    border-color: #555 !important;
}

body.dark-mode #nativeBoardSelector button {
    background: #2a2a2a !important;
    color: #ffb74d !important;
    border-color: #ff9800 !important;
}


/* ========================================================
   ADAPTABILIDAD TOTAL DE BOTONES EN EL MODAL DEL COMPILADOR
   ======================================================== */
#custom-compiler-modal .compiler-modal {
  width: 780px !important;
  max-width: 94vw !important;
  max-height: 92vh !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#custom-compiler-modal .compiler-body {
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

#custom-compiler-modal #btnAndroidFallback[style*="none"] {
  display: none !important;
}

#custom-compiler-modal #webSerialBtnContainer {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}
#custom-compiler-modal #btnWebSerial {
  width: 100% !important;
  max-width: 380px !important;
  min-height: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(255, 152, 0, 0.25) !important;
  box-sizing: border-box !important;
}

#custom-compiler-modal #connectedText > div:last-child {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
}

#custom-compiler-modal #connectedText button {
  margin: 0 !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

#custom-compiler-modal #step1 .compiler-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding-top: 16px !important;
  margin-top: 16px !important;
  border-top: 1px solid #e0e0e0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#custom-compiler-modal #step1 .compiler-footer button.btn-outline:not(#btnAndroidFallback) {
  min-width: 130px !important;
  min-height: 44px !important;
  height: 44px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
#custom-compiler-modal #btnCompile {
  min-width: 160px !important;
  min-height: 44px !important;
  height: 44px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

#custom-compiler-modal #step2 .compiler-footer button {
  min-height: 42px !important;
  min-width: 140px !important;
  height: 42px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#custom-compiler-modal #step3Footer {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding-top: 16px !important;
  margin-top: 16px !important;
  border-top: 1px solid #e0e0e0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#custom-compiler-modal #step3Footer button {
  flex: 1 1 0px !important;
  min-height: 46px !important;
  height: 46px !important;
  max-height: 46px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 10px 16px !important;
  box-sizing: border-box !important;
}

#custom-compiler-modal #btnToggleLogs {
  min-height: 38px !important;
  height: 38px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 270px !important;
  box-sizing: border-box !important;
}

@media (max-width: 680px) {
  #custom-compiler-modal .compiler-modal {
    max-height: 96vh !important;
    width: 95vw !important;
  }
  #custom-compiler-modal .compiler-body {
    padding: 14px 12px !important;
    gap: 12px !important;
  }
  #custom-compiler-modal #step1 .compiler-footer,
  #custom-compiler-modal #step3Footer {
    flex-direction: column-reverse !important;
    gap: 10px !important;
    padding-top: 12px !important;
    margin-top: 12px !important;
  }
  #custom-compiler-modal #step1 .compiler-footer button,
  #custom-compiler-modal #btnCompile,
  #custom-compiler-modal #btnWebSerial,
  #custom-compiler-modal #step3Footer button,
  #custom-compiler-modal #btnToggleLogs,
  #custom-compiler-modal #connectedText button {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ========================================================
   DIÁLOGO DE SELECCIÓN Y CAMBIO DE PIN (LIGHT Y DARK MODE)
   ======================================================== */
.autana-pin-chip {
    padding: 9px 4px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #383838 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
}

.autana-pin-chip:hover {
    background: #e0f2fe !important;
    border-color: #00a5e3 !important;
    color: #0284c7 !important;
    transform: translateY(-1px) !important;
}

.autana-pin-chip.active {
    background: #00a5e3 !important;
    border-color: #00a5e3 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(0,165,227,0.35) !important;
}

/* Modo Oscuro para el Diálogo de Pin */
body.dark-mode .autana-pin-chip {
    background: #262626 !important;
    border: 1.5px solid #383838 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}

body.dark-mode .autana-pin-chip:hover {
    background: #383838 !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    transform: translateY(-1px) !important;
}

body.dark-mode .autana-pin-chip.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.45) !important;
}

body.dark-mode .autana-pin-manual-box {
    background: #181818 !important;
    border: 1.5px solid #383838 !important;
}

body.dark-mode #swalManualPinInput {
    background: #262626 !important;
    color: #ffffff !important;
    border: 1.5px solid #505050 !important;
}

body.dark-mode #swalManualPinInput:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}


/* ========================================================
   FONDOS TRASLÚCIDOS NATURALES PARA TODOS LOS MODALES
   (Permiten ver claramente el área de trabajo y bloques detrás con rgba(0, 0, 0, 0.5))
   ======================================================== */
.compiler-overlay,
.editor-overlay,
.sim-modal-overlay,
.pm-modal-overlay,
.autana-notice-overlay,
#custom-compiler-modal,
#custom-serial-modal,
#custom-examples-modal,
#pmOverlay,
#pinMapOverlay,
#autanaNoticeModal,
.MuiDialog-root .MuiBackdrop-root,
.MuiDrawer-root .MuiBackdrop-root,
.MuiModal-root .MuiBackdrop-root,
.MuiBackdrop-root:not(.MuiBackdrop-invisible),
.swal2-container:not(.swal2-top-end):not(.swal2-bottom-end):not(.swal2-toast-shown):not(:has(.swal2-toast)) {
    --swal2-backdrop: rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.dark-mode .compiler-overlay,
body.dark-mode .editor-overlay,
body.dark-mode .sim-modal-overlay,
body.dark-mode .pm-modal-overlay,
body.dark-mode .autana-notice-overlay,
body.dark-mode #custom-compiler-modal,
body.dark-mode #custom-serial-modal,
body.dark-mode #custom-examples-modal,
body.dark-mode #pmOverlay,
body.dark-mode #pinMapOverlay,
body.dark-mode #autanaNoticeModal,
body.dark-mode .MuiDialog-root .MuiBackdrop-root,
body.dark-mode .MuiDrawer-root .MuiBackdrop-root,
body.dark-mode .MuiModal-root .MuiBackdrop-root,
body.dark-mode .MuiBackdrop-root:not(.MuiBackdrop-invisible),
body.dark-mode .swal2-container:not(.swal2-top-end):not(.swal2-bottom-end):not(.swal2-toast-shown):not(:has(.swal2-toast)) {
    --swal2-backdrop: rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* MODO RENDIMIENTO (PC ANTIGUA): Elimina animaciones pesadas pero NUNCA quita los fondos oscuros */
body.low-perf-mode .compiler-overlay,
body.low-perf-mode .editor-overlay,
body.low-perf-mode .sim-modal-overlay,
body.low-perf-mode .pm-modal-overlay,
body.low-perf-mode .autana-notice-overlay,
body.low-perf-mode #custom-compiler-modal,
body.low-perf-mode #custom-serial-modal,
body.low-perf-mode #custom-examples-modal,
body.low-perf-mode #projectManagerModal,
body.low-perf-mode #pmOverlay,
body.low-perf-mode #pinMapOverlay,
body.low-perf-mode #autanaNoticeModal,
body.low-perf-mode .MuiDialog-root .MuiBackdrop-root,
body.low-perf-mode .MuiDrawer-root .MuiBackdrop-root,
body.low-perf-mode .MuiModal-root .MuiBackdrop-root,
body.low-perf-mode .MuiBackdrop-root:not(.MuiBackdrop-invisible),
body.low-perf-mode .swal2-container:not(.swal2-top-end):not(.swal2-bottom-end):not(.swal2-toast-shown):not(:has(.swal2-toast)),
body.dark-mode.low-perf-mode .compiler-overlay,
body.dark-mode.low-perf-mode .editor-overlay,
body.dark-mode.low-perf-mode .sim-modal-overlay,
body.dark-mode.low-perf-mode .pm-modal-overlay,
body.dark-mode.low-perf-mode .autana-notice-overlay,
body.dark-mode.low-perf-mode #custom-compiler-modal,
body.dark-mode.low-perf-mode #custom-serial-modal,
body.dark-mode.low-perf-mode #custom-examples-modal,
body.dark-mode.low-perf-mode #projectManagerModal,
body.dark-mode.low-perf-mode #pmOverlay,
body.dark-mode.low-perf-mode #pinMapOverlay,
body.dark-mode.low-perf-mode #autanaNoticeModal,
body.dark-mode.low-perf-mode .MuiDialog-root .MuiBackdrop-root,
body.dark-mode.low-perf-mode .MuiDrawer-root .MuiBackdrop-root,
body.dark-mode.low-perf-mode .MuiModal-root .MuiBackdrop-root,
body.dark-mode.low-perf-mode .MuiBackdrop-root:not(.MuiBackdrop-invisible),
body.dark-mode.low-perf-mode .swal2-container:not(.swal2-top-end):not(.swal2-bottom-end):not(.swal2-toast-shown):not(:has(.swal2-toast)) {
    background: rgba(0, 0, 0, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
}

/* NOTIFICACIONES Y TOASTS: CERO DIFUMINADO Y FONDO 100% TRANSPARENTE */
body.swal2-toast-shown .swal2-container,
div:where(.swal2-container):has(.swal2-toast),
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-start,
.swal2-container.swal2-bottom-end,
.swal2-container.swal2-bottom-start,
.swal2-container:has(> .swal2-toast),
body.dark-mode.swal2-toast-shown .swal2-container,
body.dark-mode div:where(.swal2-container):has(.swal2-toast),
body.dark-mode .swal2-container.swal2-top-end,
body.dark-mode .swal2-container.swal2-bottom-end,
body.dark-mode .swal2-container:has(> .swal2-toast) {
    background: transparent !important;
    background-color: transparent !important;
    --swal2-backdrop: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

.swal2-popup.swal2-toast,
body.dark-mode .swal2-popup.swal2-toast {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
    pointer-events: auto !important;
}

/* Modal GPIO: fondo unificado sin degradados */
.autana-pin-modal-popup,
.swal2-popup.autana-pin-modal-popup {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}
body.dark-mode .autana-pin-modal-popup,
body.dark-mode .swal2-popup.autana-pin-modal-popup {
    background: #181818 !important;
    border: 1px solid #2e2e2e !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
}

body.dark-mode .autana-pin-modal-popup .swal2-close {
    color: #a1a1aa !important;
}

body.dark-mode .autana-pin-modal-popup .swal2-close:hover {
    color: #ffffff !important;
}

body.dark-mode .autana-pin-modal-popup .pm-btn-close {
    background: #242424 !important;
    border: 1.5px solid #383838 !important;
    color: #f1f5f9 !important;
}

body.dark-mode .autana-pin-modal-popup .pm-btn-close:hover {
    background: #333333 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

/* Modales apilados: cuando Selección de Dispositivo está abierto sobre el Drawer, el backdrop del Drawer se apaga para que Selección de Dispositivo cubra toda la pantalla uniformemente con 0.5 sin doble oscurecimiento */
body.has-compiler-modal-open .MuiDrawer-root .MuiBackdrop-root,
body.dark-mode.has-compiler-modal-open .MuiDrawer-root .MuiBackdrop-root {
    opacity: 0 !important;
}

/* Sub-modales y monitor serial abiertos sobre Selección de Dispositivo */
body.has-compiler-modal-open #custom-serial-modal,
body.has-compiler-modal-open .MuiDialog-root .MuiBackdrop-root,
body.dark-mode.has-compiler-modal-open #custom-serial-modal,
body.dark-mode.has-compiler-modal-open .MuiDialog-root .MuiBackdrop-root {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* NUNCA oscurecer ni difuminar el fondo cuando se abre un menú desplegable (Opciones, Ejemplos, etc.) */
.MuiBackdrop-invisible,
.MuiMenu-root .MuiBackdrop-root,
.MuiPopover-root .MuiBackdrop-root,
body.dark-mode .MuiBackdrop-invisible,
body.dark-mode .MuiMenu-root .MuiBackdrop-root,
body.dark-mode .MuiPopover-root .MuiBackdrop-root,
div[role="presentation"]:not(.MuiDialog-root):not(.MuiDrawer-root) .MuiBackdrop-root {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* El Monitor Serial siempre debe estar por encima de todos los modales */
#custom-serial-modal {
    z-index: 500000 !important;
    pointer-events: auto !important;
}

#custom-serial-modal > div {
    position: relative !important;
    z-index: 500001 !important;
    pointer-events: auto !important;
}


/* ========================================================
   MODO OSCURO PARA EL PANEL LATERAL DE CODIGO (DRAWER)
   ======================================================== */
body.dark-mode .MuiDrawer-paperAnchorRight {
    background-color: #121212 !important;
    color: #f1f5f9 !important;
}

/* 1. Eliminar linea blanca horizontal del toolbar y neutralizar bordes claros en modo oscuro */
body.dark-mode .MuiDrawer-paperAnchorRight [class*="MuiBox-root"],
body.dark-mode .MuiDrawer-paperAnchorRight div:not(.custom-compiler-btn):not(#hackerBtnCustom) {
    border-color: #2e2e2e !important;
}

body.dark-mode .MuiDrawer-paperAnchorRight div[style*="border-bottom"],
body.dark-mode .MuiDrawer-paperAnchorRight [class*="css-1fo9hzv"] {
    border-bottom: 1px solid #2e2e2e !important;
}


/* ========================================================
   UNICO SCROLLBAR ESTABLE (CERO DOBLE BARRA, CERO PARPADEO)
   ======================================================== */
.MuiDrawer-paperAnchorRight,
.MuiDrawer-paperAnchorRight > div,
.MuiDrawer-paperAnchorRight [class*="MuiBox-root"]:has(#nativeBoardSelector) {
    overflow: hidden !important;
}

.MuiDrawer-paperAnchorRight::-webkit-scrollbar,
.MuiDrawer-paperAnchorRight > div::-webkit-scrollbar,
.MuiDrawer-paperAnchorRight [class*="MuiBox-root"]:has(#nativeBoardSelector)::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.MuiDrawer-paperAnchorRight pre,
.MuiDrawer-paperAnchorRight div:has(> pre) {
    overflow: visible !important;
}

.MuiDrawer-paperAnchorRight div:has(> [style*="sticky"]):has(> div:has(pre)) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
}
/* 2. Scrollbar oscuro en vez de la barra blanca (#f1f1f1) */
body.dark-mode .MuiDrawer-paperAnchorRight *::-webkit-scrollbar,
body.dark-mode .MuiDrawer-paperAnchorRight ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

body.dark-mode .MuiDrawer-paperAnchorRight *::-webkit-scrollbar-track,
body.dark-mode .MuiDrawer-paperAnchorRight ::-webkit-scrollbar-track {
    background: #141414 !important;
}

body.dark-mode .MuiDrawer-paperAnchorRight *::-webkit-scrollbar-thumb,
body.dark-mode .MuiDrawer-paperAnchorRight ::-webkit-scrollbar-thumb {
    background: #333333 !important;
    border-radius: 4px !important;
}

body.dark-mode .MuiDrawer-paperAnchorRight *::-webkit-scrollbar-thumb:hover,
body.dark-mode .MuiDrawer-paperAnchorRight ::-webkit-scrollbar-thumb:hover {
    background: #444444 !important;
}

/* 3. Contenedor de numeros de linea oscuro sin borde blanco */
body.dark-mode .MuiDrawer-paperAnchorRight [class*="MuiBox-root"][style*="border-right"],
body.dark-mode .MuiDrawer-paperAnchorRight div[style*="border-right: 1px solid"],
body.dark-mode .MuiDrawer-paperAnchorRight div[style*="border-right:1px solid"] {
    background-color: #141414 !important;
    border-right: 1px solid #2e2e2e !important;
    color: #71717a !important;
}

/* 4. Pre y contenedor del editor sin cortes raros ni bordes blancos */
body.dark-mode .MuiDrawer-paperAnchorRight pre {
    background-color: #181818 !important;
    color: #f1f5f9 !important;
    padding-top: 1rem !important;
}

body.dark-mode .MuiDrawer-paperAnchorRight pre code {
    background-color: transparent !important;
}

/* 5. Selector de placa nativo en modo oscuro */
body.dark-mode #nativeBoardSelector > div {
    background: #181818 !important;
    border: 1px solid #2e2e2e !important;
}

body.dark-mode #nativeBoardSelector strong {
    color: #ffffff !important;
}

body.dark-mode #realBoardSelector {
    background: #242424 !important;
    border: 1px solid #383838 !important;
    color: #00a5e3 !important;
}

#custom-compiler-modal .info-title { display: block !important; line-height: 1.5 !important; }