/* Normalize */
:where(html){line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type="button" i],[type="reset" i],[type="submit" i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type="search" i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type="button" i],[type="color" i],[type="reset" i],[type="submit" i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type="button" i],[type="color" i],[type="reset" i],[type="submit" i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:white;border:solid;color:black;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}	
/* --------- */	


html,
body {
	height: 100%;
	margin: 0;
}

html {
	scroll-behavior: smooth;
}

/*
body *::selection {
	background: black;
}
*/

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}
.nover {
	display: none;
}
.siverlin {
	display: inline;
}



/* ------------------------------------------------
Esquema principal: cabecera, cuerpo y pié página
------------------------------------------------ */
#caja_cero {
	display: flex;
	flex-flow: column;
	height: 100%;
}

#caja_0a {
	flex: 0 0 auto;
}

#caja_0b {
	flex: 1 1 auto;
	background-color: Beige;
}

#caja_0c {
	flex: 0 0 auto;
	background-color: White;
}


/* ------------------------------------------------------
Esquema cuerpo: caja opciones y caja números (resultados)
--------------------------------------------------------- */

/* Esquema vertical - móviles */
#caja_uno {
	padding: 1ex;
}

#caja_1a {
	color: white;
	background-color: #555555;
	padding: 1ex;
	border-radius: 1ex;
	font-family: sans-serif;
	font-size: 90%;
}


#caja_1b {
	
}

/* Esquema horizontal - escritorio */
@media only screen and (min-width: 600px) {
	#caja_uno {
		display: flex;
		flex-flow: row;
		gap: 1ex;
		height: calc(100% - 2ex);
	}

	#caja_1a {
		/* flex: 0 1 250px;
		esta propiedad se define en la clase '.c1a_visible_si'
		----		
		Si se cambia 250px, cambiar también en 'scripts.js'
		>>> function op_btnDeslizarHor() */
		
		align-self: stretch;
	}
	#caja_1a *::selection {
		background: black;
	}

	#caja_1b {
		flex: 1 1 auto;
		align-self: stretch;
	}
	
	.c1a_visible_si { flex: 0 0 250px; }
	.c1a_visible_no { flex: 0 0 19px; }
	
	.c1a_contraer {
		flex: 0 0 29px;
		transition: flex 0.5s;
	}
	.ca1_expandir {
		flex: 0 0 250px;
		transition: flex 0.5s;
	}
}

/* -----
Cabecera
-------- */
#cab_hor {
	display: none;
}
.cab_h1 {
	display: flex;
	flex-flow: row nowrap;
}
.cab_h1_ilogo {
	flex: 0 0 auto;
	padding: 1ex;
}


#cab_ver {
	display: none;
}
.cab_v1 {
	padding: 1ex;
}
.cab_v1 img {
	width: 75%;
	height: auto;
	max-width: 328px;
}
.cab_v2 {
	display: flex;
	flex-flow: row nowrap;	
	background-color: beige;
}

@media only screen and (min-width: 700px) { #cab_hor { display: block; .cab_ix , .cab_it { font-size: 200%; } } }
@media only screen and (max-width: 700px) { #cab_ver { display: block; .cab_ix , .cab_it { font-size: 150%; } } }


.cab_tex {
	color: white;
	background-color: black;
	padding: 2px 1ex;
}
.cab_tex p {
	margin: 0; padding: 0;
	font-family: sans-serif;
	font-size: 90%;	
}

.cab_ix {
	flex: 1 1 auto;
	background-color: #555;
	align-self: flex-start;
}
.cab_it {
	flex: 0 0 auto;
	align-self: flex-start;
	color: white;
	background-color: #555;
	padding: .5ex 1em;
	border-radius: 0 0 calc(1em - 2px) calc(1em - 4px);
}




#cab_cont {


}
.cab_i1 {

}



/* ----------------------
Barra opciones - cabecera
------------------------- */
#caja_dos {
	display: flex;
	flex-flow: row;
	width: 100%;
}

#caja_2a {
	flex: 1 1 auto;
}
#caja_2b {
	flex: 0 1 auto;
}
#caja_2c {
	flex: 0 1 auto;
}

/* Botones visibles según vertical u horizontal */
@media only screen and (min-width: 600px) {
	#caja_2c { display: none; }
}
@media only screen and not (min-width: 600px) {
	#caja_2b { display: none; }
}

