/* Estilos del frontend para el plugin Funciones DGES */

/* Los snippets NO llevan estilos por defecto - permite máxima libertad al código del usuario */
/* Solo estilos para lazy loading, que es una característica del plugin */

/* Contenedor de salida de snippets - NO aplica estilos por defecto */
.fdg-snippet-output {
    display: block;
    width: 100%;
    /* Sin estilos - El contenido define sus propios estilos */
}

/* Lazy Load - Contenedor TRANSITORIO mientras carga */
.fdg-lazy-load {
    /* Contenedor temporal sin estilos fijos para que el contenido final sea visible */
    display: block;
    width: 100%;
}

/* Placeholder de carga */
.fdg-lazy-load .fdg-spinner {
    width: 40px;
    height: 40px;
    margin: 20px auto;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: fdg-spin 1s linear infinite;
}

@keyframes fdg-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Cuando el contenido está cargado */
.fdg-loaded {
    display: block;
    width: 100%;
}

/* Error */
.fdg-error {
    padding: 15px;
    margin: 20px 0;
    border-left: 4px solid #dc3545;
    background-color: #f8d7da;
    color: #721c24;
    border-radius: 4px;
    font-size: 14px;
}