MediaWiki:Common.css

/* Los estilos CSS definidos aquí se aplicarán a todas las pieles (skins) */

/* Tablas con la clase infobox y la clase adicional bordered */
.infobox.bordered {
   border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
   border: 1px solid #aaaaaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
   border: 0;
}

/*Cambio en los enlaces al pasar el cursor por encima*/
a:hover {
   color:darkgreen;
   text-shadow:0 0 3px springgreen;
   -moz-text-shadow:0 0 3px springgreen;
   -webkit-text-shadow:0 0 3px springgreen;
}

/*[[Plantilla:Imagen pop-up]]*/
.imagenpopup .popup {display: none; speak: none;}

.imagenpopup .enlace a {color:#008000;}

.imagenpopup:hover .popup {
	background: transparent;
	padding: 2em 1em 1em 2em;
	display: inline;
	position: absolute;
	margin-left:-2em;
	margin-top:-2em;
	z-index: 10;
}

/* Aspecto de las galerías (etiqueta gallery) */
table.gallery {
	border:none;
}

table.gallery td {
	border:none;
	font-size:95%;
}

div.gallerybox div.thumb:hover,div.gallerybox div.thumb div:hover {
	background-color:Orange;
}

div.gallerybox div.thumb:hover {
	-moz-box-shadow:0 0 0.5em 0.1em #598EFF;
}
/***Mayúsculas pequeñas***/
.Mayusculas {
   font-variant:small-caps;
}

/* Resalta con borde los cambios del diff, solo al pasar el mouse por encima */
.diff tr:hover del, .diff tr:hover ins {outline:2px solid #1e90ff;}

/*
----------------
TEXTO EXPANSIBLE
----------------
Estas dos clases hacen que un texto oculto sea visible y se expanda al poner el ratón sobre otro texto. Original de [[w:c:uncyclopedia|Uncyclopedia]] y traducción hecha en [[w:c:inciclopedia|Inciclopedia]]

NOTA: '''''Solo sirve para elementos de un mismo bloque de texto, es decir por ejemplo <nowiki><span></nowiki>'''''

Un ejemplo de uso:
 <nowiki><span class="textovisible">Esto lo ves <span class="textooculto">Esto no lo veías</span></span></nowiki>
;Muestra (pon el raton encima del texto):<span class="textovisible">Esto lo ves <span class="textooculto">Esto no lo veías</span></span>

Para mayor comodidad se ha creado [[plantilla:expansible]]*/
/* allows for expanding hidden sig sections (experimental) -Dawg */
.textooculto { display: none }
.textovisible:hover .textooculto { display: inline !important }
/*

Variación hecha por [[user:Chixpy]] para poder hacer menús a con div ya que en el anterior no se podían usar. Para mayor comodidad se ha creado [[plantilla:Menú expansible]].*/
.menuoculto { display: none }
.menuvisible:hover .menuoculto { display: block !important }

/* Estilos de TOC (tabla de contenido)*/
 
#toc {
    margin: 10px;
    border: 5px outset saddlebrown;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    font-family: 'Trebuchet MS', 'Comic Sans MS', 'Helvetica', sans-serif;
    background-color: lightgreen;
}
#toctitle {
    margin-top: -3px;
    margin-bottom: 7px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border:5px outset saddlebrown;
    -moz-box-shadow:0 0 5px springgreen;
    font-family: 'FinkHeavy', 'Kristen ITC', 'Trebuchet MS', 'Comic Sans MS', sans-serif;
    background:lightgreen;
}

.toc:hover {
    -moz-box-shadow:0 0 15px lime;
    -webkit-box-shadow:0 0 15px lime;
}

.toctext:hover { 
    text-shadow:0 0 5px green;
    color:Black;
}

#toclevel-1:hover {
     text-shadow:0 0 5px blue; 
     color:white;
} 
.tocnumber:hover { 
   text-shadow:0 0 5px blue; 
   color:white;
} 
.toclevel-1:hover {
   text-shadow:0 0 5px #29951a; 
   color:red;
}