.op_btnDeslizar {
	text-align: center;
	color: white;
	border: 1px solid white;
	border-radius: 1ex;
	padding: 1ex;
	cursor: pointer;
}


/* ----------------------
Barra opciones - opciones
------------------------- */
#caja_tres {
	
}
/*
#caja_tres div::selection ,
#caja_tres label::selection {
	background: black;
}
*/
.c3_visible_si {display: block;}
.c3_visible_no {display: none;}

.caja3_item {
	border: 1px solid #a9a9a9;
	border-radius: 1ex;
	margin-top: 1ex;
}
.caja3_item p {
	margin: .5ex 0; padding: 0;
}
.caja3_item_tit {
	background-color: #a9a9a9;
	padding: 0 1ex;
	border-top-left-radius: 1ex;
	border-bottom-right-radius: 1ex;
	font-weight: bold;
	letter-spacing: 1px;
}
.caja3_item_ayu {
	background-color: #a9a9a9;
	padding: 0 1ex;
	border-top-right-radius: 1ex;
	border-bottom-left-radius: 1ex;
	font-weight: bold;
	/* cursor: pointer; */
	/* font-variant-caps: all-petite-caps; */
	cursor: pointer;
}

.btnOp {
	border: 1px solid white;
	border-radius: 1ex;
	padding: .5ex 1ex;
	cursor: pointer;
}
#op2_ccanti {
	width: 6ex;
	color: white;
	background-color: #555555;
	text-align: center;
}
#op2_ccanti:focus {
	outline: none;
}

#op_url {
	margin-top: 1em;
	font-size: 85%;
	color: silver;
}




/* ----------------------
Barra opciones - idiomas
------------------------- */

#caja_cuatro {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1ex;
}
.c4_item {
	flex: 0 1 auto;
	
	
	padding: .25ex .75ex;
	border-radius: .5ex;
}
.c4_item_nosel {
	color: white;
	background-color: #555;
	box-shadow: 1px 1px 1px #333, 1px 1px 1px #888 inset;
	cursor: pointer;
}
.c4_item_sel {
	color: black;
	background-color: #D3D3D3;
	box-shadow: 1px 1px 1px #565656 inset, 1px 1px 1px #ededed;
	cursor: default;
}


/* -------
Formulario
---------- */
#caja_cinco {
	text-align: center;
	margin: 1em 0;
}
@media only screen and (min-width: 600px) {
	#caja_cinco {
		margin-top: calc(1em - 1ex);
	}
}

#caja_cinco input[type=text] {
	
}
#caja_cinco input[type=text]:focus {
	outline: none;
}


/* -------
Resultados
---------- */

#caja_seis {
	display: flex;
	flex-flow: row nowrap;
	gap: 1ex;
	justify-content: center;
	
	/*
	font-family: monospace;
	font-size: 110%;
	*/
	
	opacity: 0;
}

.c6_num {
	flex: auto;
	//max-width: 500px;
	max-width: 75ex;
}

.c6_num_tit {
	text-align: center;
	color: white;
	background-color: #555555;
	border-radius: 1ex 1ex 0 0;
	padding: 3px;
	
	/*
	font-weight: bold;
	font-size: 110%;
	*/
}

.c6_num_res {
	border: 1px solid #555555;
	background-color: white;
	padding: 1ex;
	border-radius: 0 0 1ex 1ex;
}
    
.c6_num_res_cat {
	
}
        
.c6_num_res_cat_tit {
	background-color: Gainsboro;
	padding: 2px 1ex;
	border-radius: .5ex;	

	/*
	font-family: sans-serif;
	font-size: 80%;
	*/

}

.c6_num_res_cat_pal {
	margin-bottom: 1ex;
	
	font-family: monospace;
	font-size: 105%;
	
	columns: auto auto;
	
}
.c6_num_res_cat_pal a {
	text-decoration: none;
	color: darkgray;
}

[id^="palabra"] {
	cursor: pointer;

}

.quitacat_contraer {
	opacity: 0;
	transition: opacity .5s;
}

#c6_caja_separar {
	text-align: center;
	margin: -.5ex 0 .5ex 0;
}
.c6_btn_separar {
	padding: 2px 1ex;
	border: 1px solid #404040;
	border-radius: .5ex;
	cursor: pointer;
}

