/*
	==============================
	VARIABLES CSS - PALETA SXR
	==============================
	Colores basados en el logo de SXR
	Azul: #0072BC | Verde: #8DC63F
*/
:root {
	/* Colores primarios */
	--io-color-primary: #0072BC;           /* Azul SXR - acciones principales */
	--io-color-primary-dark: #005a96;      /* Azul oscuro - hover/focus */
	--io-color-primary-light: #3399d4;     /* Azul claro - fondos suaves */

	/* Colores de estado */
	--io-color-success: #8DC63F;           /* Verde SXR - éxito, destacado */
	--io-color-success-dark: #6fa32e;      /* Verde oscuro - hover */
	--io-color-error: #cc3333;             /* Rojo - errores, crítico */
	--io-color-error-light: #ff9999;       /* Rojo claro - fondos de error */
	--io-color-warning: #f0ad4e;           /* Amarillo suave - advertencias */
	--io-color-warning-light: #fcf8e3;     /* Amarillo muy suave - fondos */

	/* Colores neutros */
	--io-color-text: #333333;              /* Texto principal */
	--io-color-text-light: #666666;        /* Texto secundario */
	--io-color-text-inverse: #ffffff;      /* Texto sobre fondos oscuros */
	--io-color-border: #cccccc;            /* Bordes estándar */
	--io-color-border-dark: #999999;       /* Bordes más marcados */

	/* Fondos */
	--io-color-bg: #f7f7f7;                /* Fondo principal */
	--io-color-bg-alt: #f5f5f5;            /* Fondo alternativo */
	--io-color-bg-header: #0072BC;         /* Fondo cabeceras */
	--io-color-bg-header-light: #e8f4fc;   /* Fondo cabeceras suave */

	/* Tablas */
	--io-color-table-header: #0072BC;      /* Cabecera de tabla */
	--io-color-table-header-text: #ffffff; /* Texto cabecera tabla */
	--io-color-table-zebra: #e8f4fc;       /* Filas alternas (azul muy suave) */
	--io-color-table-hover: #fff3cd;       /* Hover en filas (amarillo suave) */
	--io-color-table-selected: #d4edda;    /* Fila seleccionada (verde suave) */

	/* Botones */
	--io-color-btn: #0072BC;               /* Botón principal */
	--io-color-btn-hover: #005a96;         /* Botón principal hover */
	--io-color-btn-success: #8DC63F;       /* Botón destacado */
	--io-color-btn-success-hover: #6fa32e; /* Botón destacado hover */
	--io-color-btn-danger: #cc3333;        /* Botón crítico */
	--io-color-btn-danger-hover: #a32929;  /* Botón crítico hover */
}

body {
    font-family: Calibri,Arial,sans-serif;
    font-size: medium;
    margin: 0;
}

/*
	=====================
	ESTILOS PARA EL LOGIN 
	=====================
*/

.io_acceso{
	float:right;
}
.io_acceso_usuario{
	color: #003d7a;  /* Color azul oscuro para visibilidad en fondo blanco */
	float:left;
	font-size: 1.5rem;  /* 18px - heredado por label e input */
	font-weight: bold;
}
.io_acceso_usuario input{
	width: 11.25rem;  /* 180px */
	border: 2px solid #ddd;
	border-radius: 4px;
	font-size: 1.5rem;
}
.io_acceso_clave{
	float:left;
	margin-left: 0.625rem;  /* 10px */
	color: #003d7a;  /* Color azul oscuro para visibilidad en fondo blanco */
	font-size: 1.5rem;  /* 18px - heredado por label e input */
	font-weight: bold;
}

.io_acceso_clave input{
	width: 11.25rem;  /* 180px */
	border: 2px solid #ddd;
	border-radius: 4px;
	color:black;
	font-size: 1.5rem;
}

.io_acceso_boton{
	float:left;
	margin-left: 0.625rem;
}

.forgotpsd {
	clear: both;
	text-align: right;
	margin: 0.3em 0 0 0;
	padding: 0;
	font-size: 0.8rem;
}
.forgotpsd a {
	display: inline-block;
	color: #cce4ff;
	text-decoration: none;
	background: rgba(0, 99, 199, 0.35);
	border-radius: 3px;
	padding: 0.15em 0.5em;
	transition: background 0.15s ease, color 0.15s ease;
}
.forgotpsd a:hover {
	color: #ffffff;
	background: rgba(0, 99, 199, 0.65);
	text-decoration: none;
}
.io_acceso_boton .io_boton{
	border: 2px solid #0063C7;
	border-radius: 4px;
	font-size: 1.5rem;
	font-weight: bold;
	padding: 0 0.6rem;
	vertical-align: middle;
}

