/*
    Theme Name: CSIRT
    Theme URI: 
    Author: CSIRT - UNC
    Author URI: http://csirt.unc.edu.ar
    Description: Tema Diseñado para CSIRT UNC
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: csirt, seguridad, informática, unc
    Text Domain: 172.16.81.32/csirt
*/

/* Importamos normalize */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;900&family=Staatliches&display=swap');

:root {
    /**FUENTES **/
    --fuente-principal: 'Raleway', sans-serif;
    --fuente-headings: 'Raleway', sans-serif;

    /** PALETA DE COLORES **/
    --institucional: #00345e;
    --institucional05: #577699;
    --instit-celeste: rgba(21, 104, 144, 0.8);
    --fondo: #156890;
    --gris-claro: #f8f8f8;
    /*#ebebeb;*/
    --instit-fondo: rgba(21, 104, 144, 0.1);
    --instit-fondo2: rgba(21, 104, 144, 0.2);
    --instit-fondo3: rgba(21, 104, 144, 0.3);
    --blanco: #fff;
    --negro: #000;
}

html {
    box-sizing: border-box;
    font-size: 50%;
    /* 62.5%; Esto convierte 10 PX = 1 rem */
}

body {
    /* font-family: "Raleway", sans-serif; */
    font-family: var(--fuente-principal);
    font-size: 2.4rem;
    line-height: 1.5;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    /* flex-grow: 1; */
}

/** Headings **/
h1,
h2,
h3,
h4 {
    line-height: 1.2;
    color: var(--institucional);
}

.header h1 {
    font-size: 3.8rem;
    text-transform: uppercase;
    color: var(--blanco);
    text-shadow: 5px 5px 10px rgb(0, 0, 0);
}

h1 {
    font-size: 4.2rem;
    text-transform: uppercase;
}

h2 {
    font-size: 3.2rem;
    text-transform: uppercase;
    /* margin: 2rem 0; */
}

h3 {
    font-size: 2.4rem;
    text-transform: uppercase;
    /* padding: 2rem 0; */
}

h4 {
    font-size: 1.7rem;
    text-transform: uppercase;
}

/** GLOBALES - hacemos un reset general**/
p {
    text-align: justify;
}

a {
    text-decoration: none;
}

h2 a {
    color: var(--institucional);
}

p a {
    color: var(--fondo);
}

ul {
    margin: 0;
    /* padding-bottom: 2rem; */
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* header img {
    max-width: 50%;
} */

.wrapper hr {
    /* height: 1px; */
    width: 100%;
    border: 1px solid var(--instit-fondo);
}

/* .imagen-destacada {
    margin-bottom: 3rem;
} */

.contenedor {
    width: min(95%, 130rem);
    /* 120rem); */
    margin: 0 auto;
}

.contenido-centrado {
    width: min(95%, 80rem);
}

.contenedor-boton {
    display: flex;
    justify-content: flex-end;
}

/**Botones**/
/* .boton {

    background-color: var(--blanco);
    color: var(--negro);
    padding: 1rem 3rem;
    display: block;
    flex: 1;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0.5rem;
    margin: 1rem 0;
} */
/* 
@media (min-width: 768px) {
    .boton {
        display: inline-block;
        flex: 0 0 auto;
    }
} */

/* .boton-primario {
    background-color: var(--institucional);
    color: var(--blanco);
} */

/* ________________________________ */


/** UTILIDADES que estaremos utilizando a lo largo del proyecto**/
.text-center {
    text-align: center;
}

.text-primary {
    color: var(--institucional);
    text-transform: uppercase;
}

.text-blanco {
    color: var(--blanco);
}

.seccion {
    padding: 2rem 0;
}

.hr-post {
    padding: 0rem 0;
}

/** HEADER **/
body.home .header {
    /* padding-top: 2rem; */
    height: auto;
    min-height: 50rem;
    background-size: cover;
    background-position: center bottom;
}

@media (min-width: 768px) {
    body.home .header {
        height: 100vh;
        max-height: 50rem;
    }
}

.header {
    background-color: var(--fondo);
    padding: 2rem 0;
    display: grid;
}

.barra-navegacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    /* width: 100%; */
}

