/* ==========================================================================
   XML EDITOR & FORMATTER CSS - VERSIÓN FINAL UNIFICADA
   ========================================================================== */

/* Botón Flotante de Pantalla Completa */
#fullscreenToggleBtn {
    position: fixed;
    top: 50px;
    right: 85px !important;
    z-index: 10005;
    padding: 8px 15px;
    border: 1px solid #0f97c8;
    background-color: #e0e0e0de;
    color: #333;
    font-size: 0.9em;
    font-weight: normal;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s, transform 0.1s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#fullscreenToggleBtn:hover {
    background-color: #a4a4a4;
    transform: translateY(-2px);
}

/* Estructura Principal (Grid) */
.tool-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    align-items: stretch;
}

.editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.panel-header h3 {
    font-size: 1.2em;
    color: #007bff;
    margin: 0;
    padding: 0;
}

/* Editores (Textareas) */
#xmlInput,
#xmlOutput {
    width: 100%;
    height: 450px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    box-sizing: border-box;
    flex-grow: 1;
    overflow-y: auto;
    font-family: 'Fira Code', 'Cascadia Code', 'Source Code Pro', monospace;
    font-size: 14px;
    padding: 15px;
    line-height: 1.5;
    resize: none;
    outline: none;
}

#xmlInput { background-color: #fff; color: #333; }
#xmlOutput { background-color: #f8f9fa; color: #2d3748; }

/* Controles y Botones */
.controls {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 5px;
}

.controls button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#loadBtn { background-color: #17a2b8; color: white; }
#loadBtn:hover { background-color: #138496; }

#formatBtn { background-color: #28a745; color: white; }
#formatBtn:hover { background-color: #218838; }

#clearBtn { background-color: #dc3545; color: white; }
#clearBtn:hover { background-color: #c82333; }

#copyFormattedBtn { background-color: #007bff; color: white; }
#copyFormattedBtn:hover { background-color: #0056b3; }

#copyMinifiedBtn { background-color: #f0f0f0; color: #333; border: 1px solid #ccc; }
#copyMinifiedBtn:hover { background-color: #ddd; }

#downloadBtn { background-color: #ffc107; color: #212529; }
#downloadBtn:hover { background-color: #e0a800; }

/* MODO OSCURO */
html.dark #xmlInput,
html.dark #xmlOutput {
    background-color: #1e1e1e;
    color: #d4d4d4;
    border-color: #444;
}
html.dark .panel-header { border-bottom-color: #444; }

/* ==========================================
   LÓGICA DE PANTALLA COMPLETA (FULLSCREEN)
   ========================================== */

.container.is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    background-color: #ffffff !important;
    z-index: 9998 !important;
    padding: 0px 20px 90px 20px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

html.dark .container.is-fullscreen {
    background-color: #1a1a1a !important;
}

.container.is-fullscreen .tool-grid {
    flex-grow: 1;
    display: flex;
    gap: 15px;
    height: calc(100vh - 180px) !important;
    margin: 0 !important;
}

.container.is-fullscreen #xmlInput,
.container.is-fullscreen #xmlOutput {
    height: 100% !important;
    border: 1px solid #ccc;
}

html.dark .container.is-fullscreen #xmlInput,
html.dark .container.is-fullscreen #xmlOutput {
    border-color: #444;
}

.container.is-fullscreen #main-title-bar,
.container.is-fullscreen #seo-toggle-wrapper,
.container.is-fullscreen .panel-header h3 {
    display: none !important;
}

/* --- GESTIÓN DE PUBLICIDAD EN FULLSCREEN (CENTRADOR ABSOLUTO) --- */

body.is-fullscreen-active .ad-block {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important; /* 1. Cambia esto para que empiece en la mitad */
    transform: translateX(-50%) !important; /* 2. Agrega esto para que se centre sobre su propio eje */
    width: 728px !important; /* Ocupa todo el ancho de la ventana */
    height: 60px !important;
    z-index: 10000 !important;
    
    /* ELIMINAMOS ALINEACIÓN POR DEFECTO Y FORZAMOS FLEX */
    display: flex !important;
    justify-content: center !important; /* Esto lo despega de la izquierda y lo lleva al centro */
    align-items: center !important;     /* Lo centra verticalmente en la franja de 80px */
    
    background-color: #ffffff !important;
    border-top: 1px solid #ddd;
    margin: 0 !important;
    padding: 0 !important;
}

html.dark body.is-fullscreen-active .ad-block {
    background-color: #1a1a1a !important;
    border-top: 1px solid #333;
}

body.is-fullscreen-active .ad-large-desktop,
body.is-fullscreen-active .ad-mobile {
    display: none !important;
}

/* El banner mediano propiamente dicho */
body.is-fullscreen-active .ad-medium-desktop {
    display: block !important;
    width: 728px !important; /* Mantenemos su tamaño exacto */
    height: 60px !important;
    margin: 0 auto !important; /* Margen automático para reforzar el centrado */
    flex-shrink: 0 !important; /* Evita que se encoja */
}