/*
	====================================
	ESTILOS PARA LOGIN EN MODO MÓVIL
	====================================
	Layout vertical en dispositivos móviles
*/
@media screen and (max-width: 768px) {
	/* Por defecto en móvil: flex para mantener elementos en línea (cuando hay sesión) */
	.io_acceso {
		float:none;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		/*gap: 0.625rem;  /* 10px espacio entre elementos */
		/*flex-wrap: wrap; */
	}

	/* Cuando hay form (sin sesión): el form ocupa 100% y elementos dentro son block */
	.io_acceso form {
		width: 100%; 
	}

	/* Cuando NO está logeado (hay form): layout vertical */
	.io_acceso form .io_acceso_usuario,
	.io_acceso form .io_acceso_clave,
	.io_acceso form .io_acceso_boton {
		float: none;
		display: block;
		margin-left: 0;
		margin-bottom: 0.625rem;  /* 10px espacio entre elementos */
		width: 100%;
	}

	.io_acceso form .io_acceso_usuario label,
	.io_acceso form .io_acceso_clave label {
		display: block;
		width: 100%;
		margin-bottom: 0.3rem;  /* 5px espacio entre label e input */
	}

	.io_acceso form .io_acceso_usuario input,
	.io_acceso form .io_acceso_clave input {
		/*width: 100%;*/
		/*max-width: 8em;*/
		box-sizing: border-box;
		display: block;
	}

	.io_acceso form .io_acceso_boton .io_boton {
		display: block;
		width: 8em;
		text-align: center;
		padding: 10px;
		margin: 0;
		box-sizing: border-box;
	}
}


/*
	============================
	ESTILOS DE ENLACES Y BOTONES
	============================
*/

/* ENLACES */

.io_enlace{
    color: var(--io-color-primary);
    text-decoration: none;
    cursor:pointer;
}
.io_enlace:visited {
    color: var(--io-color-primary);
    text-decoration: none;
}
.io_enlace:hover {
    color: var(--io-color-primary-dark);
    text-decoration: underline;
}

.io_enlace_critico{
    color: var(--io-color-error);
    text-decoration: underline;
}
.io_enlace_critico:visited {
    color: var(--io-color-error);
    text-decoration: underline;
}
.io_enlace_critico:hover {
    color: var(--io-color-primary);
    text-decoration: underline;
}

.io_enlace_destacado{
    color: var(--io-color-success);
    text-decoration: underline;
}
.io_enlace_destacado:visited {
    color: var(--io-color-success);
    text-decoration: underline;
}
.io_enlace_destacado:hover {
    color: var(--io-color-success-dark);
    text-decoration: underline;
}

/*
	===============================
	ESTILOS PARA BOTONES CON ICONOS
	===============================
*/

.io_boton_icono{
    color: darkblue;
    text-decoration: none;
     -webkit-text-decoration-style: none;
     cursor:pointer; 
}
.io_boton_icono:visited {
    color: darkblue;
    text-decoration: none;    
}
.io_boton_icono:hover {
    color: black;
    text-decoration: none;
}
/*
	====================
	ESTILOS PARA BOTONES
	====================
*/

/* Enlace tipo boton, para colocar en las botoneras */
.io_boton {
    border: 1px solid var(--io-color-btn);
    color: var(--io-color-text-inverse);
    margin: 5px;
    padding: 6px 4px;
    border-radius: 4px;
    text-decoration: none;
    background-color: var(--io-color-btn);
    text-transform:capitalize;
    cursor:pointer;
    white-space:nowrap;
}
.io_boton:visited {
    border: 1px solid var(--io-color-btn);
    color: var(--io-color-text-inverse);
    margin: 5px;
    padding: 1px 4px;
    border-radius: 4px;
    text-decoration: none;
    background-color: var(--io-color-btn);
    text-transform:capitalize;

}
.io_boton:hover {
    background-color: var(--io-color-btn-hover);
    border-color: var(--io-color-btn-hover);
}

.io_boton_critico {
    border: 1px solid var(--io-color-btn-danger);
    color: var(--io-color-text-inverse);
    margin: 5px;
    padding: 1px 4px;
    border-radius: 4px;
    text-decoration: none;
    background-color: var(--io-color-btn-danger);
    text-transform:capitalize;
 	cursor:pointer;
}
.io_boton_critico:visited {
    border: 1px solid var(--io-color-btn-danger);
    color: var(--io-color-text-inverse);
    margin: 5px;
	padding: 1px 4px;
    border-radius: 4px;
    text-decoration: none;
    background-color: var(--io-color-btn-danger);
    text-transform:capitalize;

}
.io_boton_critico:hover {
    background-color: var(--io-color-btn-danger-hover);
    border-color: var(--io-color-btn-danger-hover);
}

