/*
    Hoja de estilos de Formación Online por este orden:
    - Página principal
    - Listado de cursos
    - Detalle de cursos
    - Listado de Profesores

    La estructura de body inicial vale para todas las páginas porque todas tienen tres filas:
        - Header
        - Main
        - Footer
*/

/***********************************
            COMUNES
************************************/
body{
    display: grid;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    grid-template-rows: auto 1fr auto;                  /*  header main footer  */
    font-family: Calibri, "Trebuchet MS", sans-serif;   /*  Fuente base para todo el proyecto, que coja esta sino existe otra */
}

h1, h2, h3 {
    font-family: Calibri, "Trebuchet MS", sans-serif;
    font-weight: bold;
}

p, td, li {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/***********************************
                HEADER 
************************************/
header {
    background-color: whitesmoke;
    width: 100%;
}

.banner a {
    text-decoration: none;
}

.banner img {
    width: 100%;
    height: 200px;
    object-fit: contain;    /* Para que la imagen que tiene fondo transparente se adapte al espacio cambiante. Siempre va a llenar el espacio del banner de ancho */
    display: block;
}

/* Ajuste para el carrusel */
#carruselIndex img {
  max-height: 300px;
  object-fit: cover;
}

/* Responsive para el carrusel, si es menos de 768px se reduce la altura y se adapta la imagen */
@media (max-width: 768px) {
.carousel-item {
    height: 150px; 
}
.carousel-item img {
    object-fit: cover;
    height: 100%;
}
}

.carousel-caption h1 {
font-size: 3rem;
text-align: start;
}

.carousel-item.blanco h1 {
color: white;
}

.carousel-item.rojo h1 {
color: #a71b29;
}

#carruselIndex button {
color: white;
}

/* Nav*/
.navbar.rojo {
    text-align: center;
    background-color: #a71b29;
}

.navbar-toggler .material-symbols-outlined {
    color: white;
}


.nav-link{
    color: white;
    font-weight: bolder;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.nav-link:hover{
    color: lightcoral;
}

.dropdown-item{
    background-color: whitesmoke;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: normal;   
}

.dropdown-item:hover{
    background-color: #a71b29;
    color: white;
}

.nav-item button {
    background-color: #a71b29;
    color: white;

}

/*** Usuario autenticado ***/
#contenedor-header-usuario {
    background-color: whitesmoke;
    color: #a71b29;
    font-weight: normal;
    font-size: small;
    display: flex;
    justify-content: flex-end; /* Mueve todo a la derecha */
    gap: 10px; /* Espacio entre los spans */
    padding-right: 10px;
}


#contenedor-header-usuario a {
    color: #a71b29;
    font-weight: bold;
    text-decoration: none;
}

/***********************************
                MAIN
************************************/
main{
    padding: 20px;
    font-size: 100%;
} 

.section-main { 
    background-color: white;
    font-size: medium;
    display: grid; 
    grid-template-columns: 1fr 1fr; /* 2 columnas */ 
    grid-template-rows: auto auto; /* 2 filas */ 
    gap: 10px;
    font-size: 100%;
}

/* Añadimos responsive, si es menos de 768 se pone el GRID en una columan */
@media (max-width: 768px) {
    .section-main {
        grid-template-columns: 1fr; /* una sola columna */
    }
}

.section-main a{
    text-decoration: none;
    display: block;             /* como si se seleccionara toda la cjaa */
    color: inherit;             /* mantener el estilo del texto y que no sea pisado por los anclajes */
}

.section-main article {
    background: whitesmoke;
    border: 1px solid #ddd;
    padding: 25px;
    border-radius: 10px;
}

.section-main article:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);  
}

main h2{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: larger;
    color: #a71b29;
}

.lista-generica {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-generica li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.lista-generica li::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    border-radius: 50%;
}

.section-main p{
    text-wrap: unset;
    /** text-align: justify;  Recomendacion de WAVE para mejorar la accesibilidad, pero no se ve bien en el diseño, así que lo dejamos sin justificar */
}

/* Para contenidos CARD de Bootstrap en INDEX */
#section-main-card {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
}

.card {
    background: whitesmoke;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
}

.card h2{
    color: #a71b29;
}

.card p{
    text-wrap: unset;
}

.btn-outline-primary {
  color: #a71b29;
  border-color: #a71b29;
}

.btn-outline-primary:hover {
  background-color: #a71b29;
  color: white;
}

.btn-outline-primary:focus,
button:focus-visible {
  background-color: #a71b29;
  color: white;
}


/* Estilos para el contenido de los listados de cursos que ahora se hace con Bootstrap*/
#contenedor-filtro-cursos {
    padding: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* 3 columnas, la primera más ancha para el título, select y botón */
    gap: 20px;
}

/* Para que se vea en móviles en una única columna */
@media (max-width: 768px) {
    #contenedor-filtro-cursos {
        grid-template-columns: 1fr;
    }
}

.listado-cursos {
    row-gap: 40px;
}

/* Curso individual y su detalle */
.curso {
    display: grid;
    grid-template-columns: 1fr 2fr; /* izquierda imagen, derecha contenido */
    gap: 30px;
    align-items: start;

    margin: 0 auto;      /* centra el grid */
    padding: 20px;       /* separa del borde */
}

.curso a:hover {
    opacity: 0.9;            /* efecto al pasar el ratón */
}

.detalle-imagen-curso img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive para el detalle del curso */
@media (max-width: 768px) {
    .curso {
        grid-template-columns: 1fr; /* una sola columna */
    }
}

.detalle-curso h2{
    margin-top: 0;
    font-size: x-large;
    color: #a71b29;
}

.detalle-curso section {
    margin-bottom: 20px;
}

.detalle-curso p{
    font-size: large;
}

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


/* Página listado de profesores / TABLE */
.listado-profesores table {
    width: 80%;                     /* Ancho requerido  */
    margin: 0 auto;                 /* Para que quede centrado con el ajuste de los margenes: superior-inferior izquierda-derecha */
    background: whitesmoke;
}

.listado-profesores table tbody tr:hover td {
    background-color: rgba(216, 215, 224, 0.507);  /* Efecto over en la tabla pero sin afectar al th*/
    color: #a71b29;
}

th[data-sort="true"] {
    cursor: pointer;
}

th.asc::after {
    content: " ↑";
    font-weight: bold;
}

th.desc::after {
    content: " ↓";
    font-weight: bold;
}

/***********************************
            FOOTER
************************************/
footer {
    background-color: #a71b29;
    color: whitesmoke;
    font-weight: bolder;
    font-size: small;
}

footer a{
    color: whitesmoke;
    text-decoration: none;
}