:root {
    
    --bg-background:    #f7f8f8;
    --bg-white:         #ffffff;
    
    --color-main:       #001391;
    --color-texto-h1:   #001391;
    
    --color-texto1:     #070e46;
    --color-texto-white:#ffffff;
    --color-texto-mensaje: #ff870f;
    
    --color-aside5:     #0c6dff;
    --color-aside6:     #001391;
    
    --bg-micon-tit:     #ffe761;
    --bg-micon:         #dff3fd;
    --bg-micon-hover:   #7fcef7;
    
    --color-input:      #49a5e6;
    --color-xp1:        #001391;
    --color-xp2:        #070e46;
    --color-lima1:      #cff5cd;
    --color-lima2:      #e8fae7;
    
    --color-dark:       #001391;
    --color-td-border:  #f7f8f8;
    --bg-light1:        #d4edfc;
    --bg-light2:        #ecf8fe;
    --bg-light3:        #f4fbfe;    
    
    --bg-indice:        #85c8ff;
    
    --color-texto2:     #626262;  /* Resumen*/
    --color-highlight:  #88e783;  /* Iconos */
    
    
    --grey-dark:    #505050;
    --grey-medium:  #cccccc;
    --grey-light:   #eaeaea;
    --grey-light2:  #f4f4f4;
    
    --bg-background-grey: #f4f4f4;
    --bg-background-grey2: #dddddd;
    
}

@font-face {
    font-family: 'TiemposHeadline';
    src: url('ima/font/Tiempos-headline-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'TiemposHeadline';
    src: url('ima/font/Tiempos-headline-bold-italic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

body {
    margin: 0 auto; padding: 0px;
    background: var(--bg-background);
    color: var(--color-texto1); line-height: 1.5em;
    font-family: Sans-serif, Arial, Verdana, Tahoma;
    font-style: normal; font-variant: normal; font-size: 11pt;
}
img {
    border: 0px;
}
img.notopmargin {
    /* Quitar, no debería estar */
    margin:0px 3px;
}
a {
    background: inherit; text-decoration: none;
    color: var(--color-main);
}
a:hover {
    background: inherit; text-decoration: underline;
    color: var(--color-main);
}
h1 {
    margin: 0px 0px 25px;
    line-height: 1.2em; text-align: left;
    color: var(--color-texto-h1);
    font-family: 'TiemposHeadline',Helvetica,Arial,sans-serif;
    font-size: 2.5em; font-weight: bold; font-style: normal;
}
h2 {
    font-family: 'TiemposHeadline',Helvetica,Arial,sans-serif;
}
h3 {
    color: var(--color-texto1);
    font-family: 'TiemposHeadline',Helvetica,Arial,sans-serif;
}
input[type=text], input[type=password], select {
    border-radius: 3px; border: 1px solid var(--color-input);
}
input[type=button], input[type=submit], input[type=reset] {
    background-color: var(--color-xp1); transition: background-color .3s; padding: 3px 32px; border: none; color: var(--color-texto-white); cursor: pointer; text-decoration: none; border-radius: 5px;
}
input[type=button].botong, input[type=submit].botong, input[type=reset].botong {
    padding: 10px 40px;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
    background-color: var(--color-xp2); border: none; text-decoration: none;
}
input[type=checkbox] {
    width: 1.5em; height: 1.5em;
    accent-color: var(--color-main);
}
table {
    border: 1px solid var(--color-main); border-collapse: collapse; text-align: left;
}
td {
    padding: 2px 6px; vertical-align: top;
}



div.container {
    margin: 0 auto 0 auto;
    max-width: 1110px;
    padding-left: 15px; padding-right: 15px;
}
div.container_small {
    max-width: 800px;
}
div.container_extendido {
    margin: 0 auto 0 auto;
    padding-left: 20px; padding-right: 20px;
}



header {
    margin-left: auto; margin-right: auto; margin-top: 0;
    background: var(--color-dark); color: var(--color-texto-white);
    height: 70px;
}
header img {
    border: 0px; padding-top: 10px;
}



nav {
    height: 40px; font-size:0.95em;
    padding-top: 10px;  padding-bottom: 10px;
    margin: 0 15px 15px 15px;  border-radius: 16px;
    background: var(--bg-white);
    -webkit-box-shadow: 0 4px 4px 0 rgba(18,18,18,.04),0 1px 3px 0 rgba(39,41,45,.02);
    box-shadow: 0 4px 4px 0 rgba(18,18,18,.04),0 1px 3px 0 rgba(39,41,45,.02);
}
nav a {
    float: left; padding: 10px 15px;
    font-weight: bold;  color: var(--color-main);
    text-decoration: none;
}
nav a:hover, nav a.act {
    color: var(--color-texto1);
    text-decoration: none;
}
nav div#nav1   { width: 170px; }
nav div#nav1 a { padding: 0px; }
nav div#nav2   { width: 760px; }
nav div#navconfig   { float: right; height: 40px; }
nav div#navconfig a { padding: 10px 0px; }
nav div#navcircular {
    width: 40px; height: 40px;
    background-color: var(--bg-background); 
    overflow: hidden; float: right; 
    border-radius: 50%;
}
nav div#navcircular a { padding: 0px; }
nav div#navcircular img { width: 100%; }



footer {
    font-size:0.75em;
    background-color: var(--color-main);
    color: var(--color-texto-white);
    margin: 15px;
    border-radius: 16px;
}



#div_global {
    background:var(--bg-background);
    padding-top: 20px;  padding-bottom: 20px;
}
#div_global table   { 
    border-collapse: collapse;
}



