/* Estilos para los favicons de bancos */
.bank-favicon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    object-fit: contain;
    /* Mejorar la calidad de renderizado */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Suavizar bordes */
    border-radius: 2px;
    /* Sombra sutil para mejor definición */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* Favicon más grande para tablas */
.bank-favicon-large {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    border-radius: 3px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
}

/* Favicon pequeño para elementos compactos */
.bank-favicon-small {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    border-radius: 2px;
    filter: drop-shadow(0 0.5px 1px rgba(0,0,0,0.1));
}

/* Estilos para el selector de bancos */
.bank-option {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bank-option:hover {
    background-color: #f8f9fa;
}

.bank-option.selected {
    background-color: #e9ecef;
}

.bank-option img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-right: 0.5rem;
    /* Mejorar calidad en displays de alta densidad */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    border-radius: 4px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Optimizaciones para displays de alta densidad (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .bank-favicon,
    .bank-favicon-large,
    .bank-favicon-small {
        /* En displays Retina, usar suavizado */
        image-rendering: auto;
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Animación sutil al cargar */
@keyframes fadeInFavicon {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.bank-favicon,
.bank-favicon-large,
.bank-favicon-small {
    animation: fadeInFavicon 0.3s ease-out;
}

/* Hover effect para favicons en tablas */
table tr:hover .bank-favicon-large {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}