:root {
    --nav-height: 60px;
    --nav-height-tablet: 10dvh;
    --nav-z-index: 100;
    --map-z-index: 0;
    --background-color: #303037;
    --background-color-dark:#202027;
    --text-color: #f7f4f1;
    --text-color-red: #e10600;

    /*se usan juntas para simular bandera a cuadros*/
    --checkered-bg: conic-gradient(
        black 0% 25%,
        white 0% 50%,
        black 0% 75%,
        white 0%
    );

    --checkered-size: 0.5em 0.5em;
}

* {
    min-width: 0;
}

body{
    display: grid;
    place-items: center;
    grid-template-rows: 1fr;
    grid-template-areas:
    "view";
    margin: 0;
}

h1{
    display:block;
}

.hidden{
    display:none;
}

.sentinel{
    height:2px;
    width:2px;
    z-index:10;
    /*background:green;*/   //para control
}

/* view es el contenedor de toda la vista */
#view{
    grid-area:view;
    display: grid;
    /*height: 90vh;  /* si la pagina no requiere scrollear con 90vh se ve bien, header, main y footer */
    height: calc( 100dvh - var(--nav-height));
    width: 100%;
    padding-bottom: var(--nav-height);
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "header"
    "main"
    "footer";
    margin: 0;
    background-color: gray;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

header{
    grid-area: header;
    display: grid;
    grid-template-columns: auto 1fr;
    place-items: center;
    /*padding: 20px;*/
    background-color: var(--background-color);
    /*border-radius: 10px;
    margin: 5px;*/
    height: 10dvh;
    color: var(--text-color);
}


#header-img{
    height:100%;
    width:auto;
}

nav{
    position: fixed;
    bottom: 0;
    height:var(--nav-height);
    grid-area: nav;
    width: 100%;
    display: grid;
    place-items: center;
    grid-template-columns: auto auto auto auto auto auto;
    padding: 1px;
    background-color: var(--background-color-dark);
    /*margin: 5px;*/
    z-index: var(--nav-z-index);
}

.navbar-icon-description{
    display:none;
}

.navbar-button{
    background-color: transparent;
    border:none;
}

main{
    grid-area: main;
    display: grid;
    /*place-items: center;*/
    /*padding: 20px;*/
    background-color: var(--text-color-red);
    /*border-radius: 10px;
    margin: 5px;*/
}

footer{
    grid-area: footer;
    display: grid;
    place-items: center;
    padding: 20px;
    background-color: var(--background-color);
    color: var(--text-color);
    /*border-radius: 10px;*/
    /*margin: 5px;*/
}

textarea{
    width: 80%;
    height: 200px;
}

/*
button{
    border-radius: 10px;
    margin:1px;
}*/

.icono{
    width: 3em;
    height: 3em;
}

h3{
    margin: 0;
}

.error{
    display:none;
    color: var(--text-color-red);
    font-weight:600;
}

/* ----------------------------------------------------------- */
/*                           CARDS                             */
/* ----------------------------------------------------------- */

.history-card{
    display:grid;
    grid-template-columns:auto 1fr;
    /*place-items: center;*/
    background-color: var(--text-color);
    border-radius: 10px;
    margin: 0.5em;
    width:100%;
    /*height:13vh;*/
    font-family: Arial, sans-serif;
    color : var(--background-color);
}

.history-card img{
    width: 3.5em;
    height: 3.5em;
    padding: 0.5em;
    place-self:center;
}

.history-card .card-title{
    margin-top: 0.5em;
    margin-bottom:0.25em;
    font-weight:600;
    color: var(--background-color);
    margin-top: 0.5em;
    margin-bottom: 0em;

}

.history-card .card-body{
    display:grid;
    grid-template-rows: auto /*auto*/;
    place-items: center start;
    margin-left:1dvh;
}

.history-card .card-description{
    margin-top: 0em;
    margin-bottom:0.25em;
}

.driver-card{
    display:grid;
    grid-template-columns:auto 1fr;
    /*place-items: center;*/
    background-color: var(--text-color);
    border-radius: 10px;
    margin: 0.5em;
}

.driver-card .card-body{
    display:grid;
    grid-template-rows: auto /*auto auto auto*/;
    place-items: center start;
}

.card-description{
    font-size: 14px;
    list-style: none;
    padding: 2px;
    font-weight:600;
    color: var(--background-color);
    margin: 0.5em;
}