html.dark body.is-fullscreen-active .ad-medium-desktop {
    background-color: #2a2a2a;
}

.container.is-fullscreen #fullscreenToggleBtn {
    position: fixed;
    top: 50px;
    right: 20px;
    z-index: 10000;
    background-color: #0f97c8;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Lógica espejo de JSON Formatter */
@media (max-width: 950px) {
    #fullscreenToggleBtn {
        display: none !important;
    }
    
    /* También se asegura de que si estaba en fullscreen, 
       el contenedor no rompa el layout móvil */
    .container.is-fullscreen {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
    }
}

#xmlInput, #xmlOutput {
    background-color: #282c34 !important; /* Fondo tipo VS Code */
    color: #abb2bf !important;           /* Texto grisáceo suave */
    font-family: 'Fira Code', 'Consolas', monospace !important;
    border: 1px solid #181a1f !important;
    padding: 20px !important;
    line-height: 1.6 !important;
    caret-color: #528bff;                /* Color del cursor */
}

/* En Modo Claro, si quieres que cambie: */
html:not(.dark) #xmlInput, 
html:not(.dark) #xmlOutput {
    background-color: #ffffff !important;
    color: #24292e !important;
    border: 1px solid #d1d5da !important;
}

/* Estilo para resaltar que es un editor */
#xmlInput:focus, #xmlOutput:focus {
    border-color: #007bff !important;
    box-shadow: inset 0 0 8px rgba(0, 123, 255, 0.2) !important;
}

/* ==========================================================================
   RESETEO DE ESTILOS PRISM - NITIDEZ TOTAL
   ========================================================================== */

/* 1. Quitar sombras que causan distorsión y ajustar fuentes */
#xmlCode, 
#xmlCode span,
#xmlVisualizer,
pre[class*="language-"] {
    text-shadow: none !important;      /* Elimina el efecto borroso */
    box-shadow: none !important;       /* Elimina bordes internos raros */
    font-family: 'Fira Code', 'Consolas', monospace !important;
    font-size: 14px !important;
    -webkit-font-smoothing: antialiased; /* Mejora la nitidez en Chrome/Edge */
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Control del Fondo según el Tema de ToolsProDev */

/* TEMA CLARO (Cuando NO hay clase .dark) */
html:not(.dark) #xmlVisualizer {
    background-color: #ffffff !important; /* Fondo blanco puro */
}
html:not(.dark) #visualizerWrapper {
    border: 1px solid #d1d5da !important;
}

/* TEMA OSCURO (Cuando SI hay clase .dark) */
html.dark #xmlVisualizer {
    background-color: #1e1e1e !important; /* Fondo gris oscuro VS Code */
}
html.dark #visualizerWrapper {
    border: 1px solid #444 !important;
}

/* 3. Ajuste de colores de etiquetas para Tema Claro (Prism suele venir oscuro) */
html:not(.dark) .token.tag { color: #22863a !important; }        /* Verde */
html:not(.dark) .token.attr-name { color: #6f42c1 !important; }  /* Púrpura */
html:not(.dark) .token.attr-value { color: #032f62 !important; } /* Azul oscuro */
html:not(.dark) .token.punctuation { color: #24292e !important; }/* Negro grisáceo */

/* ==========================================================================
   FIX: VISIBILIDAD MODO OSCURO (SOLO PARA EL VISUALIZADOR)
   ========================================================================== */

/* 1. Forzar color claro al texto plano y base en modo oscuro */
html.dark #xmlCode,
html.dark .token,
html.dark .token.plain-text {
    color: #d4d4d4 !important; /* Gris claro tipo VS Code */
}

/* 2. Colores específicos para que el resaltado resalte sobre el fondo oscuro */
html.dark .token.tag { color: #569cd6 !important; }         /* Azul */
html.dark .token.attr-name { color: #9cdcfe !important; }   /* Celeste */
html.dark .token.attr-value { color: #ce9178 !important; }  /* Naranja suave */
html.dark .token.punctuation { color: #d4d4d4 !important; } /* Gris claro */
html.dark .token.comment { color: #6a9955 !important; }     /* Verde */

/* 3. Asegurar que el fondo del visualizador sea oscuro en modo fullscreen oscuro */
html.dark .container.is-fullscreen #xmlVisualizer {
    background-color: #1e1e1e !important;
}

/* ==========================================
   RESPONSIVE: UNA COLUMNA BAJO 768px
   ========================================== */

   @media (max-width: 768px) {
    /* Cambiamos el contenedor a vertical */
    .tool-grid {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Los paneles ocupan el 100% del ancho */
    .editor-panel {
        width: 100% !important;
    }

    /* Ajustamos la altura para que sea cómodo en móvil */
    #xmlInput, 
    #visualizerWrapper,
    #xmlOutput {
        height: 350px !important;
    }

    /* Los botones de control se apilan para que sean fáciles de tocar */
    .controls {
        flex-direction: column;
        gap: 8px;
    }

    .controls button {
        width: 100%;
        padding: 12px; /* Un poco más de espacio para el dedo */
    }
}