/* Asegura que html y body cubran toda la pantalla */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Asegura que ocupen toda la altura */
    overflow-x: hidden; /* Evita scroll lateral */
    background: #eaf2fa; /* Azul clarísimo */
    display: flex; /* Flexbox para distribuir elementos */
    flex-direction: column; /* Distribución vertical */
}

/* Contenedor principal que crece para ocupar el espacio */
.container {
    flex: 1; /* Ocupa todo el espacio disponible */
    padding: 20px;
    text-align: center;
    background-color: transparent; /* Transparente para ver el fondo */
}

/* Forzamos un fondo que cubra todo el alto, incluso con scroll */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Altura del viewport */
    z-index: -1; /* Se coloca detrás del contenido */

}

/* Tarjetas generales */
.card {
    border-radius: 15px; /* Bordes más suaves */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra más definida */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    padding: 20px;
    margin-bottom: 20px;
    height: 100%;
    cursor: pointer; /* Indica interactividad */
    border: 2px solid transparent; /* Borde inicial transparente */
    background-color: rgba(255, 255, 255, 0.8); /* Fondo claro por defecto */
}

/* Efecto hover para todas las tarjetas */
.card:hover {
    transform: translateY(-8px); /* Desplazamiento hacia arriba */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
    background-color: rgba(255, 255, 255, 1); /* Fondo más claro */
}

/* Tarjetas sin efecto hover */
.card.no-hover {
    transition: none !important; /* Sin transición */
    transform: none !important; /* Sin movimiento */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra fija */
    cursor: default !important; /* Sin interactividad */
}

/* Sin cambios al pasar el ratón */
.card.no-hover:hover {
    transform: none; /* Sin desplazamiento */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra fija */
    background-color: rgba(255, 255, 255, 0.8); /* Fondo estático */
}

/* Alineación del texto */
.card.no-hover .card-body {
    text-align: left; /* Todo el texto alineado a la izquierda */
}

/* Íconos de las tarjetas */
.card i {
    font-size: 4.5rem; /* Tamaño del icono */
    margin-bottom: 15px;
    color: #6c757d; /* Gris neutro */
    transition: transform 0.3s ease, color 0.3s ease; /* Animación suave */
}

/* Efecto hover en los íconos */
.card:hover i {
    transform: scale(1.1); /* Ligeramente más grande */
}

/* Estilo específico para el estado "Irekitako" */
.card.custom-border-success {
    border-color: #3BAC7E;
    border-bottom: 10px solid #3BAC7E;
    background-color: rgba(59, 172, 126, 0.2); /* Fondo verde suave */
}

.card.custom-border-success i {
    color: #3BAC7E; /* Icono verde */
}

/* Estilo específico para el estado "Itxitako" */
.card.custom-border-danger {
    border-color: #D1604A;
    border-bottom: 10px solid #D1604A;
    background-color: rgba(209, 96, 74, 0.2); /* Fondo rojo suave */
}

.card.custom-border-danger i {
    color: #D1604A; /* Icono rojo */
}

/* Estilo específico para el estado "Datozen" */
.card.custom-border-info {
    border-color: #504F4F;
    border-bottom: 10px solid #504F4F;
    background-color: rgba(80, 79, 79, 0.2); /* Fondo gris oscuro */
}

.card.custom-border-info i {
    color: #504F4F; /* Icono gris oscuro */
}

/* Texto dentro de las tarjetas */
.card a {
    text-decoration: none !important; /* Sin subrayado */
    color: inherit !important; /* Hereda el color */
    display: block; /* Hace que todo el contenido sea clicable */
}