.driver-card img{
    width: 3.5em;
    height: 3.5em;
    padding: 0.5em;
    place-self:center;
}

.circuit-card{
    display:grid;
    grid-template-columns:auto 1fr;
    /*place-items: center;*/
    background-color: var(--text-color);
    border-radius: 10px;
    margin: 0.5em;
}

.circuit-card .card-body{
    display:grid;
    /*grid-template-rows: auto auto auto auto;*/
    place-items: center start;
}

.circuit-card img{
    width: 3.5em;
    height: 3.5em;
    padding: 0.5em;
    place-self:center;
}

.card-img-icon{
    margin-left: 1em;
}

/* ----------------------------------------------------------- */
/*                    Vista de Busqueda                        */
/* ----------------------------------------------------------- */

.search-form{
    width:90%;
    display:grid;
    grid-template-rows: auto auto auto 1fr;
    place-items:center;
    gap:1em;
}

.input-search{
    border-radius:10px;
    height: 2em;
}

.radio-container{
    width:100%;
    display:grid;
    grid-template-columns: auto auto auto auto;
    place-items:center;
}

.radio-description{
    padding-right:0.5em;
    color: var(--text-color);
}

input[type="radio"] {
    display: none;
}

label {
    /*padding: 10px 16px;*/
    /*border: 1px solid gray;*/
    /*border-radius: 20px;*/
    cursor: pointer;
    font-weight:bold;
    color:var(--text-color);
}

input[type="radio"]:checked + label {
    color: var(--text-color-red);
    text-shadow: 0 0 8px rgba(225, 6, 0, 0.7);
}

.select-container{
    width:100%;
    display:grid;
    grid-template-columns: auto auto;
    place-items:center;
}

.select-description{
    padding-right:0.5em;
    font-weight:normal;
}

.select-box{
    border-radius:10px;
    height:2em;
}

/* ----------------------------------------------------------- */
/*                    Vista de Historial                        */
/* ----------------------------------------------------------- */

#history-container{
    display:grid;
    place-items:center;
    background:var(--background-color);
    margin-top:0.25em;
}

#history-card-container{
    display:grid;
    place-items:center;
    width:80%;
    margin-top:1em;
}

#history-no-data{
    color: var(--text-color);
    font-size:20px;
    font-weight:600;
}

/* ----------------------------------------------------------- */
/*                      Vista de Favoritos                     */
/* ----------------------------------------------------------- */

#favorite-container{
    display:grid;
    place-items:center;
    background:var(--background-color);
    margin-top:0.25em;
}

#favorite-card-container{
    display:grid;
    place-items:center;
    /*background: var(--background-color);*/
    /*margin-top:0.25em;*/
    /*color: var(--text-color);
    padding-top:10vh;
    padding-bottom:10vh;*/
    width:90%;
}

#favorite-no-data{
    color: var(--text-color);
    font-size:20px;
    font-weight:600;
}

.favorite-remove-icon{
    width:3em;
    height:3em;
}

.favorite-card{
    display:grid;
    grid-template-rows:auto 1fr;
    place-items: center;
    background-color: var(--text-color);
    color: var(--background-color);
    border-radius: 10px;
    margin: 1em;
    font-family: Arial, sans-serif;
    width:90%;
}

.favorite-card .card-body{
    display:grid;
    grid-template-columns:auto 1fr auto;
    place-items:center;
    width:95%;
}

.favorite-card img{
    width: 3.5em;
    height: 3.5em;
    padding: 0.5em;
    place-self:center;
    margin-left: 0;
}

.favorite-card .card-description{
    display:grid;
    place-items:center;
}

.favorite-card .card-title{
    margin-top: 0.5em;
    margin-bottom:0.25em;
    font-weight:600;
}

.favorite-card .card-text{
    margin-top: 0.25em;
    margin-bottom:0.7em;
}

.favorite-card .card-footer{
    display: grid;
    grid-template-rows: auto auto;
}

.favorite-card .card-footer button{
    /*margin: 0.5em;*/
}

.favorite-card .card-footer button{
    border:none;
    background:transparent;
}

.favorite-card .card-comentario{
    overflow-wrap: anywhere;
    word-break: break-word; /* fallback */
    width:80%;
    margin:0.5em;
}

/* ----------------------------------------------------------- */
/*                    Vista de Contacto                        */
/* ----------------------------------------------------------- */


