Ir al contenido

Diferencia entre revisiones de «MediaWiki:Common.css»

Sin resumen de edición
Sin resumen de edición
Etiqueta: Revertido
Línea 1: Línea 1:
/*
/*
  * This is the CSS common to all desktop skins on en.Wikipedia.
  * ===================================================================
  * Styling inside .mw-parser-output should generally use TemplateStyles.
* HOJA DE ESTILO: VERSIÓN "EL TESORO DEL REY DE LOS PIRATAS"
* Inspirado en el mundo de One Piece. ¡Al abordaje!
*
* ,n                      ,_
* d'b                    ,d'
* d'`b                  d'`b
* d'` `b                d'` `b
* d'`  `b              d'`  `b
* d'`    `b            d'`    `b
* d'`      `b          d'`      `b
* d'        `b        d'        `b
* /            `\      /            `\
* /              `\    /              `\
* /________________`\  /________________`\
* `"""""""""""""""`    `"""""""""""""""`
* /""""\  /^\  /""""\
* \    /  \_/  \    /
* |  |  /  \  |  |
* |  |  \  /  |  |
* \    /  /"""\ \    /
* \__/  /    \ \__/
* /      \
* /_________\
*
  * ===================================================================
  */
  */
/* Reset italic styling set by user agent */
cite,
dfn {
font-style: inherit;
}
/* Straight quote marks for <q> */
q {
quotes: '"' '"' "'" "'";
}


/* Avoid collision of blockquote with floating elements by swapping margin and padding */
/* Importamos una fuente con sabor a aventura para los títulos */
blockquote {
@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');
overflow: hidden;
margin: 1em 0;
padding: 0 40px;
}


/* Consistent size for <small>, <sub> and <sup> */
/* --- Variables del Tesoro (Paleta de Colores y Fuentes) --- */
small {
:root {
font-size: 85%;
    --color-mar-profundo: #0a1f44; /* Azul oscuro del Grand Line */
    --color-oro-tesoro: #ffd700; /* Oro puro de Skypiea */
    --color-madera-sunny: #6b4a3a; /* Madera del Thousand Sunny */
    --color-pergamino: #fdf5e6; /* Color de un mapa antiguo */
    --color-tinta-mapa: #3a322d; /* Tinta para las leyendas */
    --color-vela-barco: #f5f5dc; /* Blanco de las velas */
    --color-bandera-roja: #d11a2a; /* Rojo de la bandera pirata */
   
    --fuente-pirata: 'Pirata One', cursive; /* Para gritar ¡SOY EL REY DE LOS PIRATAS! */
    --fuente-bitacora: 'Merriweather', serif; /* Para el texto del cuerpo, como una bitácora */
   
    --sombra-caja: 5px 5px 15px rgba(0, 0, 0, 0.4);
    --borde-madera: 4px solid var(--color-madera-sunny);
}
}


.mw-body-content sub,
/* --- Estilo General del Cuerpo (El Océano) --- */
.mw-body-content sup {
body {
font-size: 80%;
    background-color: var(--color-pergamino);
    background-image: url('https://www.transparenttextures.com/patterns/old-paper.png'); /* Textura sutil de papel viejo */
    font-family: var(--fuente-bitacora);
    color: var(--color-tinta-mapa);
    line-height: 1.6;
}
}


/* Same spacing for indented and unindented paragraphs on talk pages */
/* --- Encabezados (Gritos de Guerra) --- */
.ns-talk .mw-body-content dd {
h1, h2, h3, h4, h5, h6 {
margin-top: 0.4em;
    font-family: var(--fuente-pirata);
margin-bottom: 0.4em;
    color: var(--color-mar-profundo);
    letter-spacing: 1.5px;
    border-bottom: 2px dashed var(--color-madera-sunny);
    padding-bottom: 10px;
    margin-bottom: 1em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
}


/* Reduce page jumps by hiding collapsed/dismissed content */
h1 { font-size: 3.5em; }
.client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child),
h2 { font-size: 2.8em; }
h3 { font-size: 2.2em; }


