/* ------------- */
/* TABS SENCILLO */
/* ------------- */
/* ESTILOS DE LAS TABS */
/* NO MODIFICAR */
/* Cualquier modificación se debería hacer en otro CSS 
   sobreescribiendo las clases */
/* ------------- */


/* Contenedor general de un grupo de tabs */
.tabs {
    /* No tiene estilos pero está aquí por si se sobreescribe */
}

/* Contenedor de los botones */
.tabs__buttons {
    display: flex;
    gap: 2em;
}

/* Cada botón del tab */
.tabs__tabbutton {
    text-decoration: none;
    display: block;
    padding: 1em;
    background-color: #eee;
    border-radius: 1em 1em 0 0;
    border-top: 2px solid #666;
    border-left: 2px solid #666;
    border-right: 2px solid #666;
}

/* Cada botón del tab cuando pasas por encima */
.tabs__tabbutton:hover {
    background-color: #9c9c9c;
    color: black;
}

/* Cada botón del tab cuando está seleccionado/activo */
.tabs__tabbutton--selected {
    background-color: black;
    color: white;
}

/* Contenedor de todas las tabs con información */
.tabs__content {
    display: grid;
    min-height: 20em;
    border: 1px solid #666;
    border-radius: 0 0 1em 1em;
    overflow: hidden;
}

/* Una tab con información */
/* Por defecto OCULTA */
.tabs__tab {
    display: none;
    grid-column: 1;
    grid-row: 1;
}

/* Una tab con información visible */
.tabs__tab--visible {
    display: block;
}