@media (min-width: 768px) {
    .barra-navegacion {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: auto;
    }

    /* El logo ocupa el 25% del contenedor */
    .barra-navegacion .logo {
        width: 25%;
        height: auto;
    }

    /* El menú ocupa el 75% restante */
    .barra-navegacion .contenedor-menu {
        width: 75%;
    }
}

.tagline {
    color: var(--blanco);
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .tagline {
        margin-top: 5.5rem;
    }
}

.tagline p {
    font-size: 2.5rem;
    text-align: center;
}

.menu-principal ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%;
}

@media (max-width: 767px) {
    .menu-principal ul {
        flex-direction: column;
    }
}

.menu-principal li {
    white-space: nowrap;
    /* Evita que las palabras largas se dividan en varias líneas */
}

ul .redes,
ul.post-categories {
    list-style: none;
    /* box-shadow: 5px 5px 10px var(--institucional05); */
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
}

ul .redes {
    box-shadow: 5px 5px 10px var(--institucional05);
}

/* .menu-principal { */
/* oculto para pantallas pequeñas*/
/* display: none;
} */

@media (min-width: 768px) {

    ul .redes {
        border-radius: .9rem;
    }

    .menu-principal {
        display: block;
    }

    .menu-principal .menu {
        display: flex;
    }
}

.menu-principal a {
    font-family: var(--fuente-headings);
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: var(--blanco);
    font-size: 2.2rem;
    padding: 0.5rem 2rem;
    text-shadow: 5px 5px 10px rgb(0, 0, 0);
    /*0.5 arriba y abajo y 2 a los costados*/
}

@media (min-width: 768px) {
    .menu-principal a {
        position: relative;
        z-index: 1;
    }

    .menu-principal .current_page_item a:not([href^="#"]) {
        border-bottom: 3px solid var(--institucional);
    }

    .menu-principal a::before,
    .menu-principal a::after {
        position: absolute;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        height: 50%;
        background-color: var(--institucional);
        z-index: -1;
        transform: scaleX(0);
        transition: transform .6s;
    }

    .menu-principal a::before {
        top: 0;
        transform-origin: left;
    }

    .menu-principal a::after {
        top: 50%;
        transform-origin: right;
    }

    .menu-principal a:hover::before {
        transform: scaleX(1);
    }

    .menu-principal a:hover::after {
        transform: scaleX(1);
    }
}

/** FOOTER **/
.footer {
    background-color: var(--instit-celeste);
    /* background-color: var(--gris-claro); */
    bottom: 0;
    display: block;
    /* position: absolute; */
}

.contenido-footer {
    padding: 0;
    margin-bottom: 0;
}

.footer .contacto {
    background-color: var(--blanco);
}


.logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo a {
    display: block;
    width: 100%;
    height: 100%;
}


.footer p {
    font-size: 1.8rem;
    margin: 1rem 0;
}

.footer h3 {
    margin: 1rem 0 0 0;
    padding-bottom: 0;
}

/* .footer .current_page_item{
    border: none;
} */

@media(min-width: 768px) {
    .contenido-footer {
        display: flex;
        justify-content: space-between;
    }
}

.logo-grid {
    margin-top: 0.5rem;
    display: grid;
    gap: 1rem;
    justify-items: center;
    padding-left: 0rem;
}

@media(min-width: 768px) {
    .logo-grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
    }
}

/* .copyright {
    text-align: center;
    font-family: var(--fuente-headings);
    font-size: 1.8rem;
    margin: 2rem 0 0 0;
} */

/* @media(min-width: 768px) {
    .copyright {
        font-size: 2.4rem;
        margin: 0;
    }
} */

/** Cards **/
.listado-grid {
    margin: 2rem 0rem;
    display: grid;
    gap: 2rem;
    padding-left: 0;
    grid-template-columns: repeat(1, 80%);
    justify-content: center;
}

