.auth-layout {
    /* Animación removida para evitar efectos al cargar */
}

/* Animación fadeIn comentada - no se usa más
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
*/

/* Efecto hover en los botones de autenticación */
.mud-button-root:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

/* Mejorar apariencia de los campos de texto */
.mud-input-outlined .mud-input-slot {
    border-radius: 8px;
}

/* Efecto para el logo */
.mud-image {
    transition: transform 0.3s ease;
}

.mud-image:hover {
    transform: scale(1.05);
}

/* Sombras suaves para las cards */
.mud-paper {
    transition: box-shadow 0.3s ease;
}

/* Estilos para mensajes de error */
.mud-alert {
    border-radius: 8px;
}

/* Mejorar la legibilidad de los links */
.mud-link {
    transition: all 0.2s ease;
}

.mud-link:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* Blazor (FocusOnNavigate) enfoca el <h1> al navegar para lectores de pantalla.
   Se mantiene ese comportamiento, pero sin el recuadro de foco sobre texto no editable. */
h1:focus,
h1:focus-visible,
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* Estilos para tabla responsive - forzar ancho de celdas */
.table-responsive .mud-table-cell {
    box-sizing: border-box;
}

.table-responsive .mud-table-cell[style*="max-width"] {
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Asegurar que las celdas con contenido largo no se desborden */
.mud-table-cell > div {
    max-width: 100%;
    overflow: hidden;
}

/* Clase específica para celdas de observaciones que deben truncarse */
.cell-truncate {
    max-width: 200px !important;
    min-width: 150px !important;
    width: 200px !important;
    overflow: hidden !important;
    position: relative;
}

.cell-truncate > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

/* Botones de acción de las tablas: solo el ícono, pintado con el color de la acción y sin
   recuadro. Al pasar el mouse aparece un fondo muy tenue para que se note que es clickeable. */
.action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    background-color: transparent;
    color: var(--pill-fg);
    transition: background-color 0.15s ease;
}

.action-pill .mud-icon-root {
    color: var(--pill-fg);
    font-size: 1.35rem;
}

.action-pill:hover {
    background-color: var(--pill-hover);
}

.action-pill-info {
    --pill-fg: #4A90E2;
    --pill-hover: #EDF4FD;
}

.action-pill-warning {
    --pill-fg: #F5A524;
    --pill-hover: #FEF6E7;
}

.action-pill-padlock {
    --pill-fg: #F07F4A;
    --pill-hover: #FEF0EA;
}

.action-pill-success {
    --pill-fg: #4CB572;
    --pill-hover: #EDF8F1;
}

.action-pill-error {
    --pill-fg: #EF5F5A;
    --pill-hover: #FDEEEE;
}

/* Espaciado general */
.mb-6 {
    margin-bottom: 24px;
}

/* Utilidades de texto */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Clases de ayuda para flexbox */
.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

/* Clases de ayuda para espaciado */
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mx-2 { margin-left: 8px; margin-right: 8px; }
.mx-3 { margin-left: 12px; margin-right: 12px; }
.my-2 { margin-top: 8px; margin-bottom: 8px; }
.my-3 { margin-top: 12px; margin-bottom: 12px; }

.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }

.table-content-center th,
.table-content-center td {
    text-align: center;
    vertical-align: middle;
}

.table-content-center .mud-stack {
    justify-content: center;
    align-items: center;
}

/* Pill del N° de contrato (Components/Shared/ContratoPill.razor) */
.contrato-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background-color: #0B2744;
    border-left: 3px solid #54D6C9;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    white-space: nowrap;
}

.contrato-pill-geo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 4px;
    background-color: #54D6C9;
    color: #0B2744;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0;
}

.contrato-pill-vacio {
    color: #9E9E9E;
}

/* ─────────────── Tablas del sitio ───────────────
   Todas las MudTable/MudSimpleTable llevan Class="imf-tabla" para verse iguales:
   encabezado gris claro, filas compactas, columna Acciones primero y centrada. */