.io_boton_destacado {
    border: 1px solid var(--io-color-btn-success);
    color: var(--io-color-text-inverse);
    margin: 5px;
    padding: 1px 4px;
    border-radius: 4px;
    text-decoration: none;
    background-color: var(--io-color-btn-success);
    text-transform:capitalize;
    cursor:pointer;
}
.io_boton_destacado:visited {
    border: 1px solid var(--io-color-btn-success);
    color: var(--io-color-text-inverse);
    margin: 5px;
    padding: 1px 4px;
    border-radius: 4px;
    text-decoration: none;
    background-color: var(--io-color-btn-success);
    text-transform:capitalize;

}
.io_boton_destacado:hover {
    background-color: var(--io-color-btn-success-hover);
    border-color: var(--io-color-btn-success-hover);
}



/*
	=====================
	ESTILOS PARA LISTADOS
	=====================
	
	No crea directamente el efecto cebra, para ello hay que incluir la clase io_cebra
*/

.io_listado{
	width:100%;	
	border-spacing:0px;
	border: 1px solid grey;
}

.io_listado tr{
}

.io_listado tbody tr:hover{
	background-color: var(--io-color-table-hover) !important;
	color: var(--io-color-text) !important;
}

.io_listado th{
	padding-left: 0.25em;padding-right: 0.25em;
	font-weight:bold;
	color: var(--io-color-table-header-text);
	background-color: var(--io-color-table-header);
	border-right:1px solid grey;
	border-bottom: 1px solid grey;
	border-top: 0;
}

/* Enlaces y spans dentro de cabeceras de tabla - heredan color blanco */
.io_listado th a,
.io_listado th span,
.io_listado th .io_enlace {
	color: var(--io-color-table-header-text);
}
.io_listado th a:hover,
.io_listado th span:hover,
.io_listado th .io_enlace:hover {
	color: var(--io-color-warning-light);
	text-decoration: underline;
}

/* Cabeceras clicables - cursor pointer */
.io_listado th span[onclick],
.io_listado th a[onclick] {
	cursor: pointer;
}

/* Iconos SVG en cabeceras - color blanco y tamaño mayor para visibilidad */
.io_listado th svg {
	fill: var(--io-color-table-header-text);
	width: 1.2em;
	height: 1.2em;
	vertical-align: middle;
}

.io_listado th:first-child{
	border-left:0;
}
.io_listado th:last-child{
	border-right:0;	
}

.io_listado td{
	border-right:1px solid grey;
	border-bottom: 1px solid grey;
	padding-left: 0.25em;padding-right: 0.25em;
}
.io_listado td:first-child{
	border-left:0;
}
.io_listado td:last-child{
	border-right:0;
}

.io_listado tr:last-child td{
	border-bottom:0;
}

.io_listado tfoot{
	font-weight:bold;
	background-color: darkgray;
	border-right:0;
	border-bottom: 0;
	border-top: 1px solid grey;	
}


.io_tr_seleccionable:hover{
	background-color:blue;
	color:white;
	cursor:pointer;
}

.io_listado_opciones{
	text-align:right;
}

.io_listado_eliminado{
	color: grey !important;
    text-decoration:line-through;
}

.io_alerta{
	background-color: var(--io-color-error-light) !important;
	color: var(--io-color-error) !important;
}

/* Estilo usado cuando se selecciona una linea, y queremos que se quede marcada */
.io_seleccionado{
	background-color: var(--io-color-table-selected) !important;
	color: var(--io-color-text) !important;
	font-weight: bold;
}

/*
	==================================
	ESTILOS PARA CREAR EL EFECTO CEBRA 
	==================================
*/

.io_linea_par {
  	background-color: var(--io-color-table-zebra);
} 
.io_linea_impar {

}
.io_cebra tr:nth-child(even) {
  	background-color: var(--io-color-table-zebra);
 } 
 

/*
	========================= 
	ESTILOS PARA LOS MENSAJES
	========================= 
*/

.io_mensaje_error{
	background-color: var(--io-color-error-light);
    border: 1px solid var(--io-color-error);
    padding: 5px;
}
/* Mensajes normales */
.io_mensaje{
	/* border-radius: 5px; */
	background-color: var(--io-color-warning-light);
    border: 1px solid var(--io-color-warning);
    padding: 5px;
}

/*
	===================================
	ESTILOS PARA LAS VENTANAS Y MODALES
	===================================
*/

.io_modal_titulo{
	margin-left: 1em;
	font-size: larger;	
	font-weight: bold;
	font-style: italic;
}

.io_modal_fondo{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
	opacity:1;
	pointer-events: auto;
}

.io_modal_visible {
	position: relative;
	margin: 0px;
	padding: 0px;
	background-color:white;	
}

.io_modal_cabecera{
	position:fixed;
	background-color:white;
	overflow:hidden;
	border-bottom: 1px black solid;
	width:inherit;
	height:2em;
	padding-bottom: 0.5em;
}

/*	Este el contenedor puesto por el layout io_modal.php y io_div.php */
.io_layout_contenido_modal{
	margin-bottom:2em;
	margin-top:3em;
	padding-left: 1em;
    padding-right: 2em;
}