/*** IMÁGENES (extraído de WikiDex, la enciclopedia Pokémon) ***/
/* Fondo cuadriculado en imágenes transparentes */
body.ns-6 #file img {
	background:url('data:image/gif;base64,R0lGODdhEAAQAIABAO/v7////ywAAAAAEAAQAAACH4RvoauIzNyBSyYaLMDZcv15HAaSIlWiJ5Sya/RWVgEAOw==') repeat fixed;
}
/* Fondo oscuro al pasar mouse por encima */
body.ns-6 #file img:hover {
	background:none #333;
}

/* Eliminamos el 'outline' de las imágenes */
a.image { outline: none; }
 
/* Aspecto de los thumbs */
div.thumbinner {
	background-color:green;
	background:-moz-linear-gradient(center top, limegreen 0%, green 100%);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, limegreen), color-stop(100%, green));
	filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='limegreen', startColorstr='green', gradientType='0');
	border:none;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	color:#FFFFFF !important;
	-moz-box-shadow:2px 2px 5px lime;
	-webkit-box-shadow:2px 2px 5px lime;
	box-shadow:2px 2px 5px lime;
	padding: 4px;
	padding-top:5px !important; /* Un píxel más para igualar con los lados */
}
 
.thumbinner a, .thumbinner a:visited { color:yellow; }

.thumbinner a:hover { color:yellow; }

.thumbinner a.internal {
    display: none;
}

.content figcaption, .content .thumbcaption {
	color: #FFFFFF
}
 
img.thumbimage {
	background-color:#f9f9f9;
	border:none;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}
 
a.magnify.sprite { background:url("https://images.wikidexcdn.net/mwuploads/wikidex/f/ff/latest/20101012094232/FlechaIm%C3%A1genes.png") center center no-repeat; }
 
 
/* Reducimos el margen inferior de thumbs */
div.tright, div.tleft {
	margin-bottom: 0.8em;
}
 
/* Eliminamos un enorme borde blanco que queda mal sobre fondos de color por el mismo valor en margen */
div.tright {
	border-width:0;
	margin:0.5em 0 0.8em 1.4em;
}
div.tleft {
	border-width:0;
	margin:0.5em 1.4em 0.8em 0;
}
 
