/* css/style.css */

/* --- Global Styles --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #eef2f5; 
    color: #343a40; 
    font-size: 0.95rem; 
    line-height: 1.6; 
}

/* --- Colores de Dhartec (Referencia) --- */
.text-dhartec-blue { color: #004A8F !important; }
.text-dhartec-green { color: #8BC53F !important; }
.bg-primary-dhartec { background-color: #004A8F !important; color: white; }
.bg-secondary-dhartec { background-color: #8BC53F !important; color: white; }

/* --- Navbar --- */
.navbar {
    background-color: #ffffff !important; 
    border-bottom: 3px solid #004A8F;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}
.navbar-brand img {
    max-height: 38px; 
    transition: transform 0.3s ease;
}
.navbar-brand:hover img {
    transform: scale(1.05);
}
.navbar-text {
    font-weight: 500; 
}

/* --- Títulos de Sección en Columna Derecha --- */
.section-title {
    font-size: 1.15rem; 
    font-weight: 600;
    color: #004A8F; 
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #004A8F;
    margin-bottom: 1.25rem !important; 
    display: inline-block; 
}


/* --- Tarjetas Generales (Columnas Izquierda y Derecha) --- */
.card {
    border: none; 
    border-radius: 0.5rem; 
    box-shadow: 0 4px 12px rgba(0, 74, 143, 0.08); 
    transition: all 0.3s ease-in-out;
}
.card:hover {
    box-shadow: 0 6px 16px rgba(0, 74, 143, 0.12); 
}

.card-header {
    font-weight: 600; 
    padding: 0.6rem 1rem; 
    border-bottom: 1px solid #e9ecef; 
}
.small-card-header {
    font-size: 0.875rem; 
    display: flex;
    align-items: center;
    color: #fff; 
}
.small-card-header .feather { 
    width: 1em; 
    height: 1em;
    margin-right: 0.5rem !important; 
    opacity: 0.9;
}

/* --- Tarjetas de Acceso Directo Extra Pequeñas (Columna Derecha - Herramientas) --- */
.access-card-xsmall {
    background-color: #fff;
    height: 100%; 
    border-radius: 0.4rem; 
}
.access-card-xsmall .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem; 
    min-height: 90px; 
}
.icon-svg-xsmall, 
.access-card-xsmall .feather {
    width: 24px; 
    height: 24px;
    margin-bottom: 0.4rem;
    transition: transform 0.2s ease-in-out;
}
.access-card-xsmall:hover .icon-svg-xsmall,
.access-card-xsmall:hover .feather {
    transform: scale(1.1); 
}
.card-title-xsmall {
    font-size: 0.75rem; 
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    color: #343a40;
}
.card-link { 
    text-decoration: none;
}
.card-link:hover {
    text-decoration: none; 
}


/* --- Tarjeta Agrupada Trello (Compacta) --- */
.trello-card-compact .card-body { /* Ya no se usa esta clase, Trello es una tabla */
    /* padding: 0.6rem;  */
}
.trello-table td { /* Estilos específicos para la tabla de Trello si son necesarios */
    /* font-size: 0.85rem; */
}

/* --- Tabla de Recursos (Formularios, Documentos, Trello) --- */
.resource-table {
    font-size: 0.875rem; 
}
.resource-table td {
    vertical-align: middle;
    padding: 0.75rem 0.6rem; /* Aumentar padding vertical un poco */
    border-top: 1px solid #f1f3f5; 
}
.resource-table tr:first-child td {
    border-top: none; 
}
.resource-table .icon-cell {
    width: 35px; 
    text-align: center;
}
.icon-svg-resource { /* Para iconos en tablas (Trello, Formularios, Documentos) */
    width: 20px;
    height: 20px;
    opacity: 0.9;
}
.resource-link {
    text-decoration: none;
    color: #004A8F; 
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}
.resource-link:hover {
    color: #003366; 
    text-decoration: none; 
}
.resource-link.disabled-look { 
    color: #6c757d; 
    font-weight: normal;
    pointer-events: none; 
}


/* --- Contenedores de Iframe (Columna Izquierda) --- */
.iframe-container-small,
.iframe-container-birthday {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 230px; 
    border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px); 
}
.iframe-container-small iframe,
.iframe-container-birthday iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- Contenedor para Looker Studio --- */
.looker-studio-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* La altura se define en el iframe, pero podemos usar padding-top para mantener aspect ratio si es necesario */
    /* Ejemplo para un aspect ratio de 16:9 -> padding-top: 56.25%; */
    /* Por ahora, dejaremos que la altura del iframe (450px) defina la altura del contenedor */
    border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px); /* Para redondear esquinas inferiores si el card-body tiene p-0 */
}

.looker-studio-container iframe {
    display: block; /* Para evitar espacio extra debajo del iframe */
    width: 100%;
    /* La altura se toma del atributo height del iframe, pero se puede sobrescribir aquí si es necesario */
    /* height: 450px; */ /* Coincide con el iframe original */
    border: none;
}


/* --- Firebase UI Auth Container --- */
#firebaseui-auth-container .card {
    border: 1px solid #ddd; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}
#firebaseui-auth-container .card:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}


/* --- Botón de Cerrar Sesión --- */
#logout-button {
    border-color: #dc3545;
    color: #dc3545;
    font-size: 0.875rem; 
    padding: 0.375rem 0.75rem; 
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
#logout-button:hover {
    background-color: #dc3545;
    color: white;
}

/* --- Footer --- */
footer {
    font-size: 0.875rem; 
    background-color: #ffffff; 
    padding-top: 1rem !important; 
    padding-bottom: 1rem !important;
    border-top: 1px solid #dee2e6; 
    margin-top: 3rem !important; 
}
.social-icon svg {
    width: 22px; 
    height: 22px;
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.social-icon:hover svg {
    opacity: 1;
    transform: scale(1.1);
}

/* --- Media Queries --- */
@media (max-width: 992px) { /* Tablets */
    .iframe-container-small,
    .iframe-container-birthday {
        height: 260px; 
    }
    .section-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) { /* Móviles */
    body {
        font-size: 0.9rem; 
    }
    .access-card-xsmall .icon-svg-xsmall,
    .access-card-xsmall .feather {
        width: 22px;
        height: 22px;
    }
    .card-title-xsmall {
        font-size: 0.7rem;
    }
    .small-card-header {
        font-size: 0.825rem;
    }
     .iframe-container-small,
    .iframe-container-birthday {
        height: 240px; 
    }
    .looker-studio-container iframe { /* Ajustar altura en móviles si es necesario */
        height: 350px;
    }
    .section-title {
        font-size: 1rem;
    }
    footer {
        flex-direction: column;
        align-items: center;
    }
    footer p {
        margin-bottom: 0.75rem !important;
    }
}