:root { --version:"audiolibro.css V.0.16 - 31.32024 11:00 by lmc";
	--font-size: 1.2em; --max-width-body: 800px;
	--cuerpo-bg-color: #222; 
	--cuerpo-color: #eee; 
	--cuerpo-b: white; 
	--header-bg-color: rgba(55, 61, 73, 0.849);
	--header-color:#fff;
	--svg-stroke-color:#fff; 
	--icon-active-stroke:#7d98ff; 
	--icon-disabled-stroke:#000;
}

* 		{ box-sizing: border-box; }
h1,h2	{ text-align:center;}
b 			{ color: var(--cuerpo-b);}
a		{ text-decoration: none; color:var(--icon-active-stroke); }
ul		{ line-height:1.5em;}
body	{ 
	font-family: nunito, Trebuchet MS, Arial, sans-serif; user-select: auto;
	background-color: var(--cuerpo-bg-color); color:var(--cuerpo-color);
	word-wrap: break-word; padding-bottom: 80vh;
} 
p 		{ font-size:larger;}
pre 	{  
    border-top: 1px solid lightgray;  border-bottom: 1px solid lightgray; border-radius: 10px;
    padding: 10px 15px; overflow: hidden; background-color: rgb(243, 243, 243); }

blockquote { margin: 0em; padding: 1em;  border-radius: 10px; border: 1px solid gray;}
#cuerpo { 
    max-width: var(--max-width-body); 
    margin: auto; margin-bottom:50px; margin-top:0px; padding: 50px 10px 0 10px; 
    border: 1px solid #aaa; border-radius:10px; box-shadow: 0px 0px 5px grey;
    scroll-behavior: smooth; z-index:50;
    font-size: var(--font-size);
} 

.darkTheme {  --cuerpo-bg-color: #eee;   --cuerpo-color:#222; --cuerpo-b: black; }

.lineHighlighted { color:var(--icon-active-stroke); }

.noUserSelect { user-select: auto;}
.displayNone { display: none;}

#update{font-size: .7rem; text-align: right;margin-bottom: -20px;}
/*********************************************************************************
    HEADER: nav + notification 
**********************************************************************************/

#header {
    position:fixed; top:0px; left:0px; width:100%;  padding: 0px;   z-index:100;
    background-color:var(--header-bg-color); color:var(--header-color);
}

/*********************************************************************************
    NAV
**********************************************************************************/

#nav{ 
    max-width: var(--max-width-body); margin: auto; overflow: auto;
    display:flex; flex-direction: row; justify-content: center;  align-items: center; 
    }

#nav>button { margin:0px; padding:13px 0 10px 0; width: 45px; border:none; background-color: rgba(0, 0, 0, 0); stroke:#d3dada;}
button>svg { width:27px; height:27px; stroke:var(--svg-stroke-color); fill: var(--svg-stroke-color); stroke-linecap: round; stroke-width: 10%; }
button>svg:hover {  stroke:var(--icon-active-stroke); fill:var(--icon-active-stroke) }

#iconPlay{ width: 30px; height: 30px; stroke: var(--icon-active-stroke); stroke-width: 10%; }
#btnRewind:disabled>#iconRewind { stroke:var(--icon-disabled-stroke); }
#btnPlay:disabled>#iconPlay { stroke:var(--icon-disabled-stroke); }
#btnForward:disabled>#iconForward { stroke:var(--icon-disabled-stroke); }

.btnVoice {border:1px solid gray; border-radius: 5px; margin:2px; padding: 7px; cursor: pointer;}

/*********************************************************************************
    NOTIFICATION: Content all boxes
**********************************************************************************/

#notification {
    max-width: var(--max-width-body); margin: auto; overflow: auto;
    background-color:var(--header-bg-color); color:var(--header-color);
}
#notification a {color: var(--icon-active-stroke); text-decoration: none;}

#settingsBox { display: none; padding:20px; overflow-y: auto; max-height: 80vh; line-height: 2em; 
	margin:10px; border:1px solid gray; border-radius: 10px;}
#settingsBox>input[type=button] { margin:3px; padding:3px 7px;  border-radius:13px;}
#settingsBox>input[type=range] {width:100%;}
#settingsBox>input, #settingsBox>label{cursor: pointer;}
#indiceBox   { display: none; padding: 10px; overflow-y: auto; 
	max-height: 80vh; line-height: 1.7em; border:1px solid gray;
	margin:10px; border:1px solid gray; border-radius: 10px;}
#indiceBox>a { display: block; color: var(--icon-active-stroke); }

#idiomaBox   { display: none; padding:10px; overflow-y: auto; max-height: 80vh; border:1px solid gray;
	margin:10px; border:1px solid gray; border-radius: 10px;}


/*********************************************************************************
    Generals styles
**********************************************************************************/
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.small {font-size:small;}
.red {color:red;}
.green {color:green;}
.blue {color:blue;}
.white {color:white;}
.yellow {color:yellow;}

/*********************************************************************************
    Useful info
    ===========

    color: #373d49  gris bello 
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/  

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