/* Aspecto de las galerías en artículos (etiqueta gallery) */
.gallerybox {
	background-color:#333;
	background:-moz-linear-gradient(center top, #888 0%, #333 100%);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, limegreen), color-stop(100%, green));
	filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='limegreen', startColorstr='green', gradientType='0');
	padding:4px 3px 4px 4px !important;
	margin:6px 7px 6px 0 !important;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:2px 2px 5px lime;
	-webkit-box-shadow:2px 2px 5px lime;
	box-shadow:2px 2px 5px lime;
}
ul.mw-gallery-nolines li.gallerybox div.thumb {
background-color: #fff;
}
/*Para que la letra en las galerías se vea blanca*/
.gallerybox .gallerytext { color:#fff }

.gallerybox a { color:yellow; }
 
.accent { border:0 !important; }
 
.gallerybox > .lightbox-caption { font-size:95%; margin-top:0; }
 
.gallerybox > div.thumb {
	height:auto !important;
	background:#ededed;
	border:none !important;
	margin-right:2px !important;
}
 
.gallerybox > div.thumb > div.gallery-image-wrapper { position:static !important; }

/* Aspecto de las galerías en categorías (etiqueta gallery) */
table.gallery {
	border:none;
}
 
table.gallery td, .gallerybox {
	font-size:90%;
}
 
.gallerybox div.neutral {
	background-color:#f9f9f9;
}
 
div.gallerybox div.thumb:hover, .gallerybox div.neutral:hover {
	-moz-box-shadow:0 0 0.5em 0.1em #598EFF;
	border-color:#598EFF !important;
}

/* Caja flexible */
.cajaflexible {
	display: flex; 
	flex-flow: row wrap;
	justify-content:center;
	margin:auto; 
	max-width: 1000px;
}

/** Eliminamos los botones de editar sección **/
.mw-editsection { 
	display: none;
}

/*** Útiles para plantillas y efectos pequeños ***/
.Estrujar {
   padding-left:0px;
   padding-right:0px;
   transition-timing-function: ease-out;
    -webkit-transition-duration: 1.3s;
       -moz-transition-duration: 1.3s;
        -ms-transition-duration: 1.3s;
         -o-transition-duration: 1.3s;
            transition-duration: 1.3s;
}

.Estrujar:hover {
   padding-left:130px;
   padding-right:130px;
}

.ArticuloDestacado {
   text-align:center;
   border-left:20px solid limegreen;
   border-right:20px solid limegreen;
}

.ArticuloDestacado:hover {
   text-align:center;
   border-left:20px solid #00b300;
   border-right:20px solid #00b300;
}

.ArticuloDestacado a {
   text-decoration:none;
   border-bottom:none;
}

.ArticuloDestacado a:hover {
   text-decoration:none;
   border-bottom:none;
   text-shadow:none !important;
}

.ArticuloDestacado2, .ArticuloDestacado3, .ArticuloDestacado4 {
   text-align:center;
   border:2px solid lightgreen;
   border-radius:20px;
   -moz-border-radius:20px;
   -webkit-border-radius:20px;
}

.ArticuloDestacado2:hover {
   border:2px dashed #00b300;
   border-radius:0 20px 20px 25px;
   -moz-border-radius:0 20px 20px 25px;
   -webkit-border-radius:0 20px 20px 25px;
}

.ArticuloDestacado3:hover {
   border:2px dashed #00b300;
}

.ArticuloDestacado4:hover {
   border:2px dashed #00b300;
   border-radius: 20px 0 25px 20px;
   -moz-border-radius: 20px 0 25px 20px;
   -webkit-border-radius: 20px 0 25px 20px;
}

.ArticuloDestacado2 a, .ArticuloDestacado3 a, .ArticuloDestacado4 a {
   text-decoration:none;
   border-bottom:none;
   font-weight:bold;
   color:#00b300;
   font-size:110%;
   font-family: 'FinkHeavy', 'Comic Sans MS', Sans-serif;
}

.ArticuloDestacado2 a:hover, .ArticuloDestacado3 a:hover, .ArticuloDestacado4 a:hover {
   text-decoration:none;
   border-bottom:none;
   font-weight:bold;
   color:green;
   font-size:110%;
   font-family: 'FinkHeavy', 'Comic Sans MS', Sans-serif;
}

.EncuestaDestacada {
   border:3px solid #E5DA76;
   background:#E5DA76;
   margin-top:5px;
}

.EncuestaDestacada:hover {
   border:3px dotted yellow;
}

.EncuestaDestacada a {
   border-bottom:none;
   text-decoration:none;
   color:black;
}

.EncuestaDestacada a:hover {
   border-bottom:none;
   text-decoration:none;
   color:darkkhaki;
   text-shadow:0 0 5px yellow;
}

.FondoSeccionesPortada {
   background:url("https://images.wikidexcdn.net/mwuploads/esacrossing/d/d1/latest/20230218153035/Fondo_valla.png"), repeat-x !important;
   padding-top:15px;
   padding-left:5px;
   font-family: 'FinkHeavy', 'Comic Sans MS', sans-serif;
   font-size:120%;
   font-weight:bold;
   min-height:46px;
}

.FondoSeccionesPortada:hover {
   font-size:130%;
}

.HojaSeccionesPortada {
   background:#E3FFA9;
   border-radius:10px;
   -moz-boder-radius:10px;
   -webkit-border-radius:10px;
   transition-timing-function: ease-out;
    -webkit-transition-duration: 0.4s;
       -moz-transition-duration: 0.4s;
        -ms-transition-duration: 0.4s;
         -o-transition-duration: 0.4s;
            transition-duration: 0.4s;
}

.HojaSeccionesPortada:hover {
   border-radius:30px;
   -moz-boder-radius:30px;
   -webkit-border-radius:30px;
}

.irObjetos {
   background:white;
   transition-timing-function: ease-out;
    -webkit-transition-duration: 0.6s;
       -moz-transition-duration: 0.6s;
        -ms-transition-duration: 0.6s;
         -o-transition-duration: 0.6s;
            transition-duration: 0.6s;
    -webkit-transition-duration: 0.6s;
       -moz-transition-duration: 0.6s;
        -ms-transition-duration: 0.6s;
         -o-transition-duration: 0.6s;
            transition-duration: 0.6s;
   text-align:center !important;
}
.irObjetos:hover {
   text-shadow:0 0 10px black !important;
   -moz-text-shadow:0 0 10px black !important;
   -webkit-text-shadow:0 0 10px black !important;
   background:silver !important;
   color:white !important;
   padding-left:5px !important;
   text-align:left !important;
}
.irObjetos:hover a {
   color:white !important;
}
.irObjetos a {
   color:black !important;
}
.irObjetos a:hover {
   text-decoration:none;
}

.BotónCanción {
   border:1px solid orange;
   background:#FFFF8C;
}

.BotónCanción:hover {
   border:1px solid white !important;
   background:red !important;
}

.BotónCanción:hover a {
   color:white;
   text-decoration:none;
}

.BotónCanción2 {
   border:1px solid orange;
   background:#FFFF8C;
}

.BotónCanción2:hover {
   border:1px solid white !important;
   background:blue !important;
}

.BotónCanción2:hover a {
   color:white;
   text-decoration:none;
}

.VTPCanción {
   border:none;
}

.VTPCanción:hover {
   box-shadow:0 0 10px red;
   -moz-box-shadow:0 0 10px red;
   -webkit-box-shadow:0 0 10px red;
}

.VTPCanción a {
   color:red;
}

.VTPCanción:hover a {
   color:red;
   text-shadow:0 0 5px orange;
   -moz-text-shadow:0 0 5px orange;
   -webkit-text-shadow:0 0 5px orange;
}

.Transparencia {
   opacity:0.5;
}

.Transparencia:hover {
   opacity:1;
}

#button-hub {
   margin-top:-5px;
}

