/*************************************************************
 *  ? SITE.CSS VERSION 1.0 WCG
 *  OFICINA DE PLANIFICACION, UNIVERSIDAD DE COSTA RICA

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

/*-----------------------------------------------------------
  ? FUENTES PERSONALIZADAS: "Trueno" (diferentes variantes)
-----------------------------------------------------------*/
@font-face {
    font-family: 'Trueno';
    src: url('../fonts/TruenoUltLt.eot');
    src: url('../fonts/TruenoUltLt.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TruenoUltLt.woff') format('woff'),
         url('../fonts/TruenoUltLt.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'TruenoLt';
    src: url('../fonts/TruenoLt.eot');
    src: url('../fonts/TruenoLt.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TruenoLt.woff') format('woff'),
         url('../fonts/TruenoLt.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'TruenoBd';
    src: url('../fonts/TruenoBd.eot');
    src: url('../fonts/TruenoBd.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TruenoBd.woff') format('woff'),
         url('../fonts/TruenoBd.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'TruenoExBd';
    src: url('../fonts/TruenoExBd.eot');
    src: url('../fonts/TruenoExBd.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TruenoExBd.woff') format('woff'),
         url('../fonts/TruenoExBd.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'TruenoRg';
    src: url('../fonts/TruenoRg.eot');
    src: url('../fonts/TruenoRg.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TruenoRg.woff') format('woff'),
         url('../fonts/TruenoRg.ttf') format('truetype');
    font-style: normal;
}


/*-----------------------------------------------------------
  ? VARIABLES GLOBALES (paleta de colores del sistema)
-----------------------------------------------------------*/
:root {
    --color-principal: #00c0f3;
    --color-secundario: #f37021;
    --color-accordions: #d2d2d2;
    --color-accordionshover: #ffffff;
    --color-fondomedidas: #346C88;
    --color-titulospaginas: #136378;
}



/* MODIFICAMOS EL COLOR DE FONDO DE LOS BOTONES POR DEFECTO DE BOOTSTRAP */
.btn-primary {
    color: #fff;
    background-color: #0571aa;
    border-color: #0571aa;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /*font-family: 'TruenoBd', sans-serif;*/
    font-family: 'TruenoRg';
    font-weight: 900;
    font-style: normal;
}

p {
    font-family: 'Trueno';
    font-weight: normal;
    font-style: normal;
}


a {
    color: #ffffff;
    text-decoration: none !important;
    font-family: 'TruenoRg';
    font-weight: normal;
    font-style: normal;
}



label {
    font-family: 'TruenoRg';
    font-weight: normal;
    font-style: normal;
    color: #000000;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
}

/*-----------------------------------------------------------
  ? ENCABEZADO PRINCIPAL DEL SITIO
-----------------------------------------------------------*/

.site-header {
    background-color: #41ade7;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    height: 70px;
}

    .site-header a {
        color: #8e8e8e;
        transition: color .15s ease-in-out;
    }

        .site-header a:hover {
            color: #fff;
            text-decoration: none;
        }

        .encabezadoDelSistema {
            background-color: #00c0f3;
            border-bottom: 20px solid #00344E;
        }

        .chart-container {
            position: relative;
            height: 250px;
            width: 100%;
            margin-bottom: 20px;
        }

        .formula-box {
            background: #d3955cff;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
            /*font-family: monospace;*/
        }

        #contenido-reporte {
            background-color: white !important;
            padding: 20px;
        }

        /* Ocultamos los elementos decorativos del PDF en la vista web si lo deseas, 
           pero aqu� los dejamos para que html2canvas los capture */
        .pdf-header-print {
            display: none;
            border-bottom: 2px solid #00344E;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        .pieDePagina{
            background-color: #8e8e8e;
            padding-top: 10px;
        }

        @media print {
            .no-print {
                display: none !important;
            }
        }


        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow-x: hidden;
        }

        .contenido-principal {
            flex: 1 0 auto;
        }

        .encabezadoDelSistema {
            background-color: #00BFFF;
            border-bottom: 20px solid #00344E;
        }

        .chart-container {
            position: relative;
            height: 210px;
            width: 100%;
            margin-bottom: 10px;
        }

        .formula-box {
            background: #f1f8ff;
            border: 1px solid #108aafff;
            padding: 8px;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
            font-size: 0.8rem;
        }

        #contenido-reporte {
            background-color: white !important;
            padding: 25px;
        }

        .medal-box {
            border: 2px solid #ffc107;
            border-radius: 10px;
            background: #fffdf5;
            transition: transform 0.2s;
            cursor: pointer;
        }

        .medal-box:hover {
            transform: scale(1.05);
            background: #fff9e6;
        }

        .linea-base-box {
            background: #e9ecef;
            border-left: 5px solid #6c757d;
            padding: 10px;
            margin-top: 10px;
            font-size: 0.85rem;
        }

        .footer {
            flex-shrink: 0;
            background-color: #979797;
            border-top: 1px solid #dee2e6;
            padding: 20px 0;
        }

        @media print {
            .no-print {
                display: none !important;
            }
        }

        .datos_uno{
            text-align: center;
            color: #ffffff;
        }


        /************** CAMBIOS EN EL MODAL *************/
        #guiaModal .modal-dialog {
    max-width: 60%;
}

#guiaModal iframe {
    height: 80vh;
}

.tooltip-ancho .tooltip-inner {
    max-width: 450px;
    text-align: justify;
}