aside {
    width: 160px; font-size: 0.85em;
    padding: 0 0 50px 0;
    display: block; float: left;
}
aside ul {
    width:160px; margin:0 0 30px 0; padding:0; list-style:none;
}
aside ul li {
    width:150px; padding:0; line-height:1.5em;
}
aside ul li a {
    background-color: var(--bg-background); color: var(--color-aside6); width:140px; float: left; 
    margin-bottom: 8px; padding:10px 1px 10px 15px; 
    border: 1.5px solid var(--color-aside6);
    text-decoration:none; 
    border-radius: 10px; 
}
aside ul li a:hover, aside ul li a.act {
    background-color: var(--color-aside5); color:var(--color-texto-white); 
    border: 1.5px solid var(--color-aside5);
    text-decoration: none; 
}
aside ul ul {
    margin:0 0 0 15px; padding:0 0 5px 0; font-size: 0.8em; width:125px;
}
aside ul ul a {
    padding:5px 1px 5px 5px; width:125px;
}



main {
    width: 929px;
    text-align: justify;
    margin: 0px 0px 25px 170px;
    display: block;
    padding: 0px 0px 20px 10px;
}
/*
main {
    width: 925px;
    text-align:justify;
    padding: 0px 0px 30px 0px;
    display: inline-block;
    vertical-align: top;
}
*/
main.extendido {
    width: auto;
}
main.completo {
    width: auto;
    margin:0px 0px 25px 0px;
    padding: 0px 10px 20px 10px;
}

section {
    margin:0px 0px 20px 0px; padding:0px; display: block; 
}
section.texto_mensaje_rojo {
    color: var(--color-texto-mensaje); padding: 10px 20px;
}
p.notasalpie {
    font-size: 0.75em;
}

article {
    margin:20px 0px 5px;
}
article h2, article h3 {
    padding:0px; margin:5px 0px 10px;
}
article p {
    padding:0px; margin:5px 0px;
}



div.imgsvg {
    background-color: var(--color-main);
    mask-size: contain; mask-repeat: no-repeat; mask-position: center;
    -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
}
.svgfijo {
    color: var(--color-main); 
    fill: var(--color-main); 
}
.svgactivo {
    padding: 0 5px; vertical-align: -3px;
    color: var(--color-main); 
    fill: var(--color-main); 
    transition: fill .3s;
}
.svgactivo:hover { 
    color: var(--color-highlight); 
    fill: var(--color-highlight); 
}
.svgmod {
    padding: 0 5px; vertical-align: -3px;
    color: var(--color-main); 
    stroke: var(--color-main); 
    opacity: 0.55;
    transition: opacity .3s;
}
.svgmod:hover {
    opacity: 1.0;
}
img.icono {
    vertical-align: middle;
    margin:0px 3px;
}
img.iconoboton {
    
}