#location-container{
    display:grid;
    grid-template-rows: auto auto auto;
    place-items:center;
    background: var(--background-color);
    color: var(--text-color);
    margin-top:0.25em;
}

#map{
    height: 30dvh;
    width: 90%;
    margin-top:4em;
    border-radius: 10px;
    z-index:var(--map-z-index);
}

#datosDeContacto{
    font-size: 14px;
    list-style: none;
    padding: 2px;
    margin-bottom: 3em;
}

li{
    margin-bottom:0.25em;
}

/* ----------------------------------------------------------- */
/*                    Vista de Detalles                        */
/* ----------------------------------------------------------- */

#detail-container{
    display:grid;
    grid-template-rows: auto auto auto 1fr;
    place-items:center;
    background: var(--background-color);
    margin-top:0.25em;
    color: var(--text-color);
}

#detail-header{
    display:grid;
    grid-template-columns: auto auto;
    place-items:center;
    margin-top:1em;
    margin-bottom:1em;
    width:90%;
}

#info-container{
    display:grid;
    grid-template-columns: 4fr 8fr;
    place-items:center;
    width:95%;
}

#detail-img-container{
    margin-top:1em;
    margin-bottom:1em;
}

#detail-img{
    width:15dvh;  /*deberia ser dvw*/
    height:auto;
    border-radius:10px;
}

#favorite-btn{
    background:transparent;
    border:none;
    width:3em;
    height:auto;
}

#detail-text{
    width:90%;
    font-size:15px;
    text-align:justify;
    margin-top:2em;
}

#stats-table-container{
    font-size: 0.75rem;
}

.stats-reg{
    display:grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
}

#race-finished-stats{
    border-radius: 10px;
    border: solid black 1px;

}

#charts-container{
    width: 90%;
    display: grid;
    grid-template-columns: auto auto;
    gap: 1.5em;
    place-items: center;
}

#chart{
    display:grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    /*border: solid black 1px;*/
    /*border-radius: 10px;*/
    place-items:center;
}

#chart-title{
    text-align:center;
}

#pieChart{
    width: 100px !important;
    height: 100px !important;
    margin-bottom: 1em;
}

#avg-position-number-container{
    display: grid;
    grid-template-rows: auto 1fr;
    /*border-radius: 10px;*/
    /*border: solid black 1px;*/
    /*width: 100%;*/
    height: 100%;
    place-items:center;
}

#avg-position-number-title{
}

#avg-position-number{
    font-size:2rem;
}

#avg-position-number small{
    font-size:0.5em;
}

.positivo {
  color: #22c55e; /* verde */
}

.negativo {
  color: var(--text-color-red); /* rojo */
}

.neutro {
  color: #eab308; /* amarillo */
}

#table-container{
    display:grid;
    margin-top:1em;
    font-size: 0.75rem;
    width:90%;
}

#last-races-title{
    display: grid;
    place-items:center;
    margin-bottom:1em;
}

#last-races-table {
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

#last-races-table th,
#last-races-table td {
    border-bottom: 1px solid #f0f0f0;
    padding: 0.5em 0.5em;
    vertical-align: middle;
    text-align:center;
}

#last-races-table tr:last-child td {
    border-bottom: none;
}

/*primera columna de las tablas alineada a la izquierda*/
#last-races-table td:first-child,
#last-races-table th:first-child {
    text-align: left;
}


#championship-table-position-container{
    margin-top:1em;
    font-size: 0.75rem;
    width:90%;
}

#championship-one-row-title{
    display: grid;
    place-items:center;
    margin:1em;
}

#driver-championship-one-row-table {
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    width:100%;
}

#driver-championship-one-row-table th,
#driver-championship-one-row-table td {
    border-bottom: 1px solid #f0f0f0;
    padding: 0.5em 0.5em;
    vertical-align: middle;
    text-align:center;
}

#driver-championship-one-row-table tr:last-child td {
    border-bottom: none;
}

/*primera columna de las tablas alineada a la izquierda*/
#driver-championship-one-row-table td:first-child,
#driver-championship-one-row-table th:first-child {
    text-align: left;
}


/* ----------------------------------------------------------- */
/*                      Vista de Home                          */
/* ----------------------------------------------------------- */

#home-container{
    display:grid;
    grid-template-rows: auto auto auto;
    place-items:center;
    background: var(--background-color);
    margin-top:0.25em;
    color: var(--text-color);
    padding-top:10dvh;
    padding-bottom:10dvh;
}

