/* 
    Estilos personalizados para el portal Iberfauna.
    Paleta de Iberfauna: azul personalizado y texto claro para contraste 

    Manuel Sánchez Ruiz - 28/07/2025
*/


/* ************************************************************** */
/* ************************************************************** */
/* --->>  Pruebas temporales  --- */


/* ---  Pruebas temporales  <<--- */
/* ************************************************************** */
/* ************************************************************** */



/* 
    Hero vacío, solo mantiene proporción y posición relativa 
    Deja el hueco necesario para mostrar la imagen de fondo
*/
.hero-fondo {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1; /* Mantiene proporción 2:1 */
}

/* Fijar el contenido debajo de la barra de navegación (navbar) */
main {
    margin-top: 75px; 
}


/* Fondo semitransparente para las tarjetas */
.card.bg-transparente {
    background-color: rgba(238, 238, 248, 0.8) !important; /* blanco sucio semi-transparente */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* opcional: da sensación de flotación */
}


/* 
    Mantengo el antiguo fondo amarillito de Iberfauna, 
    este fondo se puede cambiar desde aquí en cualquier momento.
*/
.bg-fondo-old {
    background-color: #ffffe9 !important;
}

/* Fondo gris clarito */
.bg-fondo-gr1 {
    background-color: #edede6 !important;
}

/*  Forzando el fondo transparente en los distintos controles */
.bg-fondo-transparente {
    background-color: rgba(255, 255, 255, 0) !important;
}

.bg-iberfauna {
    background-color: #114499 !important;
    color: #ffffff !important;
}

/* Asegura que los enlaces dentro del navbar también cambien de color */
.bg-iberfauna .navbar-nav .nav-link,
.bg-iberfauna .navbar-brand,
.bg-iberfauna .nav-link,
.bg-iberfauna .dropdown-menu .dropdown-item {
    color: #ffffff !important;
}

/* Dropdown: fondo oscuro */
    .bg-iberfauna .dropdown-menu {
        background-color: #114499 !important;
        border: none; /* opcional, para que no tenga borde blanco */
    }

/* Opcional: cambiar el color de los enlaces al pasar el cursor */
    .bg-iberfauna .navbar-nav .nav-link:hover,
    .bg-iberfauna .dropdown-menu .dropdown-item:hover {
        background-color: #114499 !important;
        color: #dbeafe !important; /* azul claro */
    }

.text-iberfauna {
    color: #114499 !important;
}

.border-iberfauna {
    border-color: #114499 !important;
}

.btn-iberfauna {
    background-color: #114499 !important;
    color: #ffffff !important;
    border: none;
}

.btn-iberfauna:hover {
    background-color: #114499 !important; /* un tono ligeramente más oscuro para hover */
}

/* Estilo adicional para el rango (por si acaso) */
.taxon-rango {
    color: #333;
    font-weight: normal;
}

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

/*
    *****************************************
    [Antiguo] Estilos para la aplicación web IBERFAUNA.
    Desarrollo: Manuel Sánchez Ruiz
    Fecha de actualización: 11/04/2018.
    *****************************************
    */

/*
BODY2 { BACKGROUND-COLOR: #003355 }
*/

#divout 
{
	BACKGROUND: #ffffff; 
	PADDING: 0px 10px 10px 10px; 
	WIDTH: 170px; 
	TEXT-ALIGN: left; 
}

#resultdiv { width:250px; height:85px; overflow:auto; }


/*
    Clases para dar formato a celdas.
*/

.boxblue 
{
	BACKGROUND: #e8edf5;
	BORDER: solid 1px #b4bece; 
	PADDING: 10px 10px 10px 10px;  
	MARGIN: 0px 0px 25px 0px;  
	TEXT-ALIGN: left;
}
.boxwhite 
{
	BORDER: solid 1px #bebebe; 
	PADDING: 10px 10px 10px 10px; 
	BACKGROUND: #ffffff; 
	MARGIN: 0px 0px 25px 0px; 
	TEXT-ALIGN: left 
}

/*#region -- Estilos de celda para dar formato a barras de título. -- */

/*
    Formato de la celda que da forma al pie de página.
    También a los títulos en medio de la página.
    Bordes redondeados.
*/
.pie01
{
    background: #114499 ;
    padding: 4px 2px 4px 10px ;
    border: 5px;
    border-radius: 10px;
    font-family:Verdana,Arial ;
    font-size: 12px ;
    color: #ffffcc ;
}


