/*
 Theme Name:   Mekachis 2.0 (App Style)
 Description:  Tema oscuro estilo App A Escote para Luermo.com
 Author:       ChiS
 Template:     generatepress
 Version:      1.0.0
*/

/* =================================================== */
/* DISEÑO "APP A ESCOTE" - GENERATEPRESS DEFINITIVO    */
/* =================================================== */

/* 1. MODO OSCURO GLOBAL Y LIMPIEZA */
body, html, .site {
    background-color: #121212 !important; /* Fondo negro puro */
    color: #e0e0e0 !important; /* Texto gris claro para no deslumbrar */
    font-family: system-ui, -apple-system, sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important; /* VITAL: Evita que la pantalla del móvil se mueva a los lados */
}

/* 2. REPARACIÓN DEL BÚNKER BLANCO DE GENERATEPRESS */
.site-header, .inside-header, .main-navigation, .inside-navigation {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* ¡NUEVO! FULMINAR BOTONES DUPLICADOS, CABECERAS EXTRA Y BUSCADORES */
#mobile-header, 
.header-widget, 
.widget_search, 
.search-form, 
.menu-bar-items, 
.navigation-search, 
.search-modal { 
    display: none !important; 
}

/* 3. CABECERA FLOTANTE TIPO APP UNIFICADA */
.site-header {
    background-color: #1a1a1a !important; /* Gris oscuro para la tarjeta */
    border-radius: 16px !important;
    max-width: 1100px !important; /* Límite de ancho AMPLIADO para aprovechar pantalla */
    margin: 20px auto 15px auto !important; /* Menos separación con los artículos de abajo */
    padding: 20px !important; 
    border: 1px solid #333 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6) !important;
    width: 96% !important; /* Deja pasillo a los lados siempre */
    box-sizing: border-box !important;
}

/* ORDENADOR: Columna perfecta (Logo arriba, botones abajo) */
@media (min-width: 769px) {
    .inside-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    
    .site-logo, .site-branding, .custom-logo {
        margin: 0 auto 10px auto !important; 
        display: block !important;
        text-align: center !important;
    }
    
    .custom-logo {
        max-width: 350px !important;
        height: auto !important;
    }

    .main-navigation ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        padding: 0 !important; 
        margin: 0 !important;
        list-style: none !important;
    }
}

.main-navigation ul li {
    margin: 0 !important; /* Limpieza de márgenes extra */
}