.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border-radius: 50%;
  background:
    linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
    linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
  background-repeat: no-repeat;
  animation: l23 1s infinite steps(12);
}
.loader::before,
.loader::after {
   content: "";
   grid-area: 1/1;
   border-radius: 50%;
   background: inherit;
   opacity: 0.915;
   transform: rotate(30deg);
}
.loader::after {
   opacity: 0.83;
   transform: rotate(60deg);
}
@keyframes l23 {
  100% {transform: rotate(1turn)}
}



/* ----------------------------------------
Resultados - caja con botones de separación
------------------------------------------- */
#caja_siete {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 1ex;
	
	margin-bottom: 1em;
	opacity: 0;
}
.c7_boton {
	flex: 0 0 auto;
	padding: .5ex 1ex;
	border-radius: 1ex;
	font-family: sans-serif;
	font-size: 80%;	
}

.c7_botonsel {
	background-color: white;
	border-top: 1px solid silver;
	border-left: 1px solid silver;
	border-bottom: 1px solid white;
	border-right: 1px solid white;	
}
.c7_botonnosel {
	cursor: pointer;
	box-shadow: 2px 2px 4px silver;
	border: 1px solid #404040;
}
.c7_botonnosel:hover {
	background-color: white;
}



/* -------
Pie página
---------- */

#pie_tex {
	border-top: 2px dotted #555;
	padding: 1ex;
	font-family: sans-serif;
	font-size: 80%;
	color: #555;	
}

#pie_tex0a, #pie_tex0b {
	float: left;
	height: 1em;
}
@media only screen and (min-width: 550px) { #pie_tex0b { display: none; } }
@media only screen and (max-width: 550px) { #pie_tex0a { display: none; } }

#pie_tex0d ,
#pie_tex0c {
	float: right;
	cursor: pointer;
}

#pie_tex1 {
	display: none;
	text-align: center;
}

.blink_me {
	background-color: #900;
	color: white;
	animation: blinker 1s linear infinite;
}
@keyframes blinker {
	50% { opacity: 0; }
}

.pie_animado {
	overflow: hidden;
	height: 1em;
	border-right: 1px solid black;
	animation: pie_creciente 3s;
	animation-timing-function: linear;
}
@keyframes pie_creciente {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}



/* --
Ayuda
----- */

#caja_ayuda {
	max-width: 75ex;
	margin: auto;
	padding: 0 1ex;
	font-family: sans-serif;
	font-size: 85%;
	line-height: 1.3;
	padding-bottom: 2em;
}
#caja_ayuda img {
	max-width: 100%;
	height: auto;
}

#caja_ayuda p {
	margin: 1ex 0;
}
#caja_ayuda h1 {
		margin: 0;
}
#caja_ayuda h2 {
		margin: 0;
}
#caja_ayuda h3 {
		margin: 0;
		font-style: italic;
}

#caja_ayuda code {
	font-family: monospace;
	font-size: 110%;
	padding: 0 1ex;
	background-color: white;
}

#caja_ayuda a:link , 
#caja_ayuda a:visited ,
#caja_ayuda a:hover ,
#caja_ayuda a:active {
	text-decoration-style: dotted;
	color: #404040;
}
#caja_ayuda a:hover {
	text-decoration-style: solid;
	color: black;
}

#caja_ayuda th {
	font-family: monospace;
	font-size: 115%;	
	text-align: center;
	color: white;
	background-color: gray;
}
#caja_ayuda td {
	text-align: center;
	background-color: white;
	padding: 0 1ex;
	font-family: monospace;
	font-size: 115%;
	border-bottom: 1px solid gray;
}
	
#ayu_indice {
	margin-top: 2em;
	line-height: 1.3;
}

.ayu_boton_g {
	float: right;
	border: 1px solid #404040;
	padding: 3px 1ex 2px 1ex;
	margin: 0 .5ex;
	border-radius: .5ex;	
	cursor: pointer;
	font-size: 90%;
	box-shadow: 2px 2px 4px silver;
}
.ayu_boton_p {
	float: right;
	border: 1px solid #404040;
	margin: 0 3px;
	cursor: pointer;
	box-shadow: 2px 2px 4px silver;
	

	font-size: 14px;
	width: 20px;
	height: 20px;
	text-align: center;
	border-radius: 10px;
}
.ayu_boton_g:hover ,
.ayu_boton_p:hover {
	background-color: white;
}