/* Avoid FOUC/reflows on collapsed elements. */
/* --- Enlaces (Rutas en el Mapa) --- */
/* This copies MediaWiki's solution for T42812 to apply to innercollapse/outercollapse (T325115). */
a {
/* TODO: Use :is() selector at some reasonable future when support is good for Most Clients */
    color: var(--color-mar-profundo);
/* Reference: https://gerrit.wikimedia.org/g/mediawiki/core/+/ecda06cb2aef55b77c4b4d7ecda492d634419ead/resources/src/jquery/jquery.makeCollapsible.styles.less#75 */
    text-decoration: none;
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > p,
    font-weight: bold;
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > table,
    border-bottom: 1px dotted var(--color-mar-profundo);
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > thead + tbody,
    transition: all 0.3s ease-in-out;
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) tr:not( :first-child ),
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) .mw-collapsible-content,
 
/* Hide charinsert base for those not using the gadget */
#editpage-specialchars {
display: none;
}
}


/* Make the list of references smaller
a:hover, a:focus {
* Keep in sync with Template:Refbegin/styles.css
    color: var(--color-oro-tesoro);
* And Template:Reflist/styles.css
    background-color: var(--color-mar-profundo);
*/
    border-bottom-color: var(--color-oro-tesoro);
ol.references {
    padding: 2px 4px;
font-size: 90%;
    border-radius: 3px;
margin-bottom: 0.5em;
}
}


/* Cite customizations for Parsoid
/*
  * Once everything uses the one true parser these are just customizations
  * ===================================================================
* LA FICHA DE INFO (INFOBOX) - ¡EL CARTEL DE "SE BUSCA"!
* ===================================================================
  */
  */
span[ rel="mw:referencedBy" ] {
.infobox {
counter-reset: mw-ref-linkback 0;
    float: right;
    clear: right;
    width: 25em; /* Un poco más ancho para el dramatismo */
    margin: 0.5em 0 0.5em 1.5em;
    padding: 10px;
   
    background-color: var(--color-vela-barco);
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    border: var(--borde-madera);
    border-radius: 8px;
    box-shadow: var(--sombra-caja);
   
    font-size: 92%;
    color: var(--color-tinta-mapa);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
}


span[ rel='mw:referencedBy' ] > a::before {
.infobox:hover {
content: counter( mw-ref-linkback, lower-alpha );
    transform: translateY(-5px) scale(1.02);
font-size: 80%;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5);
font-weight: bold;
font-style: italic;
}
}


a[ rel="mw:referencedBy" ]::before {
/* Título de la ficha - El nombre del pirata buscado */
font-weight: bold;
.infobox .infobox-title,
content: "^";
.infobox .infobox-above,
.infobox caption {
    font-family: var(--fuente-pirata);
    font-size: 200%;
    font-weight: normal; /* La fuente ya es suficientemente audaz */
    text-align: center;
    color: var(--color-vela-barco);
    background-color: var(--color-madera-sunny);
    padding: 0.5em 0.2em;
    margin: -11px -11px 10px -11px; /* Para que ocupe todo el ancho */
    border-radius: 3px 3px 0 0;
    text-shadow: 2px 2px 3px #000;
    letter-spacing: 2px;
    text-transform: uppercase;
}
}


span[ rel="mw:referencedBy" ]::before {
/* Cabeceras y subcabeceras - Categorías del botín */
content: "^ ";
.infobox .infobox-header,
}
.infobox .infobox-subheader {
 
    background-color: #e0d7c8; /* Un tono de pergamino más oscuro */
.mw-ref > a[data-mw-group=lower-alpha]::after {
    font-weight: bold;
content: '[' counter( mw-Ref, lower-alpha ) ']';
    text-align: center;
}
    border-top: 1px solid var(--color-madera-sunny);
 
    border-bottom: 1px solid var(--color-madera-sunny);
.mw-ref > a[data-mw-group=upper-alpha]::after {
content: '[' counter( mw-Ref, upper-alpha ) ']';
}
 
.mw-ref > a[data-mw-group=decimal]::after {
content: '[' counter( mw-Ref, decimal ) ']';
}
 
.mw-ref > a[data-mw-group=lower-roman]::after {
content: '[' counter( mw-Ref, lower-roman ) ']';
}
 
.mw-ref > a[data-mw-group=upper-roman]::after {
content: '[' counter( mw-Ref, upper-roman ) ']';
}
 
.mw-ref > a[data-mw-group=lower-greek]::after {
content: '[' counter( mw-Ref, lower-greek ) ']';
}
 
/* Styling for jQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) {
font-weight: normal;
padding-right: 0.2em;
padding-left: 0.2em;
}
 
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
/* @noflip */
float: left;
}
 