.home-team-button{
    border-radius:50%;
    background: var(--background-color-dark);
    border:none;
}

.home-img-team-icon{
    
}


/* ----------------------------------------------------------- */
/*                      Vista de Escuderias                    */
/* ----------------------------------------------------------- */

#team-container{
    display:grid;
    grid-template-rows: auto auto auto 1fr auto;
    place-items:center;
    background: var(--background-color);
    margin-top:0.25em;
    color: var(--text-color);
    padding-top:2dvh;
    padding-bottom:2dvh;
}

#team-logo-image-url{
    display:grid;
    place-items:center;
    margin: 4dvh;
    width: 20dvh;  /* dvw */
    height: auto;
}

#team-car-img{
    width:95%;
    height:auto;
    margin:2vh;
}

#team-text{
    width: 90%;
    font-size: 15px;
    text-align: justify;
    margin-top: 2em;
}

#constructors-championship-table-position-container{
    margin-top:1em;
    margin-bottom:1em;
    font-size: 0.75rem;
    width:90%;
}

#constructors-championship-one-row-title{
    display: grid;
    place-items:center;
    margin:1em;
}


#constructors-championship-one-row-table {
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    width:100%;
}

#constructors-championship-one-row-table th,
#constructors-championship-one-row-table td {
    border-bottom: 1px solid #f0f0f0;
    padding: 0.5em 0.5em;
    vertical-align: middle;
    text-align:center;
}

#constructors-championship-one-row-table tr:last-child td {
    border-bottom: none;
}

/*primera columna de las tablas alineada a la izquierda*/
#constructors-championship-one-row-table td:first-child,
#constructors-championship-one-row-table th:first-child {
    text-align: left;
}

#team-drivers-container{
    display:grid;
    grid-template-columns: 1fr 1fr;
    place-items:center;
    width:100%;
}

#team-drivers-container .driver-container{
    display:grid;
    grid-template-rows: 1fr auto;
    place-items:center;
    height:100%;
}

.team-driver-img-container{
    height:100%;
}

#team-drivers-container .driver-img {
    width: 15dvh;  /* dvw */
    height: auto;
    border-radius: 10px;
    height:100%;
}

/* ----------------------------------------------------------- */
/*                      Vista de Campeonato                    */
/* ----------------------------------------------------------- */

#championship-container{
    display:grid;
    place-items:center;
    background: var(--background-color);
    margin-top:0.25em;
    color: var(--text-color);
    padding-top:2dvh;
    padding-bottom:2dvh;
}

#championship-tables-container{
    display:grid;
    place-items:center;
    width:100%;
}

#championship-tables-container .table-title{
    text-align:center;
    margin-top:1em;
    margin-bottom:1em;
}

/* hasta aca ponele que va bien */

#championship-tables-container .table{
    border-collapse: collapse;
    overflow: hidden;
}

#championship-tables-container th,
#championship-tables-container td {
    border-bottom: 1px solid #f0f0f0;
    padding : 0.5em;
    vertical-align: middle;
    text-align:center;
}

#championship-tables-container tr:last-child td {
    border-bottom: none;
}

/*primera columna de las tablas alineada a la izquierda*/
#championship-tables-container td:first-child,
#championship-tables-container th:first-child {
    text-align: left;
}



/* ----------------------------------------------------------- */
/*                          ACCORDION                          */
/* ----------------------------------------------------------- */

#accordion-container{
    background: var(--background-color);
    width:100%;
    margin-top:0.25em;
    padding-top:10px;
}

.accordion {
    width: 95%;
    /*max-width: 600px;*/
    margin: auto;
    font-family: Arial, sans-serif;
}

/*
.accordion-item {
    border-bottom: 1px solid #888;
}*/

/* HEADER */
.accordion-item-header {
    width: 100%;
    padding: 15px;
    background: var(--background-color);
    color: var(--text-color);
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    transition: background 0.3s ease;
}

/*
.accordion-item-header:hover {
    background: #687d91;
}*/

/* ICONO */
.accordion-icon {
    transition: transform 0.3s ease;
}

/* ROTACIÓN */
.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

/* BODY */
.accordion-collapse {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    /*padding: 0 15px;*/
    
}

.accordion-item-body{
    width:100%;
    display:grid;
    grid-template-rows: auto auto 1fr;
    place-items:center;
    margin-top:1.5em;
    margin-bottom:1.5em;
}

