/* Estilo base del interruptor */
.switch-modo {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
	margin-top: 5px;
}

/* Estilo del interruptor en sí mismo */
.switch-modo input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* Estilo del indicador del interruptor (slider) */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--plata);
	-webkit-transition: .5s;
	transition: .5s;
}

/* Estilo del indicador cuando está en posición activada */
.slider:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 4px;
	bottom: 3px;
	background-color: var(--dorado);
	-webkit-transition: .5s;
	transition: .5s;
}

/* Estilo del interruptor cuando está en posición activada */
input:checked + .slider { background-color: var(--gris); }

/* Estilo del indicador cuando está en posición activada */
input:focus + .slider { box-shadow: 0 0 1px var(--negro); }

/* Estilo del indicador cuando está en posición activada */
input:checked + .slider:before {
	-webkit-transform: translateX(19px);
	-ms-transform: translateX(19px);
	transform: translateX(19px);
}

/* Estilo del interruptor en posición "redondeada" */
.slider.round { border-radius: 20px; }

/* Estilo del indicador redondeado */
.slider.round:before { border-radius: 50%; }

/****************************************************/

main.modo-oscuro { background: var(--oscuro); }

.modo-oscuro h1, .modo-oscuro h1 a { color: var(--dorado); }
.modo-oscuro h1 a:hover { color: var(--plata); }
.modo-oscuro h2 { color: var(--rojo); }
.modo-oscuro h3 { color: var(--naranja); }
.modo-oscuro h4 { color: var(--cielo); }
.modo-oscuro p { color: var(--plata); }

.modo-oscuro a.activo { color: var(--naranja); }

.modo-oscuro a.cielo { color: var(--blanco); }
.modo-oscuro a.rojo { color: var(--blanco); }
.modo-oscuro a.cielo:hover { background: var(--negro); }
.modo-oscuro a.rojo:hover { background: var(--negro); }

.modo-oscuro hr { border-top: 1px solid #222; border-bottom: 2px solid #111; }

/* Estilos específicos para elementos con la clase 'dos-basic' en modo oscuro */
.modo-oscuro .codex { color: var(--gris9);  }
.modo-oscuro .contenido { background: var(--negro); }
.modo-oscuro .modal { background: var(--negro); border: 1px solid var(--gris9); }
.modo-oscuro .b-blanco { background: var(--negro); }
.modo-oscuro .borde { border: 1px solid var(--gris); }

.modo-oscuro button { box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5); }
.modo-oscuro button:hover { background: var(--cielo); }

.modo-oscuro select { color: var(--blanco); }
.modo-oscuro select option { background-color: var(--amarillo); color: var(--rojo); }
.modo-oscuro select option:hover { background-color: var(--cielo); }
.modo-oscuro input.formulario { color: var(--naranja); border-bottom: 1px solid var(--oxford); }
.modo-oscuro input.tablaform:focus { border: none; }
.modo-oscuro input.formulario:focus { border-bottom: 1px solid var(--cielo); }
.modo-oscuro input.basic { color: var(--blanco); }
.modo-oscuro input.basic:focus { color: var(--dorado); }
.modo-oscuro input.negro { color: var(--blanco); }
.modo-oscuro input.gris { color: var(--gris); }
.modo-oscuro input.cielo { color: var(--cielo); }
.modo-oscuro input.violeta { color: var(--violeta); }
.modo-oscuro input.morado { color: var(--morado); }
.modo-oscuro input.naranja { color: var(--naranja); }
.modo-oscuro input.rosa { color: var(--rosa); }
.modo-oscuro input.verde { color: var(--verde); }
.modo-oscuro input.guinda { color: var(--guinda); }
.modo-oscuro input.vino { color: var(--vino); }
.modo-oscuro input.rojo { color: var(--rojo); }
.modo-oscuro input.tablaform { color: var(--naranja); }
.modo-oscuro textarea.formulario { color: var(--naranja); border-bottom: 1px solid var(--oxford); }
.modo-oscuro textarea.formulario:focus { border-bottom: 1px solid var(--cielo); }
.modo-oscuro textarea.dirpagare { color: var(--gris); }
.modo-oscuro textarea { color: var(--blanco); }

.modo-oscuro .col-formulario input { color: var(--naranja); border-bottom: 1px solid var(--oxford); }
.modo-oscuro .col-formulario input:focus { border-bottom: 1px solid var(--dorado); }
.modo-oscuro .col-formulario textarea { color: var(--naranja); border-bottom: 1px solid var(--oxford); }
.modo-oscuro .col-formulario textarea:focus { border-bottom: 1px solid var(--cielo); }

.modo-oscuro input::placeholder { color: var(--gris5); }
.modo-oscuro textarea::placeholder { color: var(--gris5); }
.modo-oscuro input.searchTerm { color: var(--blanco); }
.modo-oscuro input.basic::placeholder { color: var(--gris9); opacity:.8; }

.modo-oscuro label.texto { color: var(--gray); }
.modo-oscuro label.radio { color: var(--gris9); }
.modo-oscuro label.radio strong { color: var(--blanco); }
.modo-oscuro label.radio:before { background: var(--gris5); }

