Diferencia entre revisiones de «MediaWiki:Common.css»

/*
 * ===================================================================
 * PERGAMINO DE ESTILOS: VERSIÓN "VOLUNTAD DE FUEGO MODERNA"
 * Inspirado en el universo de Naruto, con un toque del siglo XXI.
 *
 * /#######((((((((((((((((((((((########
 * /######((((((((((((((((((((((((((#######
 * /####((((((((((((((((((((((((((((((#####
 * /###((((((((((((((((((((((((((((((((####
 * /##((((((((((((((((/ \((((((((((((((####
 * /##((((((((((((((((| O |((((((((((((((###
 * '##(((((((((((((((( \ /((((((((((((((###
 * '##((((((((((((((((((((((((((((((((((###
 * '###((((((((((((((((((((((((((((((((####
 * '####((((((((((((((((((((((((((((((#####
 * '######((((((((((((((((((((((((((#######
 * \#######((((((((((((((((((((((########
 *
 * ===================================================================
 */

/* Importamos fuentes modernas y legibles, con un toque de pincel */
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&family=Inter:wght@400;700&display=swap');

/* --- Chakra de Estilos (Variables de Color y Fuentes) --- */
:root {
    --color-naranja-naruto: #ff8c00;
    --color-verde-konoha: #5a804e;
    --color-azul-shinobi: #1a325f;
    --color-rojo-sharingan: #d11a2a;

    /* Esquema Claro (Por defecto) */
    --color-fondo: #fdfaf3;
    --color-texto: #3a322d;
    --color-superficie: #ffffff; /* Para infobox, tablas, etc. */
    --color-borde: #e0d7c8;
    --color-texto-cabecera: #1a325f;

    --fuente-jutsu: 'Yuji Syuku', serif;
    --fuente-cronica: 'Inter', sans-serif;

    --sombra-suave: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sombra-media: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radio-borde: 12px;
}

/* --- Modo Oscuro (Jutsu de Sustitución de Apariencia) --- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-fondo: #1a1a1a;
        --color-texto: #e0e0e0;
        --color-superficie: #2a2a2a;
        --color-borde: #444444;
        --color-texto-cabecera: #a3b8ff;
    }
}

/* --- Estilo General del Cuerpo (El Mundo Shinobi) --- */
body {
    background-color: var(--color-fondo);
    font-family: var(--fuente-cronica);
    color: var(--color-texto);
    line-height: 1.8;
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Centramos el contenido para una mejor lectura en pantallas grandes */
.mw-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

/* --- Encabezados (Nombres de Jutsus) --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-jutsu);
    color: var(--color-texto-cabecera);
    letter-spacing: 1.5px;
    border-bottom: 2px solid var(--color-naranja-naruto);
    padding-bottom: 12px;
    margin: 2em 0 1em;
}

h1::before {
    content: '🍥';
    margin-right: 15px;
    font-family: sans-serif;
    color: var(--color-naranja-naruto);
}

h1 { font-size: 3.5em; }
h2 { font-size: 2.8em; }
h3 { font-size: 2.2em; }

/* --- Enlaces (Caminos del Shinobi) --- */
a {
    color: var(--color-verde-konoha);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

a:hover, a:focus {
    color: var(--color-naranja-naruto);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/*
 * ===================================================================
 * LA FICHA DE INFO (INFOBOX) - ¡EL LIBRO BINGO!
 * ===================================================================
 */
.infobox {
    float: right;
    clear: right;
    width: 25em;
    margin: 0.5em 0 1em 1.5em;
    padding: 1.2em;
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
    font-size: 92%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.infobox:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-media);
    border-color: var(--color-naranja-naruto);
}

.infobox .infobox-title {
    font-family: var(--fuente-jutsu);
    font-size: 1.8em;
    text-align: center;
    color: white;
    background: linear-gradient(45deg, var(--color-azul-shinobi), var(--color-verde-konoha));
    padding: 0.8em 0.5em;
    margin: -1.2em -1.2em 1em -1.2em;
    border-radius: var(--radio-borde) var(--radio-borde) 0 0;
}

.infobox .infobox-header {
    background-color: transparent;
    font-weight: bold;
    text-align: center;
    border-top: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
    padding: 0.5em;
}

.infobox .infobox-label {
    font-weight: bold;
    color: var(--color-texto-cabecera);
}

/*
 * ===================================================================
 * TABLA DE CONTENIDOS (ÍNDICE DEL PERGAMINO)
 * ===================================================================
 */
#toc {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: 1.5em;
    margin: 2em 0;
    box-shadow: var(--sombra-suave);
}

#toc .toctitle {
    font-family: var(--fuente-jutsu);
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 1em;
}

#toc ul {
    list-style: none;
    padding-left: 0;
}

#toc ul ul {
    padding-left: 2em;
}

/* --- Tablas (Registro de Misiones) --- */
.wikitable {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-collapse: collapse;
    box-shadow: var(--sombra-suave);
    margin: 2em 0;
    width: 100%;
    border-radius: var(--radio-borde);
    overflow: hidden; /* Clave para que el border-radius afecte a th */
}

.wikitable th {
    background-color: var(--color-azul-shinobi);
    color: #fff;
    padding: 1em;
    font-weight: bold;
    text-align: left;
}

.wikitable td {
    padding: 1em;
    border-bottom: 1px solid var(--color-borde);
}

.wikitable tr:last-child td {
    border-bottom: none;
}

/* --- Citas (Palabras de Leyendas) --- */
blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-left: 5px solid var(--color-naranja-naruto);
    background: var(--color-superficie);
    font-style: italic;
    font-size: 1.1em;
    border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
}

/* --- Barra de Desplazamiento Personalizada --- */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-fondo);
}

::-webkit-scrollbar-thumb {
    background: var(--color-verde-konoha);
    border-radius: 10px;
    border: 2px solid var(--color-fondo);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-naranja-naruto);
}