/* Lists in wikitable data cells are always left-aligned */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
/* @noflip */
text-align: left;
}
 
/* Change the external link icon to a PDF icon for all PDF files */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
/* @noflip */
padding: 8px 18px 8px 0;
}
 
/* System messages styled similarly to fmbox */
/* for .mw-warning-with-logexcerpt, behavior of this line differs between
* the edit-protected notice and the special:Contribs for blocked users
* The latter has specificity of 3 classes so we have to triple up here.
*/
.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon {
clear: both;
margin: 0.2em 0;
border: 1px solid #bb7070;
background-color: var(--background-color-error-subtle, #ffdbdb);
padding: 0.25em 0.9em;
box-sizing: border-box;
}
 
/* default colors for partial block message */
/* gotta get over the hump introduced by the triple class above */
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt.mw-warning-with-logexcerpt {
border-color: #fc3;
background-color: var(--background-color-warning-subtle, #fef6e7);
}
 
/* Minimum thumb width */
figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'],
.thumbinner {
min-width: 100px;
}
 
/* Prevent floating boxes from overlapping any category listings,
  file histories, edit previews, and edit [Show changes] views. */
#mw-subcategories,
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
clear: both;
}
 
/* Styling for tags in changes pages */
.mw-tag-markers {
font-style: italic;
font-size: 90%;
}
 
/* Hide stuff meant for accounts with special permissions. Made visible again in
  [[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
  [[MediaWiki:Group-abusefilter-helper.css]], [[MediaWiki:Group-patroller.css]],
  [[MediaWiki:Group-templateeditor.css]], [[MediaWiki:Group-extendedmover.css]],
  [[MediaWiki:Group-extendedconfirmed.css]], and [[Mediawiki:Group-autoconfirmed.css]]. */
.checkuser-show,
.sysop-show,
.abusefilter-show,
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
display: none;
}
 
/* Hide the redlink generated by {{Editnotice}},
  this overrides the ".sysop-show { display: none; }" above that applies
  to the same link as well. See [[phab:T45013]]
 
  Hide the images in editnotices to keep them readable in VE view.
  Long term, editnotices should become a core feature so that they can be designed responsive. */
.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,
.ve-ui-mwNoticesPopupTool-item .mbox-image,
.ve-ui-mwNoticesPopupTool-item .mbox-imageright {
display: none !important;
}
 
/* Remove bullets when there are multiple edit page warnings */
ul.permissions-errors {
margin: 0;
}
 
ul.permissions-errors > li {
list-style: none;
}
 
/* larger inline math */
span.mwe-math-mathml-inline {
font-size: 118%;
}
 
/* Make <math display="block"> be left aligned with one space indent for
* compatibility with style conventions
*/
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
margin-left: 1.6em !important;
margin-top: 0.6em;
margin-bottom: 0.6em;
}
}


.mwe-math-mathml-display math {
/* Etiquetas y Datos - Detalles de la recompensa */
display: inline;
.infobox .infobox-label,
.infobox th {
    font-weight: bold;
    padding-right: 0.8em;
    text-align: left;
    color: var(--color-mar-profundo);
}
}


@media screen {
.infobox .infobox-data,
/* Put a chequered background behind images, only visible if they have transparency,
* except on main, user, and portal namespaces
*/
body:not(.ns-0):not(.ns-2):not(.ns-100) .gallerybox .thumb img {
background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
}
 
/* Display "From Wikipedia, the free encyclopedia" in skins that support it,
  do not apply to print mode */
#siteSub {
display: block;
}
}
 
/* Hide FlaggedRevs notice UI when there are no pending changes */
.flaggedrevs_draft_synced,
.flaggedrevs_stable_synced,
/* "Temporary" to remove links in sidebar T255381 */
#t-upload,
/* Hide broken download box on Special:Book pending T285400 */
.mw-special-Book #coll-downloadbox {
display: none;
}
 
/*
* BELOW HERE THERE BE SOONTOBE TEMPLATESTYLES THINGS;
* SEE [[MediaWiki talk:Common.css/to do]]
*/
 