#button-hub:hover {
   margin-top:8px !important;
}

.FondoDatos {
   background:url("https://images.wikidexcdn.net/mwuploads/esacrossing/8/83/latest/20230218153220/Fondo_peces_transparente1.png") repeat;
   color:black;
}

.FondoDatos:hover {
   background:url("https://images.wikidexcdn.net/mwuploads/esacrossing/e/e7/latest/20230218153340/Fondo_peces_transparente2.png") repeat;
}

.Notebook {
background:url("https://images.wikidexcdn.net/mwuploads/esacrossing/thumb/f/f4/latest/20130722134407/Cuadrados.jpg/31px-Cuadrados.jpg") repeat;
}

table.general > thead > tr > th,
table.general > tbody > tr > th,
table.general > tbody > tr > td {
  padding: 0.4em 0.4em;
  overflow-wrap: normal;
}
table.general {
  border-collapse: collapse;
  border: none;
}

table.general > thead > tr > th,
table.general > tbody > tr > th {
  background-color: #00c400;
  border-color:#FFFFFF
}

table.general tr:first-child th:first-child {
  border-top-left-radius: 10px;border-color:#FFFFFF
}

table.general tr:first-child th:last-child {
  border-top-right-radius: 10px;
  border-color:#FFFFFF
}

table.general tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
  border-color:#FFFFFF
}

table.general tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
  border-color:#FFFFFF
}

table.general tr td {
  border-color: #00c400;
  border-style: solid;
  border-width: 1px;
}