.modo-oscuro .select2-container--default .select2-selection--single { background-color: var(--negro); }
.modo-oscuro .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--plata); }
.modo-oscuro .switch label { background-color: var(--rata); color: var(--plata); }

.modo-oscuro .clear-button { background: var(--dorado); color: var(--negro); }

.modo-oscuro .progreso-title { color: var(--plata); }
.modo-oscuro .progreso-title a { color:var(--blanco); }

.modo-oscuro .concepto { color: var(--gris9); }
.modo-oscuro .valor { color: var(--gris9); }
.modo-oscuro .tabla_valores2 > div { border-bottom: 1px solid var(--gris); }

.modo-oscuro table { background: var(--oscuro); color: var(--alpha); }
.modo-oscuro table th { background: #000; border-bottom: 4px solid var(--gris); }
.modo-oscuro table td { background: var(--oscuro); border:none; }
.modo-oscuro table tr { border-bottom: 1px solid var(--gris); }
.modo-oscuro table tr:nth-child(odd) td { background: var(--oxford); }
.modo-oscuro table tr:nth-child(odd):hover td { background: var(--hoverblack); }
.modo-oscuro table tr:hover td { background: var(--hoverblack); }
.modo-oscuro table tr:hover td input { color: var(--negro); }
.modo-oscuro table tr:hover td input.tablaform { color: var(--naranja); }

.modo-oscuro table tr td label.radio { color: var(--blanco); }
	
.modo-oscuro table tr:hover td input:focus { color: var(--negro); }

.modo-oscuro table td textarea { color: var(--blanco); }
.modo-oscuro table tr:hover td textarea { color: var(--negro); }
.modo-oscuro table tr:hover td textarea:focus { color: var(--negro); }

.modo-oscuro table tr td.amarillo { background: var(--amarillo); color: var(--negro); }
.modo-oscuro table tr td.amarilloclaro { background: var(--amarillo); color: var(--negro); }
.modo-oscuro table tr td.verdeclaro { background: var(--verde); }
.modo-oscuro table tr td.azulclaro { background: var(--azul); }
.modo-oscuro table tr td.rojoclaro { background: var(--rojo); color: var(--blanco); }
.modo-oscuro table tr td.moradoclaro { background: var(--morado); color: var(--blanco); }
.modo-oscuro table tr td.cafeclaro { background: var(--cafe); color: var(--blanco); }

.modo-oscuro table tr:nth-child(odd) td.marino { background: var(--marino); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.azul { background: var(--azul); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.cielo { background: var(--cielo); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.celeste { background: var(--celeste); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.azulclaro { background: var(--azulclaro); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.guinda { background: var(--guinda); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.rojo { background: var(--rojo); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.rojo2 { background: var(--rojo2); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.rojoclaro { background: var(--rojoclaro); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.rosa { background: var(--rosa); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.violeta { background: var(--violeta); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.rosaclaro { background: var(--rosaclaro); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.morado { background: var(--morado); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.moradoclaro { background: var(--moradoclaro); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.cafe { background: var(--cafe); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.cafeclaro { background: var(--cafeclaro); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.naranja { background: var(--naranja); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.naranja2 { background: var(--naranja2); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.naranjaclaro { background: var(--naranjaclaro); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.amarillo { background: var(--amarillo); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.amarillo2 { background: var(--amarillo2); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.amarilloclaro { background: var(--amarilloclaro); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.verde { background: var(--verde); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.verde2 { background: var(--verde2); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.limon { background: var(--limon); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.verdeclaro { background: var(--verdeclaro); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.negro { background: var(--negro); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.rata { background: var(--rata); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.gris { background: var(--gris); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.gris9 { background: var(--gris9); opacity: .7; }
.modo-oscuro table tr:nth-child(odd) td.blanco { background: var(--blanco); opacity: .7; }

.modo-oscuro table tr:hover td.marino { background: var(--marino); opacity: .9; }
.modo-oscuro table tr:hover td.azul { background: var(--azul); opacity: .9; }
.modo-oscuro table tr:hover td.cielo { background: var(--cielo); opacity: .9; }
.modo-oscuro table tr:hover td.celeste { background: var(--celeste); opacity: .9; }
.modo-oscuro table tr:hover td.azulclaro { background: var(--azulclaro); opacity: .9; }
.modo-oscuro table tr:hover td.guinda { background: var(--guinda); opacity: .9; }
.modo-oscuro table tr:hover td.rojo { background: var(--rojo); opacity: .9; }
.modo-oscuro table tr:hover td.rojo2 { background: var(--rojo2); opacity: .9; }
.modo-oscuro table tr:hover td.rojoclaro { background: var(--rojoclaro); opacity: .9; }
.modo-oscuro table tr:hover td.rosa { background: var(--rosa); opacity: .9; }
.modo-oscuro table tr:hover td.violeta { background: var(--violeta); opacity: .9; }
.modo-oscuro table tr:hover td.rosaclaro { background: var(--rosaclaro); opacity: .9; }
.modo-oscuro table tr:hover td.morado { background: var(--morado); opacity: .9; }
.modo-oscuro table tr:hover td.moradoclaro { background: var(--moradoclaro); opacity: .9; }
.modo-oscuro table tr:hover td.cafe { background: var(--cafe); opacity: .9; }
.modo-oscuro table tr:hover td.cafeclaro { background: var(--cafeclaro); opacity: .9; }
.modo-oscuro table tr:hover td.naranja { background: var(--naranja); opacity: .9; }
.modo-oscuro table tr:hover td.naranja2 { background: var(--naranja2); opacity: .9; }
.modo-oscuro table tr:hover td.naranjaclaro { background: var(--naranjaclaro); opacity: .9; }
.modo-oscuro table tr:hover td.amarillo { background: var(--amarillo); opacity: .9; }
.modo-oscuro table tr:hover td.amarillo2 { background: var(--amarillo2); opacity: .9; }
.modo-oscuro table tr:hover td.amarilloclaro { background: var(--amarilloclaro); opacity: .9; }
.modo-oscuro table tr:hover td.verde { background: var(--verde); opacity: .9; }
.modo-oscuro table tr:hover td.verde2 { background: var(--verde2); opacity: .9; }
.modo-oscuro table tr:hover td.limon { background: var(--limon); opacity: .9; }
.modo-oscuro table tr:hover td.verdeclaro { background: var(--verdeclaro); opacity: .9; }
.modo-oscuro table tr:hover td.negro { background: var(--negro); opacity: .9; }
.modo-oscuro table tr:hover td.rata { background: var(--rata); opacity: .9; }
.modo-oscuro table tr:hover td.gris { background: var(--gris); opacity: .9; }
.modo-oscuro table tr:hover td.gris9 { background: var(--gris9); opacity: .9; }
.modo-oscuro table tr:hover td.blanco { background: var(--blanco); opacity: .9; }

.modo-oscuro table tr:hover td.amarillo { background: var(--amarillo2); }
.modo-oscuro table tr:hover td.amarilloclaro { background: var(--amarilloclaro); color: var(--negro); }
.modo-oscuro table tr:hover td.verdeclaro { background: var(--verdeclaro); color: var(--negro); }
.modo-oscuro table tr:hover td.azulclaro { background: var(--azulclaro); color: var(--negro); }
.modo-oscuro table tr:hover td.azulclaro a { background: var(--azulclaro); color: var(--negro); }
.modo-oscuro table tr:hover td.rojoclaro { background: var(--rojo2); }
.modo-oscuro table tr:hover td.moradoclaro { background: var(--morado4); color: var(--blanco); }
.modo-oscuro table tr:hover td.cafeclaro { background: var(--cafeclaro); color: var(--negro); }

.modo-oscuro table tr.grisclaro td { background: var(--gris1); color: var(--blanco); }
.modo-oscuro table tr.grisclaro:nth-child(odd) td { background: var(--gris2); }
.modo-oscuro table tr.grisclaro:hover td { background: var(--gris3); }

.modo-oscuro table tr.rojoclaro td { background: var(--rojo); color: var(--blanco); }
.modo-oscuro table tr.rojoclaro:nth-child(odd) td { background: var(--rojo2); }
.modo-oscuro table tr.rojoclaro:hover td { background: var(--rojo3); }

.modo-oscuro table tr.verdeclaro td { background: var(--verde); color: var(--blanco); }
.modo-oscuro table tr.verdeclaro:nth-child(odd) td { background: var(--verde3); }
.modo-oscuro table tr.verdeclaro:hover td { background: var(--verde4); }

.modo-oscuro table tr.amarilloclaro td { background: var(--amarillo); color: var(--negro); }
.modo-oscuro table tr.amarilloclaro:nth-child(odd) td { background: var(--amarillo2); }
.modo-oscuro table tr.amarilloclaro:hover td { background: var(--amarillo3); color: var(--blanco); }

.modo-oscuro table tr.moradoclaro td { background: var(--morado); color: var(--blanco); }
.modo-oscuro table tr.moradoclaro:nth-child(odd) td { background: var(--morado3); }
.modo-oscuro table tr.moradoclaro:hover td { background: var(--morado4); }

.modo-oscuro table tfoot { border-top: 4px solid var(--gris); }
.modo-oscuro table tfoot td { background: var(--negro); border-bottom: 1px solid var(--negro); }
.modo-oscuro table tfoot tr:hover td { background: var(--negro); color: var(--alpha); }
.modo-oscuro table tfoot tr:nth-child(odd) td { background: var(--negro); }
.modo-oscuro table tfoot tr:nth-child(odd):hover td { background: var(--negro); }

.modo-oscuro table tfoot tr td input.basic { color: var(--naranja); }
.modo-oscuro table tfoot tr:hover td input.basic { color: var(--naranja); }
.modo-oscuro table tfoot tr:hover td input.basic:focus { color: var(--naranja); }

.modo-oscuro table a { color: var(--blanco); }
.modo-oscuro table td.rosaclaro a { color: var(--rojo); }