.listado-grid.redes {
    grid-template-columns: repeat(2, 40%);
    justify-content: center;
}

.red {
    display: flex;
}

.red a {
    display: flex;
}

.redes img {
    max-width: 100%;
    border-radius: 1.5rem;
}

@media(min-width: 768px) {
    .listado-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .listado-grid.redes {
        grid-template-columns: repeat(6, 1fr);
        margin: auto 2rem;
    }

    .redes img {
        border-radius: 0.9rem;
        vertical-align: middle;
        /* display: inline; */
    }
}


.card {
    display: grid;
    grid-template-rows: 1fr 0.6fr 1fr;
    /* grid-template-rows: 2fr 1fr 1fr; */
    aspect-ratio: 2 / 3;
    border-radius: 2.5rem;
    background-color: var(--instit-fondo);
    overflow: hidden;
    /* position: relative; */
    box-shadow: 5px 5px 10px var(--institucional05);
}

@media(min-width: 768px) {
    .card {
        display: grid;
        grid-template-rows: 1fr 1fr 1.5fr;
        aspect-ratio: 1 / 2;
        border-radius: 2.5rem;
        background-color: var(--instit-fondo);
        overflow: hidden;
        position: relative;
    }
}

/* .blog-card, */
/* .noticia-card {
    aspect-ratio: 1 / 2; */
/* background-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .85)); */
/* position: relative;
    overflow: hidden; */
/* }    */

.noticia-card p {
    text-align: left;
}

.servicio-card,
.servicio .contenido {
    background-color: var(--institucional);
    position: relative;
    bottom: unset;
}


/**Categoria en Cards**/
.card-image {
    grid-row: 1 / 2;
    position: relative;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    display: block;
    position: relative;
    z-index: 1;
}

.card-image .post-categories {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: grid;
    gap: 0.5rem;
    list-style: none;
    padding-left: initial;
    z-index: 2;
}

.card-image .post-categories li {
    background-color: var(--fondo);
    padding: 0.2rem 1rem;
    border-radius: 0.5rem;
    display: grid;
    /* justify-content: start;
    align-items: start; */
}

.card-image .post-categories a {
    color: var(--blanco);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.4rem;
}

/* .card:hover img {
    transform: scale(1.1);
} */


.card-content {
    grid-row: 2 / 3;
    margin: 0 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}


.card-content h3 {
    color: var(--institucional);
    margin: 0;
    /* margin: 0 0 1rem 0; */
    padding: 2rem 0 1rem 0;
    font-size: 2.6rem;
    text-align: center;
}

.card-content h4 {
    margin: 0;
}

@media(min-width: 768px) {
    .card-content h4 {
        margin: 1rem 0;
    }
}

.card-content p.meta,
.card-content .meta a {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--institucional);
}

.card-content .meta span {
    color: var(--institucional05);
}

.card-content p {
    margin: 0rem;
    font-size: 2rem;
    color: var(--negro);
}

/* Extracto */
.card-excerpt {
    grid-row: 3 / 4;
    /* padding: 1rem; */
    display: flex;
    flex-direction: column;
}

.card-excerpt p {
    margin: 0 1rem;
    font-size: 1.9rem;
    color: var(--negro);
    text-align: left;
}

.card-excerpt a {
    color: #156890;
    font-weight: bold;
    text-decoration: underline;
}

/** Sidebar **/
@media(min-width: 768px) {
    .con-sidebar {
        display: grid;
        /* display grid como display flex solamente afectan al primer nivel de hijos, si encuentra un heading, imgs y párrafos,
         a todos los va a tratar de posicionar con grid, es por eso que se trata de agrupar con divs, sections u otras etiquetas. */
        grid-template-columns: 2fr 1fr;
        gap: 4rem;
    }
}

.subtitulo-noticia {
    font-weight: 700;
    font-size: 2rem;
}

/** Para objetivos del texto de WP**/
.objetivos li {
    list-style: circle;
    /*unordered list: lista desordenada: le quita la viñeta*/
    /* margin: 0; */
    /* padding: 0; */
}