.card-title {
    font-size: 1.4rem; /* Tamaño del título */
    font-weight: bold;
    text-align: center;
    color: #333; /* Texto oscuro */
    margin-bottom: 10px;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

.card-text {
    font-size: 1rem; /* Texto descriptivo más pequeño */
    color: #555; /* Gris medio */
    text-align: center;
}

/* Hover en los textos */
.card:hover .card-title {
    color: #111; /* Más oscuro en hover */
}

.card:hover .card-text {
    color: #333; /* Más oscuro en hover */
}

/* Distribución de las tarjetas */
.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Pie de página */
footer {
    margin-top: auto;
    background-color: #1F2937;
    padding: 10px 20px;
    display: flex;
    flex-direction: column; /* Por defecto, diseño en columna */
    justify-content: center; /* Alineado vertical */
    align-items: center; /* Centrado horizontal */
    width: 100%;
    height: auto; /* Altura dinámica */
    color: white;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    text-align: center; /* Centra texto y enlaces en pantallas pequeñas */
}

.footer-left img {
    height: 40px;
    margin-bottom: 10px; /* Margen para separación */
}

.footer-center {
    margin-bottom: 10px; /* Espacio entre secciones en móviles */
    font-size: 0.9rem;
    font-weight: 600;
}

.footer-right {
    text-align: center; /* Centra enlaces en móviles */
}

.footer-right a {
    color: white;
    text-decoration: none;
    margin: 0 5px;
    display: inline-block;
}

.footer-right a:hover {
    color: #E0F2FE;
}

/* Media Query para pantallas más grandes */
@media (min-width: 768px) {
    footer {
        flex-direction: row; /* Distribución horizontal */
        justify-content: space-between;
        align-items: center;
        height: 60px; /* Altura fija en pantallas grandes */
        text-align: left; /* Texto alineado a la izquierda */
    }

    .footer-left img {
        margin-bottom: 0;
    }

    .footer-center {
        margin-bottom: 0; /* Quita margen en pantallas grandes */
        position: static; /* Elimina el position absolute */
        transform: none; /* Restablece transform */
    }

    .footer-right {
        text-align: right;
    }
}





/* Contenedor para la imagen con texto superpuesto */
.image-container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-top: 0;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animaciones suaves */
}

.image-container:hover {
    transform: scale(1.02); /* Efecto zoom sutil en hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen al contenedor */
    border-radius: 15px;
    filter: brightness(70%) contrast(110%); /* Imagen ligeramente más oscura y contrastada */
}

/* Contenedor para la imagen con texto superpuesto */
.image-container {
    position: relative;
    width: 100%;
    height: 400px; /* Altura para pantallas grandes */
    overflow: hidden;
    margin-top: 0;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animaciones suaves */
}

.image-container:hover {
    transform: scale(1.02); /* Efecto zoom sutil en hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen al contenedor */
    border-radius: 15px;
    filter: brightness(70%) contrast(110%); /* Imagen ligeramente más oscura y contrastada */
}

/* Superposición del texto */
.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8); /* Fondo translúcido blanco */
    color: #1F2937; /* Texto oscuro para contraste */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente el contenido */
    align-items: center; /* Centra horizontalmente el contenido */
    text-align: center;
    border-radius: 15px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra interna */
    transition: background-color 0.3s ease; /* Transición suave del fondo */
}