.input-search{
    width:75%;
}

#pilotos-card-container{
    width:90%;
}

/* ----------------------------------------------------------- */
/*                            MODAL                            */
/* ----------------------------------------------------------- */

#modal-container{
    position: fixed;
    inset: 0;      /* para que ocupe toda la pantalla (para que el backdrop ocupe toda la pantalla)*/
    z-index: 100;
    pointer-events: none;
}

.backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);

    display: flex;
    justify-content: center;
    align-items: center;

    pointer-events: all;
}

.modal {
    background: var(--background-color);
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: scaleIn 0.2s ease;
}

#modal-add-favorite{
    display:grid;
    place-items:center;
    grid-template-rows: 1fr auto;
    margin-left: 3dvh;
    margin-right: 3dvh;
    font-family: Arial, sans-serif;
}

#favoritos-form{
    margin-top:1em;
}

#favoritos-form-header{
    display:grid;
    place-items:center;
    width:100%;
}

legend{
    cursor: pointer;
    font-weight:bold;
    color:var(--text-color);
}

hr{
    width:100%;
}

#priority-container{
    display:grid;
    grid-template-columns: auto auto auto auto auto auto;
    place-items:center;
}

#motivo-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items:center;
    gap: 0.5em;
    align-items: center;
}

#comentario-container{
    display:grid;
    place-items:center;
    width: 100%;
    gap: 0.5em;
}

#favoritos-comentario{
    border-radius:10px;
    height:20dvh;
}

#favoritos-error-comentario{
    font-size: 0.8rem;
}

.radio-priority{
    color: var(--text-color);
    font-weight:bold;
}

.radio-motivo{
    color: var(--text-color);
    grid-column: 1 / -1; /* ocupa todo el ancho */
    font-weight:bold;
}

.input-form{
    width: 95%;
    display: grid;
    grid-template-rows: auto auto auto auto auto 1fr auto;
    place-items: center;
    gap: 1em;
}


.modal input {
    width: 100%;
    padding: 8px;
    margin-top: 10px;
}

.modal .actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */

/* A medida que se incrementa el tamaño se va modificando (mobile-first) */
/* Diseño base --> Mobile - portrait                                     */

@media (min-width: 481px){

/* Mobile - landscape */

    header{
        height:20dvh;
    }

    footer{
        padding:10px;
    }

/* Vista home ------------------------------------------- */

    #home-container{
        gap:1em;
        padding-top:5dvh;
    }

    #home-container div{
        display:flex;
        gap:3em;
    }

/* Vista teams ------------------------------------------ */


    #team-container{
        display:grid;
        grid-template-areas:
        "logo table"
        "car car"    /* Cada fila tiene 2 cols. car ocupa toda la fila */
        "team-drivers team-drivers"
        "description description";
        grid-template-rows: auto auto 1fr auto;
        gap:1em;
    }

    #team-logo-image-url {
        grid-area: logo;
        max-height:40dvh;
        width:auto;
    }

    #team-car-img { grid-area: car; }

    #constructors-championship-table-position-container {
        grid-area: table;
        width:75%;
    }

    #team-drivers-container {
        grid-area: team-drivers;
        height: 50dvh;
        padding: 4dvh;
    }

    #team-drivers-container .driver-container{
        width:50%;
    }

    #team-drivers-container .driver-img{
        width: 35dvh;   /* dvw*/
        height: 100%;
    }

    #team-text { grid-area: description; }

/* CARDS Vista Historial / Favoritos / Busqueda --------- */

    #history-container,
    #favorite-container,
    #accordion-container{
        padding-bottom:10dvh;
    }

    #history-card-container{
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        gap:1em;
    }

    #pilotos-card-container,
    #circuitos-card-container{
        width:95%;
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        gap:1em;
    }

    #favorite-card-container{
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        gap:1em;
    }

    .favorite-card{
        height:45dvh;
    }

/* Vista Championship ----------------------------------- */

    #championship-container{
        padding-bottom:10dvh;
    }

    #drivers-table-container{
        width:100%;
    }

    #drivers-championship-container{
        display:grid;
        place-items:center;
    }

    #drivers-championship-container .table{
        width:95%;
    }

    
    #constructors-table-container{
        /*display:grid;
        place-items:center;*/
        width:100%;
    }

    
    #constructors-championship-container{
        display:grid;
        place-items:center;
    }

    #constructors-championship-container .table{
        width:95%;
    }