/* Infobox template style */
.infobox {
border: 1px solid #a2a9b1;
border-spacing: 3px;
background-color: #f8f9fa;
color: black;
/* @noflip */
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
font-size: 88%;
line-height: 1.5em;
width: 22em;
}
 
.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox th,
.infobox td {
.infobox td {
vertical-align: top;
    text-align: left;
}
}


.infobox-label,
/* La barra de navegación (v-d-e) se hace más sutil */
.infobox-data,
.infobox .infobox-navbar {
/* Remove element selector when every .infobox thing is using the standard module/templates  */
    font-size: 80%;
.infobox th,
    text-align: right;
.infobox td {
    padding-top: 5px;
/* @noflip */
text-align: left;
}
}


/* Remove .infobox when element selectors above are removed */
/* --- Tablas (Manifiesto de Carga) --- */
.infobox .infobox-above,
.wikitable {
.infobox .infobox-title,
    background-color: var(--color-vela-barco);
/* Remove element selector when every .infobox thing is using the standard module/templates  */
    border: 2px solid var(--color-madera-sunny);
.infobox caption {
    border-collapse: collapse;
font-size: 125%;
    box-shadow: var(--sombra-caja);
font-weight: bold;
    margin: 1.5em auto;
text-align: center;
}
}


.infobox-title,
.wikitable > caption {
/* Remove element selector when every .infobox thing is using the standard module/templates  */
    font-family: var(--fuente-pirata);
.infobox caption {
    font-size: 1.5em;
padding: 0.2em;
    color: var(--color-mar-profundo);
    padding: 0.5em;
}
}


/* Remove .infobox when element selectors above are removed */
.wikitable th {
.infobox .infobox-header,
    background-color: var(--color-madera-sunny);
.infobox .infobox-subheader,
    color: var(--color-vela-barco);
.infobox .infobox-image,
    padding: 0.8em;
.infobox .infobox-full-data,
    border: 1px solid #4a342a;
.infobox .infobox-below {
    font-weight: bold;
text-align: center;
}
}


/* Remove .infobox when element selectors above are removed */
.wikitable td {
.infobox .infobox-navbar {
    padding: 0.6em;
/* @noflip */
    border: 1px dashed #c5b8a5; /* Líneas punteadas como en un viejo libro */
text-align: right;
}
}


/* Normal font styling for wikitable row headers with scope="row" tag */
/* Filas alternas, como tablones de madera */
.wikitable.plainrowheaders th[scope=row],
.wikitable tr:nth-of-type(even) {
.wikitable.plainrowheaders th[scope=rowgroup] {
    background-color: #f0eae0;  
font-weight: normal;
/* @noflip */
text-align: left;
}
}


/* Remove underlines from certain links */
/* --- Citas y Referencias (Leyendas y Anotaciones del Mapa) --- */
.nounderlines a,
blockquote {
.IPA a:link,
    overflow: hidden;
.IPA a:visited {
    margin: 1.5em 40px;
text-decoration: none !important;
    padding: 1em 2em;
    border-left: 5px solid var(--color-oro-tesoro);
    background: #faf5eb;
    font-style: italic;
    font-size: 1.1em;
    position: relative;
}
}


/* Prevent line breaks in silly places where desired (nowrap)
blockquote::before {
  and links when we don't want them to (nowraplinks a) */
    content: '“';
.nowrap,
    font-family: var(--fuente-pirata);
.nowraplinks a {
    font-size: 4em;
white-space: nowrap;
    color: var(--color-oro-tesoro);
    opacity: 0.5;
    position: absolute;
    left: 10px;
    top: -10px;
}
}


/* But allow wrapping where desired: */
ol.references {
.wrap,
    font-size: 90%;
.wraplinks a {
    background: #f7f2e9;
white-space: normal;
    padding: 1em 1em 1em 3em;
}
    border: 1px solid #e0d7c8;
 
    border-radius: 5px;
/* texhtml class for inline math (based on generic times-serif class) */
span.texhtml {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 118%;
line-height: 1;
white-space: nowrap;
/* Force tabular and lining display for texhtml */
font-variant-numeric: lining-nums tabular-nums;
font-kerning: none;
}
}


span.texhtml span.texhtml {
/* ¡Y un último toque pirata para la barra de desplazamiento! */
font-size: 100%;
::-webkit-scrollbar {
    width: 12px;
}
}