/* Tablas (estilos de Fandom) */
.WikiaTable,
.article-table {
 background:rgba(0,0,0,.02);
 border:0 var(#cecece);
 border-collapse:collapse;
 margin:1em 1em 1em 0
}
.WikiaTable td,
.WikiaTable th,
.article-table td,
.article-table th {
 border-bottom:1px solid #cecece;
 padding:6px 12px
}
.WikiaTable th,
.article-table th {
 background:rgba(0,0,0,.05);
 text-align:left
}
.WikiaTable caption,
.article-table caption {
 font-weight:700
}

/*==================================================
  3D/2D Viewer
==================================================*/

/* 3D/2D viewer */
.container-2d {
  display: block;
  position: relative;
}

.viewer-2d {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.switch-to-3d {
  position: absolute;
  top: 0;
  right: 0;
  background: url("https://images.wikidexcdn.net/mwuploads/esacrossing/6/65/latest/20240109181015/2D_icon.png");
  width: 40px;
  height: 37px;
  z-index: 999;
  opacity: 0.5;
  cursor :pointer;
  cursor: hand;
  transition: opacity 0.2s;
}

.switch-to-2d {
  position: absolute;
  top: 0;
  right: 0;
  background: url("https://images.wikidexcdn.net/mwuploads/esacrossing/7/7e/latest/20240109181003/3D_icon.png");
  width: 40px;
  height: 37px;
  z-index: 999;
  opacity: 0.5;
  cursor: pointer;
  cursor: hand;
  transition: opacity 0.2s;
}

.switch-to-3d:hover, .switch-to-2d:hover {
  opacity: 1.0;
}

/* 3D model viewer */
.viewer-3d span {
    display: none;
}
.viewer-3d {
    margin: 4px;
    display: block;
    cursor: move;
    position: relative;
}
.viewer-3d-frame {
    position: absolute;
}
.viewer-3d-overlay {
    background: url("https://images.wikidexcdn.net/mwuploads/esacrossing/e/ed/latest/20240104183854/3D_rotation_icon.png") bottom right no-repeat;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    position: relative;
}
/* End 3D model viewer */

/* New 3D viewer specific CSS */
.viewer-3d-container {
  display: block;
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  /*width: 288px;*/
}

.viewer-3d-container ul {
  padding: 0px;
  margin: 0px;
}
.viewer-3d-container ul li {
  display: block;
  margin: 0px;
  margin-top: 2px; /* For vertical spacing of the buttons */
  list-style: none;
  text-align: center;
}
.viewer-3d-container ul a {
  display: block;
  width: 134px;
  padding: 4px;
  text-decoration: none;
  font-size: 1.25em;
  opacity: .75;
}

.viewer-3d-container ul a:hover {
  opacity: 1;
}

.view-selector-default-left {
    border-radius: 10px;
    float: left;
    background: #e2e2e2;
}
.view-selector-default-right {
    border-radius: 10px;
    float: right;
    background: #e2e2e2;
}
.view-selector-default-full {
    border-radius: 10px;
    width: 100%;
    float: left;
    clear: both;
    background: #e2e2e2;
}
.view-selector-default-full a {
    width: 100% !important;
}

/* End new 3D viewer */

/*==================================================
  Estilos de tablas
==================================================*/

/* -------- TABLA PECES -------- */
table.peces > thead > tr > th,
table.peces > tbody > tr > th,
table.peces > tbody > tr > td {
  padding: 0.2em 0.4em;
  overflow-wrap: normal;
}
table.peces {
  position: relative; /* Añadir posición relativa para establecer el ::before */
  border-collapse: collapse;
  border: none;
  background-color: rgba(255, 255, 255, 0.5); /* Ajusta el valor de opacidad aquí para el color de fondo */
  overflow: hidden; /* Para evitar que el ::before se extienda más allá de la tabla */
}

table.peces::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://images.wikidexcdn.net/mwuploads/esacrossing/7/70/latest/20240117085156/Fondo_peces.svg);
  background-size: 5em;
  opacity: 0.25; /* Ajusta el valor de opacidad para la imagen de fondo */
  z-index: -1; /* Para colocar la imagen detrás del contenido de la tabla */
}

table.peces > thead > tr > th,
table.peces > tbody > tr > th {
  background-color: #003BC4;
  border-color:#FFFFFF;
  color: white;
}

table.peces tr:first-child th:first-child {
  border-top-left-radius: 10px;border-color:#FFFFFF
}

table.peces tr:first-child th:last-child {
  border-top-right-radius: 10px;
  border-color:#FFFFFF
}

table.peces tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
  border-color:#FFFFFF
}

table.peces tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
  border-color:#FFFFFF
}

table.peces tr td {
  border-color: #003BC4;
  border-style: solid;
  border-width: 1px;
}

/* -------- TABLA BICHOS -------- */
table.bichos > thead > tr > th,
table.bichos > tbody > tr > th,
table.bichos > tbody > tr > td {
  padding: 0.2em 0.4em;
  overflow-wrap: normal;
}
table.bichos {
  position: relative; /* Añadir posición relativa para establecer el ::before */
  border-collapse: collapse;
  border: none;
  background-color: rgba(255, 255, 255, 0.3); /* Ajusta el valor de opacidad aquí para el color de fondo */
  overflow: hidden; /* Para evitar que el ::before se extienda más allá de la tabla */
}