table.pagebc          { border: 0px; border-collapse: collapse; margin: 10px 0px; line-height: 1.2em; }
table.pagebc td       { padding: 5px 15px; margin:0px; vertical-align: middle; border: solid 1px var(--color-td-border); }
table.pagebc td img   { padding: 0 5px 0 5px; margin:0px; vertical-align: text-bottom;}
table.pagebc td.a3    { color: var(--color-texto-white); background-color:var(--color-dark); text-align: center; font-weight: bold; }
table.pagebc td.a3  a { color: var(--color-texto-white); }
table.pagebc td.a3l   { color: var(--color-texto-white); background-color:var(--color-dark); text-align: left; font-weight: bold; }
table.pagebc td.a3l a { color: var(--color-texto-white); }
table.pagebc td.a1    { background-color:var(--bg-light1); text-align: right; }
table.pagebc td.a1c   { background-color:var(--bg-light1); text-align: center; }
table.pagebc td.a1l   { background-color:var(--bg-light1); text-align: left; }
table.pagebc td.a2    { background-color:var(--bg-light2); }
table.pagebc td.a2c   { background-color:var(--bg-light2); text-align: center; }
table.pagebc td.a2bw  { background-color:var(--bg-light2); max-width:100px; word-wrap:break-word;}
table.pagebc td.cp    { background-color:var(--bg-light1); text-align: left; line-height: 1.5em; padding-top: 10px; padding-bottom: 10px; }
table.pagebc td.cr    { background-color:var(--bg-light2); text-align: left; line-height: 1.5em; padding-top: 10px; padding-bottom: 10px; }

table.con          { border: 0px; border-collapse: collapse; margin: 10px 0px; }
table.con td       { padding: 5px; margin:0px; vertical-align: top; border: solid 1px var(--color-td-border); }
table.con td.enc   { color: var(--color-texto-white); background-color:var(--color-dark); text-align: center; font-weight: bold; }
table.con td.encr  { color: var(--color-texto-white); background-color:var(--color-dark); text-align: center; font-weight: bold; text-align: right; }
table.con td.encb  { color: var(--color-texto-white); background-color:var(--color-dark); text-align: center; font-weight: bold; vertical-align: bottom; }
table.con td.row1  { background-color:var(--bg-light2); }
table.con td.row1c { background-color:var(--bg-light2); text-align: center;}
table.con td.row1r { background-color:var(--bg-light2); text-align: right;}
table.con td.row0  { background-color:var(--bg-light3); }
table.con td.row0c { background-color:var(--bg-light3); text-align: center;}
table.con td.row0r { background-color:var(--bg-light3); text-align: right;}
table.con td.breakany {overflow-wrap:anywhere;}
table.con td.miniicono img {width: 16px; height: 16px; vertical-align: text-bottom; padding-left: 15px; margin: 0;}
table.con td.miniicono svg {padding: 0 0 0 15px;}
/* table.con td.miniicono svg:hover { color: var(--color-main); fill: var(--color-main); } */

