/* =====================================================================
   LOGIN v4 (eco-v4) - ISO.Digital
   Estilos de la pantalla de login y del popup de inicio de sesión.
   El popup lo arma ModalPopups.js con estilos INLINE (colores, bordes,
   posiciones). Acá se pisan sólo los aspectos visuales con !important;
   las posiciones/medidas que calcula la librería se respetan.
   bg.jpg queda disponible para reutilizar en otras partes.
   ===================================================================== */

/* ---------- Paleta ---------- */
/*
	verde oscuro   #1E3A12  / #24451A
	verde medio    #3E6B1F
	verde oliva    #6B7F2A  / #808B32
	oliva claro    #A4B24A
*/

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	margin: 0px;
	background: url('bg.jpg');
}
h1 {
	background: url('../i/01.png');
	padding: 3px;
	color: #1E3A12;
}

/* ---------- Página (fuera del popup) ---------- */
fieldset {
	color: #000000;
	font: 12px Arial;
	background: url('../i/04.png');
	padding: 5px;
	margin-bottom: 10px;
	border: 1px solid #24451A;
	border-radius: 8px;
}
legend {
	color: #FFFFFF;
	font: 16px Arial;
	padding: 8px 18px;
	background: #24451A;
	background-image: linear-gradient(to right, #1E3A12, #6B7F2A);
	border: 1px solid #1E3A12;
	border-radius: 8px;
}
#divFooterInfoScreen{
	font: italic 12px Georgia, "Times New Roman", Times, serif;
	color: #FFF;
	padding: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	clear:both;
	position:absolute;
	bottom:0;
	left:0;
	background: #1E3A12;
	background-image: linear-gradient(to right, #1E3A12, #6B7F2A);
	width:100%;
	height: 14px;
}
.Error { background: url('../i/06.png'); padding: 5px; border-radius: 6px; }
.Info{ background-color:#E4EBC8; padding:10px; color:#1E3A12; border: 1px solid #3E6B1F; border-radius: 8px; }
.Contenido { margin: 0px 5px 0px 5px; }
.oculto { display: none; }

/* ---------- Botones (gradiente verde oscuro -> verde oliva) ---------- */
.btnGetLogin,
.BotonLogin,
#divLoginForm button {
	background: #24451A;
	background-image: linear-gradient(to bottom, #6B7F2A, #1E3A12);
	border: 1px solid #1E3A12;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
	text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
	font-family: Arial;
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
	transition: background-image .2s, box-shadow .2s, transform .1s;
}
.btnGetLogin {
	font-size: 31px;
	padding: 20px;
	border-radius: 14px;
}
.BotonLogin {
	font-size: 18px;
	padding: 8px 15px;
}
#divLoginForm button {
	padding: 4px 8px;
}
.btnGetLogin:hover,
.BotonLogin:hover,
#divLoginForm button:hover {
	background-image: linear-gradient(to bottom, #808B32, #2C5219);
	box-shadow: 0 3px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
	text-decoration: none;
}
.btnGetLogin:active,
.BotonLogin:active,
#divLoginForm button:active {
	background-image: linear-gradient(to bottom, #1E3A12, #6B7F2A);
	transform: translateY(1px);
}
.btnGetLogin:focus,
.BotonLogin:focus,
#divLoginForm button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(164, 178, 74, .6), 0 2px 6px rgba(0, 0, 0, .35);
}

/* =====================================================================
   POPUP (ModalPopups) - se aplica a cualquier popup de la pantalla
   ===================================================================== */

/* Fondo que tapa la página */
div[id$="_background"] {
	background-color: #0F1F09 !important;
	opacity: .75 !important;
}

/* La sombra de la librería es un div desplazado y cuadrado: se reemplaza por box-shadow */
div[id$="_shadow"] {
	display: none !important;
}

/* Contenedor */
div[id$="_popup"] {
	background-color: #1E3A12 !important;
	border: 0 !important;
	padding: 0 !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .55) !important;
}
/* La librería desplaza las capas 1px (left/top) por su borde: se pegan al contenedor */
div[id$="_popupTitle"],
div[id$="_popupBody"],
div[id$="_popupFooter"] { left: 0 !important; }
div[id$="_popupTitle"] { top: 0 !important; }