@media screen {
::-webkit-scrollbar-track {
.nochecker .gallerybox .thumb img {
    background: var(--color-pergamino);
background-image: none;
    border-left: 1px solid var(--color-madera-sunny);
}
}
}


.infobox {
::-webkit-scrollbar-thumb {
  background-color: #f9f9f9;
    background: var(--color-madera-sunny);
  border: 1px solid #aaa;
    border-radius: 6px;
  padding: 5px;
    border: 2px solid var(--color-oro-tesoro);
  font-size: 90%;
  width: 22em;
}
}


/* Put anything you mean to be a sitewide addition above the TemplateStyles
::-webkit-scrollbar-thumb:hover {
* comment above.
    background: #8a6a5a;
*/
 
/* Estilos para Fichas (Infobox) */
.infobox {
  border: 1px solid #aaa;
  background-color: #f9f9f9;
  color: black;
  margin: 0.5em 0 0.5em 1em;
  padding: 0.2em;
  float: right;
  clear: right;
}
}

Revisión del 22:10 21 sep 2025

/*
 * ===================================================================
 * HOJA DE ESTILO: VERSIÓN "EL TESORO DEL REY DE LOS PIRATAS"
 * Inspirado en el mundo de One Piece. ¡Al abordaje!
 *
 * ,n                      ,_
 * d'b                    ,d'
 * d'`b                   d'`b
 * d'` `b                 d'` `b
 * d'`   `b               d'`   `b
 * d'`     `b             d'`     `b
 * d'`       `b           d'`       `b
 * d'         `b         d'         `b
 * /            `\       /            `\
 * /              `\     /              `\
 * /________________`\   /________________`\
 * `"""""""""""""""`     `"""""""""""""""`
 * /""""\  /^\  /""""\
 * \    /  \_/  \    /
 * |  |  /   \  |  |
 * |  |  \   /  |  |
 * \    /  /"""\ \    /
 * \__/  /     \ \__/
 * /       \
 * /_________\
 *
 * ===================================================================
 */

/* Importamos una fuente con sabor a aventura para los títulos */
@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

/* --- Variables del Tesoro (Paleta de Colores y Fuentes) --- */
:root {
    --color-mar-profundo: #0a1f44; /* Azul oscuro del Grand Line */
    --color-oro-tesoro: #ffd700; /* Oro puro de Skypiea */
    --color-madera-sunny: #6b4a3a; /* Madera del Thousand Sunny */
    --color-pergamino: #fdf5e6; /* Color de un mapa antiguo */
    --color-tinta-mapa: #3a322d; /* Tinta para las leyendas */
    --color-vela-barco: #f5f5dc; /* Blanco de las velas */
    --color-bandera-roja: #d11a2a; /* Rojo de la bandera pirata */
    
    --fuente-pirata: 'Pirata One', cursive; /* Para gritar ¡SOY EL REY DE LOS PIRATAS! */
    --fuente-bitacora: 'Merriweather', serif; /* Para el texto del cuerpo, como una bitácora */
    
    --sombra-caja: 5px 5px 15px rgba(0, 0, 0, 0.4);
    --borde-madera: 4px solid var(--color-madera-sunny);
}

/* --- Estilo General del Cuerpo (El Océano) --- */
body {
    background-color: var(--color-pergamino);
    background-image: url('https://www.transparenttextures.com/patterns/old-paper.png'); /* Textura sutil de papel viejo */
    font-family: var(--fuente-bitacora);
    color: var(--color-tinta-mapa);
    line-height: 1.6;
}

/* --- Encabezados (Gritos de Guerra) --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-pirata);
    color: var(--color-mar-profundo);
    letter-spacing: 1.5px;
    border-bottom: 2px dashed var(--color-madera-sunny);
    padding-bottom: 10px;
    margin-bottom: 1em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

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

/* --- Enlaces (Rutas en el Mapa) --- */
a {
    color: var(--color-mar-profundo);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dotted var(--color-mar-profundo);
    transition: all 0.3s ease-in-out;
}

a:hover, a:focus {
    color: var(--color-oro-tesoro);
    background-color: var(--color-mar-profundo);
    border-bottom-color: var(--color-oro-tesoro);
    padding: 2px 4px;
    border-radius: 3px;
}