table.blank        { border: 0px; border-collapse: collapse; }
table.blank td     { border: 0px; padding: 0px; margin:0px; vertical-align: top; }
table.blank td.agr { border: 0px; padding: 0px; margin:0px; vertical-align: middle; height: 36px; }
table.blank td.ini { border: 1px solid #dddddd; }

table.cbluegrey             { margin: 30px 0 30px 0; border: 0px; max-width: 700px; }
table.cbluegrey td          { padding: 20px 30px; }
table.cbluegrey td.titulo   { background: var(--color-dark); color: var(--color-texto-white); }
table.cbluegrey td.gris     { background: var(--bg-background-grey); }
table.cbluegrey_inner           { border: 0px; }
table.cbluegrey_inner td        { color: var(--grey-dark); text-align: left; font-size: 1em; padding: 0; }
table.cbluegrey_inner td.campo  { padding: 0 0 20px 0; }
table.cbluegrey_inner input[type=text], table.cbluegrey_inner input[type=password] { 
    background: var(--grey-light2); width: 100%; height: 1.5em;
    border: 0px; border-collapse: collapse; border-bottom: 1px #595959 dashed;
    text-align: left; font-size: 1.2em;
}
table.cbluegrey_inner input[type=button], input[type=submit], input[type=reset] { 
    background-color: var(--color-xp1); color: var(--color-texto-white); 
    border: none; padding: 20px 48px; font-size: 1em;
    cursor: pointer; text-decoration: none; 
}
table.cbluegrey_inner input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { 
    background-color: var(--color-xp2); border: none; text-decoration: none; 
}


/* Botón agregar */
div.b_agregar { 
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; 
}
div.b_agregar img { 
    vertical-align: -3px; 
}
div.b_agregar a { 
    margin: 0px; padding: 7px 42px; 
    font-size: 11pt; font-weight: bold; text-decoration: none; 
    background-color: var(--color-lima2); color: var(--color-main); 
    transition: background-color .3s; 
    border-radius: 10px;
}
div.b_agregar a:hover { background-color: var(--color-lima1); }


/* Indice de la consulta */
div.con_indice_contenedor { 
    text-align: center;
}
div.con_indice { 
    font-weight: bold; text-align: center;
    background-color: var(--bg-indice); color: var(--color-main);
    padding: 10px 30px; border-radius: 10px;
    display: inline-block;
}



/* CCData\Html\MIcons */
div.mi_contenedor { 
    background: var(--bg-white);
    padding: 20px 20px 5px 20px;
    margin-bottom: 30px;
    border-radius: 16px;
}
div.mi_contenedor h3 { 
    margin: 0px 0px 15px 0px; padding: 8px;
    background-color: var(--bg-micon-tit); 
    text-align: center; 
    font-size: 1.2em; font-weight: bold; font-style: normal;
    border-radius: 10px;
}
div.mi_contenedor_a { 
    margin-bottom: 30px;
    text-align: left;
}

div.mi_boton { 
    display:inline-block; vertical-align: top; 
    margin: 0px 15px 15px 0px; 
    border-radius: 10px;
}
div.mi_boton a { 
    height: 108px; width: 108px; float: left; 
    padding: 10px; 
    font-size:13px; line-height: 1.3em; 
    text-align: center; text-decoration: none; 
    background-color: var(--bg-micon); color: var(--color-main);
    transition: background-color .3s;
    border-radius: 10px;
}
div.mi_boton a:hover { background-color: var(--bg-micon-hover); }
div.mi_boton img { margin: 3px;}
div.mi_boton p { display: flex; align-items: center; justify-content: center; height: 40px; margin: 0; }

div.mi_cuadrolargo {
    display: inline-block; vertical-align: top;
    margin: 0px 15px 15px 0;
    border-radius: 10px;
}
div.mi_cuadrolargo a {
    width: 240px; float: left; 
    padding: 20px 25px; 
    font-size: 11pt; font-weight: bold; text-decoration: none; 
    background: var(--bg-background-grey); color: var(--color-main); 
    transition: background-color .3s;
    border-radius: 10px;
}
div.mi_cuadrolargo div.mi_cl2 { display: flex; align-items: center; gap: 12px; }
div.mi_cuadrolargo a:hover { background-color: var(--bg-light1); }

div.mi_simple {
    display: inline-block; vertical-align: top;
    margin: 0px 15px 15px 0;
    border-radius: 10px;
}
div.mi_simple a {
    float: left; 
    padding: 18px 35px; 
    font-size: 11pt; font-weight: bold; text-decoration: none; 
    background: var(--color-xp1); color: var(--color-texto-white); 
    transition: background-color .3s;
    border-radius: 10px;
}
div.mi_simple a:hover { background-color: var(--color-xp2); }
div.mi_simple img { float: left; padding-right: 12px; }


/* CCData\Consulta\Tabs */
div.tabs {
    font-size: 1.5em; 
    font-weight: bold;
    color: var(--color-dark);
}
div.tabs a {
    background: inherit;
    text-decoration: none;
    font-weight: normal;
    color: var(--color-main);
}
div.tabs a:hover {
    background: inherit;
    text-decoration: none;
    color: var(--color-dark);
}



div.ticket {
    background: var(--bg-background-grey);
    border: 1px dotted var(--bg-background-grey2); 
    padding: 20px;
    margin: 0 0 30px 0;
    font-size: 0.9em;
}
div.ticket h1 {
    color: var(--color-xp1);
    font-size: 1.6em; margin: 0 0 5px 0;
}
div.ticket table {
    border: 0px; border-collapse: collapse;
}
div.ticket td.a1 {
    text-align: left;
}
div.ticket td.a2 {
    font-weight: bold;
}
div.ticket td.boton {
    text-align: center;  padding-top: 10px;
}
div.ticket td.td_icono {
    width: 15%;
}
div.ticket img.ticket_icono {
}



/* Para menú nav <=680, va ser de 350 */
@media (max-width:680px) {
    body { font-size: 10pt; }
    input[type=button], input[type=submit], input[type=reset] { margin: 3px 0px; }
    
    div.container {min-width: 330px; padding-left: 10px; padding-right: 10px;}
    nav { font-size: 0.9em; padding-top: 0px;  padding-bottom: 0px; min-width: 350px; }
    nav a { padding: 11px 10px; }
    nav div#nav1 { display: none; }
    nav div#navcircular { width: 28px; height: 28px; margin-top: 6px; }
    
    aside {font-size: 0.8em;}
    
    main { text-align:left; }
    table.pagebc td { padding: 5px 5px; }
    table.pagebc td.a2 { padding-right: 0; }
    table.pagebc td input { max-width:210px; }
    table.cbluegrey td { padding: 20px 10px; }
    div.ticket { padding: 20px; padding: 10px;}
    div.ticket td.td_icono { width:0 }
    div.ticket img.ticket_icono { width:0 }
    div.ticket td.a1 { width:50% }
}