/* Título: blanco sobre verde oscuro (padding horizontal = 10px total, como asume la librería) */
div[id$="_popupTitle"] {
	background-color: #1E3A12 !important;
	background-image: linear-gradient(to right, #1E3A12, #3E6B1F 70%, #6B7F2A) !important;
	color: #FFFFFF !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	letter-spacing: .3px;
	padding: 6px 5px !important;
	text-indent: 8px;
	border: 0 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
div[id$="_popupTitle"] * { color: inherit !important; }
div[id$="_popupTitle"] :is(table, td) { font-size: inherit !important; background: transparent !important; border: 0 !important; padding: 0 !important; }

/* Cuerpo */
div[id$="_popupBody"] {
	background-color: #24451A !important;
	color: #1E3A12 !important;
}

/* Pie */
div[id$="_popupFooter"] {
	background-color: #1E3A12 !important;
	background-image: linear-gradient(to right, #6B7F2A, #3E6B1F 30%, #1E3A12) !important;
	color: #FFFFFF !important;
}

/* Botones del pie (Cerrar/Cancelar/OK...) generados inline por la librería */
div[id$="_popupFooter"] input[type=button] {
	background: #24451A !important;
	background-image: linear-gradient(to bottom, #808B32, #2C5219) !important;
	border: 1px solid #A4B24A !important;
	border-radius: 8px !important;
	color: #FFFFFF !important;
	font: bold 10px Arial, Helvetica, sans-serif !important;
	width: auto !important;
	min-width: 80px;
	height: 24px !important;
	padding: 0 14px !important;
	cursor: pointer;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
div[id$="_popupFooter"] input[type=button]:hover {
	background-image: linear-gradient(to bottom, #A4B24A, #3E6B1F) !important;
}

/* ---------- Contenido del popup de login ---------- */
#divLoginFormWrapper {
	padding: 5px;
	background: url('bg.jpg') center / cover no-repeat;
}

/* Fieldset del login: deja ver bg.jpg con 30% de atenuación */
#divLoginForm fieldset {
	background: rgba(255, 255, 255, .30);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 14px;
	padding: 10px 5px;
	margin: 10px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
#divLoginForm legend {
	background: #1E3A12;
	background-image: linear-gradient(to right, #1E3A12, #6B7F2A);
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50px;
	padding: 4px;
}
#divLoginForm legend img {
	border-radius: 50%;
	display: block;
}
#divLoginForm label {
	font-size: 11px; color: #FFFFFF;
}
#divLoginForm h2, #divLoginForm p {
	margin: 10px;
}

/* Títulos dentro del popup: blanco sobre verde oscuro */
h2.h2login {
	background: #1E3A12;
	background-image: linear-gradient(to right, #1E3A12, #3E6B1F);
	color: #FFFFFF;
	font: 15px Arial, Helvetica, sans-serif;
	padding: 8px 12px;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
	overflow: hidden;
}

/* Cajas de texto */
#divLoginForm INPUT[type=text],
#divLoginForm INPUT[type=password] {
	box-sizing: border-box;
	width: 100%;
	font-size: 21px;
	padding: 8px 14px;
	color: #1E3A12;
	background: rgba(255, 255, 255, .92);
	border: 2px solid #3E6B1F;
	border-radius: 10px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15);
	transition: border-color .2s, box-shadow .2s, background .2s;
}
#divLoginForm INPUT[type=text]:focus,
#divLoginForm INPUT[type=password]:focus {
	outline: none;
	background: #FFFFFF;
	border-color: #6B7F2A;
	box-shadow: 0 0 0 3px rgba(164, 178, 74, .55), inset 0 2px 4px rgba(0, 0, 0, .1);
}
#divLoginForm INPUT::placeholder {
	color: #808B32;
	opacity: 1;
}

/* Mensajes dentro del formulario */
#divLoginForm .Error {
	background: rgba(120, 20, 20, .85);
	color: #FFFFFF;
	padding: 6px 10px;
}