/*
Paleta de colores:

	1.	Color de fondo general:
	•	#F5F5F5 (Un gris muy claro, casi blanco)
	•	#FFFFFF (Blanco puro, usado para resaltar información o zonas específicas)
	2.	Textos:
	•	#333333 (Un gris oscuro para asegurar la legibilidad en el cuerpo del texto)
	•	#000000 (Negro puro, utilizado en títulos o subtítulos importantes)
	•	#4F4F4F (Un gris medio para texto menos destacado, como descripciones o textos secundarios)
	3.	Títulos (3 tipos):
	•	Título principal: #000000 (Negro puro para un fuerte contraste con el fondo claro)
	•	Subtítulo: #4F4F4F (Gris oscuro para diferenciarlo del título principal pero aún destacado)
	•	Título de nivel 3: #666666 (Un gris medio, lo suficientemente contrastante para ser legible, pero más suave que el subtítulo)
	4.	Cajas de información:
	•	Color de fondo de las cajas: #E0E0E0 (Un gris claro que resalta sobre el fondo general)
	•	Bordes de las cajas: #BDBDBD (Un gris medio para que los bordes sean sutiles, pero bien definidos)
	•	Texto dentro de las cajas: #333333 (Misma legibilidad que el texto general)
	5.	Elementos interactivos (botones o links):
	•	Fondo del botón: #B0B0B0 (Gris medio claro, resaltando pero sin ser muy intrusivo)
	•	Texto del botón: #FFFFFF (Blanco, para asegurar un contraste alto con el fondo del botón)
*/

@import url('https://fonts.googleapis.com/css2?family=Arima:wght@100..700&display=swap');

body {
	font-family: "Arima", system-ui;
	font-optical-sizing: auto;
	font-style: normal;
	background-color: #F5F5F5;
	color: #333333;
}

input {
	font-size: 18px;
	font-family: "Arima", system-ui;
	padding: 0 5px;
	height: 22px;
}
input[type="submit"] {
	font-size: 25px;
	padding: 0 30px;
	height: auto;
}

input[type="submit"].boton, 
.boton {
	font-size: 30px;
	border: 1px solid #000;
	padding: 5px 20px;
	border-radius: 20px;
	background-color: #fff;
	text-decoration: none;
	color: #4f4f4f;
	margin-right: 30px;
	cursor: pointer;
}

.formulario {
	display: inline-block;
}

h1, h2 {
	color: #000;
	font-size: 30px;
	font-weight: bold;
}

h2 {
	font-size: 25px;
}

h3,
h4,
.extra {
	margin: 0;
	color: #4f4f4f;
	font-size: 25px;
	font-weight: bold;
	height: 38px;
	padding-top: 20px;
	vertical-align: middle;
}

p,
label {
	font-size: 25px;
}

h3,
.extra {
	border: 1px solid #000;
	padding: 10px 10px 10px 10px;
	display: table-cell;
	width: 30%;
	min-width: 300px;
}

input[type="file"] {
	font-size: 25px;
 	padding: 0 30px;
  	height: auto;
}
.conjunto {
	margin: 0;
	font-size: 22px;
	height: 22px;
	font-style: italic;
	font-weight: normal;
}
.peque {
	font-size: 20px;
  	font-weight: normal;
}
.casas {
	margin: 0;
	color: #4f4f4f;
	font-size: 25px;
	font-weight: bold;
	height: 38px;
	padding: 0 20px 0 10px;
	display: inline-block;
}

.titulo-elementos {
	text-align: right;
	display: table-cell;
	width: 30%;
	min-width: 300px;
}

.separator {
	height: 50px;
}

.elementos {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
}

.planetes {
	border: 1px solid #000;
	padding: 0px 20px;
	display: table-cell;
	vertical-align: middle;
}

.tabla-planetas {
	display: table;
	width: 100%;
}

.planetas {
	display: table-row;
	vertical-align: middle;
/*	grid-template-columns: repeat( 2, 1fr ); */
}

.hemisferis {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	grid-gap: 30px;
	margin-top: 30px;
}

.apartado {
	border: 1px solid #666666;
	padding: 20px;
	margin: 50px 10px 30px 10px;
	border-radius: 20px;
	background-color: #E0E0E0;
	position: relative;
}

.apartado .titulo-box {
	border: 1px solid #666666;
	position: absolute;
	top: -40px;
	padding: 0 20px;
	background-color: #F5F5F5;
}

.circle,
.circle-h,
.circle-q,
.circle-t {
	width: 200px;
	height: 200px;
	border: 5px solid #000066; 
	border-radius: 50%;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	font-size: 24px;
}

.circle-t {
	justify-content: center;
}

.circle-q {
	justify-content: center;
}

.circle-h {
	justify-content: center;
}

.circle::before,
.circle-h::before {
	content: '';
	position: absolute;
	width: 5px;
	height: 100%;
	background-color: #000066;
	left: 50%;
	transform: translateX(-50%);
}