/* Estilo universal de los botones (Ordenador) */
.main-navigation ul li a {
    background-color: #2a2a2a !important; 
    color: #c0ff00 !important; /* Verde Neón */
    padding: 12px 25px !important;
    border-radius: 30px !important; 
    font-size: 18px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: inline-block !important;
    border: 2px solid #333 !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

.main-navigation ul li.current-menu-item a, 
.main-navigation ul li a:hover {
    background-color: #4db8ff !important; /* Azul Mekachis */
    color: #000 !important; 
    border-color: #4db8ff !important;
}

/* 6. ZONA DE CONTENIDO */
.site-content, .site-main, .content-area {
    max-width: 1100px !important; 
    margin: 0 auto !important;
    width: 96% !important; 
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 7. LA TARJETA DEL ARTÍCULO */
.inside-article {
    background-color: #1a1a1a !important;
    border-radius: 16px !important;
    padding: 45px !important; 
    border: 1px solid #333 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    width: 100% !important; 
    max-width: 100% !important;
}

article.post, article.page, .type-post, .type-page {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto 40px auto !important; 
    border-radius: 0 !important;
    width: 100% !important; 
    box-sizing: border-box !important;
}

/* 8. ANULADOR DE TRAMPAS */
.entry-content, .entry-summary, .inside-article > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.entry-content > *, .wp-block-group > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

p, li {
    font-size: 18px !important;
    line-height: 1.7 !important;
    color: #cfcfcf !important; 
}

h1, h2, h3, .entry-title, .entry-title a {
    color: #4db8ff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin-top: 0 !important;
}

.entry-content a {
    color: #c0ff00 !important;
    text-decoration: underline !important;
}

.sidebar, .widget-area, .widget_search, h1.page-title, .page-header, .archive-title {
    display: none !important;
}

/* =================================================== */
/* 10. REGLAS PARA MÓVILES (Fila única y Menú Centrado)*/
/* =================================================== */
@media (max-width: 768px) {
    .site-header {
        padding: 15px !important; 
        margin: 10px auto !important; 
        width: 96% !important;
        display: block !important; 
    }
    
    /* MÁGIA: Obligamos a Logo y Botón a estar en la misma línea */
    .inside-header {
        display: flex !important;
        flex-direction: row !important; /* En fila india */
        align-items: center !important;
        justify-content: space-between !important; /* Uno a cada lado */
        padding: 0 !important;
        width: 100% !important;
    }

    /* ¡BLINDAJE DEL LOGO! Le damos espacio para que NADIE lo aplaste */
    .site-branding, .site-logo {
        display: block !important; 
        margin: 0 !important;
        width: auto !important; 
        max-width: 75% !important; 
        text-align: left !important;
    }

    .custom-logo, .site-logo img {
        max-width: 100% !important; 
        height: auto !important;
        margin-bottom: 0 !important;
        display: block !important;
    }

    /* ¡MARTILLAZO!: Ocultamos toda la caja inferior oscura cuando el menú está cerrado */
    #site-navigation:not(.toggled) {
        display: none !important;
    }
    
    /* ¡DOBLE MARTILLAZO!: Ocultamos la hamburguesa que sobra dentro de esa caja inferior */
    #site-navigation .menu-toggle {
        display: none !important;
    }
    
    /* Dejamos visible y posicionamos SOLO el botón bueno de arriba */
    .mobile-menu-control-wrapper {
        display: block !important;
        margin-left: auto !important;
    }

    /* DISEÑO DEL BOTÓN HAMBURGUESA ÚNICO (Con tamaño fijo) */
    .mobile-menu-control-wrapper .menu-toggle {
        background-color: #2a2a2a !important;
        color: #c0ff00 !important; /* Verde Neón */
        border: 2px solid #333 !important;
        border-radius: 12px !important; 
        padding: 0 !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important; 
        height: 50px !important;
        margin: 0 !important;
    }
    
    /* Ocultamos la palabra "Menú" y dejamos solo el icono */
    .mobile-menu-control-wrapper .menu-toggle .mobile-menu {
        display: none !important;
    }

    .mobile-menu-control-wrapper .menu-toggle svg {
        width: 25px !important;
        height: 25px !important;
    }

    /* EL MENÚ DESPLEGADO (Una vez pulsada la hamburguesa) */
    #site-navigation.toggled {
        display: block !important;
        width: 96% !important;
        margin: 0 auto 15px auto !important;
    }

    #site-navigation.toggled .main-nav > ul {
        background-color: #1a1a1a !important; 
        padding: 25px 0 !important;
        margin: 0 !important;
        border: 1px solid #333 !important;
        border-radius: 16px !important; /* Nueva tarjeta elegante */
        display: block !important;
        box-shadow: 0 15px 25px rgba(0,0,0,0.8) !important;
    }
    
    .main-navigation ul li {
        text-align: center !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    .main-navigation ul li:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Botones azules gigantes y PERFECTAMENTE CENTRADOS */
    .main-navigation ul li a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 85% !important; 
        margin: 0 auto !important; /* Esto centra la pastilla en la pantalla */
        padding: 15px !important;
        font-size: 18px !important;
        text-align: center !important;
    }

    .inside-article, .comments-area {
        padding: 25px 20px !important; 
    }
    h1.entry-title {
        font-size: 26px !important;
    }
}

/* =================================================== */
/* 11. DISEÑO DE LOS COMENTARIOS                       */
/* =================================================== */
.comments-area {
    background-color: #1a1a1a !important; 
    border-radius: 16px !important;
    padding: 45px !important;
    margin: 0 auto 40px auto !important; 
    border: 1px solid #333 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

.comments-title, .comment-reply-title {
    color: #4db8ff !important; 
    font-weight: 800 !important;
    border-bottom: 1px solid #333 !important;
    padding-bottom: 15px !important;
    margin-bottom: 30px !important;
    font-size: 24px !important;
}

.comment-body {
    border-bottom: 1px dashed #333 !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
}

.comment-author cite, .comment-author cite a {
    color: #c0ff00 !important; 
    font-weight: bold !important;
    font-style: normal !important;
    font-size: 20px !important;
}

.comment-meta, .comment-meta a {
    color: #888 !important;
    font-size: 14px !important;
}

.comment-form input, .comment-form textarea {
    background-color: #222 !important; 
    border: 1px solid #444 !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* =================================================== */
/* 12. BOTÓN "VOLVER ARRIBA" (DISEÑO MEKACHIS)         */
/* =================================================== */
.generate-back-to-top, .generate-back-to-top:visited {
    background-color: #4db8ff !important; /* Azul eléctrico Mekachis */
    color: #000 !important;
    border-radius: 50% !important; /* Círculo perfecto */
    width: 50px !important;
    height: 50px !important;
    font-size: 22px !important;
    line-height: 50px !important;
    text-align: center !important;
    border: 2px solid #000 !important;
    box-shadow: 0 4px 15px rgba(77, 184, 255, 0.4) !important;
    transition: all 0.3s ease !important;
    bottom: 30px !important; /* Distancia desde el suelo */
    right: 20px !important;  /* Distancia desde la derecha */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
}

.generate-back-to-top:hover, .generate-back-to-top:focus {
    background-color: #c0ff00 !important; /* Se vuelve verde neón al tocarlo */
    color: #000 !important;
    transform: scale(1.1);
}