.text-overlay h2 {
    font-size: 2.5rem; /* Tamaño del título en PC */
    font-weight: bold;
    margin-bottom: 15px;
    color: #1F2937;
    letter-spacing: 1px;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.text-overlay p {
    font-size: 1.4rem; /* Texto más grande en PC */
    line-height: 1.8;
    margin-top: 10px;
    color: #4B5563;
    font-weight: 600;
}

/* Media Queries para dispositivos móviles */
@media (max-width: 768px) {
    .image-container {
        height: 450px; /* Más alto para móviles medianos */
    }

    .text-overlay h2 {
        font-size: 1.8rem; /* Título ligeramente más pequeño */
    }

    .text-overlay p {
        font-size: 1.1rem; /* Texto ajustado */
        line-height: 1.5;
    }

    .text-overlay {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .image-container {
        height: 500px; /* Aumenta la altura para móviles pequeños */
    }

    .text-overlay h2 {
        font-size: 1.6rem; /* Título más pequeño para móviles pequeños */
    }

    .text-overlay p {
        font-size: 1.1rem; /* Mantén el texto un poco más grande */
        line-height: 1.6; /* Espaciado adicional */
    }

    .text-overlay {
        padding: 25px; /* Aumenta el espacio para evitar que se vea comprimido */
    }
}


/* Estilo de los elementos de la lista */
.list-group-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    background-color: #ffffff; /* Fondo blanco limpio */
    border-radius: 12px; /* Bordes suaves */
    margin-bottom: 15px;
    border: 1px solid #ddd; /* Borde sutil */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animación suave */
}

.list-group-item:hover {
    transform: translateY(-5px); /* Eleva el elemento */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

/* Imagen del lado izquierdo */
.list-image {
    width: 100px;
    height: 100px;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
    border-radius: 8px; /* Bordes redondeados */
    margin-right: 15px;
    border: 1px solid #ccc; /* Borde fino alrededor de la imagen */
}

/* Contenedor para los detalles (título y fechas) */
.list-details {
    flex: 2;
    text-align: left;
    margin-right: 10px; /* Espacio entre detalles y descripción */
}

.list-details .title-container {
    font-size: 1.2rem; /* Tamaño del título */
    font-weight: bold;
    color: #1F2937; /* Gris oscuro */
    margin-bottom: 5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.list-details .date-text {
    font-size: 0.9rem;
    color: #6c757d; /* Gris claro */
}

/* Contenedor de la descripción */
.description-container {
    flex: 3;
    color: #6c757d; /* Gris claro */
    font-size: 0.95rem;
    line-height: 1.5; /* Espaciado entre líneas */
    overflow: hidden; /* Evita desbordamiento */
    text-overflow: ellipsis;
    white-space: nowrap; /* Muestra solo una línea */
}

/* Estado del proceso */
.process-status {
    text-align: center;
    flex-shrink: 0;
}

.process-status .status-icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.process-status .status-text {
    font-size: 0.9rem;
    font-weight: 500;
}

.process-status .btn-status {
    font-size: 0.85rem;
    padding: 5px 10px;
    border-radius: 5px;
}

/* Deshabilitar hover para elementos sin interactividad */
.no-hover .list-group-item {
    transition: none !important;
    transform: none !important;
    cursor: default !important;
    box-shadow: none !important;
}

.no-hover .list-group-item:hover {
    transform: none;
    box-shadow: none;
}

/* Estilo para el título en escritorio (por defecto) */
.list-details .title-container {
    font-size: 1.2rem; /* Tamaño del título */
    font-weight: bold;
    color: #1F2937; /* Gris oscuro */
    margin-bottom: 5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    text-align: left; /* Alineación izquierda por defecto */
}


@media (max-width: 768px) {
    .list-group-item {
        flex-direction: column; /* Cambia el diseño a vertical */
        align-items: flex-start; /* Alinea el contenido al inicio */
        text-align: left; /* Predeterminado para la tarjeta */
        padding: 15px; /* Reduce el padding */
    }

    .list-image {
        width: 80px; /* Imagen más pequeña en móviles */
        height: 80px;
        margin-right: 0;
        margin-bottom: 10px; /* Espacio debajo de la imagen */
    }

    .list-details {
        width: 100%; /* Ocupa todo el ancho disponible */
        text-align: center; /* Centra todo el contenido de los detalles */
        margin-bottom: 10px; /* Espacio entre el título y descripción */
    }

    .list-details .title-container {
        text-align: center; /* Centra el título */
        font-size: 1.1rem; /* Ajusta ligeramente el tamaño en móviles */
        font-weight: bold;
        margin-bottom: 10px; /* Espacio inferior */
    }

    .description-container {
        text-align: left; /* Asegura que la descripción esté alineada a la izquierda */
        font-size: 0.9rem; /* Reduce el tamaño del texto */
        -webkit-line-clamp: 3; /* Muestra hasta 3 líneas en móviles */
        overflow: hidden;
    }

    .process-status {
        align-self: center; /* Centra el estado en móviles */
        text-align: center;
        margin-top: 10px;
    }
}

/* Descripción del proceso */
.description-container {
    flex: 3;
    text-align: left; /* Alineación a la izquierda */
    overflow: hidden; /* Esconde el contenido que desborda */
    text-overflow: ellipsis; /* Muestra "..." si hay desbordamiento */
    white-space: normal; /* Permite el salto de línea automático */
    max-height: 4.2em; /* Limita la altura máxima del contenedor */
    line-height: 1.4; /* Controla el espacio entre líneas */
}

/* Estilo del párrafo dentro del contenedor */
.description-container p {
    font-size: 0.95rem; /* Tamaño de fuente */
    line-height: 1.4; /* Espaciado entre líneas */
    color: #495057; /* Gris intermedio */
    margin: 0;
    text-align: left; /* Asegura la alineación a la izquierda */
    overflow: hidden; /* Esconde contenido adicional */
    text-overflow: ellipsis; /* Muestra "..." si es necesario */
}

/* Estado del proceso */
.process-status {
    text-align: center;
    flex: 1;
}

.status-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

/* Colores de estado */
.status-icon.closed {
    color: #D1604A; /* Rojo para procesos cerrados */
}

.status-icon.upcoming {
    color: #504F4F; /* Gris oscuro para futuros */
}

.status-icon.open {
    color: #3BAC7E; /* Verde para abiertos */
}

.status-text {
    font-size: 0.9rem;
    font-weight: bold;
    color: #333; /* Texto oscuro */
}

/* Botones */
.btn-success {
    background-color: #3BAC7E;
    border-color: #3BAC7E;
}

.btn-success:hover {
    background-color: #349c6e;
    border-color: #349c6e;
}

/* Formularios */
.form-group {
    text-align: left !important;
}

/* Reducir espacio entre tarjetas y flechas */
.fase-card {
    width: 11rem;
    height: 14rem;
    margin: 0; /* Elimina márgenes entre tarjetas */
    padding: 10px; /* Ajusta el espacio interno de las tarjetas */
}

.fase-card .card-title {
    font-size: 0.9rem; /* Tamaño más pequeño para el título */
    margin-bottom: 0.5rem; /* Reduce espacio debajo del título */
}

.fase-card .card-text {
    font-size: 0.8rem; /* Tamaño más pequeño para el texto */
    margin-bottom: 0; /* Reduce espacio adicional debajo del texto */
}

.fase-circle {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.2rem;
    border-radius: 50%;
    margin-bottom: 0.5rem; /* Espacio reducido debajo del círculo */
}

.fase-arrow {
    font-size: 2rem;
    align-self: center;
    margin: 0; /* Elimina márgenes extra alrededor de las flechas */
}

/* Reducir separación entre tarjetas y flechas */
.fases-container .d-flex {
    gap: 10px; /* Reduce la separación entre las tarjetas y flechas */
}

/* Botón para procesos cerrados */
.btn-status.closed {
    background-color: #D1604A; /* Rojo */
    border-color: #D1604A;
    color: white;
}
.btn-status.closed:hover {
    background-color: #B14030; /* Rojo más oscuro al pasar el ratón */
    border-color: #B14030;
    color: white;
}

/* Botón para procesos futuros */
.btn-status.upcoming {
    background-color: #504F4F; /* Gris oscuro */
    border-color: #504F4F;
    color: white;
}
.btn-status.upcoming:hover {
    background-color: #3E3E3E; /* Gris más oscuro al pasar el ratón */
    border-color: #3E3E3E;
    color: white;
}

/* Botón para procesos abiertos */
.btn-status.open {
    background-color: #3BAC7E; /* Verde */
    border-color: #3BAC7E;
    color: white;
}
.btn-status.open:hover {
    background-color: #2A8E6A; /* Verde más oscuro al pasar el ratón */
    border-color: #2A8E6A;
    color: white;
}


/* Eliminar subrayado de los enlaces dentro de las tarjetas */
.card {
    text-decoration: none !important; /* Sin subrayado */
}

.card:hover {
    text-decoration: none !important; /* Sin subrayado en hover */
}

.card .card-title,
.card .card-text {
    text-decoration: none; /* Asegura que el texto no esté subrayado */
}

/* Hacer el icono más grande */
.icon-larger {
    font-size: 6rem !important;  /* Tamaño del candado */
    color: #3BAC7E; /* Color del candado */
}

/* Centrar todo el contenido en la tarjeta */
.card.custom-border-success .card-body {
    display: flex; /* Flexbox para organizar elementos */
    justify-content: center; /* Centra horizontalmente el contenido */
    align-items: center; /* Centra verticalmente el contenido */
    text-align: left; /* El texto estará alineado a la izquierda */
    height: 100%; /* Asegura que el contenido ocupe toda la altura disponible */
}

/* Título más grande */
.card.custom-border-success .card-title {
    
    font-weight: bold;
    margin: 0; /* Elimina márgenes extra */
}

/* Descripción más grande */
.card.custom-border-success .card-text {
    
    margin: 0; /* Elimina márgenes extra */
}

/* Espaciado entre icono y texto */
.card.custom-border-success .card-body i {
    margin-right: 15px; /* Espaciado entre el icono y el texto */
}

.mesa-descripcion {
    line-height: 1.6;
    font-size: 1rem;
    color: #555f6d; /* Color gris */
}

.mesa-descripcion * {
    color: inherit !important; /* Aplica el color gris a todos los elementos internos */
}

/* Botón personalizado para administración */
.btn-admin {
    background-color: #1F2937 !important; /* Color de fondo oscuro */
    color: white !important; /* Texto siempre blanco */
    padding: 0.2rem 0.5rem; /* Márgenes internos más pequeños (más estrechos) */
    font-weight: bold; /* Texto en negrita */
    font-size: 1rem; /* Fuente ligeramente más pequeña */
    border-radius: 4px; /* Bordes ligeramente redondeados */
    transition: background-color 0.2s ease; /* Transición para el color en hover */
    border: none; /* Sin borde */
    width: 33%; /* Ancho ajustado al contenido */
}

/* Hover del botón de administración */
.btn-admin:hover {
    background-color: #374151 !important; /* Color ligeramente más claro en hover */
    color: white !important; /* Texto sigue siendo blanco */
}

/* Ajustar el contenedor del calendario */
#calendar {
    font-size: 0.9rem; /* Tamaño general del texto */
}

/* Asegurar ancho mínimo para las celdas */
.fc-daygrid-day {
    min-width: 100px; /* Ancho mínimo de las celdas */
    min-height: 70px; /* Altura mínima de las celdas */
}

/* Asegurar que no haya scroll */
.fc-view-harness {
    overflow: hidden !important; /* Evitar barras de desplazamiento */
}

/* Reducir tamaño del título */
.fc-toolbar-title {
    font-size: 1.2rem; /* Tamaño más pequeño para el título */
}

/* Botones de navegación */
.fc-button {
    font-size: 0.85rem; /* Reducir tamaño de botones */
    padding: 5px 10px; /* Ajustar padding */
}

/* Números del día */
.fc-daygrid-day-number {
    font-size: 0.9rem; /* Tamaño de los números */
}

/* Eventos dentro de las celdas */
.fc-event {
    font-size: 0.8rem; /* Reducir tamaño de los eventos */
    padding: 2px 4px; /* Espaciado interno */
}