MediaWiki:Common.css

Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.

• Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
• Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
• Internet Explorer/Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
• Opera: Presiona Ctrl+F5.

/* --- DISEÑO PROFESIONAL ADAPTATIVO (ESCRITORIO VS CELULAR) --- */

/* ==================================================================
   1. REGLAS GENERALES (APLICAN SIEMPRE)
   ================================================================== */
/* Ocultar textos técnicos que a veces aparecen por error (como "Page Actions") */
#p-cactions h5,
#p-personal h5,
#p-logo h5,
.pBody h5 {
    display: none !important;
}

/* ==================================================================
   2. DISEÑO PARA COMPUTADOR (PANTALLAS GRANDES)
   Solo se activa si la pantalla es mayor a 800px
   ================================================================== */
@media only screen and (min-width: 801px) {

    /* --- LIMPIEZA BARRA LATERAL --- */
    .portlet:not(#p-cactions):not(#p-personal) {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding-top: 0 !important;
    }
    
    .portlet:not(#p-cactions):not(#p-personal) .pBody {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    /* --- TÍTULOS (AZUL MARCA #263355) --- */
    .portlet:not(#p-cactions):not(#p-personal) h3 {
        font-family: 'Segoe UI', Roboto, sans-serif !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #263355 !important;
        text-transform: uppercase;
        border: none !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    /* --- ESTILO DE BOTONES (HOVER Y CAJAS) --- */
    .portlet:not(#p-cactions):not(#p-personal) ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .portlet:not(#p-cactions):not(#p-personal) li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .portlet:not(#p-cactions):not(#p-personal) li a {
        display: block !important;
        background-color: #f8f9fa !important;
        border: 1px solid #e0e0e0 !important;
        color: #444 !important;
        padding: 7px 10px !important;
        margin-bottom: 4px !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        font-family: 'Segoe UI', sans-serif !important;
        font-size: 13px !important;
        transition: all 0.2s ease-in-out;
    }

    /* Flecha decorativa escritorio */
    .portlet:not(#p-cactions):not(#p-personal) li a::before {
        content: "›" !important;
        margin-right: 8px !important;
        color: #999 !important;
        font-weight: bold !important;
    }

    /* Efecto Hover Escritorio */
    .portlet:not(#p-cactions):not(#p-personal) li a:hover {
        background-color: #fff !important;
        border-color: #263355 !important;
        color: #263355 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
        padding-left: 15px !important;
    }
    
    .portlet:not(#p-cactions):not(#p-personal) li a:hover::before {
        color: #263355 !important;
    }
    
    /* Caja de búsqueda Escritorio */
    #searchInput {
        width: 90% !important;
        padding: 6px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
    }
    
    #searchGoButton, #mw-searchButton {
        background-color: #263355 !important;
        color: white !important;
        border: none !important;
        padding: 6px 15px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        margin-top: 5px !important;
    }
}

/* ==================================================================
   3. DISEÑO PARA CELULAR (SOLUCIÓN A TUS FOTOS)
   Se activa solo en pantallas pequeñas (menores a 800px)
   ================================================================== */
@media only screen and (max-width: 800px) {

    /* 1. ARREGLAR ESTRUCTURA GENERAL */
    #globalWrapper, #content, #column-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #content {
        padding: 10px !important; /* Espacio para leer cómodo */
    }

    /* 2. MOVER BARRA LATERAL AL FINAL Y LIMPIARLA */
    #column-one {
        position: static !important;
        width: 100% !important;
        padding: 20px 0 !important;
        background-color: #f4f4f4 !important; /* Fondo gris para diferenciar zona de links */
        clear: both !important;
    }

    .portlet {
        width: 95% !important;
        margin: 0 auto 20px auto !important; /* Centrar bloques */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .pBody {
        background: transparent !important;
        border: none !important;
    }

    /* 3. TÍTULOS EN MÓVIL (Más grandes y oscuros) */
    .portlet h3 {
        font-family: 'Segoe UI', Roboto, sans-serif !important;
        font-size: 16px !important; /* Más grande para leer en móvil */
        font-weight: 800 !important;
        color: #263355 !important;
        text-transform: uppercase;
        border-bottom: 2px solid #ccc !important; /* Línea separadora simple */
        margin-bottom: 10px !important;
        padding-bottom: 5px !important;
        display: block !important;
    }

    /* 4. ENLACES ESTILO "LISTA MÓVIL" (No botones flotantes) */
    .portlet ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .portlet li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .portlet li a {
        display: block !important;
        padding: 12px 10px !important; /* Botón alto para dedo */
        background-color: #fff !important; /* Fondo BLANCO puro */
        border-bottom: 1px solid #ddd !important; /* Línea gris entre opciones */
        color: #333 !important; /* TEXTO NEGRO OSCURO (Soluciona texto invisible) */
        font-size: 14px !important;
        text-decoration: none !important;
        font-weight: 500 !important;
    }
    
    /* Icono simple al final */
    .portlet li a::after {
        content: "›" !important;
        float: right !important;
        color: #999 !important;
        font-weight: bold !important;
        font-size: 18px !important;
    }

    /* 5. ARREGLAR CAJA DE BÚSQUEDA MÓVIL */
    #p-search .pBody {
        text-align: center !important;
    }
    
    #searchInput {
        width: 95% !important;
        padding: 10px !important; /* Grande para escribir fácil */
        border: 1px solid #999 !important;
        font-size: 16px !important; /* Evita zoom automático en iPhone */
    }
    
    #searchGoButton, #mw-searchButton {
        width: 95% !important;
        padding: 10px !important;
        background-color: #263355 !important;
        color: white !important;
        margin-top: 10px !important;
        font-size: 14px !important;
    }
}