/* Vista detalles --------------------------------------- */

    #detail-header{
        display:grid;
        place-items:center;
        grid-template-columns: 1fr 1fr;
        margin-top: 0.5em;
        margin-bottom: 0;
    }

    #info-container{
        grid-template-columns: 1fr 1fr;
    }

    #detail-img-container img{
        height: 40dvh;
        width: auto;
    }

    #detail-text{
        margin-bottom: 10dvh;
    }

/* Vista location --------------------------------------- */


    #location-container{
        display:grid;
        grid-template-rows: auto;
        grid-template-columns: 7fr 5fr;
        place-items : center;
    }

    #location-title{
        display:none;
    }

    #map{
        display:grid;
        place-items:center;
        margin-top:0;
        width:80%;
        height:40dvh;
        vertical-align:middle;
    }

    #datosDeContacto{
        margin:0;
    }

/* Modal favoritos --------------------------------------- */

    #modal-add-favorite{
        height:75dvh;
        max-width:170dvh;   /*dvw*/
    }

    #favoritos-form{
        display:grid;
        grid-template-areas:
        " header header "
        " prioridad prioridad "
        " errorprioridad errorprioridad"
        " motivo comentario "
        " errormotivo errorcomentario"; 
        margin:0;
        gap:0.5em;
    }

    #favoritos-form-header{
        grid-area: header;
    }

    #priority-container{
        grid-area: prioridad;
    }

    #motivo-container{
        grid-area: motivo;
    }

    #comentario-container{
        grid-area: comentario;
        display:flex;
        flex-direction:column;
        gap:1em;
    }

    #favoritos-error-priority{
        grid-area: errorprioridad;
    }

    #favoritos-error-motivo{
        grid-area: errormotivo;
        display:grid;
    }

    #favoritos-error-comentario{
        display:grid;
        grid-area: errorcomentario;
    }


}

@media (min-width: 768px){

    /* Tablet - Asus Zenbook Fold */

    #view{
    /*height: 90vh;  /* si la pagina no requiere scrollear con 90vh se ve bien, header, main y footer */
    height: calc( 100dvh - var(--nav-height-tablet));
    padding-bottom: var(--nav-height-tablet);
    }

    header{
        height:15dvh;
        font-size: 2rem;
    }

    nav{
        height: var(--nav-height-tablet);
    }

    .home-img-team-icon{
        width:6em;
        height:6em;
    }

    .icono{
        width:5em;
        height:5em;
    }

    footer{
        height:6dvh;
        padding:10px;
        font-size:1.5em;
    }

/* Vista home ------------------------------------------- */

    #home-container{
        gap:1em;
        padding-top:5dvh;
    }

    #home-container div{
        display:flex;
        gap:3em;
    }

/* Vista teams ------------------------------------------ */

    #team-drivers-container .driver-img {
        width: 25dvh;   /*dvw*/
        height: 35dvh;
    }


    #team-drivers-container{
        font-size: 1.75em;
        height:auto;
        padding:2dvh;
    }

    #team-drivers-container .driver-container {
        width: 70%;
        gap:1em;
    }

    #team-text{
        font-size:1.5em;
        margin-top:0em;
    }

    #constructors-championship-one-row-title {
        margin: 1em 0em;
    }

    #constructors-championship-table-position-container{
        font-size:1em;
        width: 90%;
        padding-right: 3em;
    }

    #constructors-championship-one-row-table {
        border: 0px;
    }

/* Vista Busqueda ------------------------------------------- */

    .accordion-item{
        font-size: 2em;
    }

    .input-search{
        font-size: 1em;
        color: var(--background-color);
    }

    .accordion-item-header{
        font-size:1em;
    }

    .select-box{
        font-size: 0.75em;
        color: var(--background-color);
    }

    .driver-card img {
        width: 2em;
        height: 2em;
        padding: 0.5em;
        place-self: center;
    }

    .card-img-icon{
        margin-left: 0;
    }

    .accordion-item-body li{
        font-size: 1.2em;
    }

    #pilotos-card-container{
        gap:0.1em;
    }