.circle-q::before, .circle-q::after {
	content: '';
	position: absolute;
	background-color: #000066; 
}

.circle-q::before {
	width: 5px;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.circle-q::after {
	width: 100%;
	height: 5px;
	top: 50%;
	transform: translateY(-50%);
}

.circle-h::before {
	height: 5px;
	width: 100%;
	left: 0;
	transform: translateY(-50%);
}

.half {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.left {
	border-right: 5px solid transparent; 
}
.top, .bottom {
	position: absolute;
	width: 100%;
	text-align: center;
}
.top {
	top: 20%;
}
.bottom {
	bottom: 20%;
}

.quadrant {
	position: absolute;
	width: 50%;
	height: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.top-left {
	top: 0;
	left: 0;
}

.top-right {
	top: 0;
	right: 0;
}

.bottom-left {
	bottom: 0;
	left: 0;
}

.bottom-right {
	bottom: 0;
	right: 0;
}

.line {
	position: absolute;
	background-color: #000066;
}

/* Línea horizontal */
.line.horizontal {
	width: 50%;
	height: 5px;
	left: 0;
	top: 51%;
	transform: translateY(-50%);
}

/* Línea diagonal 1 */
.line.diagonal1 {
	width: 5px;
	height: 52%;
	top: 32%;
	left: 69%;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* Línea diagonal 2 */
.line.diagonal2 {
	width: 5px;
	height: 50%;
	top: 69%;
	left: 67%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.circle-t .top-left {
	top: 3%;
	left: 14%;
}

.circle-t .bottom-left {
	bottom: 1%;
	left: 15%;
}

.circle-t .top-right {
	top: 25%;
	right: -5%;
}

textarea {
	width: 100%;
  	height: 700px;
}

.datos li {
	font-size: 25px;
}

.seleccionado {
	background-color: #E0E0E0;
}

.oculto {
	display: none;
}

.guardado {
	display: block;
	font-size: 25px;
	font-family: "Arima", system-ui;
	width: 50%;
	text-align: left;
	padding: 0 30px;
	margin-top: 20px;
}

.vacio {
	border: none;
	margin: 0;
	width: 100%;
	padding: 0;
	text-align: center;
	display: block;
	color: #C00;
}

.error {
	color: red;
	font-size: 0.9em;
	display: none;
}
.input-error {
	border: 1px solid red;
}
.dentro {
	display: grid;
 	grid-template-columns: 1fr 1fr;
}

#fullscreenContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.3s ease-in-out;
}

#fullscreenContainer.hidden {
    opacity: 0;
    pointer-events: none;
}

#fullscreenImage {
    height: 90%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#closeButton {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#closeButton:hover {
    transform: scale(1.1);
}

@font-face{font-family:astrodienst;src:url(/fonts/adienst1606.eot);src:url(/fonts/adienst1606.eot?#iefix) format('embedded-opentype'),url(/fonts/adienst1606.woff2) format('woff2'),url(/fonts/adienst1606.woff) format('woff'),url(/fonts/adienst1606.ttf) format('truetype');font-weight:400;font-style:normal}
.sym1{font:400 1.2rem astrodienst}
.sym2{font:400 2rem astrodienst}
.sym3{font:400 3rem astrodienst;}
.casas .sym3{font:400 3rem astrodienst; margin-left: 10px;}
.sym4{font:400 4rem astrodienst}
.sym5{font:400 5rem astrodienst}
.sym6{font:400 6rem astrodienst}
.sym10{font:400 10rem astrodienst;margin-right:10px}
.sym-aric::before{content:"\0061";color:#c00}
.sym-tauc::before{content:"\0062";color:#390}
.sym-gemc::before{content:"\0063";color:#f90}
.sym-canc::before{content:"\0064";color:#06c}
.sym-leoc::before{content:"\0065";color:#c00}
.sym-virc::before{content:"\0066";color:#390}
.sym-libc::before{content:"\0067";color:#f90}
.sym-scoc::before{content:"\0068";color:#06c}
.sym-sagc::before{content:"\0069";color:#c00}
.sym-capc::before{content:"\006A";color:#390}
.sym-aquc::before{content:"\006B";color:#f90;top:-3px;position:relative}
.sym-pisc::before{content:"\006C";color:#06c}
.sym-ari::before{content:"\0061"}
.sym-tau::before{content:"\0062"}
.sym-gem::before{content:"\0063"}
.sym-can::before{content:"\0064"}
.sym-leo::before{content:"\0065"}
.sym-vir::before{content:"\0066"}
.sym-lib::before{content:"\0067"}
.sym-sco::before{content:"\0068"}
.sym-sag::before{content:"\0069"}
.sym-cap::before{content:"\006A"}
.sym-aqu::before{content:"\006B"}
.sym-pis::before{content:"\006C"}
/*
.sym-con::before{content:"\006D"}
.sym-opp::before{content:"\006E"}
.sym-squ::before{content:"\006F"}
.sym-tri::before{content:"\0070"}
.sym-sxt::before{content:"\0071"}
.sym-030::before{content:"\0072"}
.sym-150::before{content:"\0073"}
.sym-045::before{content:"\0074"}
.sym-135::before{content:"\0075"}
.sym-072::before{content:"\0076"}
.sym-144::before{content:"\0077"}
*/
.sym-par::before{content:"\0078"}
.sym-apa::before{content:"\0079"}
.sym-ecc::before{content:"\007A"}
.sym-eco::before{content:"\007B"}
.sym-mo-new::before{content:"\003C"}
.sym-mo-ful::before{content:"\003E"}
.sym-mo-1ha::before{content:"\003D"}
.sym-mo-2ha::before{content:"\003F"}
.sym-angle::before{content:"\0060"}
.sym-r::before{content:"\0023"}
.sym-su::before{content:"\0041"}
.sym-mo::before{content:"\0042"}
.sym-me::before{content:"\0043"}
.sym-ve::before{content:"\0044"}
.sym-ma::before{content:"\0045"}
.sym-ju::before{content:"\0046"}
.sym-sa::before{content:"\0047"}
.sym-ur::before{content:"\0048"}
.sym-ne::before{content:"\0049"}
.sym-pl::before{content:"\004A"}
.sym-mn::before{content:"\004B"}
.sym-mns::before {
    content: "\004B";
    display: inline-block; /* Necesario para aplicar transformaciones */
    transform: rotate(180deg);
}
.sym-tn::before{content:"\004C"}
.sym-li::before{content:"\004D"}
.sym-ch::before{content:"\004E"}
.sym-ue::before{content:"\004F"}
.sym-pe::before{content:"\0050"}
.sym-ac::before{content:"\0051"}
.sym-ic::before{content:"\0052"}
.sym-dc::before{content:"\0053"}
.sym-mc::before{content:"\0054"}
.sym-pf::before{content:"\0057"}
.sym-ea::before{content:"\0058"}
.sym-ce::before{content:"\0059"}
.sym-pa::before{content:"\005A"}
.sym-jn::before{content:"\005B"}
.sym-va::before{content:"\005C"}
.sym-md::before{content:"\007C"}
.sym-td::before{content:"\007D"}

.sym-con::before{content:"\006D";color:#c00}
.sym-opp::before{content:"\006E";color:#c00}
.sym-squ::before{content:"\006F";color:#c00}
.sym-tri::before{content:"\0070";color:#06c}
.sym-sxt::before{content:"\0071";color:#06c}
.sym-030::before{content:"\0072";color:#390}
.sym-150::before{content:"\0073";color:#390}
.sym-045::before{content:"\0074";color:#c00}
.sym-135::before{content:"\0075";color:#c00}
.sym-072::before{content:"\0076";color:#f90}
.sym-144::before{content:"\0077";color:#f90}

.sym-opp,
.sym-con {
/*
	font-size: 60px;
  	margin-right: 20px;
*/
}

.sym-opp {
	color: #c00;
}

.tablaCuadroAspectos {
	border-collapse: collapse;
	width: 100%;
}

.cuadroAspectos {
	border: 1px solid;
	min-width: 100px;
	text-align: center;
}

.sym-special {
	font-size: 35px;
	font-weight: normal;
	font-style: normal;
	padding-left: 10px;
}

.no-margin {
	margin: 0;
	padding: 0;
}

.primera-col {
	width: 70px;
  	text-align: center;
	font-weight: bold;
}

.cabecera-tabla {
  	text-align: center;
	font-weight: bold;
}

.xdebug-error {
	font-family: 'Courier New', Courier, monospace;
	font-size: 20px;
}

.neutro {
	color: #000;
}

.harmonico {
	color: #06c;
}

.tenso {
	color: #C00;
}

.aspect-popup {
	position: absolute;
  	background-color: #e0e0e0;
  	padding: 20px;
  	border: 1px solid;
  	border-radius: 20px;
  	font-size: 25px;
  	text-align: center;
}

.inaspectats,
.container-aspectes {
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	font-size: 25px;
  	margin-bottom: 30px;
}

.container-aspectes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}

.option-aspectes {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Estilo del interruptor */
.switch-aspectes {
	position: relative;
	width: 40px;
	height: 22px;
}

.switch-aspectes input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider-aspectes {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	border-radius: 34px;
	transition: 0.3s;
}

.slider-aspectes:before {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	left: 4px;
	bottom: 3px;
	background-color: white;
	border-radius: 50%;
	transition: 0.3s;
}

input:checked + .slider-aspectes {
	background-color: #337ab7;
}

input:checked + .slider-aspectes:before {
	transform: translateX(18px);
}

.separado-aspectes {
	margin-left: 25px;
}

pre {
	font-family: courier;
	font-size: 20px;
  	background:#a0d0f0;
  	padding: 10px;
  	border: 1px solid #102070;
	border-radius: 10px;
}