@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/LibreFranklin-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/LibreFranklin-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/LibreFranklin-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ROBOTO SLAB";
    src: url("../fonts/RobotoSlab-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ROBOTO SLAB";
    src: url("../fonts/RobotoSlab-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ROBOTO SLAB";
    src: url("../fonts/RobotoSlab-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-base: "Franklin Gothic Book", "Libre Franklin", "Franklin Gothic Medium", "ROBOTO SLAB";
    --color-azulmasoscuro: #003973;
    --color-azuloscuro: #003973;
    --color-azulbase: #003973;
    --color-azulmedio: #003973;
    --color_error-azul: darkblue;
    --color_pestanhas-azul: var(--color-azuloscuro);

    --color-grismasoscuro:#333333;
    --color-grisoscuro: #666666;
    --color-grismedio: #DDDDDD;
    --color-grisclaro: #EEEEEE;
    --color-grismasclaro: #f9f9f9;

    --color-azulclaro: #BBFFFF;
    --color-salmonclaro: lightsalmon;
    --color-lavanda: lavender;
    --color-gris: grey;

    --color-header: #7c8144;
    --color-header-hover: #bb6f01;
    --color-legend: #bb6f01;
    --color-a-hover: #bb6f01;

    --bgcolor-grupo1: #ECE2D9;
    --bgcolor-grupo2: #D3BEB6;
    --bgcolor-sobre: #ffff99;

    /**********************************************************************************************************
    /*** IMPORTANTE el aspecto rojo/azul se consigue comentando/descomentando las secciones DEFINICIONES COLOR
    /**********************************************************************************************************

   /* DEFINICIONES COLOR AZUL */

    --color-masoscuro: var(--color-azulmasoscuro);
    --color-oscuro: var(--color-azuloscuro);
    --color-base: var(--color-azulbase);
    --color-medio: var(--color-azulmedio);
    --color_error: var(--color_error-azul);
    --color_pestanhas: var(--color_pestanhas-azul);

    /* FIN DEFINICIONES COLOR AZUL */

    /* ROJOS/AZULES */
    --color-pestanhas: var(--color_pestanhas);
    --color-error: var(--color_error);
    --color-titulo: var(--color-masoscuro);
    --color-style: var(--color-oscuro);
    --bgcolor-boton-enc: var(--color-oscuro);
    --bgcolor-descripcion: var(--color-oscuro);
    --bgcolor-panel-primario: var(--color-oscuro);
    --bgcolor-labelDesgloseActividad:var(--color-oscuro);
    --color-pestanaPorDefecto: var(--color-medio);
    --bgcolor-a-seleccion-hover: var(--color-base);

    /* GRISES */
    --color-body: var(--color-grismasoscuro);
    --color-texto_gris: var(--color-grisoscuro);
    --color-hr-gris: var(--color-grisclaro);
    --bordercolor-panel: var(--color-grismedio);
    --bgcolor-th_detalle: var(--color-grismedio);
    --bgcolor-input: var(--color-grisclaro);
    --bgcolor-pestanaPorDefecto: var(--color-grisclaro);
    --bgcolor-panel-secundario: var(--color-grisclaro);
    --bgcolor-tr-impar: var(--color-grisclaro);
    --bgcolor-tr-par: white;
    --bgcolor-panel-terciario: var(--color-grismasclaro);
}

body {
    padding: 0px;
    margin: 0px;
    font-family: var(--font-base);
    font-size: 12px;
    line-height: 24px;
    background-color: white;
    color: var(--color-body)
}

a:link {
    color: black;
    text-decoration: underline
}

a:visited {
    color: black;
    text-decoration: underline
}

a:active {
    color: black;
    text-decoration: underline
}

a:hover {
    text-decoration: underline;
    color: var(--color-a-hover)
}


a.seleccion:link {
    color: black;
    text-decoration: none
}

a.seleccion:visited {
    color: black;
    text-decoration: none
}

a.seleccion:active {
    color: black;
    text-decoration: none
}


a.seleccion:hover {
    font-weight: normal;
    text-decoration:none;
    background-color:var(--bgcolor-a-seleccion-hover);
    text-decoration: underline;
    color: white;
}

.header{
    font-size:11px;
    font-style:normal;
    color: var(--color-header);
}
.header:hover {
    text-decoration: none;
    font-style:normal;
    font-size:11px;
    color: var(--color-header-hover);
}

a.pestanhas:link, a.pestanhas:visited  {
    color: var(--color-pestanhas);
    text-decoration: none;
}
a.pestanhas:hover {
    color: black;
    text-decoration: none
}

.pestanaSeleccionada
{
    font-family: var(--font-base);
    font-size:9pt;
    padding-left:6px;
    padding-right:6px;
    padding-top:1px;
    padding-bottom:1px;
    background-color:white;
    font-weight: bold;
    text-transform: capitalize;
}

.pestanaPorDefecto
{
    font-family: var(--font-base);
    font-size:9pt;
    padding-left:6px;
    padding-right:6px;
    padding-top:1px;
    padding-bottom:1px;
    background-color:var(--bgcolor-pestanaPorDefecto);
    color: var(--color-pestanaPorDefecto);
    font-weight: bold;
    text-transform: capitalize;
}

.bordeTablaPestanas
{
    border-left: 1px solid var(--color-pestanaPorDefecto);
    border-right: 1px solid var(--color-pestanaPorDefecto);
    border-bottom: 1px solid var(--color-pestanaPorDefecto)
}

.descripcion {
    font-size: 12px;
    font-weight: bold;
    background-color: var(--bgcolor-descripcion);
    color: white;
    height: 24px;
}

input {
    height: 18px;
    font-size: 11px;
    background-color: var(--bgcolor-input);
    color: black;
}

table {
    font-family: var(--font-base);
    font-size: 12px;
    font-style: normal;
    color: black;
}

.th_detalle
{
    font-weight: bold;
    background-color:var(--bgcolor-th_detalle);
}

.tabla_detalle {
    font-family: var(--font-base);
    font-size: 10px;
    font-style: normal;
    color: black;
    border:thin;
}


legend {
    font-family: var(--font-base);
    font-size: 11px;
    color: var(--color-legend);
}

h1 {
    font-family: var(--font-base);
    font-size: 34px;
    font-style: normal;
    color: var(--color-titulo);
    text-align: center;
}


h2 {
    font-family: var(--font-base);
    font-size: 22px;
    color: var(--color-titulo);

}

h3 {
    font-family: var(--font-base);
    font-size: 16px;
    color: var(--color-titulo);
}

.boton_enc {
    font-size: 11px;
    font-family: var(--font-base);
    background-color: var(--bgcolor-boton-enc);
    color: white;
}

.peque {
    FONT-SIZE: 10px;
}

.peque_negrita {
    FONT-SIZE: 10px;
    FONT-WEIGHT: bold;
}

.normal {
    FONT-SIZE: 12px;
}

.normal_negrita {
    FONT-SIZE: 12px;
    font-weight:bold;
}

.grande {
    FONT-SIZE: 16px;
}

.grande_negrita {
    FONT-SIZE: 16px;
    FONT-WEIGHT: bold;
}

.peque_gris {
    FONT-SIZE: 10px;
    COLOR:  var(--color-texto_gris);
}

.peque_negrita_gris {
    FONT-SIZE: 10px;
    FONT-WEIGHT: bold;
    COLOR:  var(--color-texto_gris);
}

.normal_gris {
    FONT-SIZE: 12px;
    COLOR: var(--color-texto_gris);
}

.normal_negrita_gris {
    FONT-SIZE: 12px;
    font-weight:bold;
    COLOR:  var(--color-texto_gris);
}

.grande_gris {
    FONT-SIZE: 16px;
    COLOR:  var(--color-texto_gris);
}

.grande_negrita_gris {
    FONT-SIZE: 16px;
    FONT-WEIGHT: bold;
    COLOR: var(--color-texto_gris);
}

td {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

td.azulClaro {
    background-color: var(--color-azulclaro);
}

td.salmonClaro {
    background-color: var(--color-salmonclaro);
    border:2px solid black;
}

td.lavanda {
    background-color: var(--color-lavanda);
}

td.blanco {
    background-color: white;
}

td.gris {
    background-color: var(--color-gris);
}

tr.impar {
    background-color: var(--bgcolor-tr-impar);
}

tr.par {
    background-color: var(--bgcolor-tr-par);
}

tr.azulClaro {
    background-color: var(--color-azulclaro);
}

.error {
    FONT-SIZE: 12px;
    COLOR: var(--color-error);
}

.errorGrande {
    FONT-SIZE: 16px;
    COLOR: var(--color-error);
}

.cabecera_login {
    position: relative;
    background-position: top right;
    background-repeat: no-repeat;
    height: 71px;
    background-image: url('../imagenes/cabecera_login.jpg');
}

.pie {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--color-azuloscuro);
    color:#fff;
    text-align: center;
}

/* distintos fondos de la cabecera */
/* etc... */

.logo {
    position: absolute;
    left: 1%;
    bottom: 0;
}

.textocabecera {
    position: absolute;
    left: 12%;
    bottom: 0;
}

.logo img {
    border: none;
    margin: 0;
    padding: 0;
}

.style1 {
    font-size: 16px;
    font-weight: bold;
    color:var(--color-style)
}

.style3 {
    font-size: 24px;
    color: var(--color-style)
}

.style4 {
    font-size: 34px;
    color: var(--color-style)
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 980px)
and (-webkit-min-device-pixel-ratio: 2) {
    .style4 {
        font-size: 20px;
        color: var(--color-style)
    }
}

.style5 {
    font-size: 22px;
    color: black
}

.gruposT {
    background-color:var(--bgcolor-grupo1)
}
.gruposS {
    background-color:var(--bgcolor-grupo2)
}
.gruposA {
    background-color:var(--bgcolor-grupo1)
}
.gruposL {
    background-color:var(--bgcolor-grupo2)
}
.gruposCA {
    background-color:var(--bgcolor-grupo1)
}
.gruposC {
    background-color:var(--bgcolor-grupo2)
}
.gruposOtras {
    background-color:var(--bgcolor-grupo1)
}
.gruposTG {
    background-color:var(--bgcolor-grupo1)
}

.como_habilitado {
    background: white;
    color: black;
}

.sobre {
    background-color: var(--bgcolor-sobre);
    cursor: pointer;
}

.seleccionada {
    background-color: var(--color-salmonclaro);
}

.no-seleccionado {
    background-color: transparent;
}

.hover{
    cursor: pointer;
}

.easyListSplitter ul {
    list-style-type: none;
    width: 30%;
    float: left;
    margin: 0 0 0 0
}

.caret.caret-up {
    border-top-width: 0;
    border-bottom: 4px solid black;
}

.labelDesgloseActividad {
    color: white;
    background-color: var(--bgcolor-labelDesgloseActividad);
    width: 60px;
}

.h2POD {
    font-family: var(--font-base);
    font-size: 22px;
    color: var(--color-titulo);
    font-weight: 900;
    line-height: 24px;
}

.panel-primario > .panel-heading {
    color: white;
    background-color: var(--bgcolor-panel-primario);
}
.panel-primario > .panel-body {
    border: 1px solid var(--bordercolor-panel);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.panel-secundario > .panel-heading {
    color: black;
    background-color: var(--bgcolor-panel-secundario);
    border: 1px solid var(--bordercolor-panel);
}
.panel-secundario > .panel-body {
    border: 1px solid var(--bordercolor-panel);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.panel-terciario > .panel-heading {
    color: black;
    background-color: var(--bgcolor-panel-terciario);
    border: 1px solid var(--bordercolor-panel);
}
.panel-terciario > .panel-body {
    border: 1px solid var(--bordercolor-panel);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

hr.bordeNegro {
    border: 1px solid black;
}

hr.colorGris {
    color: var(--color-hr-gris);
}

.asig-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding:0.5rem 0}