/* 
    Diseño de celda de título, fondo azul fauna, texto amarillo mediano. 
    Bordes redondeados.
*/
.cabecera01
{
	background-color: #114499;
    padding: 4px 2px 4px 10px ;
    border: 5px;
    border-radius: 10px;
	text-align: left;
	font-size: 16px;
	color: #ffffcc;
	font-family: Verdana, Arial;
}


/* Diseño de celda de título, color amarillo, letra verde grande. */
.cabecera02
{
	background-color: #ffff99;
	font-size: 20px;
	color: #006600;
	font-family: Verdana, Arial;
	font-weight: bold;
}

/* Diseño de celda de título, color mostaza, letra azul fauna normal. */
.cabecera03
{
	background-color: #ff9933;
	font-size: 14px;
	color: #114499;
	font-family: Verdana, Arial;
}

/* Diseño de mensaje de resultado al guardar en la base de datos */
.resultado01
{
    background-color: #d1adac;
    padding: 100px 50px 100px 50px;
    border-radius: 5px;
    font-size: 16px;
    color: #114499;
    font-family: Verdana, Arial;
}

/*#endregion -- Estilos de celdas -- */


/*#region -- Estilos de texto utilizados -- */

/*
    Clases para dar formato al texto.
*/

/* 
    Código de nomenclatura
    Texto negro reducido para comentarios.
*/

.txtpeque1 {
    font-size: 12px;
    color: #000000;
    font-family: Verdana, Arial;
}

/*
    Código de nomenclatura
    Texto negro reducido estrechado en los márgenes.
*/

.txtpeque2 {
    font-size: 12px;
    color: #000000;
    font-family: Verdana, Arial;
    margin-left: 50px;
    margin-right: 50px;
}

/* 
    Código de nomenclatura
    Textos en negro 
*/
.txtcode0 {
    font-size: 14px;
    text-indent: 30px;
    color: #000000;
    font-family: Verdana, Arial;
}

/* 
    Código de nomenclatura
    Textos en negro 
*/
.txtcode1 {
    font-size: 14px;
    margin-left: 20px;
    text-indent: -20px;
    color: #000000;
    font-family: Verdana, Arial;
}

/* 
    Código de nomenclatura
    Textos en negro 
*/
.txtcode2 {
    font-size: 14px;
    margin-left: 40px;
    text-indent: -20px;
    color: #000000;
    font-family: Verdana, Arial;
}

/* 
    Código de nomenclatura
    Textos en negro 
*/
.txtcode3 {
    font-size: 14px;
    margin-left: 60px;
    text-indent: -20px;
    color: #000000;
    font-family: Verdana, Arial;
}


/* Textos en negro */
.txtnormal {
    font-size: 14px;
    color: #000000;
    font-family: Verdana, Arial;
}

/* Texto negro en negrita */
.txtnormalb {
    font-size: 14px;
    font-family: Verdana, Arial;
    color: #000000;
    font-weight:bold;
}

.txtnormal2 {
    font-size: 16px;
    font-family: Verdana, Arial;
    color:#000000;
}

.titu01 {
    FONT-SIZE: 28px;
    FONT-FAMILY: Verdana, Arial;
    COLOR: #000000;
}

.titu02 {
    FONT-SIZE: 22px;
    FONT-FAMILY: Verdana, Arial;
    COLOR: #000000;
}



/* Textos en color azul fauna */
.normalblue {
	font-family: Verdana, Arial;
	font-size: 14px;
	color: #114499;
}

/* 
    Textos en color azul fauna
    con espaciado entre párrafos.
*/
.normalblue2 {
	font-family: Verdana, Arial;
	font-size: 14px;
    margin-bottom: 10px;
	color: #114499;
}

.txtmediablue {
    font-size: 16px;
    color: #114499;
    font-family: Verdana, Arial;
}

.txtmediablueb {
	font-size: 16px;
	color: #114499;
	font-family: Verdana, Arial;
	font-weight:bold;
}

.txtgrandeblue {
	font-size: 22px;
	color: #114499;
	font-family: Verdana, Arial;
}

.txtgrandeblueb {
	font-size: 22px;
	font-family: Verdana, Arial;
	color: #114499;
	font-weight: bold;
}

.txtgrandebluebi {
	font-size: 22px;
	font-family: Verdana, Arial;
	color: #114499;
	font-style: italic;
	font-weight: bold;
}


/* Textos en amarillo clarito */

.txtamarillo {
	font-size: 16px;
	color: #ffffcc;
	font-family: Verdana, Arial;
}