/**Listado de noticias sidebar**/
.noticias-sidebar li {
    border-bottom: 1px solid var(--instit-fondo);
    padding: 2rem 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 2rem;
}

.noticias-sidebar li:last-of-type {
    border: none;
}

/* .noticias-sidebar .imagen {} */

.noticias-sidebar .contenido-noticia h3 {
    margin: 0;
    font-size: 2.2rem;
}

.noticias-sidebar .contenido-noticia a {
    color: var(--institucional);
}

.noticias-sidebar .contenido-noticia p {
    font-size: 1.8rem;
    text-align: left;
}

/**Información meta**/
.meta-info {
    flex: 1;
    padding: 0.5rem;
    box-sizing: border-box;
    background-color: var(--instit-celeste);
    color: var(--blanco);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .meta-info {
        display: flex;
        align-items: center;
    }
}

.meta-info p,
.meta-info a {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--blanco);
    padding: 0 1rem;
}

.meta-info span {
    color: var(--institucional);
}

.meta-info .categoria {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.meta-f-a {
    display: flex;
}

.entrada {
    display: flex;
    flex-wrap: wrap;
    height: 27rem;

}

.entrada h1 {
    margin: 0;
}

.img-post {
    /* max-width: 100%; */
    /* max-height: 100%; */
    /* width: auto; */
    width: 50rem;
    height: 100%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.img-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .entrada {
        height: auto;
    }

    .img-post {
        width: 100%;
        height: auto;
    }

    .meta-info {
        padding: 0.5rem;
    }

    .meta-info .categoria {
        justify-content: center;
    }

    .meta-f-a {
        justify-content: space-around;
    }
}

.row.mvo,
.row.reporte {
    display: flex;
    align-items: stretch;
    /* justify-content: center; */
    flex-direction: column;
    gap: 2rem;
    margin: 0% 10%;
}

@media(min-width: 768px) {

    .row.mvo,
    .row.reporte {
        flex-direction: row;
        margin: 0;

    }
}

.mvo_img {
    display: flex;
    justify-content: center;

}

.img_mvo {
    width: 10%;
}

@media (min-width: 768px) {
    .img_mvo {
        width: 20%;
    }
}

.column {
    flex: 1;
    box-sizing: border-box;
    border: 2px solid var(--instit-fondo);
    border-radius: 2.5rem;
    background-color: var(--instit-fondo);
    padding: 0rem 1rem;
    box-shadow: 5px 5px 10px var(--institucional05);

    /* margin: 0rem 1rem; */
}

@media (min-width: 768px) {
    .column {
        width: 30%;
    }
}


/* background-color: #156890;} */

/* padding: 10rem; */
/* border: 1px, solid, var(--fondo);     * /

/** Página Principal**/
/* .bienvenida p {
    max-width: 80rem;
    margin: 0 auto;
} */

/** Mision Vision Objetivo**/
.mvo p,
.reporte p {
    font-size: 1.9rem;
}

/* .reporte .column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
} */

#incidente h2 {
    margin-bottom: 1.5rem;
}

/********* Tablas ********/
table {
    width: 100%;
    margin-top: 0 1rem;
    border-collapse: collapse;
}

td,
th {
    border: 1px solid var(--institucional);
    padding: 0.3rem 1rem;
}

th {
    font-size: 1.9rem;
    text-align: center;
    color: var(--institucional);
}

td {
    font-size: 1.8rem;
    color: var(--institucional);

}

/* Especifica el ancho de las columnas */
table colgroup col:nth-child(1) {
    width: 20%;
}

table colgroup col:nth-child(2) {
    width: 43%;
}

table colgroup col:nth-child(3) {
    width: 35%;
}

/* Negrita para la primera columna */
td:first-child {
    font-weight: bold;
    color: var(--institucional);
}

/* Alternar color de fondo en las filas */
tbody tr:nth-child(odd) {
    background-color: var(--instit-fondo2);
    /* Color para filas impares */
}

tbody tr:nth-child(even) {
    background-color: var(--instit-fondo);
    /* Color para filas pares */
}