/* Vista Favoritos ------------------------------------------ */

    #favorite-card-container {
        padding-top: 1.5em;
    }

    .favorite-card {
        height: 12dvh;
    }

    #favoritos-form{
        display:grid;
        grid-template-rows: auto auto auto auto auto auto auto;
        grid-template-areas:
            "header"
            "prioridad"
            "errorprioridad"
            "motivo"
            "errormotivo"
            "comentario"
            "errorcomentario";
        height:100%;
        font-size: 2em;
        margin-top:1em;
        gap:0.5em;
    }

    #favoritos-error-comentario{
        font-size:1em;
        margin-bottom:1em;
    }

    #modal-add-favorite-cancel-btn,
    #modal-add-favorite-btn{
        font-size:2em;
    }


/* Vista Detalles ------------------------------------------- */

    #detail-header{
        grid-template-columns: 9fr 3fr;
        margin-top: 2em;
        margin-bottom: 1em;     
    }

    #detail-title{
        font-size: 2.75em;   
    }

    #favorite-btn{
        width:5em;
    }

    #stats-table-container,
    #table-container,
    #championship-table-position-container {
        font-size: 1.5rem;
    }
    
    #last-races-table,
    #driver-championship-one-row-table{
        border:0px;
    }

    #detail-text{
        font-size:1.6em;
        margin-bottom:5dvh;
    }

/* Vista Historial ------------------------------------------ */

    .history-card{
        height:10dvh;
    }

    .history-card img{
        margin-left:1em;
    }

    .history-card .card-description{
        display:grid;
        gap:1em;
    }

    #history-container .card-description li{
        font-size: 1.5em;
    }

    /*
    #history-card-container img {
        width: 2em;
        height: 2em;
        padding: 0.5em;
        place-self: center;
    }*/

/* Vista Contacto ------------------------------------------- */

    #location-container{
        grid-template-rows: auto auto auto;
        grid-template-columns:auto;
        font-size:1.5em;
    }

    #location-title{
        display:block;
    }

    #datosDeContacto{
        font-size:1em;
    }

    #favoritos-comentario{
        font-size:1em;
    }


}


@media (min-width: 1024px){

    body{
        display:grid;
        grid-template-rows:auto 1fr;
        grid-template-areas:
        "nav"
        "view";
    }

    #nav{
        grid-area:nav;
        position:sticky;
        top:0;
        height: var(--nav-height);
    }

    #view{
        grid-area:view;
        padding-bottom:0;
        /* height: calc( 100dvh - var(--nav-height-tablet));*/
    }

    /*
    #modal-container{
        display:none; /* para que funcione el grid-areas*
    }*/

    .navbar-icon-description{
        display: block;
        color: var(--text-color);
        font-weight:600;
        font-size:2em;
    }

    .navbar-button img{
        display:none;
    }

    #navbar-home-button img{
        display:grid;
    }

    #navbar-home-button span{
        display:none;
    }

    .navbar-button.active {
    text-shadow: 0 0 8px rgba(225, 6, 0, 0.7);
    }

    .navbar-button.active .navbar-icon-description {
        font-weight: bold;
        color: var(--text-color-red);
    }

    #icon-home{
        width: 100%;
    }

    header h1{
        display:none;
    }

    #header-img{
        height:0%;
    }

    header{
        height:0dvh;
    }

    .navbar-icon-description{
        font-size:1.5em;
    }



    /* CARDS Vista Historial / Favoritos / Busqueda --------- */

    #history-card-container,
    #favorite-card-container,
    #pilotos-card-container,
    #circuitos-card-container{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4,1fr);
        height: 95%;
        gap:1em;
    }

    .history-card{
        height: 13dvh;
    }

    .history-card img{
        padding: 0em;
    }
    
    /* Vista Championship ----------------------------------- */

    #championship-tables-container{
        grid-template-columns: 1fr 1fr;
        place-items: start center;
    }

    /* Modal ------------------------------------------------ */

    /*
    #modal-container{
        display: block;
        position:fixed;
        width: 100dvw;
        height: 100dvh;
    }

    #modal-container .hidden {
        display: none;
    }*/

    /* Formulario favoritos --------------------------------- */

    #favoritos-form {
        display: grid;
        grid-template-rows: auto auto auto auto auto auto auto;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "header header" 
        "prioridad prioridad" 
        "errorprioridad errorprioridad" 
        "motivo comentario"
        "errormotivo errorcomentario";
        height: 100%;
        font-size: 2em;
        margin-top: 1em;
        gap: 0.5em;
    }

    #favoritos-error-comentario {
        font-size: 0.8em;
    }

}