.txtamarillob {
	font-size: 16px;
	font-family: Verdana, Arial;
	color: #ffffcc;
    font-weight: bold ;
}

/* textos en color rojo */

.txtrojo {
    font-family: Verdana, Arial;
    font-size: 14px;
    COLOR: #ff0000;
}

.txtrojo2 {
	font-size: 16px;
	color: #ff0000;
	font-family: Verdana, Arial;
}


/* Textos de color verde  */
.txtverde {
	font-size: 14px;
	font-family: Verdana, Arial;
	color: #006600;
}

.txtverdeb {
	font-size: 14px;
	font-family: Verdana, Arial;
	color: #006600;
	font-weight: bold;
}


/* Textos en color gris */
.normalgray {
    FONT-SIZE: 14px;
    FONT-FAMILY: Verdana, Arial;
    COLOR: #666666;
}

.normaldarkgray{
    FONT-SIZE: 14px;
    FONT-FAMILY: Verdana, Arial;
    COLOR: #444444;
}
.mediagray {
    FONT-SIZE: 16px;
    FONT-FAMILY: Verdana, Arial;
    COLOR: #666666;
}

.grandegray {
    font-family: Verdana, Arial,;
    font-size: 22px;
    COLOR: #666666;
}



/* configuración de los enlaces */
a:link, a:visited {
    text-decoration:none ;
}
a:hover, a:active {
    text-decoration: underline ;
}

/*#endregion */


/*#region Diseño de botones */

.boton {
    font-family: Verdana, Arial;
    font-size: 12px;
    COLOR: #000000;
    background-color: #ffcc99;
    height: 24px;
    border-radius:8px;
    text-align: center;
}

.btngrey {
    font-family: Verdana, Arial;
    font-size: 12px;
    COLOR: #000000;
    background-color: #f5f5f5;
    height: 24px;
    border-radius:8px;
    text-align: center;
}
/*#endregion */


/*#region Líneas de separación horizontales. */

.separador1 {
    background-color: #aeaeae; 
    height: 1px;
}

.separador2 {
    background-color: #114499; 
    height: 3px;
}

/*#endregion */


/*#region Diseño de paneles de edición. */

.panelEdit
{
	background-color: #cccccc;
	border-bottom: thin groove;
	border-left: thin groove;
	border-top: thin groove;
	border-right: thin groove;
}

.panelEdit2
{
	background-color: #ccccdd;
	border-bottom: thin groove;
	border-left: thin groove;
	border-top: thin groove;
	border-right: thin groove;
}

.panelPie01
{
    background-color: #666666;
    text-align:center;
    color:#ffffff;
    font-size:14px;
    padding:10px 0 20px 0;
}

/*#endregion */

/* Tabla principal. */
.maintab
{
	width:1000px;
	top: 2px;
	margin:auto;
	padding: 0px 0px 0px 0px;
	border: 0px 0px 0px 0px;
	/* background-color: #ffffff; */
}

.maintab2
{
	width:1200px;
	top: 2px;
	margin:auto;
	padding: 0px 0px 0px 0px;
	border: 0px 0px 0px 0px;
	/* background-color: #ffffff; */
}


/* Tabla de contenidos */
.tabla01
{
	width: 100%;
	background-color: #ffffe9;
	text-align: left;
	padding: 0px 0px 0px 0px;
	border: 0px 0px 0px 0px;
	font-family: Verdana, Arial;
	font-size: 14px;
}

.tabla02
{
	width: 100%;
	text-align: left;
    vertical-align: top;
	padding: 5px 5px 5px 5px;
	border: 0px 0px 0px 0px;
	font-family: Verdana, Arial;
	font-size: 14px;
}

/* Tabla para formulario de edición */
.tabla03 
{
    width:95%;
    margin:auto;
	font-family: Verdana, Arial;
	font-size: 14px;
    text-align: left;
    vertical-align: top;
	background-color: #ffffcc;
}

#tipbox 
{ 
	position:absolute; visibility:hidden;
	width:150px; height:40px;
	FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial; text-align:left; 
	background-color:#f5f5f5; vertical-align:middle; padding:5px,3px,3px,7px;
	border-color:#000000
}


/* 
    *********************************************
    Cuadro rojo de aviso de eliminación de taxon 
    *********************************************
*/
.posicion1
{
	position:fixed;
	left:200px;
	top:200px;
	width:750px;
	max-height:500px;
	overflow:scroll;
    background-color:red ;
}