table.bichos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://images.wikidexcdn.net/mwuploads/esacrossing/a/a1/latest/20240117085221/Fondo_bichos.svg);
  background-size: 5em;
  opacity: 0.25; /* Ajusta el valor de opacidad para la imagen de fondo */
  z-index: -1; /* Para colocar la imagen detrás del contenido de la tabla */
}

table.bichos > thead > tr > th,
table.bichos > tbody > tr > th {
  background-color: #00c400;
  border-color:#FFFFFF;
}

table.bichos tr:first-child th:first-child {
  border-top-left-radius: 10px;border-color:#FFFFFF
}

table.bichos tr:first-child th:last-child {
  border-top-right-radius: 10px;
  border-color:#FFFFFF;
}

table.bichos tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
  border-color:#FFFFFF;
}

table.bichos tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
  border-color:#FFFFFF;
}

table.bichos tr td {
  border-color: #00c400;
  border-style: solid;
  border-width: 1px;
}

/* -------- TABLA CRIATURAS -------- */
table.criaturas > thead > tr > th,
table.criaturas > tbody > tr > th,
table.criaturas > tbody > tr > td {
  padding: 0.2em 0.4em;
  overflow-wrap: normal;
}
table.criaturas {
  position: relative; /* Añadir posición relativa para establecer el ::before */
  border-collapse: collapse;
  border: none;
  background-color: rgba(255, 255, 255, 0.7); /* Ajusta el valor de opacidad aquí para el color de fondo */
  overflow: hidden; /* Para evitar que el ::before se extienda más allá de la tabla */
}

table.criaturas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://images.wikidexcdn.net/mwuploads/esacrossing/8/8f/latest/20240117085241/Fondo_criaturas_submarinas.svg);
  background-size: 5em;
  opacity: 0.25;
  z-index: -1;
}

table.criaturas > thead > tr > th,
table.criaturas > tbody > tr > th {
  background-color: #7A00C4;
  border-color:#FFFFFF;
  color:white;
}

table.criaturas tr:first-child th:first-child {
  border-top-left-radius: 10px;border-color:#FFFFFF
}

table.criaturas tr:first-child th:last-child {
  border-top-right-radius: 10px;
  border-color:#FFFFFF
}

table.criaturas tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
  border-color:#FFFFFF
}

table.criaturas tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
  border-color:#FFFFFF
}

table.criaturas tr td {
  border-color: #7A00C4;
  border-style: solid;
  border-width: 1px;
}

/* -------- TABLA GIROIDES -------- */
table.giroides > thead > tr > th,
table.giroides > tbody > tr > th,
table.giroides > tbody > tr > td {
  padding: 0.2em 0.4em;
  overflow-wrap: normal;
}
table.giroides {
  position: relative; /* Añadir posición relativa para establecer el ::before */
  border-collapse: collapse;
  border: none;
  background-color: rgba(255, 255, 255, 0.5); /* Ajusta el valor de opacidad aquí para el color de fondo */
  overflow: hidden; /* Para evitar que el ::before se extienda más allá de la tabla */
}

table.giroides::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://images.wikidexcdn.net/mwuploads/esacrossing/7/7a/latest/20240205225716/Fondo_giroides.svg);
  background-size: 5em;
  opacity: 0.35; /* Ajusta el valor de opacidad para la imagen de fondo */
  z-index: -1; /* Para colocar la imagen detrás del contenido de la tabla */
}

table.giroides > thead > tr > th,
table.giroides > tbody > tr > th {
  background-color: #B2820C;
  border-color:#FFFFFF;
  color: white;
}

table.giroides tr:first-child th:first-child {
  border-top-left-radius: 10px;border-color:#FFFFFF
}

table.giroides tr:first-child th:last-child {
  border-top-right-radius: 10px;
  border-color:#FFFFFF
}

table.giroides tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
  border-color:#FFFFFF
}

table.giroides tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
  border-color:#FFFFFF
}

table.giroides tr td {
  border-color: #B2820C;
  border-style: solid;
  border-width: 1px;
}