/*
 * ===================================================================
 * LA FICHA DE INFO (INFOBOX) - ¡EL CARTEL DE "SE BUSCA"!
 * ===================================================================
 */
.infobox {
    float: right;
    clear: right;
    width: 25em; /* Un poco más ancho para el dramatismo */
    margin: 0.5em 0 0.5em 1.5em;
    padding: 10px;
    
    background-color: var(--color-vela-barco);
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    border: var(--borde-madera);
    border-radius: 8px;
    box-shadow: var(--sombra-caja);
    
    font-size: 92%;
    color: var(--color-tinta-mapa);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.infobox:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5);
}

/* Título de la ficha - El nombre del pirata buscado */
.infobox .infobox-title,
.infobox .infobox-above,
.infobox caption {
    font-family: var(--fuente-pirata);
    font-size: 200%;
    font-weight: normal; /* La fuente ya es suficientemente audaz */
    text-align: center;
    color: var(--color-vela-barco);
    background-color: var(--color-madera-sunny);
    padding: 0.5em 0.2em;
    margin: -11px -11px 10px -11px; /* Para que ocupe todo el ancho */
    border-radius: 3px 3px 0 0;
    text-shadow: 2px 2px 3px #000;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Cabeceras y subcabeceras - Categorías del botín */
.infobox .infobox-header,
.infobox .infobox-subheader {
    background-color: #e0d7c8; /* Un tono de pergamino más oscuro */
    font-weight: bold;
    text-align: center;
    border-top: 1px solid var(--color-madera-sunny);
    border-bottom: 1px solid var(--color-madera-sunny);
}

/* Etiquetas y Datos - Detalles de la recompensa */
.infobox .infobox-label,
.infobox th {
    font-weight: bold;
    padding-right: 0.8em;
    text-align: left;
    color: var(--color-mar-profundo);
}

.infobox .infobox-data,
.infobox td {
    text-align: left;
}

/* La barra de navegación (v-d-e) se hace más sutil */
.infobox .infobox-navbar {
    font-size: 80%;
    text-align: right;
    padding-top: 5px;
}

/* --- Tablas (Manifiesto de Carga) --- */
.wikitable {
    background-color: var(--color-vela-barco);
    border: 2px solid var(--color-madera-sunny);
    border-collapse: collapse;
    box-shadow: var(--sombra-caja);
    margin: 1.5em auto;
}

.wikitable > caption {
    font-family: var(--fuente-pirata);
    font-size: 1.5em;
    color: var(--color-mar-profundo);
    padding: 0.5em;
}

.wikitable th {
    background-color: var(--color-madera-sunny);
    color: var(--color-vela-barco);
    padding: 0.8em;
    border: 1px solid #4a342a;
    font-weight: bold;
}

.wikitable td {
    padding: 0.6em;
    border: 1px dashed #c5b8a5; /* Líneas punteadas como en un viejo libro */
}

/* Filas alternas, como tablones de madera */
.wikitable tr:nth-of-type(even) {
    background-color: #f0eae0; 
}

/* --- Citas y Referencias (Leyendas y Anotaciones del Mapa) --- */
blockquote {
    overflow: hidden;
    margin: 1.5em 40px;
    padding: 1em 2em;
    border-left: 5px solid var(--color-oro-tesoro);
    background: #faf5eb;
    font-style: italic;
    font-size: 1.1em;
    position: relative;
}

blockquote::before {
    content: '“';
    font-family: var(--fuente-pirata);
    font-size: 4em;
    color: var(--color-oro-tesoro);
    opacity: 0.5;
    position: absolute;
    left: 10px;
    top: -10px;
}

ol.references {
    font-size: 90%;
    background: #f7f2e9;
    padding: 1em 1em 1em 3em;
    border: 1px solid #e0d7c8;
    border-radius: 5px;
}

/* ¡Y un último toque pirata para la barra de desplazamiento! */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-pergamino);
    border-left: 1px solid var(--color-madera-sunny);
}

::-webkit-scrollbar-thumb {
    background: var(--color-madera-sunny);
    border-radius: 6px;
    border: 2px solid var(--color-oro-tesoro);
}

::-webkit-scrollbar-thumb:hover {
    background: #8a6a5a;
}