.imf-tabla.mud-table {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.imf-tabla .mud-table-head .mud-table-cell,
.imf-tabla thead th {
    background-color: #F1F5F9;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 12px;
}

.imf-tabla .mud-table-body .mud-table-cell,
.imf-tabla tbody td {
    color: #0f172a;
    font-size: 0.8125rem;
    vertical-align: middle;
    border-color: #e2e8f0;
    padding: 6px 12px;
}

.imf-tabla.mud-table-bordered .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:not(:last-child),
.imf-tabla.mud-table-bordered .mud-table-container .mud-table-root .mud-table-head .mud-table-row .mud-table-cell:not(:last-child) {
    border-right-color: #e2e8f0;
}

.imf-tabla.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: #EEF4FB;
}

/* Columna Acciones: siempre la primera, centrada y sin cortar los botones */
.imf-tabla .imf-col-acciones {
    text-align: center !important;
    white-space: nowrap;
    width: 1%;
}

.imf-tabla .imf-col-acciones .mud-stack {
    justify-content: center;
    flex-wrap: nowrap;
}

.imf-tabla .mud-table-pagination {
    border-top: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.8125rem;
}

.imf-tabla .mud-table-empty-row,
.imf-tabla .imf-tabla-vacia {
    color: #64748b;
    text-align: center;
}

/* Miniatura de foto en tablas: al hacer clic abre Components/Shared/DialogImagen.razor */
.imf-tabla .imf-miniatura {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    cursor: zoom-in;
    display: block;
}

.imf-tabla .imf-miniatura:hover {
    border-color: #084D90;
}

.imf-dialog-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F1F5F9;
    border-radius: 10px;
    padding: 8px;
}

.imf-dialog-imagen img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 6px;
}

/* Indicador Sí/No (Components/Shared/EstadoSiNo.razor) */
.imf-estado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.6;
    white-space: nowrap;
}

.imf-estado-si {
    background-color: #E3F4E7;
    color: #0F8F2F;
}

.imf-estado-no {
    background-color: #fee2e2;
    color: #b91c1c;
}

.imf-estado-neutro {
    background-color: #F1F5F9;
    color: #64748b;
}

/* ─────────────── Pestaña Actas de la auditoría (Components/Shared/ActaTarjeta.razor) ─────────────── */
.actas-intro {
    margin-bottom: 16px;
    color: #64748b;
    font-size: 0.875rem;
}

.actas-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.acta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.acta-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.acta-icono {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acta-icono-azul { background: #E7EEF7; color: #084D90; }
.acta-icono-celeste { background: #EDF4FD; color: #4A90E2; }
.acta-icono-verde { background: #EDF8F1; color: #4CB572; }

.acta-icono .mud-icon-root {
    color: inherit;
}

.acta-titulo {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.95rem;
}

.acta-descripcion {
    margin-top: 2px;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.acta-estado {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 24px;
}

.acta-detalle {
    color: #475569;
    font-size: 0.78rem;
}

.acta-pendiente .acta-detalle {
    color: #94a3b8;
}

/* El botón queda al fondo para que las tres tarjetas se alineen aunque el texto varíe */
.acta-boton.mud-button-root {
    margin-top: auto;
    text-transform: none;
    border-radius: 8px;
    background-color: #084D90;
    color: #ffffff;
}

.acta-boton.mud-button-root:hover {
    transform: none;
    box-shadow: none;
    background-color: #063B6F;
}

.acta-boton.mud-button-root.mud-button-disabled {
    background-color: #F1F5F9;
    color: #94a3b8;
}

/* Subir o reemplazar el Informe (solo AUDITOR y ADMIN-IMF), bajo el botón de descarga */
.acta-subir {
    width: 100%;
    margin-top: -6px;
}

.acta-boton-secundario.mud-button-root {
    text-transform: none;
    border-radius: 8px;
    border-color: #084D90;
    color: #084D90;
}

.acta-boton-secundario.mud-button-root:hover {
    transform: none;
    box-shadow: none;
    background-color: #E7EEF7;
}