/* ════════════════════════════════════════════════════════════════════════════════
   FALLBACK PARA IMÁGENES NO ENCONTRADAS (404)
   ════════════════════════════════════════════════════════════════════════════════ */

/* Placeholder elegante para imágenes rotas */
img {
    background-color: #f5f7fa;
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>');
    background-size: 40px 40px;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}

/* Imágenes de usuario con fallback más elegante */
img[src*="media/users"] {
    object-fit: cover;
    background-color: var(--color-primary, #081F3A);
    background-image: linear-gradient(135deg, var(--color-primary, #081F3A) 0%, var(--color-accent, #F57C00) 100%);
}

/* Imágenes de logo/brand */
.brand-image {
    object-fit: contain;
    object-position: center;
}

/* Avatar fallback */
.avatar, .user-image, [class*="avatar"] {
    background: linear-gradient(135deg, #081F3A 0%, #F57C00 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

/* Favicon fallback */
link[rel="shortcut icon"], 
link[rel="icon"] {
    display: none;
}

/* Tooltip para imágenes */
img[src*="media"] {
    transition: opacity 0.2s ease;
}

img[src*="media"]:hover {
    opacity: 0.8;
}