@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200;300;400;500;600&family=Titillium+Web:wght@400&display=swap&family=Fira+Sans:wght@200;300;400;500;600&family=Labrada:wght@300;400;500;600&family=Alegreya+Sans+SC:wght@500&display=swap');

@media screen 
{



/** tema claro **/
/**
:root
{
    --hue                        : 50 ;
    --color-texto                : hsl( var(--hue), 20%, 15% );
    --color-texto-bold           : hsl( var(--hue), 20%, 5%  );
    --color-tema                 : hsl( var(--hue), 70%, 30% ) ;   
    --color-headers              : var( --color-tema ) ; 
    --color-subrayado-enlaces    : hsl( var(--hue), 20%, 70% ) ;
    --color-fondo-enlaces-hover  : hsl( var(--hue), 20%, 70% ) ;
    --color-fondo-cabecera       : hsl( var(--hue), 20%, 30% ) ; 
    --color-titulo-cabecera      : hsl( var(--hue), 40%, 99% );
    --color-fondo-cuerpo-central : hsl( var(--hue), 5%, 90% ) ;
    --color-fondo-enlaces        : hsl( var(--hue), 5%, 80% ) ;
    
    --color-fondo-controles      : hsl( var(--hue), 5%, 80% );
    --color-fondo-bordes         : hsl( var(--hue), 5%, 95% ) ;
    --color-texto-enlaces        : hsl( var(--hue), 60%, 20% ) ;
    --color-div-contexto         : hsl( var(--hue), 10%, 80% );     
    --tamano-fuente              : 12pt ;
    --tipo-fuente                : 'Crimson Pro', serif ; 
    --tipo-fuente-headers        : 'Titillium Web', sans ;
    --text-font-weight           : 400 ;
    --bold-text-font-weight      : 500 ;
    --cabe-font-weight           : 500 ;
    --sombra-cabe-cuerpo         : 0px 0px 20px 5px rgb( 70%,70%,70%); 
    --margen-superior-pie        : 8px ;
    --color-fondo-tablas-1       : rgb(97%,97%,97%);
}

**/

/**** tema oscuro (descomentar para activar)   **/

:root
{
    --hue                        : 30 ;
    --color-texto                : hsl( var(--hue), 10%, 95%);
    --color-texto-bold           : hsl( var(--hue), 30%, 75% );
    --color-tema                 : hsl( var(--hue), 87%, 67%) ;
    --color-fondo-cabecera       : hsl( var(--hue), 2%,  27% ) ; 
    --color-fondo-cuerpo-central : hsl( var(--hue), 2%,  18% ) ;
    --color-headers              : hsl( var(--hue), 80%, 70% );    
    --color-titulo-cabecera      : hsl( var(--hue), 80%, 70% );
    
    --color-texto-enlaces        : hsl( var(--hue), 10%, 95% ) ;
    --color-subrayado-enlaces    : hsl( var(--hue), 20%, 45% ) ; 
    --color-fondo-enlaces        : hsl( var(--hue), 5%, 80% ) ;
    --color-fondo-enlaces-hover  : hsl( var(--hue), 20%, 35% ) ;
    
    --color-fondo-controles      : hsl( var(--hue), 5%, 30% );
    --color-fondo-bordes         : hsl( var(--hue), 0%, 0% ) ;
    
    --color-div-contexto         : hsl( var(--hue), 10%, 80% );     
    --tamano-fuente              : 12pt ;
    
    --tipo-fuente                : 'Fira Sans', sans ; 
    --text-font-weight           : 300 ;
    --bold-text-font-weight      : 400 ;

    --tipo-fuente-headers        : 'Alegreya Sans SC', serif ;

    --font-weight-cabeceras      : 500 ;
    --sombra-cabe-cuerpo         : 0px 0px 0px 0px ; /** 0px 0px 20px 5px hsl( var( --hue),30%,60% ); **/
    --margen-superior-pie        : 8px ;
    --color-fondo-tablas-1       : rgb(20%,20%,20%);
}

* 
{ 
    box-sizing : border-box !important ; /** style.width incluye contenido+padding+bordeen todo los elem **/
}

body, html 
{
    margin       : 0 !important ;
    padding      : 0 !important ;
    border-width : 0 !important ;
    border-style : none !important ;
    overflow-x   : hidden !important ;
}
body 
{  
   display              : flex ;
   flex-direction       : column ;
   align-items          : center ;
   background-color     : var(--color-fondo-bordes);
   color                : var(--color-texto);
   font-size            : var(--tamano-fuente)  !important ;
   font-family          : var(--tipo-fuente), serif ;
   font-weight          : var(--text-font-weight) !important ;
   box-shadow           : var(--sombra) ; 
}
li:not(:last-child),
ul:not(:last-child) 
{
    margin-bottom : 5px ;  /** espacio vertical entre elementos de listas **/
}

b
{
    color       : var(--color-texto-bold) !important ;
    font-weight : var(--bold-text-font-weight) !important;
}

/** -----------------------------------------------------------------
 ** Cabecera y cuerpo (div-cabe-cuerpo)
 ** ----------------------------------------------------------------- 
 **/

#div-cabe-cuerpo 
{
    box-shadow                 : var(--sombra-cabe-cuerpo) ; 
    background-color           : var(--color-fondo-cuerpo-central);
    border-bottom-right-radius : 5px ;
    border-bottom-left-radius  : 5px ;
    
}

/** -----------------------------------------------------------------
 ** Contexto (div-contexto)
 ** ----------------------------------------------------------------- 
 **/

#div-contexto 
{
    color          : var(--color-div-contexto) ;
    font-family    : var(--tipo-fuente-headers), sans !important ;
    
    text-align       : left ;
    border           : 0px !important ;
    margin           : 0px !important ;
   
    background-color : var(--color-fondo-contexto);
    padding-top      : 10px !important ;
    padding-bottom   : 10px !important ;

    overflow-x        : hidden !important ;
    overflow-y        : hidden !important ;
    
    /** padding-left, padding-right y bottom es fijado por programa **/
}

#div-contexto a 
{
   text-decoration      : none !important ;
   border-bottom-style  : none !important ;
}
#div-contexto::before 
{
    content : "\2191\0020\0020\0020\0020" ;  /** upward arrow followed by no-break space (unicode hex codes) **/
}
#div-contexto a, #div-contexto a:link, #div-contexto a:visited 
{
    color            : var(--color-div-contexto) !important ;
    font-family      : var(--tipo-fuente-headers) !important ;
    text-decoration-line  : none !important ;   
}
#div-contexto a:hover 
{
   background-color  : var( --color-fondo-enlaces-hover );
} 

/** -----------------------------------------------------------------
 ** Cabecera (div-cabe)
 ** ----------------------------------------------------------------- 
 **/

#div-cabe 
{
    text-align       : left ;
    border           : 0px !important ;
    margin           : 0px !important ;
   
    background-color : var(--color-fondo-cabecera);
    padding-top      : 20px !important ;
    padding-bottom   : 10px !important ;

    display : flex ;
    justify-content : space-between ;
    align-items  : center ;
}
#div-cabe h1
{
    color          : var(--color-titulo-cabecera) !important ;
    margin-top     : 5px ;
    padding-top    : 0px ;
    border-top     : 0px ;
    border-bottom  : 0px ;
    margin-bottom  : 0px ;
    padding-bottom : 0px ;
}

#div-cabe a 
{
   text-decoration      : none !important ;
   border-bottom-style  : none !important ;
}
#div-cabe a:hover 
{
   background-color : inherit !important ;
} 

#div-cuerpo-central 
{
    /** text-align        : justify; **/
    text-justify      : inter-word;
    background-color  : var(--color-fondo-cuerpo-central);

    padding-top       : 20px !important ;

    margin-top        : 0px !important ;
    margin-left       : 0px !important ;
    margin-right      : 0px !important ;
    margin-bottom     : 6px ;
    
    border-style      : none ;
    border-top        : 0px !important ;
    border-left       : 0px !important ;
    border-right      : 0px !important ;
    border-bottom     : 0px !important ;

    overflow-x        : hidden !important ;
    
    /** padding-left, padding-right y bottom es fijado por programa **/
}

#div-pie 
{
    text-align       : right ;
    font-size        : 90% ;
    background-color : rgba(100%,100%,100%,0%); /** transparent **/
    margin           : 0px !important ;
    margin-top       : var(--margen-superior-pie)  !important ;
    padding-top      : 5px !important ;
    padding-right    : 10px !important ;
    padding-bottom   : 10px !important ;
    border           : 0px !important ;
    
}



#uri, #actu 
{
    color : var(--color-tema) ;
}
h1,h2,h3
{  
    font-family   : var(--tipo-fuente-headers), serif !important ; 
}
h1
{  font-size            : 20pt !important;
   font-weight          : var(--font-weight-cabeceras)  !important ;
   border               : 0px ;
   margin-top           : 1em ;
   border-bottom-color  : var(--color-fondo-cabecera) ;
   padding-bottom       : 5px ;
   padding-top          : 0px ; /*** ??? ***/
}
h2
{  font-size            : 18pt !important;
   font-weight          : var(--font-weight-cabeceras)  !important ;
   color                : var(--color-headers) !important ;

   margin-top           : 1em !important ;
   border-top           : 0px ;
   padding-top          : 5px ;

   padding-bottom       :  5px !important ; 
   border-bottom        :  0px !important ;
   margin-bottom        :  3px !important ;
   
}
h3
{  font-weight          : var(--font-weight-cabeceras)  !important ;
   font-size            : 14pt !important ;
   color                : var(--color-headers) !important ;
}
a:link, a:visited
{  
   text-decoration-line    : none ;
   text-decoration-color   : var(--color-subrayado-enlaces) !important ;
   /** background-color        : var(--color-fondo-enlaces ); **/
   color                   : var( --color-texto-enlaces ) !important ;
   font-weight             : var( --text-font-weight ) ! important ;
   border-bottom-width     : 2pt ;
   border-bottom-style     : solid ;
   border-bottom-color     : var(--color-subrayado-enlaces);
   border-radius           : 4px ;
   border-top-width        : 4px ; 
   border-left-width       : 4px ; 
   border-right-width      : 4px ; 

   padding-left            : 0px ;
   padding-right           : 0px ;
}
a:hover 
{
   background-color  : var( --color-fondo-enlaces-hover );
}

/* h1 a 
{
   color : rgb(80%,80%,80%) ! important ;
   border-bottom-width : 0pt ;
   font-weight         : normal ;
} */
hr 
{  border-color         : var(--color-tema) ; 
}


tt 
{   
    color : var(--color-tema)   !important;   
}
table.cua1 
{
    width            : 100% ;
    table-layout     : fixed ;
    border           : 1px solid ;
    border-color     : rgb( 60%,60%,60%) ;    
    margin-bottom    : 2em ;
    padding          : 0.4em ;
    background-color : var(--color-fondo-tablas-1);
}
table.cua1 tr td, table.cua1 tr th
{
    vertical-align : top ;
    text-align     : left ;
    overflow       : hidden ;

}
table.cua1 th 
{
    font-weight : var(--text-font-weight) ;
    /** font-style  : italic ; **/
    width       : 4.5em ; 
    color      : rgb(70%,70%,70%);
    
}
/**
table.cua1 td 
{
    width : 90% ;
}
**/



/* #div-pie 
{
    font-size: 10pt !important ;
} */


} /** fin de @media screen **/

@media print 
{
    body, html, * 
    {
        
        font-family : var(--tipo-fuente), serif ;
    }
    h1, h2 
    {
        font-family : var(--tipo-fuente-headers), serif ; 
        
    }
    /**
    h1 
    {
        font-size : 22pt !important ;
    }
    h2 
    {
        font-size : 20pt !important ;
    }
    **/
}

@page 
{
    margin: 1.5cm ;
    
}